Sov 464 d 2 wc connect wallet button (#27)

* feat: add DisconnectSubmenu component * feat: use menu for dissconnect submenu * dissconnet menu * feat: wallet identity * feat: improve wallet Identity * resolve PR issues * resolve PR issues * Delete App.test.tsx * Update package.json * fix: DisconnectSubmenu * feat: ConnectWalletButton component * feat: wallet connection setup * feat: wallet connect button finished * fix: resolve PR issues * update @sovryn/onboard-core * fix: onboard version * fix: disable wallet connect button in pending state * chore: move WalletIdentity to ui library * chore: add WalletIdentity storybook examples * resolve: PR issues * fix: canvas test issue * chore: set startLength default prop value * test: WalletIdentity * fix: wallet identity padding * chore: remove hardcoded labels from DisconnectSubmenu (and update tests/stories) * chore: add WalletIdentity label override example in dapp code * fix: update button text color * feat: add DisconnectSubmenu component * feat: use menu for dissconnect submenu * dissconnet menu * feat: wallet identity * feat: improve wallet Identity * resolve PR issues * resolve PR issues * fix: DisconnectSubmenu * feat: ConnectWalletButton component * feat: wallet connection setup * feat: wallet connect button finished * fix: resolve PR issues * update @sovryn/onboard-core * chore: move WalletIdentity to ui library * fix: canvas test issue * test: WalletIdentity * fix: wallet identity padding * style: update dropdown colors * chore: fix package.json Co-authored-by: Victor Creed <[email protected]> Co-authored-by: Victor Creed <[email protected]> Co-authored-by: soulBit <[email protected]>
DistributedCollective · Oct 12, 2022 · bccc22f · bccc22f
1 parent e48c293
commit bccc22f
Show file tree

Hide file tree

Showing 37 changed files with 1,038 additions and 284 deletions.
diff --git a/apps/frontend/craco.config.js b/apps/frontend/craco.config.js
@@ -19,6 +19,7 @@ module.exports = {
           configFile: 'tsconfig.json',
         },
       });
