Merge pull request #64 from paltalabs/network-connector-without-wallet

Network connector without wallet
paltalabs · Nov 13, 2023 · 252c7a4 · 252c7a4
2 parents c62806b + 2ed9c78
commit 252c7a4
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 113 deletions.
diff --git 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
@@ -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 ? (
-//         <div className={styleDisplayData}>
-//           {chain && (chains.length > 1 || unsupportedChain) && (
-//             <div>
-//               {chain.iconUrl}
-//               {chain.name ?? chain.id}
-//             </div>
-//           )}
-//           <div>{account.displayName}</div>
-//         </div>
-//       ) : (
-//         <ConnectButton label="Connect Wallet" sorobanContext={sorobanContext} />
-//       )}
-//     </>
-//   )
-// }
+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 ? (
+        <div className={styleDisplayData}>
+          {chain && (chains.length > 1 || unsupportedChain) && (
+            <div>
+              {chain.iconUrl}
+              {chain.name ?? chain.id}
+            </div>
+          )}
+          <div>{account.displayName}</div>
+        </div>
+      ) : (
+        <ConnectButton label="Connect Wallet" sorobanContext={sorobanContext} />
+      )}
+    </>
+  )
+}
diff --git 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<ChainName, WalletChain> = {
-//   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<ChainName, WalletChain> = {
+  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
@@ -1,8 +1,9 @@
-// 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
 // }
+
diff --git 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<WalletChain>
-// }
+export type NetworkConfig = {
+  activeChain?: WalletChain
+  server?: SorobanClient.Server
+  chains: Array<WalletChain>
+}
 
-// 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),
+  }
+}