From f962bdb188450067bbf86441e2706805119ccb0e Mon Sep 17 00:00:00 2001 From: benjaminsalon Date: Tue, 7 Nov 2023 23:24:34 +0100 Subject: [PATCH 1/3] yarn build passing with code uncommented --- packages/wallet-data/src/index.tsx | 106 +++++++++--------- .../wallet-data/src/provideWalletChains.tsx | 80 ++++++------- packages/wallet-data/src/useIsMounted.tsx | 14 +-- packages/wallet-data/src/useNetwork.tsx | 36 +++--- 4 files changed, 118 insertions(+), 118 deletions(-) diff --git a/packages/wallet-data/src/index.tsx b/packages/wallet-data/src/index.tsx index c8ab304..5d146af 100644 --- a/packages/wallet-data/src/index.tsx +++ b/packages/wallet-data/src/index.tsx @@ -1,53 +1,53 @@ -// import { ConnectButton } from '@soroban-react/connect-button' -// import { SorobanContextType } from '@soroban-react/core' -// import React from 'react' - -// import { useNetwork } from './useNetwork' - -// export interface WalletDataProps { -// sorobanContext: SorobanContextType -// } - -// // TODO: Eliminate flash of unconnected content on loading -// export function WalletData({ sorobanContext }: WalletDataProps) { -// const useAccount = () => { -// const { address } = sorobanContext - -// if (!address) { -// return {} -// } - -// return { -// data: { -// address, -// displayName: `${address.slice(0, 4)}...${address.slice(-4)}`, -// }, -// } -// } - -// const { data: account } = useAccount() - -// const { activeChain: chain, chains } = useNetwork(sorobanContext) - -// const unsupportedChain = chain?.unsupported - -// const styleDisplayData: any = { display: 'flex' } - -// return ( -// <> -// {account ? ( -//
-// {chain && (chains.length > 1 || unsupportedChain) && ( -//
-// {chain.iconUrl} -// {chain.name ?? chain.id} -//
-// )} -//
{account.displayName}
-//
-// ) : ( -// -// )} -// -// ) -// } +import { ConnectButton } from '@soroban-react/connect-button' +import { SorobanContextType } from '@soroban-react/core' +import React from 'react' + +import { useNetwork } from './useNetwork' + +export interface WalletDataProps { + sorobanContext: SorobanContextType +} + +// TODO: Eliminate flash of unconnected content on loading +export function WalletData({ sorobanContext }: WalletDataProps) { + const useAccount = () => { + const { address } = sorobanContext + + if (!address) { + return {} + } + + return { + data: { + address, + displayName: `${address.slice(0, 4)}...${address.slice(-4)}`, + }, + } + } + + const { data: account } = useAccount() + + const { activeChain: chain, chains } = useNetwork(sorobanContext) + + const unsupportedChain = chain?.unsupported + + const styleDisplayData: any = { display: 'flex' } + + return ( + <> + {account ? ( +
+ {chain && (chains.length > 1 || unsupportedChain) && ( +
+ {chain.iconUrl} + {chain.name ?? chain.id} +
+ )} +
{account.displayName}
+
+ ) : ( + + )} + + ) +} diff --git a/packages/wallet-data/src/provideWalletChains.tsx b/packages/wallet-data/src/provideWalletChains.tsx index 2da4888..6222c45 100644 --- a/packages/wallet-data/src/provideWalletChains.tsx +++ b/packages/wallet-data/src/provideWalletChains.tsx @@ -1,41 +1,41 @@ -// import type { WalletChain, ChainName } from '@soroban-react/types' +import type { WalletChain, ChainName } from '@soroban-react/types' -// // Sourced from https://github.com/tmm/wagmi/blob/main/packages/core/src/constants/chains.ts -// // This is just so we can clearly see which of wagmi's first-class chains we provide metadata for -// export const WalletChainByName: Record = { -// public: { -// id: 'public', -// name: 'Public', -// networkPassphrase: 'Public Global Stellar Network ; September 2015', -// iconBackground: '#e84141', -// // iconUrl: async () => (await import('./chainIcons/public.svg')).default, -// }, -// testnet: { -// id: 'testnet', -// name: 'Testnet', -// networkPassphrase: 'Test SDF Network ; September 2015', -// iconBackground: '#484c50', -// // iconUrl: async () => (await import('./chainIcons/testnet.svg')).default, -// }, -// futurenet: { -// id: 'futurenet', -// name: 'Futurenet', -// networkPassphrase: 'Test SDF Future Network ; October 2022', -// iconBackground: '#96bedc', -// // iconUrl: async () => (await import('./chainIcons/futurenet.svg')).default, -// }, -// sandbox: { -// id: 'sandbox', -// name: 'Sandbox', -// networkPassphrase: 'Local Sandbox Stellar Network ; September 2022', -// iconBackground: '#dac695', -// // iconUrl: async () => (await import('./chainIcons/futurenet.svg')).default, -// }, -// standalone: { -// id: 'standalone', -// name: 'Standalone', -// networkPassphrase: 'Standalone Network ; February 2017', -// iconBackground: '#dac695', -// // iconUrl: async () => (await import('./chainIcons/futurenet.svg')).default, -// }, -// } +// Sourced from https://github.com/tmm/wagmi/blob/main/packages/core/src/constants/chains.ts +// This is just so we can clearly see which of wagmi's first-class chains we provide metadata for +export const WalletChainByName: Record = { + public: { + id: 'public', + name: 'Public', + networkPassphrase: 'Public Global Stellar Network ; September 2015', + iconBackground: '#e84141', + // iconUrl: async () => (await import('./chainIcons/public.svg')).default, + }, + testnet: { + id: 'testnet', + name: 'Testnet', + networkPassphrase: 'Test SDF Network ; September 2015', + iconBackground: '#484c50', + // iconUrl: async () => (await import('./chainIcons/testnet.svg')).default, + }, + futurenet: { + id: 'futurenet', + name: 'Futurenet', + networkPassphrase: 'Test SDF Future Network ; October 2022', + iconBackground: '#96bedc', + // iconUrl: async () => (await import('./chainIcons/futurenet.svg')).default, + }, + sandbox: { + id: 'sandbox', + name: 'Sandbox', + networkPassphrase: 'Local Sandbox Stellar Network ; September 2022', + iconBackground: '#dac695', + // iconUrl: async () => (await import('./chainIcons/futurenet.svg')).default, + }, + standalone: { + id: 'standalone', + name: 'Standalone', + networkPassphrase: 'Standalone Network ; February 2017', + iconBackground: '#dac695', + // iconUrl: async () => (await import('./chainIcons/futurenet.svg')).default, + }, +} diff --git a/packages/wallet-data/src/useIsMounted.tsx b/packages/wallet-data/src/useIsMounted.tsx index c02985b..ea03280 100644 --- a/packages/wallet-data/src/useIsMounted.tsx +++ b/packages/wallet-data/src/useIsMounted.tsx @@ -1,8 +1,8 @@ -// import React from 'react' +import React from 'react' -// export function useIsMounted() { -// const reducer = () => true -// const [mounted, setMounted] = React.useReducer(reducer, false) -// React.useEffect(setMounted, [setMounted]) -// return mounted -// } \ No newline at end of file +export function useIsMounted() { + const reducer = () => true + const [mounted, setMounted] = React.useReducer(reducer, false) + React.useEffect(setMounted, [setMounted]) + return mounted +} \ No newline at end of file diff --git a/packages/wallet-data/src/useNetwork.tsx b/packages/wallet-data/src/useNetwork.tsx index 9fc856d..55cdee9 100644 --- a/packages/wallet-data/src/useNetwork.tsx +++ b/packages/wallet-data/src/useNetwork.tsx @@ -1,22 +1,22 @@ -// import { SorobanContextType } from '@soroban-react/core' -// import { WalletChain } from '@soroban-react/types' -// import React from 'react' +import { SorobanContextType } from '@soroban-react/core' +import { WalletChain } from '@soroban-react/types' +import React from 'react' -// import * as SorobanClient from 'soroban-client' +import * as SorobanClient from 'soroban-client' -// import { WalletChainByName } from './provideWalletChains' +import { WalletChainByName } from './provideWalletChains' -// export type NetworkConfig = { -// activeChain?: WalletChain -// server?: SorobanClient.Server -// chains: Array -// } +export type NetworkConfig = { + activeChain?: WalletChain + server?: SorobanClient.Server + chains: Array +} -// export function useNetwork(sorobanContext: SorobanContextType): NetworkConfig { -// const { activeChain, server } = sorobanContext -// return { -// activeChain, -// server, -// chains: Object.values(WalletChainByName), -// } -// } +export function useNetwork(sorobanContext: SorobanContextType): NetworkConfig { + const { activeChain, server } = sorobanContext + return { + activeChain, + server, + chains: Object.values(WalletChainByName), + } +} From 4956e058946fe83ee2ac1b14da7ad2cff21115ca Mon Sep 17 00:00:00 2001 From: benjaminsalon Date: Wed, 8 Nov 2023 10:22:14 +0100 Subject: [PATCH 2/3] Added more props to the SorobanReactProvider component for being able to define default --- packages/core/src/SorobanReactProvider.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/core/src/SorobanReactProvider.tsx b/packages/core/src/SorobanReactProvider.tsx index b79799b..5b0acbe 100644 --- a/packages/core/src/SorobanReactProvider.tsx +++ b/packages/core/src/SorobanReactProvider.tsx @@ -13,8 +13,10 @@ export interface SorobanReactProviderProps { appName?: string autoconnect?: boolean chains: WalletChain[] + activeChain?: WalletChain children: React.ReactNode connectors: Connector[] + server?: SorobanClient.Server } function networkToActiveChain(networkDetails: any, chains: any) { @@ -38,12 +40,14 @@ export function SorobanReactProvider({ appName, autoconnect = false, chains, + activeChain = defaultSorobanContext.activeChain, children, connectors, + server = defaultSorobanContext.server, }: SorobanReactProviderProps) { const activeConnector = connectors.length == 1 ? connectors[0] : undefined const isConnectedRef = useRef(false) - + console.log("Enter constructor of context") const [mySorobanContext, setSorobanContext] = React.useState({ ...defaultSorobanContext, @@ -52,7 +56,8 @@ export function SorobanReactProvider({ chains, connectors, activeConnector, - activeChain: chains.length == 1 ? chains[0] : undefined, + activeChain, + server, connect: async () => { let networkDetails = await mySorobanContext.activeConnector?.getNetworkDetails() From f2066093c940b3a2faaf5ee4090629d05274a0f0 Mon Sep 17 00:00:00 2001 From: benjaminsalon Date: Wed, 8 Nov 2023 10:25:55 +0100 Subject: [PATCH 3/3] Added some code comments --- packages/core/src/SorobanReactProvider.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/core/src/SorobanReactProvider.tsx b/packages/core/src/SorobanReactProvider.tsx index 5b0acbe..1a4afe6 100644 --- a/packages/core/src/SorobanReactProvider.tsx +++ b/packages/core/src/SorobanReactProvider.tsx @@ -13,10 +13,10 @@ export interface SorobanReactProviderProps { appName?: string autoconnect?: boolean chains: WalletChain[] - activeChain?: WalletChain + activeChain?: WalletChain // To set on frontend to define the default chain for read-only. Example: standalone children: React.ReactNode connectors: Connector[] - server?: SorobanClient.Server + server?: SorobanClient.Server // To set on frontend to define the default server url for read-only. Example 'new Server('http://localhost:8000/soroban/rpc',{allowHttp:true})' } function networkToActiveChain(networkDetails: any, chains: any) { @@ -40,14 +40,14 @@ export function SorobanReactProvider({ appName, autoconnect = false, chains, - activeChain = defaultSorobanContext.activeChain, + activeChain = defaultSorobanContext.activeChain, // Non mandatory fields default to default Context fields value children, connectors, - server = defaultSorobanContext.server, + server = defaultSorobanContext.server, // Non mandatory fields default to default Context fields value }: SorobanReactProviderProps) { const activeConnector = connectors.length == 1 ? connectors[0] : undefined const isConnectedRef = useRef(false) - console.log("Enter constructor of context") + const [mySorobanContext, setSorobanContext] = React.useState({ ...defaultSorobanContext,