+      config.resolve.fallback = { stream: require.resolve('readable-stream') };
       return config;
     },
   },

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -4,8 +4,13 @@
   "private": true,
   "dependencies": {
     "@sovryn/ethers-provider": "*",
+    "@sovryn/onboard-common": "0.0.1",
+    "@sovryn/onboard-core": "0.0.2",
+    "@sovryn/onboard-injected": "0.0.1",
+    "@sovryn/onboard-react": "0.0.2",
     "@sovryn/tailwindcss-config": "*",
     "@sovryn/ui": "*",
+    "classnames": "2.3.2",
     "ethers": "5.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -24,14 +29,15 @@
     "@types/node": "^16.11.39",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
+    "stream-browserify": "3.0.0",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4"
   },
   "scripts": {
     "dev": "craco start",
     "build": "craco build",
-    "test": "craco test --watchAll=false",
-    "test:staged": "craco test --watchAll=false --bail --onlyChanged",
+    "test": "craco test --watchAll=false --passWithNoTests",
+    "test:staged": "craco test --watchAll=false --passWithNoTests --bail --onlyChanged",
     "lint": "eslint -c .eslintrc.js ./"
   },
   "browserslist": {

diff --git a/apps/frontend/src/app/2_molecules/.gitkeep b/apps/frontend/src/app/2_molecules/.gitkeep
diff --git a/apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx b/apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx
@@ -0,0 +1,49 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+import { Button } from '@sovryn/ui';
+import { WalletIdentity } from '@sovryn/ui';
+
+export type ConnectWalletButtonProps = {
+  onConnect: () => void;
+  onDisconnect: () => void;
+  address: string | undefined;
+  pending?: boolean;
+  className?: string;
+  dataActionId?: string;
+};
+
+export const ConnectWalletButton: FC<
+  PropsWithChildren<ConnectWalletButtonProps>
+> = ({
+  address,
+  pending,
+  onDisconnect,
+  onConnect,
+  className,
+  dataActionId,
+}) => {
+  if (!address) {
+    return (
+      <Button
+        text="Connect wallet"
+        onClick={onConnect}
+        className={className}
+        dataActionId={dataActionId}
+        disabled={pending}
+      />
+    );
+  } else {
+    return (
+      <WalletIdentity
+        onDisconnect={onDisconnect}
+        address={address}
+        dataActionId={dataActionId}
+        className={className}
+        submenuLabels={{
+          copyAddress: 'Copy Address',
+          disconnect: 'Disconnect',
+        }}
+      />
+    );
+  }
+};
diff --git a/apps/frontend/src/app/2_molecules/index.tsx b/apps/frontend/src/app/2_molecules/index.tsx
@@ -0,0 +1 @@
+export * from './ConnectWalletButton/ConnectWalletButton';
diff --git a/apps/frontend/src/app/3_organisms/EthersProviderTest.tsx b/apps/frontend/src/app/3_organisms/EthersProviderTest.tsx
diff --git a/apps/frontend/src/app/5_pages/App/App.test.tsx b/apps/frontend/src/app/5_pages/App/App.test.tsx
diff --git a/apps/frontend/src/app/5_pages/App/App.tsx b/apps/frontend/src/app/5_pages/App/App.tsx
@@ -2,15 +2,18 @@ import React, { useReducer } from 'react';
 
 import { Button, Dialog, Dropdown, Lead, noop } from '@sovryn/ui';
 
-import { EthersProviderTest } from '../../3_organisms/EthersProviderTest';
+import { ConnectWalletButton } from '../../2_molecules/ConnectWalletButton/ConnectWalletButton';
 import { useTheme } from '../../../hooks/useTheme';
+import { useWalletConnect } from '../../../hooks/useWalletConnect';
 import { AppTheme } from '../../../types/tailwind';
 import styles from './App.module.css';
 
 function App() {
   const { handleThemeChange } = useTheme();
 
   const [isOpen, toggle] = useReducer(p => !p, false);
+  const { connectWallet, disconnectWallet, wallets, pending } =
+    useWalletConnect();
 
   return (
     <div className="my-2 px-4">
@@ -81,7 +84,17 @@ function App() {
         </p>
       </header>
       <main>
-        <EthersProviderTest />
+        <div>
+          <ConnectWalletButton
+            onConnect={connectWallet}
+            onDisconnect={disconnectWallet}
+            address={wallets[0]?.accounts[0]?.address}
+            pending={pending}
+          />
+        </div>
+
+        <br />
+        <br />
       </main>
     </div>
   );

diff --git a/apps/frontend/src/hooks/useWalletConnect.ts b/apps/frontend/src/hooks/useWalletConnect.ts
@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { startWith } from 'rxjs/operators';
+
+import { WalletState } from '@sovryn/onboard-core';
+import { connectWallet$ } from '@sovryn/onboard-core/dist/streams';
+
+import { onboard } from '../lib/connector';
+
+export const useWalletConnect = () => {
+  const [pending, setPending] = useState(false);
+  const [wallets, setWallets] = useState<WalletState[]>(
+    onboard.state.get().wallets,
+  );
+
+  const connectWallet = useCallback(() => {
+    onboard.connectWallet();
+  }, []);
+  const disconnectWallet = useCallback(async () => {
+    await onboard.disconnectWallet();
+  }, []);
+
+  useEffect(() => {
+    const sub = connectWallet$
+      .asObservable()
+      .subscribe(({ inProgress }) => setPending(inProgress));
+    return () => sub.unsubscribe();
+  }, []);
+
+  useEffect(() => {
+    const sub = onboard.state
+      .select('wallets')
+      .pipe(startWith(onboard.state.get().wallets))
+      .subscribe(setWallets);
+    return () => sub.unsubscribe();
+  }, []);
+
+  return {
+    connectWallet,
+    disconnectWallet,
+    wallets,
+    pending,
+  };
+};
diff --git a/apps/frontend/src/index.tsx b/apps/frontend/src/index.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
 
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import { OnboardProvider } from '@sovryn/onboard-react';
 
 import App from './app/5_pages/App/App';
+import { onboard } from './lib/connector';
 import './styles/tailwindcss/index.css';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+      <OnboardProvider onboard={onboard} />
+    </BrowserRouter>
   </React.StrictMode>,
 );
diff --git a/apps/frontend/src/lib/connector.ts b/apps/frontend/src/lib/connector.ts
@@ -0,0 +1,30 @@
+import Onboard from '@sovryn/onboard-core';
+import injectedModule from '@sovryn/onboard-injected';
+
+const injected = injectedModule();
+export const onboard = Onboard({
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1e',
+      rpcUrl: 'https://public-node.rsk.co',
+      label: 'RSK',
+      token: 'RBTC',
+      blockExplorerUrl: 'https://explorer.rsk.co',
+    },
+    {
+      id: '0x1',
+      rpcUrl: 'https://cloudflare-eth.com/v1/mainnet',
+      label: 'Ethereum Mainnet',
+      token: 'ETH',
+      blockExplorerUrl: 'https://etherscan.io',
+    },
+    {
+      id: '0x1f',
+      rpcUrl: 'https://public-node.testnet.rsk.co',
+      label: 'RSK testnet',
+      token: 'tRBTC',
+      blockExplorerUrl: 'https://explorer.testnet.rsk.co',
+    },
+  ],
+});
diff --git a/apps/frontend/src/utils/helpers.ts b/apps/frontend/src/utils/helpers.ts
@@ -0,0 +1,9 @@
+export const prettyTx = (
+  text: string,
+  startLength: number = 6,
+  endLength: number = 4,
+) => {
+  const start = text.substr(0, startLength);
+  const end = text.substr(-endLength);
+  return `${start} ··· ${end}`;
+};
diff --git a/apps/frontend/src/utils/network.ts b/apps/frontend/src/utils/network.ts
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
@@ -1,4 +1,8 @@
 module.exports = {
   presets: [require('@sovryn/tailwindcss-config/index.js')],
-  content: ['./src/**/*.{html,ts,tsx,css}', './public/**/*.html'],
+  content: [
+    './src/**/*.{html,ts,tsx,css}',
+    './public/**/*.html',
+    '../../packages/ui/src/**/*.{html,ts,tsx,css}',
+  ],
 };
