refactor: wallet connect (#108)

* refactor: wallet connect * account subscribing and switching * fast dev * fix unmount * upgrade baseui and remove jotai provider * add auto connect wallet hook and fix some warnings * replace signer and remove useless code * clear assets after account changed * remove react-toastify * remove all legacy extension code * fix end-game style * remove unused components * fix style when has too many accounts * sort wallets
Phala-Network · Apr 11, 2022 · 26c55e9 · 26c55e9
1 parent 1a21eac
commit 26c55e9
Show file tree

Hide file tree

Showing 126 changed files with 2,043 additions and 2,606 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -5,4 +5,5 @@ env.config.js
 env.development.config.js
 next.config.js
 packages/react-graph-chainbridge/src/ethereum/interfaces/index.ts
-packages/react-graph-chainbridge/src/substrate/interfaces/index.ts
+packages/react-graph-chainbridge/src/substrate/interfaces/index.ts
+packages/wallets
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,12 +16,12 @@
     "readystate",
     "styletron",
     "svgs",
-    "toastify",
     "tranfer",
     "typedefs",
     "unsub",
     "uuidv",
-    "stakers"
+    "stakers",
+    "dotsama"
   ],
   "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/package.json b/package.json
@@ -24,13 +24,13 @@
   },
   "homepage": "https://github.com/Phala-Network/apps#readme",
   "dependencies": {
-    "@types/node": "^16.11.22",
+    "@types/node": "^16.11.26",
     "@types/react": "^17.0.43",
-    "baseui": "10.8.0",
-    "jotai": "^1.6.1",
+    "baseui": "11.0.0",
+    "jotai": "^1.6.2",
     "npm-run-all": "^4.1.5",
-    "react-query": "3.34.5",
-    "styled-components": "^5.3.3",
+    "react-query": "3.34.19",
+    "styled-components": "^5.3.5",
     "typescript": "^4.5.5"
   },
   "devDependencies": {
@@ -58,4 +58,4 @@
     "last 2 safari version",
     "last 10 edge version"
   ]
-}
+}
diff --git a/packages/app-assets/package.json b/packages/app-assets/package.json
@@ -17,8 +17,5 @@
     "ethers": "^5.5.3",
     "react": "^17.0.2",
     "styled-breakpoints": "^10.0.1"
-  },
-  "peerDependencies": {
-    "react-toastify": "^7.0.4"
   }
-}
+}
diff --git a/packages/app-assets/src/components/AccountBanner/AccountInfo.tsx b/packages/app-assets/src/components/AccountBanner/AccountInfo.tsx
@@ -2,14 +2,14 @@ import React, {useMemo, useState, MouseEventHandler} from 'react'
 import styled from 'styled-components'
 import {down} from 'styled-breakpoints'
 import {useBreakpoint} from 'styled-breakpoints/react-styled'
-import {usePolkadotAccountAtom} from '@phala/app-store'
+import {useCurrentAccount} from '@phala/app-store'
 import {trimAddress} from '@phala/utils'
-import {PolkadotAccountModal} from '@phala/react-components'
+import {SelectAccountModal} from '@phala/react-components'
 import {useClipboard} from '@phala/react-hooks'
-import {toast} from 'react-toastify'
 import {useSSR} from '@phala/react-hooks'
 import CopyIcon from '../Icons/CopyIcon.svg'
 import Button from '../Button'
