Merge pull request #61 from brave/refactor-interfaces

chore: refactor interface to use props + add network/account switcher
brave · Oct 13, 2022 · 4f8a622 · 4f8a622
2 parents 3359797 + 9de751c
commit 4f8a622
Show file tree

Hide file tree

Showing 25 changed files with 326 additions and 659 deletions.
diff --git a/interface/package-lock.json b/interface/package-lock.json
diff --git a/interface/package.json b/interface/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@brave/swap-interface",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Brave Swap - an open-source swap interface by Brave, focussed on usability and multi-chain support.",
   "type": "module",
   "license": "MPL-2.0",

diff --git a/interface/src/App.tsx b/interface/src/App.tsx
@@ -24,18 +24,20 @@ interface AppProps extends SwapProviderInterface {
 const App = (props: AppProps) => {
   const {
     theme,
+    assetsList,
+    account,
+    network,
+    supportedNetworks,
+    defaultBaseCurrency,
+    exchanges,
+    walletAccounts,
+    switchAccount,
+    switchNetwork,
     getBalance,
     getTokenBalance,
     getLocale,
-    getAllTokens,
-    getSelectedAccount,
-    getSelectedNetwork,
     getTokenPrice,
-    getSupportedNetworks,
-    getBraveWalletAccounts,
-    getExchanges,
     getNetworkFeeEstimate,
-    getDefaultBaseCurrency,
     ethWalletAdapter,
     solWalletAdapter,
     swapService
@@ -44,18 +46,20 @@ const App = (props: AppProps) => {
   return (
     <ThemeProvider theme={theme || defaultTheme}>
       <SwapProvider
+        network={network}
+        account={account}
+        assetsList={assetsList}
+        supportedNetworks={supportedNetworks}
+        defaultBaseCurrency={defaultBaseCurrency}
+        exchanges={exchanges}
+        walletAccounts={walletAccounts}
+        switchAccount={switchAccount}
+        switchNetwork={switchNetwork}
         getBalance={getBalance}
         getTokenBalance={getTokenBalance}
         getLocale={getLocale}
-        getAllTokens={getAllTokens}
-        getSelectedAccount={getSelectedAccount}
-        getSelectedNetwork={getSelectedNetwork}
         getTokenPrice={getTokenPrice}
-        getSupportedNetworks={getSupportedNetworks}
-        getBraveWalletAccounts={getBraveWalletAccounts}
-        getExchanges={getExchanges}
         getNetworkFeeEstimate={getNetworkFeeEstimate}
-        getDefaultBaseCurrency={getDefaultBaseCurrency}
         ethWalletAdapter={ethWalletAdapter}
         solWalletAdapter={solWalletAdapter}
         swapService={swapService}

diff --git a/interface/src/components/buttons/connect-wallet-button.tsx b/interface/src/components/buttons/connect-wallet-button.tsx
@@ -15,11 +15,7 @@ import { useWalletState } from '~/state/wallet'
 import { useSwapContext } from '~/context/swap.context'
 
 // Styles
-import {
-  Text,
-  HorizontalSpacer,
-  HiddenResponsiveRow
-} from '~/components/shared.styles'
+import { Text, HorizontalSpacer, HiddenResponsiveRow } from '~/components/shared.styles'
 
 interface Props {
   onClick: () => void
@@ -29,34 +25,28 @@ export const ConnectWalletButton = (props: Props) => {
   const { onClick } = props
 
   // context
-  const { getLocale } = useSwapContext()
+  const { getLocale, account, walletAccounts } = useSwapContext()
 
   // Wallet State
   const { state } = useWalletState()
-  const { selectedAccount, isConnected, braveWalletAccounts } = state
+  const { isConnected } = state
 
   // Memos
   const accountOrb: string = React.useMemo(() => {
     return create({
-      seed: selectedAccount?.address.toLowerCase() || '',
+      seed: account.address.toLowerCase() || '',
       size: 8,
       scale: 16
     }).toDataURL()
-  }, [selectedAccount])
+  }, [account])
 
   const accountName: string = React.useMemo(() => {
-    if (!selectedAccount) {
-      return ''
-    }
-    return (
-      braveWalletAccounts.find((account) => account.address === selectedAccount.address)
-        ?.name ?? ''
-    )
-  }, [selectedAccount, braveWalletAccounts])
+    return walletAccounts.find(account => account.address === account.address)?.name ?? ''
+  }, [account, walletAccounts])
 
   return (
     <Button onClick={onClick} isConnected={isConnected}>
-      {isConnected && selectedAccount ? (
+      {isConnected ? (
         <>
           <AccountCircle orb={accountOrb} />{' '}
           <HiddenResponsiveRow>
@@ -66,7 +56,7 @@ export const ConnectWalletButton = (props: Props) => {
             <HorizontalSpacer size={4} />
           </HiddenResponsiveRow>
           <Text textSize='14px' textColor='text03' isBold={true}>
-            {reduceAddress(selectedAccount.address)}
+            {reduceAddress(account.address)}
           </Text>
         </>
       ) : (
@@ -77,24 +67,22 @@ export const ConnectWalletButton = (props: Props) => {
 }
 
 const Button = styled.button<{ isConnected: boolean }>`
-  background-color: ${(p) =>
+  background-color: ${p =>
     p.isConnected
       ? `var(--connect-wallet-button-background-connected)`
       : `var(--connect-wallet-button-background-disconnected)`};
   border-radius: 48px;
-  color: ${(p) =>
-    p.isConnected ? p.theme.color.legacy.text01 : p.theme.color.white};
+  color: ${p => (p.isConnected ? p.theme.color.legacy.text01 : p.theme.color.white)};
   font-size: 14px;
-  padding: ${(p) => (p.isConnected ? '8px 16px' : `10px 22px`)};
-  box-shadow: ${(p) =>
-    p.isConnected ? '0px 0px 10px rgba(0, 0, 0, 0.05)' : 'none'};
+  padding: ${p => (p.isConnected ? '8px 16px' : `10px 22px`)};
+  box-shadow: ${p => (p.isConnected ? '0px 0px 10px rgba(0, 0, 0, 0.05)' : 'none')};
 `
 
 const AccountCircle = styled.div<{ orb: string }>`
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  background-image: url(${(p) => p.orb});
+  background-image: url(${p => p.orb});
   background-size: cover;
   margin-right: 8px;
 `
diff --git a/interface/src/components/buttons/select-quote-option-button.tsx b/interface/src/components/buttons/select-quote-option-button.tsx
@@ -7,7 +7,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 // Context
-import { useWalletState } from '~/state/wallet'
+import { useSwapContext } from '~/context/swap.context'
 
 // Types
 import { QuoteOption } from '~/constants/types'
@@ -27,36 +27,25 @@ export const SelectQuoteOptionButton = (props: Props) => {
   const { onClick, option, isSelected, isBest, spotPrice } = props
 
   // Wallet State
-  const {
-    state: { defaultBaseCurrency }
-  } = useWalletState()
+  const { defaultBaseCurrency } = useSwapContext()
 
   // Methods
   const onSelectToken = React.useCallback(() => {
     onClick(option)
   }, [option, onClick])
 
   const quoteFiatValue = React.useMemo(() => {
-    return option.toAmount
-      .times(spotPrice || 0)
-      .formatAsFiat(defaultBaseCurrency)
+    return option.toAmount.times(spotPrice || 0).formatAsFiat(defaultBaseCurrency)
   }, [spotPrice, option, defaultBaseCurrency])
 
   return (
     <Button onClick={onSelectToken} isSelected={isSelected}>
-      {isBest && (
-        <BestOptionBadge isSelected={isSelected}>Best</BestOptionBadge>
-      )}
+      {isBest && <BestOptionBadge isSelected={isSelected}>Best</BestOptionBadge>}
       <Text isBold={true} textColor='text01' textSize='14px' textAlign='left'>
         {option.label}
       </Text>
       <Column horizontalAlign='flex-end'>
-        <Text
-          isBold={true}
-          textColor='text01'
-          textSize='14px'
-          textAlign='right'
-        >
+        <Text isBold={true} textColor='text01' textSize='14px' textAlign='right'>
           {option.toAmount.formatAsAsset(6, option.toToken.symbol)}
         </Text>
         <Text textColor='text03' textSize='14px' textAlign='right'>
@@ -70,10 +59,8 @@ export const SelectQuoteOptionButton = (props: Props) => {
 const Button = styled.button<{
   isSelected: boolean
 }>`
-  --best-background: ${(p) =>
-    p.isSelected
-      ? p.theme.color.legacy.interactive05
-      : p.theme.color.legacy.focusBorder};
+  --best-background: ${p =>
+    p.isSelected ? p.theme.color.legacy.interactive05 : p.theme.color.legacy.focusBorder};
   background-color: var(--select-quote-button-background);
   border-radius: 8px;
   justify-content: space-between;
@@ -82,14 +69,11 @@ const Button = styled.button<{
   margin: 0px 0px 10px 10px;
   position: relative;
   box-sizing: border-box;
-  box-shadow: ${(p) =>
-    p.isSelected
-      ? `0px 0px 0px 1px ${p.theme.color.legacy.interactive05} inset`
-      : 'none'};
+  box-shadow: ${p =>
+    p.isSelected ? `0px 0px 0px 1px ${p.theme.color.legacy.interactive05} inset` : 'none'};
   &:hover {
-    --best-background: ${(p) => p.theme.color.legacy.interactive05};
-    box-shadow: 0px 0px 0px 1px ${(p) => p.theme.color.legacy.interactive05}
-      inset;
+    --best-background: ${p => p.theme.color.legacy.interactive05};
+    box-shadow: 0px 0px 0px 1px ${p => p.theme.color.legacy.interactive05} inset;
   }
 `
 
@@ -98,7 +82,7 @@ const BestOptionBadge = styled.div<{
 }>`
   font-size: 12px;
   line-height: 20px;
-  color: ${(p) => p.theme.color.white};
+  color: ${p => p.theme.color.white};
   border-radius: 7px 7px 7px 0px;
   background-color: var(--best-background);
   padding: 0px 16px;

diff --git a/interface/src/components/swap/account-selector.tsx b/interface/src/components/swap/account-selector.tsx
@@ -9,9 +9,6 @@ import styled from 'styled-components'
 // Context
 import { useSwapContext } from '~/context/swap.context'
 
-// Hooks
-import { useWalletState } from '~/state/wallet'
-
 // Types
 import { WalletAccount } from '~/constants/types'
 
@@ -42,12 +39,7 @@ export const AccountSelector = (props: Props) => {
   } = props
 
   // Context
-  const { getLocale } = useSwapContext()
-
-  // Wallet State
-  const {
-    state: { braveWalletAccounts }
-  } = useWalletState()
+  const { getLocale, walletAccounts } = useSwapContext()
 
   // Methods
   const onToggleShowAccountSelector = React.useCallback(() => {
@@ -66,20 +58,14 @@ export const AccountSelector = (props: Props) => {
     <SelectorWrapper>
       <SelectButton onClick={onToggleShowAccountSelector} disabled={disabled}>
         <Text textSize='12px' textColor='text02'>
-          {selectedAccount
-            ? selectedAccount.name
-            : getLocale('braveSwapSelectAccount')}
+          {selectedAccount ? selectedAccount.name : getLocale('braveSwapSelectAccount')}
         </Text>
         <StyledCaratDownIcon size={16} icon={CaratDownIcon} />
       </SelectButton>
       {showAccountSelector && (
         <SelectorBox>
-          {braveWalletAccounts.map((account) => (
-            <AccountListButton
-              account={account}
-              onClick={onClickSelectAccount}
-              key={account.id}
-            />
+          {walletAccounts.map(account => (
+            <AccountListButton account={account} onClick={onClickSelectAccount} key={account.id} />
           ))}
         </SelectorBox>
       )}
@@ -88,8 +74,8 @@ export const AccountSelector = (props: Props) => {
 }
 
 const SelectButton = styled.button`
-  background-color: ${(p) => p.theme.color.legacy.background01};
-  border: 1px solid ${(p) => p.theme.color.legacy.interactive08};
+  background-color: ${p => p.theme.color.legacy.background01};
+  border: 1px solid ${p => p.theme.color.legacy.interactive08};
   border-radius: 4px;
   box-sizing: border-box;
   flex-direction: row;
@@ -107,7 +93,7 @@ const SelectorWrapper = styled.div`
 `
 
 const SelectorBox = styled.div`
-  background-color: ${(p) => p.theme.color.legacy.background01};
+  background-color: ${p => p.theme.color.legacy.background01};
   width: 200px;
   position: absolute;
   z-index: 10;
@@ -120,5 +106,5 @@ const SelectorBox = styled.div`
 `
 
 const StyledCaratDownIcon = styled(Icon)`
-  background-color: ${(p) => p.theme.color.legacy.text01};
+  background-color: ${p => p.theme.color.legacy.text01};
 `