chore: add wagmi example

lifinance · Oct 18, 2023 · a0ae0ca · a0ae0ca
1 parent e14e237
commit a0ae0ca
Show file tree

Hide file tree

Showing 9 changed files with 1,775 additions and 1,090 deletions.
diff --git a/examples/vite/index.html b/examples/vite/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
-  <body>
+  <body style="margin: 0;">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -9,20 +9,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lifi/widget": "^2.2.1",
+    "@ethersproject/providers": "^5.7.2",
+    "@lifi/widget": "^2.6.3",
+    "@mui/material": "^5.14.14",
     "events": "^3.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "wagmi": "^1.4.4"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@types/events": "^3.0.0",
-    "@types/node": "^20.4.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@types/events": "^3.0.2",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.13",
+    "@vitejs/plugin-react": "^4.1.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.4"
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   }
 }
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
@@ -1,13 +1,50 @@
+/* eslint-disable no-console */
 import type { WidgetConfig } from '@lifi/widget';
 import { LiFiWidget } from '@lifi/widget';
-
-export const widgetConfig: Partial<WidgetConfig> = {
-  containerStyle: {
-    border: `1px solid rgb(234, 234, 234)`,
-    borderRadius: '16px',
-  },
-};
+import { Box } from '@mui/material';
+import { useMemo } from 'react';
+import { useConnect, useDisconnect } from 'wagmi';
+import { WalletHeader } from './components/WalletHeader';
+import { useEthersSigner, walletClientToSigner } from './hooks/useEthersSigner';
+import { switchChain } from './utils/switchChain';
 
 export function App() {
-  return <LiFiWidget config={widgetConfig} integrator="vite-example" />;
+  const { connectAsync, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
+  const signer = useEthersSigner();
+
+  const widgetConfig: WidgetConfig = useMemo(() => {
+    const config: WidgetConfig = {
+      integrator: 'vite-example',
+      containerStyle: {
+        border: `1px solid rgb(234, 234, 234)`,
+        borderRadius: '16px',
+      },
+      walletManagement: {
+        signer: signer,
+        connect: async () => {
+          const result = await connectAsync({ connector: connectors[0] });
+          const walletClient = await result.connector?.getWalletClient();
+          if (walletClient) {
+            return walletClientToSigner(walletClient);
+          } else {
+            throw Error('WalletClient not found');
+          }
+        },
+        disconnect: async () => {
+          disconnect();
+        },
+        switchChain,
+      },
+    };
+
+    return config;
+  }, [signer, connectAsync, connectors, disconnect]);
+
+  return (
+    <Box>
+      <WalletHeader />
+      <LiFiWidget integrator="vite-example" config={widgetConfig} />
+    </Box>
+  );
 }
diff --git a/examples/vite/src/components/WalletHeader.tsx b/examples/vite/src/components/WalletHeader.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+import { Box, Button, Typography } from '@mui/material';
+import { useAccount, useConnect, useDisconnect } from 'wagmi';
+
+export function WalletHeader() {
+  const { address, isConnected } = useAccount();
+  const { connectAsync, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  return (
+    <Box
+      p={2}
+      mb={2}
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      borderBottom="1px solid #EEE"
+    >
+      <Typography px={2} fontWeight={600} fontSize={24}>
+        Example
+      </Typography>
+      <Box display="flex" alignItems="center">
+        <Typography px={2}>{address}</Typography>
+        {!isConnected ? (
+          <Button
+            variant="contained"
+            disableElevation
+            onClick={() => connectAsync({ connector: connectors[0] })}
+          >
+            Connect
+          </Button>
+        ) : (
+          <Button
+            variant="contained"
+            disableElevation
+            onClick={() => disconnect()}
+          >
+            Disconnect
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/examples/vite/src/config.ts b/examples/vite/src/config.ts
@@ -0,0 +1,16 @@
+import { configureChains, createConfig } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { publicProvider } from 'wagmi/providers/public';
+
+export const { chains, publicClient, webSocketPublicClient } = configureChains(
+  [mainnet],
+  [publicProvider()],
+);
+
+export const config = createConfig({
+  // autoConnect: true,
+  connectors: [new InjectedConnector({ options: { shimDisconnect: true } })],
+  publicClient,
+  webSocketPublicClient,
+});
diff --git a/examples/vite/src/hooks/useEthersSigner.ts b/examples/vite/src/hooks/useEthersSigner.ts
@@ -0,0 +1,28 @@
+import { Web3Provider } from '@ethersproject/providers';
+import { getWalletClient, type WalletClient } from '@wagmi/core';
+import { useMemo } from 'react';
+import { useWalletClient } from 'wagmi';
+
+export function walletClientToSigner(walletClient?: WalletClient | null) {
+  if (walletClient) {
+    const provider = new Web3Provider(walletClient.transport, 'any');
+    const signer = provider.getSigner();
+    return signer;
+  } else {
+    throw Error('WalletClient not found');
+  }
+}
+
+export async function walletClientToSignerAsync(chainId?: number) {
+  const walletClient = await getWalletClient({ chainId });
+  return walletClientToSigner(walletClient);
+}
+
+export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
+  const { data: walletClient } = useWalletClient({ chainId });
+
+  return useMemo(
+    () => (walletClient ? walletClientToSigner(walletClient) : undefined),
+    [walletClient],
+  );
+}
diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { WagmiConfig } from 'wagmi';
 import { App } from './App';
+import { config } from './config';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <WagmiConfig config={config}>
+      <App />
+    </WagmiConfig>
   </React.StrictMode>,
 );
diff --git a/examples/vite/src/utils/switchChain.ts b/examples/vite/src/utils/switchChain.ts
@@ -0,0 +1,17 @@
+/* eslint-disable no-console */
+import { getNetwork, switchNetwork } from '@wagmi/core';
+import { walletClientToSignerAsync } from '../hooks/useEthersSigner';
+
+export const switchChain = async (chainId: number) => {
+  const network = getNetwork();
+  if (network.chain?.id !== chainId) {
+    try {
+      const chain = await switchNetwork({ chainId });
+      console.log(network.chain?.id, chain?.id); // logs the previous chainId and required chain id
+      return await walletClientToSignerAsync(chain?.id);
+    } catch {
+      throw new Error("Couldn't switch chain.");
+    }
+  }
+  return await walletClientToSignerAsync(network.chain?.id);
+};