diff --git a/packages/core/src/SorobanReactProvider.tsx b/packages/core/src/SorobanReactProvider.tsx index b79799b..1a4afe6 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 // To set on frontend to define the default chain for read-only. Example: standalone children: React.ReactNode connectors: Connector[] + 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) { @@ -38,8 +40,10 @@ export function SorobanReactProvider({ appName, autoconnect = false, chains, + activeChain = defaultSorobanContext.activeChain, // Non mandatory fields default to default Context fields value children, connectors, + 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) @@ -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() 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 888bd84..d1a256a 100644 --- a/packages/wallet-data/src/useIsMounted.tsx +++ b/packages/wallet-data/src/useIsMounted.tsx @@ -1,4 +1,4 @@ -// import React from 'react' +import React from 'react' // export function useIsMounted() { // const reducer = () => true @@ -6,3 +6,4 @@ // React.useEffect(setMounted, [setMounted]) // return mounted // } + 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), + } +}