+import {toaster} from 'baseui/toast'
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -92,7 +92,7 @@ const HrefAddress = styled(Address)`
 const AccountInfo: React.FC = () => {
   const [selectAccountModalViable, setSelectAccountModalViable] =
     useState(false)
-  const [polkadotAccount] = usePolkadotAccountAtom()
+  const [polkadotAccount] = useCurrentAccount()
   const isMobile = useBreakpoint(down('sm'))
   const isPad = useBreakpoint(down('md'))
 
@@ -112,7 +112,7 @@ const AccountInfo: React.FC = () => {
     e.stopPropagation()
     if (polkadotAccount) {
       copy(polkadotAccount.address)
-      toast('Copied to clipboard')
+      toaster.info('Copied to clipboard', {})
     }
   }
 
@@ -152,9 +152,9 @@ const AccountInfo: React.FC = () => {
           )}
         </AddressWrapper>
       </Wrapper>
-      <PolkadotAccountModal
+      <SelectAccountModal
         onClose={() => setSelectAccountModalViable(false)}
-        visible={selectAccountModalViable}
+        isOpen={selectAccountModalViable}
       />
     </>
   )

diff --git a/packages/app-assets/src/components/AccountBanner/index.tsx b/packages/app-assets/src/components/AccountBanner/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import {down, up} from 'styled-breakpoints'
 import {useSSR} from '@phala/react-hooks'
-import {usePolkadotAccountAtom} from '@phala/app-store'
+import {useCurrentAccount} from '@phala/app-store'
 import {formatCurrency} from '@phala/utils'
 import bannerBg from '../Icons/banner-bg.png'
 import AccountInfo from './AccountInfo'
@@ -83,7 +83,7 @@ type Props = {
 }
 
 const AccountBanner: React.FC<Props> = ({totalValue}) => {
-  const [polkadotAccount] = usePolkadotAccountAtom()
+  const [polkadotAccount] = useCurrentAccount()
   const {isBrowser} = useSSR()
 
   return (

diff --git a/packages/app-assets/src/components/ClaimModal.tsx b/packages/app-assets/src/components/ClaimModal.tsx
@@ -1,4 +1,4 @@
-import {usePolkadotAccountAtom} from '@phala/app-store'
+import {useCurrentAccount} from '@phala/app-store'
 import {
   PhalaStakePoolTransactionFeeLabel,
   ModalWrapper,
@@ -11,11 +11,11 @@ import {
   bnToDecimal,
   useApiPromise,
   useDecimalJsTokenDecimalMultiplier,
-  vest,
+  waitSignAndSend,
 } from '@phala/react-libs'
 import {BN} from '@polkadot/util'
+import {toaster} from 'baseui/toast'
 import React, {useCallback, useMemo, useState} from 'react'
-import {toast} from 'react-toastify'
 import styled from 'styled-components'
 
 type Props = {
@@ -50,8 +50,8 @@ const ButtonContainer = styled.div`
 const ClaimModal: React.FC<Props> = ({visible, onClose}) => {
   const [loading, setLoading] = useState(false)
   const {api} = useApiPromise()
-  const polkadotAccount = usePolkadotAccountAtom()[0]?.address
-  const allBalances = useAllBalances(polkadotAccount)
+  const [currentAccount] = useCurrentAccount()
+  const allBalances = useAllBalances(currentAccount?.address)
   const decimals = useDecimalJsTokenDecimalMultiplier(api)
   const {vestingLocked, vestedClaimable, vestedBalance} = allBalances || {}
 
@@ -68,26 +68,31 @@ const ClaimModal: React.FC<Props> = ({visible, onClose}) => {
     [decimals]
   )
 
-  const action = useMemo(() => {
+  const extrinsic = useMemo(() => {
     if (!api) return
 
-    return api.tx.vesting.vest()
+    return api.tx.vesting?.vest?.()
   }, [api])
 
-  const confirm = useCallback(() => {
-    if (api && polkadotAccount) {
+  const confirm = () => {
+    if (api && extrinsic && currentAccount?.wallet?.signer) {
       setLoading(true)
 
-      vest({api, sender: polkadotAccount})
+      waitSignAndSend({
+        account: currentAccount.address,
+        api,
+        extrinsic,
+        signer: currentAccount.wallet.signer,
+      })
         .then(() => {
-          toast('Success')
+          toaster.positive('Success', {})
           onClose()
         })
         .catch(() => {
           setLoading(false)
         })
     }
-  }, [api, polkadotAccount, onClose])
+  }
 
   const canClaim = Boolean(vestedClaimable) && !vestedClaimable?.isZero()
 
@@ -105,7 +110,7 @@ const ClaimModal: React.FC<Props> = ({visible, onClose}) => {
           <span>Claim now:</span> {format(vestedClaimable)} PHA
         </Info>
       )}
-      <PhalaStakePoolTransactionFeeLabel action={action} />
+      <PhalaStakePoolTransactionFeeLabel action={extrinsic} />
       <ModalFooterWrapper>
         <ButtonContainer>
           <ModalButtonWrapper onClick={onClose}>Cancel</ModalButtonWrapper>

diff --git a/packages/app-assets/src/components/TransferModal.tsx b/packages/app-assets/src/components/TransferModal.tsx
@@ -1,4 +1,4 @@
-import {usePolkadotAccountAtom} from '@phala/app-store'
+import {useCurrentAccount} from '@phala/app-store'
 import {
   PolkadotTransactionFeeLabel,
   ModalWrapper,
@@ -14,8 +14,7 @@ import {
 import {usePolkadotAccountTransferrableBalanceDecimal} from '@phala/react-hooks'
 import {validateAddress, toFixed} from '@phala/utils'
 import Decimal from 'decimal.js'
-import React, {useCallback, useState, useMemo} from 'react'
-import {toast} from 'react-toastify'
+import React, {useState, useMemo} from 'react'
 import {Input} from 'baseui/input'
 import {
   Spacer,
@@ -25,6 +24,7 @@ import {
   MaxButton,
   inputStyle,
 } from './styledComponents'
+import {toaster} from 'baseui/toast'
 
 type Props = {
   visible: boolean
@@ -36,7 +36,7 @@ const TransferModal: React.FC<Props> = ({visible, onClose}) => {
   const [amount, setAmount] = useState('')
   const [loading, setLoading] = useState(false)
   const {api} = useApiPromise()
-  const [polkadotAccount] = usePolkadotAccountAtom()
+  const [polkadotAccount] = useCurrentAccount()
   const decimals = useDecimalJsTokenDecimalMultiplier(api)
 
   const polkadotAccountAddress = polkadotAccount?.address
@@ -55,40 +55,37 @@ const TransferModal: React.FC<Props> = ({visible, onClose}) => {
     setAmount(maxValue)
   }
 
-  const confirm = useCallback(async () => {
-    if (api && polkadotAccount && decimals) {
+  const confirm = async () => {
+    if (api && polkadotAccount && polkadotAccount.wallet?.signer && decimals) {
       let amountString: string
 
       if (!validateAddress(address)) {
-        toast.error('Invalid address')
+        toaster.negative('Invalid address', {})
         return
       }
 
       try {
         amountString = new Decimal(amount).mul(decimals).toString()
       } catch (err) {
-        toast.error('Invalid amount')
+        toaster.negative('Invalid amount', {})
         return
       }
 
       try {
-        const {web3FromAddress} = await import('@polkadot/extension-dapp')
-
-        const signer = (await web3FromAddress(polkadotAccount.address)).signer
         await waitSignAndSend({
           account: polkadotAccount.address,
           api,
           extrinsic: api.tx.balances.transfer(address, amountString),
-          signer,
+          signer: polkadotAccount.wallet.signer,
         })
 
-        toast.success('Success')
+        toaster.positive('Success', {})
         onClose()
       } catch (err) {
-        toast.error((err as Error)?.message)
+        toaster.negative((err as Error)?.message, {})
       }
     }
-  }, [api, polkadotAccount, onClose, address, amount, decimals])
+  }
 
   return (
     <ModalWrapper visible={visible} onClose={onClose}>

diff --git a/packages/app-assets/src/hooks/useKPhaData.ts b/packages/app-assets/src/hooks/useKPhaData.ts
@@ -1,5 +1,5 @@
 import {useMemo} from 'react'
-import {usePolkadotAccountAtom} from '@phala/app-store'
+import {useCurrentAccount} from '@phala/app-store'
 import {
   useBalance,
   useLockedBalance,
@@ -11,8 +11,8 @@ import usePHAPrice from './usePHAPrice'
 
 const useKPhaData = () => {
   const PHAPrice = usePHAPrice()
-  const [polkadotAccount] = usePolkadotAccountAtom()
-  const polkadotAccountAddress = polkadotAccount?.address
+  const [currentAccount] = useCurrentAccount()
+  const polkadotAccountAddress = currentAccount?.address
   const polkadotAccountBalance = useBalance(polkadotAccountAddress)
   const polkadotTransferBalanceDecimal =
     usePolkadotAccountTransferrableBalanceDecimal(polkadotAccountAddress)
@@ -35,7 +35,7 @@ const useKPhaData = () => {
   }, [polkadotAccountBalanceNumber])
 
   const dollarValue = useMemo(() => {
-    if (!polkadotAccountBalanceNumber) return ''
+    if (!polkadotAccountBalanceNumber || !PHAPrice) return ''
     return toFixed(polkadotAccountBalanceNumber.mul(PHAPrice), 2)
   }, [polkadotAccountBalanceNumber, PHAPrice])
 

diff --git a/packages/app-assets/src/hooks/usePHAPrice.ts b/packages/app-assets/src/hooks/usePHAPrice.ts
@@ -1,27 +1,18 @@
 import axios from 'axios'
-import {useEffect, useState} from 'react'
+import {useQuery} from 'react-query'
 
 type PHAPriceResponse = {
   price: number
 }
 
-const usePHAPrice = (): number => {
-  const [price, setPrice] = useState(0)
-
-  // FIXME: use latest api
-  useEffect(() => {
+const usePHAPrice = (): number | undefined => {
+  return useQuery('PHAPrice', () =>
     axios
       .get<PHAPriceResponse>(
         'https://app-misc-api.phala.network/coin_market_charts/PHA'
       )
-      .then(({data}) => {
-        if (data) {
-          setPrice(data.price)
-        }
-      })
-  }, [])
-
-  return price
+      .then(({data}) => data.price)
+  ).data
 }
 
 export default usePHAPrice
diff --git a/packages/app-bridge/package.json b/packages/app-bridge/package.json
@@ -5,15 +5,14 @@
   "sideEffects": false,
   "main": "src/index.ts",
   "dependencies": {
-    "@phala/app-config": "workspace:^0.0.1",
-    "@phala/app-store": "workspace:^0.0.1",
-    "@phala/react-components": "workspace:^0.0.1",
-    "@phala/react-graph-chainbridge": "workspace:^0.0.1",
-    "@phala/react-hooks": "workspace:^0.0.1",
-    "@phala/react-libs": "workspace:^0.0.1",
+    "@phala/app-config": "workspace:0.0.1",
+    "@phala/app-store": "workspace:0.0.1",
+    "@phala/react-components": "workspace:0.0.1",
+    "@phala/react-graph-chainbridge": "workspace:0.0.1",
+    "@phala/react-hooks": "workspace:0.0.1",
+    "@phala/react-libs": "workspace:0.0.1",
     "@phala/utils": "workspace:0.0.1",
-    "@polkadot/api": "^7.14.3",
-    "@polkadot/extension-dapp": "^0.42.9",
+    "@polkadot/api": "^7.15.1",
     "@polkadot/util": "^8.7.1",
     "@polkadot/util-crypto": "^8.7.1",
     "bn.js": "^5.2.0",