Add new package

centrifuge · Oct 30, 2024 · 5e8ca4a · 5e8ca4a
1 parent 571f23d
commit 5e8ca4a
Show file tree

Hide file tree

Showing 10 changed files with 2,778 additions and 189 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "simulation-tests",
     "onboarding-api",
     "faucet-api",
-    "pinning-api"
+    "pinning-api",
+    "sdk-consumer"
   ],
   "devDependencies": {
     "@types/bn.js": "^5.1.1",

diff --git a/sdk-consumer/README.md b/sdk-consumer/README.md
@@ -1,50 +1 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+<!-- TO ADD -->
diff --git a/sdk-consumer/index.html b/sdk-consumer/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SDK demo</title>
+    <title>Centrifuge SDK playground</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/sdk-consumer/package.json b/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",

diff --git a/sdk-consumer/src/App.tsx b/sdk-consumer/src/App.tsx
@@ -1,46 +1,25 @@
-import Centrifuge from '@centrifuge/centrifuge-sdk'
-import { useEffect, useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-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>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectWallet />
+      </QueryClientProvider>
+    </WagmiProvider>
   )
 }
 

diff --git a/sdk-consumer/src/components/account.tsx b/sdk-consumer/src/components/account.tsx
@@ -0,0 +1,17 @@
+import { useAccount, useDisconnect, useEnsName } from 'wagmi'
+import { useAccountBalance } from '../hooks/useAccountbalance'
+
+export function Account() {
+  const { address } = useAccount()
+  const { disconnect } = useDisconnect()
+  const { data: ensName } = useEnsName({ address })
+  const balance = useAccountBalance()
+
+  return (
+    <div>
+      {address && <div>{ensName ? `${ensName} (${address})` : address}</div>}
+      <h1>Your balance is {balance !== null ? balance.toString() : 'Loading...'}</h1>
+      <button onClick={() => disconnect()}>Disconnect</button>
+    </div>
+  )
+}
diff --git a/sdk-consumer/src/components/wallet-options.tsx b/sdk-consumer/src/components/wallet-options.tsx
@@ -0,0 +1,15 @@
+import { useConnect } from 'wagmi'
+
+export function WalletOptions() {
+  const { connectors, connect } = useConnect()
+
+  return connectors.map((connector) => (
+    <button
+      key={connector.uid}
+      onClick={() => connect({ connector })}
+      style={{ marginRight: 8, marginLeft: 8, marginTop: 8 }}
+    >
+      {connector.name}
+    </button>
+  ))
+}
diff --git a/sdk-consumer/src/config/wagmiConfig.ts b/sdk-consumer/src/config/wagmiConfig.ts
@@ -0,0 +1,12 @@
+import { createConfig, http } from 'wagmi'
+import { base, mainnet } from 'wagmi/chains'
+import { injected } from 'wagmi/connectors'
+
+export const wagmiConfig = createConfig({
+  chains: [mainnet, base],
+  connectors: [injected()],
+  transports: {
+    [mainnet.id]: http(),
+    [base.id]: http(),
+  },
+})
diff --git a/sdk-consumer/src/hooks/useAccountbalance.ts b/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
+}