Merge pull request #14 from XDeFi-tech/feat/multiwallets-connection

Feat: multiwallets connection
XDeFi-tech · Jul 20, 2022 · 74d9018 · 74d9018
2 parents 4e0fd3a + 28841f0
commit 74d9018
Show file tree

Hide file tree

Showing 27 changed files with 1,148 additions and 697 deletions.
diff --git a/example/package.json b/example/package.json
@@ -18,10 +18,13 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@web3auth/web3auth": "^1.1.1",
     "@xdefi/wallets-connector": "link:..",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "link:../node_modules/react-scripts",
+    "react-uid": "^2.3.2",
     "typescript": "^4.1.2"
   },
   "peerDependencies": {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,71 +1,70 @@
-import React, { useState } from 'react'
-import WalletConnect from '@walletconnect/web3-provider'
-import CoinbaseWalletSDK from '@coinbase/wallet-sdk'
-import Torus from '@toruslabs/torus-embed'
-import Ledger from '@web3modal/ledger-provider'
-import Trezor from '@web3modal/trezor-provider'
-import NetworkManager, {
-  IProviderOptions,
-  injected,
-  connectors
-} from '@xdefi/wallets-connector'
+import React from 'react'
+import styled from 'styled-components'
 
-import MyApp from './MyApp'
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link,
+  Navigate,
+  useLocation
+} from 'react-router-dom'
 
-const getProviderOptions = (): IProviderOptions => {
-  const infuraId = 'blablaid'
-  const providerOptions = {
-    xdefi: {
-      package: true,
-      connector: connectors.injected,
-      display: injected.XDEFI
-    },
-    injected: {
-      package: true,
-      connector: connectors.injected,
-      display: {
-        ...injected.FALLBACK,
-        logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Circle-icons-gamecontroller.svg/2048px-Circle-icons-gamecontroller.svg.png'
-      }
-    },
-    metamask: {
-      package: true,
-      connector: connectors.injected,
-      display: injected.METAMASK
-    },
-    walletconnect: {
-      package: WalletConnect,
-      options: {
-        infuraId
-      }
-    },
-    coinbasewallet: {
-      package: CoinbaseWalletSDK,
-      options: {
-        appName: 'Coinbase Example App',
-        infuraId
-      }
-    },
-    torus: {
-      package: Torus
-    },
-    ledger: {
-      package: Ledger
-    },
-    trezor: {
-      package: Trezor
-    }
-  }
-  return providerOptions
+import SingleProviderPage from './pages/SingleProviderPage'
+import MultiProvidersPage from './pages/MultiProvidersPage'
+
+const Nav = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+`
+
+const LinkStyled = styled(Link)<{ current?: boolean }>`
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ current }) => (current ? 1 : 0.4)};
+  background: ${({ current }) => (current ? 'green' : 'initial')};
+  color: black;
+`
+
+const PATHS = {
+  multi: '/multi',
+  single: '/single'
 }
 
-function App() {
-  const [options] = useState(() => getProviderOptions())
+const Navigation = () => {
+  const location = useLocation()
+
+  return (
+    <Nav>
+      <LinkStyled current={location.pathname === PATHS.multi} to={PATHS.multi}>
+        Multi Wallets Connection
+      </LinkStyled>
+      <LinkStyled
+        current={location.pathname === PATHS.single}
+        to={PATHS.single}
+      >
+        Single Wallet Connection
+      </LinkStyled>
+    </Nav>
+  )
+}
 
+function App() {
   return (
-    <NetworkManager options={options} network='mainnet' cacheEnabled={true}>
-      <MyApp />
-    </NetworkManager>
+    <Router>
+      <div>
+        <Navigation />
+
+        <Routes>
+          <Route path={PATHS.multi} element={<MultiProvidersPage />} />
+          <Route path={PATHS.single} element={<SingleProviderPage />} />
+          <Route path='*' element={<Navigate to={PATHS.single} />} />
+        </Routes>
+      </div>
+    </Router>
   )
 }
 

diff --git a/example/src/MyApp.tsx b/example/src/MyApp.tsx
diff --git a/example/src/components/AccountsBlock.tsx b/example/src/components/AccountsBlock.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+
+import styled from 'styled-components'
+import Column from 'src/components/Column'
+
+export const SLanding = styled(Column)``
+
+export const SChain = styled.div`
+  font-size: 24px;
+  padding-bottom: 12px;
+  color: red;
+`
+
+export const SAccounts = styled.div`
+  font-size: 18px;
+`
+
+export const SList = styled.div`
+  color: green;
+`
+
+export const SBalances = styled(SLanding)`
+  width: 100%;
+  display: flex;
+  border-radius: 16px;
+  width: 100%;
+  border: 1px solid black;
+  padding: 12px;
+
+  & h3 {
+    padding-top: 30px;
+  }
+`
+
+const AccountsBlock = ({
+  chain,
+  accounts
+}: {
+  chain: string
+  accounts: string[]
+}) => {
+  return (
+    <SBalances>
+      <SChain>{chain}</SChain>
+      <SAccounts>
+        with accounts{' '}
+        <SList>{accounts ? accounts.join(', ') : '<not set>'}</SList>
+      </SAccounts>
+    </SBalances>
+  )
+}
+
+export default AccountsBlock
diff --git a/example/src/components/Header.tsx b/example/src/components/Header.tsx
@@ -1,15 +1,12 @@
 import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 import * as PropTypes from 'prop-types'
-import {
-  WalletsModal,
-  useWalletEvents,
-  useWalletsConnector
-} from '@xdefi/wallets-connector'
+import { WalletsModal, useWalletEvents } from '@xdefi/wallets-connector'
 
 import { transitions } from '../styles'
 
 import Banner from './Banner'
+import { CUSTOM_THEME_BUILDER } from 'src/pages/utils'
 
 const SHeader = styled.div`
   margin-top: -1px;
@@ -70,29 +67,9 @@ interface IHeaderProps {
   killSession: () => void
 }
 
-const CUSTOM_THEME_BUILDER = (darkMode: boolean): any => ({
-  white: darkMode ? '#0969da' : '#9a6700',
-  black: darkMode ? '#9a6700' : '#0969da',
-  modal: {
-    bg: darkMode ? '#2b2b2b' : '#E5E5E5',
-    layoutBg: darkMode ? '#000000' : '#000000'
-  },
-  wallet: {
-    name: darkMode ? '#9a6700' : '#333333',
-    descColor: darkMode ? '#c4c4c4' : '#979797',
-    titleColor: darkMode ? '#f2f1f1' : '#333333',
-    bg: darkMode ? '#333333' : '#F2F1F1',
-    activeBg: darkMode ? 'lightslategrey' : 'darkseagreen'
-  }
-})
-
 const Header = (props: IHeaderProps) => {
   const { killSession } = props
 
-  const { provider } = useWalletsConnector()
-
-  console.log('provider', provider)
-
   const [isConnected, setIsConnected] = useState(false)
 
   const onConnectHandler = useCallback(() => {