feat: add bridges, exchanges, tokens and chains config options

lifinance · Sep 9, 2022 · 457ffb7 · 457ffb7
1 parent 55254df
commit 457ffb7
Show file tree

Hide file tree

Showing 40 changed files with 414 additions and 337 deletions.
diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx
@@ -31,20 +31,6 @@ import { WalletButtons } from './components/WalletButtons';
 import './index.css';
 import { useWallet } from './providers/WalletProvider';
 
-function ValueLabelComponent({
-  children,
-  value,
-}: {
-  children: React.ReactElement;
-  value: number;
-}) {
-  return (
-    <Tooltip enterTouchDelay={0} placement="top" title={value}>
-      {children}
-    </Tooltip>
-  );
-}
-
 const widgetDrawerConfig: WidgetConfig = {
   // fromChain: 137,
   // toChain: 10,
@@ -54,37 +40,82 @@ const widgetDrawerConfig: WidgetConfig = {
   // disableColorSchemes: true,
   disableTelemetry: true,
   integrator: 'li.fi-playground',
+  disabledChains: [],
+  chains: {
+    allow: [], // 1, 1285, 10, 56, 137
+    deny: [],
+  },
   // sdkConfig: {
   //   apiUrl: 'https://developkub.li.finance/v1/',
   // },
-  // featuredTokens: [
-  //   {
-  //     address: '0x195e3087ea4d7eec6e9c37e9640162fe32433d5e',
-  //     symbol: '$ALTI',
-  //     decimals: 18,
-  //     chainId: 56,
-  //     name: 'Altimatum',
-  //     logoURI: 'https://s2.coinmarketcap.com/static/img/coins/64x64/21303.png',
-  //   },
-  //   {
-  //     address: '0x60d8d17d6b824e19f77eaccaf16ed7ba6fb209c2',
-  //     symbol: 'SERENE',
-  //     decimals: 18,
-  //     chainId: 250,
-  //     name: 'Serenity V2',
-  //     logoURI:
-  //       'https://static.debank.com/image/ftm_token/logo_url/0x60d8d17d6b824e19f77eaccaf16ed7ba6fb209c2/5842f60d05f1d9ce473d0c3f70917c86.png',
-  //   },
-  //   {
-  //     address: '0x2fd6c9b869dea106730269e13113361b684f843a',
-  //     symbol: 'CHH',
-  //     decimals: 9,
-  //     chainId: 56,
-  //     name: 'Chihuahua',
-  //     priceUSD: '2.8497281105098143e-11',
-  //     logoURI: 'https://s2.coinmarketcap.com/static/img/coins/64x64/21334.png',
-  //   },
-  // ],
+  tokens: {
+    featured: [
+      {
+        address: '0x195e3087ea4d7eec6e9c37e9640162fe32433d5e',
+        symbol: '$ALTI',
+        decimals: 18,
+        chainId: 56,
+        name: 'Altimatum',
+        logoURI:
+          'https://s2.coinmarketcap.com/static/img/coins/64x64/21303.png',
+      },
+      {
+        address: '0x60d8d17d6b824e19f77eaccaf16ed7ba6fb209c2',
+        symbol: 'SERENE',
+        decimals: 18,
+        chainId: 250,
+        name: 'Serenity V2',
+        logoURI:
+          'https://static.debank.com/image/ftm_token/logo_url/0x60d8d17d6b824e19f77eaccaf16ed7ba6fb209c2/5842f60d05f1d9ce473d0c3f70917c86.png',
+      },
+      {
+        address: '0x2fd6c9b869dea106730269e13113361b684f843a',
+        symbol: 'CHH',
+        decimals: 9,
+        chainId: 56,
+        name: 'Chihuahua',
+        priceUSD: '2.8497281105098143e-11',
+        logoURI:
+          'https://s2.coinmarketcap.com/static/img/coins/64x64/21334.png',
+      },
+    ],
+    deny: [
+      // {
+      //   address: '0x4200000000000000000000000000000000000006',
+      //   chainId: 10,
+      // },
+      // {
+      //   address: '0x0000000000000000000000000000000000000000',
+      //   chainId: 10,
+      // },
+      // {
+      //   address: '0x4200000000000000000000000000000000000042',
+      //   chainId: 10,
+      //   decimals: 18,
+      //   logoURI:
+      //     'https://static.debank.com/image/op_token/logo_url/0x4200000000000000000000000000000000000042/95a6d2edd6dac44e08dd277bb10fbfe9.png',
+      //   name: 'Optimism',
+      //   priceUSD: '1.149',
+      //   symbol: 'OP',
+      // },
+    ],
+    allow: [
+      // {
+      //   address: '0x4200000000000000000000000000000000000042',
+      //   chainId: 10,
+      //   decimals: 18,
+      //   logoURI:
+      //     'https://static.debank.com/image/op_token/logo_url/0x4200000000000000000000000000000000000042/95a6d2edd6dac44e08dd277bb10fbfe9.png',
+      //   name: 'Optimism',
+      //   priceUSD: '1.149',
+      //   symbol: 'OP',
+      // },
+    ],
+  },
+  bridges: {
+    // allow: ['stargate'],
+    // deny: ['connext'],
+  },
 };
 
 const widgetConfig: WidgetConfig = {
@@ -425,3 +456,17 @@ export const App = () => {
     </ThemeProvider>
   );
 };
+
+function ValueLabelComponent({
+  children,
+  value,
+}: {
+  children: React.ReactElement;
+  value: number;
+}) {
+  return (
+    <Tooltip enterTouchDelay={0} placement="top" title={value}>
+      {children}
+    </Tooltip>
+  );
+}
diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx
@@ -31,13 +31,13 @@ export const AppProvider: React.FC<PropsWithChildren<AppProps>> = ({
       <WidgetProvider config={config}>
         <SDKProvider>
           <TelemetryProvider>
-            <WalletProvider>
+            <SwapFormProvider>
               <ThemeProvider>
-                <SwapFormProvider>
+                <WalletProvider>
                   <AppRouter>{children}</AppRouter>
-                </SwapFormProvider>
+                </WalletProvider>
               </ThemeProvider>
-            </WalletProvider>
+            </SwapFormProvider>
           </TelemetryProvider>
         </SDKProvider>
       </WidgetProvider>

diff --git a/packages/widget/src/components/ChainSelect/ChainSelect.style.tsx b/packages/widget/src/components/ChainSelect/ChainSelect.style.tsx
@@ -2,16 +2,16 @@ import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Card } from '../../components/Card';
 
-export const ChainCard = styled(Card)(({ theme }) => ({
+export const ChainCard = styled(Card)({
   display: 'grid',
   placeItems: 'center',
-  width: 56,
+  minWidth: 56,
   height: 56,
-}));
+});
 
 export const ChainContainer = styled(Box)(({ theme }) => ({
   display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, 56px)',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
   gridAutoRows: '56px',
   justifyContent: 'space-between',
   gap: theme.spacing(1.5),

diff --git a/packages/widget/src/components/ChainSelect/useChainSelect.ts b/packages/widget/src/components/ChainSelect/useChainSelect.ts
@@ -1,11 +1,11 @@
 import type { EVMChain } from '@lifi/sdk';
 import { useFormContext } from 'react-hook-form';
 import { useChains } from '../../hooks';
-import type { SwapFormDirection } from '../../providers';
+import type { SwapFormType } from '../../providers';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
 import { useChainOrder } from '../../stores/chains';
 
-export const useChainSelect = (formType: SwapFormDirection) => {
+export const useChainSelect = (formType: SwapFormType) => {
   const { setValue } = useFormContext();
   const { chains, isLoading } = useChains();
   const [chainOrder, setChainOrder] = useChainOrder();

diff --git a/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx b/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx
@@ -14,8 +14,9 @@ export const GasSufficiencyMessage: React.FC<{ route?: Route } & BoxProps> = ({
 }) => {
   const { t } = useTranslation();
   const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
+  console.log(insufficientFunds);
 
-  if (!insufficientFunds && !insufficientGas.length) {
+  if (!insufficientFunds && !insufficientGas?.length) {
     return null;
   }
 
@@ -28,27 +29,27 @@ export const GasSufficiencyMessage: React.FC<{ route?: Route } & BoxProps> = ({
         }}
       />
       <Box>
-        {insufficientGas.length ? (
+        {insufficientGas?.length ? (
           <CardTitle>{t(`swap.warning.title.insufficientGas`)}</CardTitle>
         ) : null}
         {insufficientFunds ? (
           <Typography
             variant="body2"
             px={2}
-            pb={insufficientGas.length ? 0 : 2}
-            pt={insufficientGas.length ? 1 : 2}
+            pb={insufficientGas?.length ? 0 : 2}
+            pt={insufficientGas?.length ? 1 : 2}
           >
             {insufficientFunds
               ? t(`swap.warning.message.insufficientFunds`)
               : null}
           </Typography>
         ) : null}
-        {insufficientGas.length ? (
+        {insufficientGas?.length ? (
           <Typography variant="body2" px={2} pt={1}>
             {t(`swap.warning.message.insufficientGas`)}
           </Typography>
         ) : null}
-        {insufficientGas.length
+        {insufficientGas?.length
           ? insufficientGas.map((item, index) => (
               <Typography
                 key={index}

diff --git a/packages/widget/src/components/Header/useHeaderActionStore.ts b/packages/widget/src/components/Header/useHeaderActionStore.ts
@@ -18,7 +18,3 @@ export const useHeaderActionStore = create<HeaderActionStore>()(
     },
   })),
 );
-
-export const useSetHeaderAction = () => {
-  return useHeaderActionStore((state) => state.setAction);
-};
diff --git a/packages/widget/src/components/SwapButton/SwapButton.tsx b/packages/widget/src/components/SwapButton/SwapButton.tsx
@@ -1,10 +1,8 @@
-import { ChainId } from '@lifi/sdk';
 import { Button } from '@mui/material';
-import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useGasSufficiency } from '../../hooks';
-import { SwapFormKeyHelper, useWallet, useWidgetConfig } from '../../providers';
+import { useGasSufficiency } from '../../hooks';
+import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import type { SwapButtonProps } from './types';
 
@@ -16,43 +14,26 @@ export const SwapButton: React.FC<SwapButtonProps> = ({
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { getChainById } = useChains();
   const config = useWidgetConfig();
-  const { account, switchChain, connect: walletConnect } = useWallet();
+  const { account, connect } = useWallet();
 
   const { insufficientFunds, insufficientGas } =
     useGasSufficiency(currentRoute);
 
-  const [chainId] = useWatch({
-    name: [SwapFormKeyHelper.getChainKey('from')],
-  });
-
-  // Allow switching chain only if execution is not started
-  const switchChainAllowed =
-    getChainById(chainId || ChainId.ETH)?.id !== account.chainId &&
-    currentRoute &&
-    !currentRoute.steps.some((step) => step.execution);
-
   const handleSwapButtonClick = async () => {
     if (!account.isActive) {
       if (config.walletManagement) {
-        await walletConnect();
+        await connect();
       } else {
         navigate(navigationRoutes.selectWallet);
       }
-    } else if (switchChainAllowed) {
-      await switchChain(chainId!);
-      // check that the current route exists in the up to date route list
     } else {
       onClick?.();
     }
   };
 
   const getButtonText = () => {
     if (account.isActive) {
-      if (switchChainAllowed) {
-        return t(`button.switchChain`);
-      }
       if (!currentRoute) {
         return t(`button.swap`);
       }
@@ -66,11 +47,7 @@ export const SwapButton: React.FC<SwapButtonProps> = ({
       variant="contained"
       color={account.isActive ? 'primary' : 'success'}
       onClick={handleSwapButtonClick}
-      disabled={
-        currentRoute &&
-        !switchChainAllowed &&
-        (insufficientFunds || !!insufficientGas.length || disable)
-      }
+      disabled={insufficientFunds || !!insufficientGas?.length || disable}
       fullWidth
     >
       {getButtonText()}

diff --git a/packages/widget/src/components/TokenList/TokenList.style.tsx b/packages/widget/src/components/TokenList/TokenList.style.tsx
@@ -8,7 +8,8 @@ import { getContrastAlphaColor } from '../../utils';
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
   borderRadius: theme.shape.borderRadiusSecondary,
-  paddingLeft: theme.spacing(2),
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
   height: 64,
   width: '100%',
   '&:hover': {
@@ -23,8 +24,8 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
   height: 64,
   flexDirection: 'column',
   alignItems: 'flex-start',
-  padding: theme.spacing(0, 3),
+  padding: theme.spacing(0, 1.5),
   [`.${listItemSecondaryActionClasses.root}`]: {
-    right: theme.spacing(5),
+    right: theme.spacing(3),
   },
 }));
diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx
@@ -90,7 +90,9 @@ export const TokenList: FC<TokenListProps> = ({
 
   return (
     <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
-      {!tokens.length && !isLoading ? <TokenNotFound /> : null}
+      {!tokens.length && !isLoading ? (
+        <TokenNotFound formType={formType} />
+      ) : null}
       <VirtualizedTokenList
         tokens={tokens}
         featuredTokensLength={featuredTokens?.length}

diff --git a/packages/widget/src/components/TokenList/TokenListItem.tsx b/packages/widget/src/components/TokenList/TokenListItem.tsx
@@ -86,7 +86,7 @@ export const TokenListItemSkeleton = () => {
           variant="circular"
           width={32}
           height={32}
-          sx={{ marginLeft: 2, marginRight: 2 }}
+          sx={{ marginLeft: 1.5, marginRight: 2 }}
         />
       </ListItemAvatar>
       <ListItemText

diff --git a/packages/widget/src/components/TokenList/types.ts b/packages/widget/src/components/TokenList/types.ts
@@ -1,10 +1,10 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers';
+import type { SwapFormType } from '../../providers';
 import type { Token } from '../../types';
 
 export interface TokenListProps {
-  formType: SwapFormDirection;
+  formType: SwapFormType;
   height: number;
   onClick?(): void;
 }