Connect wagmi

sdk-consumer/package.json

@@ -11,11 +11,18 @@
   },
   "dependencies": {
     "@centrifuge/centrifuge-sdk": "portal:/Users/kattybarroso/desktop/centrifuge/centrifuge-sdk",
+    "@talismn/wagmi-connector": "^0.3.1",
+    "@tanstack/react-query": "^5.59.16",
+    "@wagmi/core": "^2.14.1",
+    "ethers": "^6.13.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "viem": "2.x",
+    "wagmi": "latest"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.8.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

sdk-consumer/src/App.tsx

@@ -1,46 +1,30 @@
-import Centrifuge from '@centrifuge/centrifuge-sdk'
-import { useEffect, useState } from 'react'
+import { GlobalStyle as FabricGlobalStyle, FabricProvider } from '@centrifuge/fabric'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { config } from '../../centrifuge-app/src/config'
 
-function App() {
-  const [balance, setBalance] = useState(null)
-
-  useEffect(() => {
-    const fetchBalance = async () => {
-      const centrifuge = new Centrifuge({
-        environment: 'demo',
-      })
-
-      const address = '0x423420Ae467df6e90291fd0252c0A8a637C1e03f'
-      const chainId = 11155111
+import { WagmiProvider, useAccount } from 'wagmi'
+import { Account } from './components/account'
+import { WalletOptions } from './components/wallet-options'
+import { wagmiConfig } from './config/wagmiConfig'
 
-      try {
-        const accountQuery = centrifuge.account(address, chainId)
+const queryClient = new QueryClient()
 
-        accountQuery.subscribe({
-          next: (account) => {
-            account.balances().subscribe({
-              next: (balanceValue) => {
-                console.log('Account Balance:', balanceValue)
-                setBalance(balanceValue.toString())
-              },
-              error: (error) => console.error('Error fetching balance:', error),
-            })
-          },
-          error: (error) => console.error('Error retrieving account:', error),
-        })
-      } catch (error) {
-        console.error('General Error:', error)
-      }
-    }
-
-    fetchBalance()
-  }, [])
+function ConnectWallet() {
+  const { isConnected } = useAccount()
+  if (isConnected) return <Account />
+  return <WalletOptions />
+}
 
+function App() {
   return (
-    <div>
-      <h1>Account Balance</h1>
-      {balance ? <p>{balance} TUSD</p> : <p>Loading balance...</p>}
-    </div>
+    <FabricProvider theme={config.themes.light}>
+      <FabricGlobalStyle />
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+          <ConnectWallet />
+        </QueryClientProvider>
+      </WagmiProvider>
+    </FabricProvider>
   )
 }
 

sdk-consumer/src/components/account.tsx

@@ -0,0 +1,21 @@
+import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'
+import { useAccountBalance } from '../hooks/useAccountbalance'
+
+export function Account() {
+  const { address } = useAccount()
+  const { disconnect } = useDisconnect()
+  const { data: ensName } = useEnsName({ address })
+  const { data: ensAvatar } = useEnsAvatar({ name: ensName! })
+  const balance = useAccountBalance()
+
+  console.log(balance)
+
+  return (
+    <div>
+      {ensAvatar && <img alt="ENS Avatar" src={ensAvatar} />}
+      {address && <div>{ensName ? `${ensName} (${address})` : address}</div>}
+      <h1>Your balance is {balance !== null ? balance.toString() : 'Loading...'}</h1>
+      <button onClick={() => disconnect()}>Disconnect</button>
+    </div>
+  )
+}

sdk-consumer/src/components/wallet-options.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@centrifuge/fabric'
+import { useConnect } from 'wagmi'
+
+export function WalletOptions() {
+  const { connectors, connect } = useConnect()
+
+  return connectors.map((connector) => (
+    <Button
+      key={connector.uid}
+      onClick={() => connect({ connector })}
+      small
+      variant="wallet"
+      style={{ marginRight: 8, marginLeft: 8, marginTop: 8 }}
+    >
+      {connector.name}
+    </Button>
+  ))
+}

sdk-consumer/src/config/wagmiConfig.ts

@@ -0,0 +1,14 @@
+import { createConfig, http } from 'wagmi'
+import { base, mainnet } from 'wagmi/chains'
+import { coinbaseWallet, injected, metaMask, safe, walletConnect } from 'wagmi/connectors'
+
+const projectId = '492eaaf822c0081e5bab8f638789f3a2'
+
+export const wagmiConfig = createConfig({
+  chains: [mainnet, base],
+  connectors: [injected(), walletConnect({ projectId }), metaMask(), safe(), coinbaseWallet()],
+  transports: {
+    [mainnet.id]: http(),
+    [base.id]: http(),
+  },
+})

sdk-consumer/src/hooks/useAccountbalance.ts

@@ -0,0 +1,42 @@
+import Centrifuge from '@centrifuge/centrifuge-sdk'
+import { useEffect, useState } from 'react'
+import { useAccount } from 'wagmi'
+
+type Balance = bigint | null
+
+export function useAccountBalance(): Balance {
+  const { address, chain } = useAccount()
+  const [balance, setBalance] = useState<Balance>(null)
+
+  // const addressNumber = '0x423420Ae467df6e90291fd0252c0A8a637C1e03f'
+  const chainId = 11155111
+
+  useEffect(() => {
+    if (!address) return
+
+    const fetchBalance = async () => {
+      const centrifuge = new Centrifuge({ environment: 'demo' })
+
+      try {
+        const accountQuery = centrifuge.account(address, chainId)
+        accountQuery.subscribe({
+          next: (account) => {
+            account.balances().subscribe({
+              next: (balanceValue) => {
+                setBalance(BigInt(balanceValue))
+              },
+              error: (error) => console.error('Error fetching balance:', error),
+            })
+          },
+          error: (error) => console.error('Error retrieving account:', error),
+        })
+      } catch (error) {
+        console.error('General Error:', error)
+      }
+    }
+
+    fetchBalance()
+  }, [address, chain])
+
+  return balance
+}