feat: add connect wallet button

packages/widget/src/components/SwapButton.tsx

@@ -1,8 +1,36 @@
-import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import {
+  usePriorityAccount,
+  usePriorityConnector,
+  usePriorityIsActivating,
+  usePriorityIsActive,
+} from '../hooks/connectorHooks';
 
-export const SwapButton = styled(Button)({
+export const Button = styled(LoadingButton)({
   textTransform: 'none',
   borderRadius: 0,
   padding: '12px 16px',
 });
+
+export const SwapButton = () => {
+  const { t } = useTranslation();
+  const connector = usePriorityConnector();
+  const isActive = usePriorityIsActive();
+  const isActivating = usePriorityIsActivating();
+  const account = usePriorityAccount();
+
+  return (
+    <Button
+      variant="contained"
+      disableElevation
+      fullWidth
+      color={isActive ? 'primary' : 'success'}
+      onClick={isActive ? undefined : async () => connector.activate()}
+      loading={isActivating}
+    >
+      {isActive ? t(`swap.submit`) : t(`swap.connectWallet`)}
+    </Button>
+  );
+};

packages/widget/src/components/WalletHeader.tsx

@@ -1,21 +1,79 @@
-import { Typography } from '@mui/material';
+import { Box, Menu, MenuItem, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  usePriorityAccount,
+  usePriorityConnector,
+} from '../hooks/connectorHooks';
 import { Header } from './Header';
 
+export const WalletTypography = styled(Typography)(({ theme }) => ({
+  transition: theme.transitions.create(['color']),
+  '&:hover': {
+    color: theme.palette.grey[200],
+    cursor: 'pointer',
+  },
+}));
+
 export const WalletHeader: React.FC = () => {
   const { t } = useTranslation();
+  const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
+  const open = Boolean(menuAnchor);
+  const connector = usePriorityConnector();
+  const account = usePriorityAccount();
+  const walletAddress = account
+    ? `${account.substring(0, 7)}...${account.substring(account.length - 7)}`
+    : null;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setMenuAnchor(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setMenuAnchor(null);
+  };
+
+  const handleDisconnect = () => {
+    connector.deactivate();
+    handleClose();
+  };
+
   return (
     <Header height={40}>
-      <Typography
-        variant="body2"
-        noWrap
-        align="right"
-        sx={{ flexGrow: 1 }}
-        color="grey.500"
-        mt={2}
+      <Box sx={{ display: 'flex', flex: 1, justifyContent: 'flex-end' }}>
+        <WalletTypography
+          variant="body2"
+          noWrap
+          align="right"
+          color="grey.500"
+          mt={2}
+          id="wallet"
+          aria-controls={open ? 'wallet-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={handleClick}
+        >
+          {walletAddress
+            ? t(`header.walletConnected`, { walletAddress })
+            : t(`header.walletNotConnected`)}
+        </WalletTypography>
+      </Box>
+      <Menu
+        id="wallet-menu"
+        anchorEl={menuAnchor}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'wallet-menu',
+        }}
+        anchorReference="anchorEl"
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
       >
-        {t(`header.walletConnected`, { walletAddress: '0000000000' })}
-      </Typography>
+        <MenuItem dense onClick={handleDisconnect}>
+          {t(`header.disconnect`)}
+        </MenuItem>
+      </Menu>
     </Header>
   );
 };

packages/widget/src/hooks/connectorHooks.ts

@@ -0,0 +1,34 @@
+import { getPriorityConnector } from '@web3-react/core';
+import {
+  hooks as metaMaskHooks,
+  metaMask,
+} from '../services/connectors/metaMask';
+
+export const {
+  useSelectedChainId,
+  useSelectedAccounts,
+  useSelectedIsActivating,
+  useSelectedError,
+  useSelectedAccount,
+  useSelectedIsActive,
+  useSelectedProvider,
+  useSelectedENSNames,
+  useSelectedENSName,
+  useSelectedWeb3React,
+  usePriorityConnector,
+  usePriorityChainId,
+  usePriorityAccounts,
+  usePriorityIsActivating,
+  usePriorityError,
+  usePriorityAccount,
+  usePriorityIsActive,
+  usePriorityProvider,
+  usePriorityENSNames,
+  usePriorityENSName,
+  usePriorityWeb3React,
+} = getPriorityConnector(
+  [metaMask, metaMaskHooks],
+  // [walletConnect, walletConnectHooks],
+  // [walletLink, walletLinkHooks],
+  // [network, networkHooks],
+);

packages/widget/src/pages/SwapPage.tsx

@@ -65,7 +65,7 @@ export const SwapPage: React.FC = () => {
     <FormContainer maxWidth="sm" disableGutters>
       <FormBox ref={containerRef}>
         <Typography variant="subtitle1" color="text.secondary" mt={2} mb={0.5}>
-          {t(`swap.form.from`)}
+          {t(`swap.from`)}
         </Typography>
         <Box>
           <SwapChainButton
@@ -113,7 +113,7 @@ export const SwapPage: React.FC = () => {
             color="text.secondary"
             sx={{ alignSelf: 'end' }}
           >
-            {t(`swap.form.to`)}
+            {t(`swap.to`)}
           </Typography>
           <SwapVertIcon sx={{ alignSelf: 'center', padding: '0 16px' }} />
         </Box>
@@ -165,7 +165,7 @@ export const SwapPage: React.FC = () => {
               color="text.primary"
               sx={{ alignSelf: 'end' }}
             >
-              {t(`swap.form.sendToRecipient`)}
+              {t(`swap.sendToRecipient`)}
             </Typography>
           </Box>
           <Switch {...register('isSendToRecipient')} />
@@ -187,7 +187,7 @@ export const SwapPage: React.FC = () => {
               color="text.primary"
               sx={{ alignSelf: 'end' }}
             >
-              {t(`swap.form.routePriority.title`)}
+              {t(`swap.routePriority.title`)}
             </Typography>
           </Box>
           <FormControl sx={{ width: '50%' }}>
@@ -200,7 +200,7 @@ export const SwapPage: React.FC = () => {
               MenuProps={{ elevation: 2 }}
             >
               <MenuItem value={1}>
-                {t(`swap.form.routePriority.recommended`)}
+                {t(`swap.routePriority.recommended`)}
               </MenuItem>
             </Select>
           </FormControl>
@@ -234,15 +234,15 @@ export const SwapPage: React.FC = () => {
               color="text.secondary"
               sx={{ alignSelf: 'end' }}
             >
-              {t(`swap.form.gas`)}
+              {t(`swap.gas`)}
             </Typography>
             <Typography
               ml={2}
               variant="subtitle1"
               color="text.primary"
               sx={{ alignSelf: 'end' }}
             >
-              {t(`swap.form.price`, { value: 20 })}
+              {t(`swap.price`, { value: 20 })}
             </Typography>
           </Box>
           <Box
@@ -258,7 +258,7 @@ export const SwapPage: React.FC = () => {
               color="text.secondary"
               sx={{ alignSelf: 'end' }}
             >
-              {t(`swap.form.waitingTime`)}
+              {t(`swap.waitingTime`)}
             </Typography>
             <Typography
               ml={2}
@@ -271,9 +271,7 @@ export const SwapPage: React.FC = () => {
           </Box>
         </Box>
       </FormBox>
-      <SwapButton variant="contained" disableElevation fullWidth>
-        {t(`swap.button`)}
-      </SwapButton>
+      <SwapButton />
       <SelectTokenDrawer containerRef={containerRef} ref={drawerRef} />
     </FormContainer>
   );

packages/widget/src/services/connectors/eip1193.ts

@@ -0,0 +1,28 @@
+import { Eip1193Bridge } from '@ethersproject/experimental';
+import { JsonRpcProvider } from '@ethersproject/providers';
+import { initializeConnector } from '@web3-react/core';
+import { EIP1193 } from '@web3-react/eip1193';
+import { URLS } from '../chains';
+
+class Eip1193BridgeWithoutAccounts extends Eip1193Bridge {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  request(request: { method: string; params?: any[] }): Promise<any> {
+    if (
+      request.method === 'eth_requestAccounts' ||
+      request.method === 'eth_accounts'
+    )
+      return Promise.resolve([]);
+    return super.request(request);
+  }
+}
+
+const ethersProvider = new JsonRpcProvider(URLS[1][0], 1);
+const eip1193Provider = new Eip1193BridgeWithoutAccounts(
+  ethersProvider.getSigner(),
+  ethersProvider,
+);
+
+export const [eip1193, hooks] = initializeConnector<EIP1193>(
+  (actions) => new EIP1193(actions, eip1193Provider),
+  [1],
+);

packages/widget/src/services/connectors/empty.ts

@@ -0,0 +1,4 @@
+import { initializeConnector } from '@web3-react/core';
+import { Empty, EMPTY } from '@web3-react/empty';
+
+export const [empty, hooks] = initializeConnector<Empty>(() => EMPTY);

packages/widget/src/services/connectors/metaMask.ts

@@ -0,0 +1,6 @@
+import { initializeConnector } from '@web3-react/core';
+import { MetaMask } from '@web3-react/metamask';
+
+export const [metaMask, hooks] = initializeConnector<MetaMask>(
+  (actions) => new MetaMask(actions),
+);

packages/widget/src/services/connectors/network.ts

@@ -0,0 +1,8 @@
+import { initializeConnector } from '@web3-react/core';
+import { Network } from '@web3-react/network';
+import { URLS } from '../chains';
+
+export const [network, hooks] = initializeConnector<Network>(
+  (actions) => new Network(actions, URLS),
+  Object.keys(URLS).map((chainId) => Number(chainId)),
+);

packages/widget/src/services/connectors/url.ts

@@ -0,0 +1,8 @@
+import { initializeConnector } from '@web3-react/core';
+import { Url } from '@web3-react/url';
+import { URLS } from '../chains';
+
+export const [url, hooks] = initializeConnector<Url>(
+  (actions) => new Url(actions, URLS[1][0]),
+  [1],
+);

packages/widget/src/services/connectors/walletConnect.ts

@@ -0,0 +1,17 @@
+import { initializeConnector } from '@web3-react/core';
+import { WalletConnect } from '@web3-react/walletconnect';
+import { URLS } from '../chains';
+
+export const [walletConnect, hooks] = initializeConnector<WalletConnect>(
+  (actions) =>
+    new WalletConnect(actions, {
+      rpc: Object.keys(URLS).reduce<{ [chainId: number]: string }>(
+        (accumulator, chainId) => {
+          accumulator[Number(chainId)] = URLS[Number(chainId)][0];
+          return accumulator;
+        },
+        {},
+      ),
+    }),
+  Object.keys(URLS).map((chainId) => Number(chainId)),
+);

packages/widget/src/services/connectors/walletLink.ts

@@ -0,0 +1,11 @@
+import { initializeConnector } from '@web3-react/core';
+import { WalletLink } from '@web3-react/walletlink';
+import { URLS } from '../chains';
+
+export const [walletLink, hooks] = initializeConnector<WalletLink>(
+  (actions) =>
+    new WalletLink(actions, {
+      url: URLS[1][0],
+      appName: 'lifi-widget',
+    }),
+);

packages/widget/src/theme.ts

@@ -26,6 +26,9 @@ export const theme = createTheme({
       primary: '#000',
       secondary: '#52575b',
     },
+    success: {
+      main: '#0AA65B',
+    },
     grey: {
       100: '#F4F5F6',
       200: '#EFF1F2',