diff --git a/packages/ui/jest.config.js b/packages/ui/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
     '!<rootDir>/src/**/*.d.ts',
   ],
   testEnvironment: 'jsdom',
+  setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
@@ -13,5 +14,4 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|scss)$': 'identity-obj-proxy',
   },
-  resetMocks: true,
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@types/jest": "29.0.1",
     "babel-loader": "8.2.5",
     "eslint": "7.32.0",
+    "ethereum-blockies": "0.1.1",
     "jest": "29.0.3",
     "jest-environment-jsdom": "29.0.3",
     "react": "18.2.0",
@@ -56,6 +57,7 @@
     "classnames": "2.3.1",
     "focus-trap-react": "10.0.0",
     "identity-obj-proxy": "3.0.0",
+    "jest-canvas-mock": "2.4.0",
     "react-router-dom": "6.3.0"
   },
   "peerDependencies": {

diff --git a/packages/ui/src/1_atoms/Button/Button.module.css b/packages/ui/src/1_atoms/Button/Button.module.css
@@ -1,5 +1,5 @@
 .button {
-  @apply inline-flex box-border items-center justify-center text-center text-sov-white border font-roboto font-semibold no-underline rounded cursor-pointer;
+  @apply inline-flex box-border items-center justify-center text-center text-gray-10 border font-roboto font-semibold no-underline rounded cursor-pointer;
   transition: background-color 0.3s, color 0.3s, border 0.3s, opacity 0.3s;
 
   &:hover,
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ module.exports = { @@
               configFile: 'tsconfig.json',
             },
           });
+          config.resolve.fallback = { stream: require.resolve('readable-stream') };
           return config;
         },
       },
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './ConnectWalletButton/ConnectWalletButton';