feat: add supported chains to drawer

lifinance · Feb 9, 2022 · 913db7f · 913db7f
1 parent 6106b95
commit 913db7f
Show file tree

Hide file tree

Showing 16 changed files with 5,148 additions and 1,088 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -6,7 +6,6 @@
     "node": true
   },
   "extends": [
-    "plugin:@typescript-eslint/recommended",
     "airbnb",
     "react-app",
     "plugin:prettier/recommended"

diff --git a/packages/widget-embedded/.env b/packages/widget-embedded/.env
@@ -0,0 +1,48 @@
+LIFI_PACKAGE="lifi"
+LIFI_PROJECT_NAME="Li.Finance"
+LIFI_ANALYTICS_ID=
+LIFI_API_URL=
+
+# RPC - Mainnet (overwrites)
+LIFI_RPC_URL_MAINNET="https://speedy-nodes-nyc.moralis.io/5ed6053dc39eba789ff466c9/eth/mainnet"
+# LIFI_RPC_URL_POLYGON=
+# LIFI_RPC_URL_BSC=
+# LIFI_RPC_URL_XDAI=
+# LIFI_RPC_URL_FANTOM=
+# LIFI_RPC_URL_ARBITRUM=
+
+# RPC - Testnet (overwrites)
+LIFI_RPC_URL_ROPSTEN="https://ropsten.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930"
+LIFI_RPC_URL_RINKEBY="https://rinkeby.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930"
+LIFI_RPC_URL_GORLI="https://goerli.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930"
+LIFI_RPC_URL_KOVAN="https://kovan.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930"
+LIFI_RPC_URL_ARBITRUM_RINKEBY="https://arbitrum-rinkeby.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930"
+LIFI_RPC_URL_OPTIMISM_KOVAN="https://optimism-kovan.infura.io/v3/c7fe4abb5bbc466cb56038efbb0b9930"
+LIFI_RPC_URL_POLYGON_MUMBAI="https://rpc-mumbai.maticvigil.com/v1/e4dadaac060844094a667194c20f79cc9bb0bc59"
+LIFI_RPC_URL_BSC_TESTNET="https://data-seed-prebsc-1-s2.binance.org:8545"
+
+# DEX Aggregators
+LIFI_ONEINCH_REFERRER_WALLET="0x48F7cB77F4FEA460DE34c3b34e4d7b6d3012FE5F"
+LIFI_ONEINCH_FEE=0.1
+LIFI_PARASWAP_REFERRER_WALLET="0x8c208b7B5625D78DeB49240Ef28126cBE2738098"
+LIFI_PARASWAP_REFERRER="li.finance"
+
+# Metadata
+LIFI_METADATA_TITLE="Li.Finance"
+LIFI_METADATA_DESCRIPTION="Providing liquidity when and where needed"
+LIFI_METADATA_IMAGE_URL="https://li.finance/placeholder.png"
+LIFI_METADATA_IMAGE_WIDTH="900"
+LIFI_METADATA_IMAGE_HEIGHT="450"
+
+# LiFi
+LIFI_ENABLED_CHAINS_JSON="[1, 10, 56, 66, 100, 137, 250, 1285, 42161, 43114, 1666600000]"
+LIFI_ENABLED_CHAINS_TESTNET_JSON="[3, 4, 5, 42, 97, 80001, 1666700000]"
+#LIFI_ENABLED_CHAINS_TESTNET_JSON= "[3, 4, 5, 42, 69, 97, 80001, 421611, 1666700000]"
+LIFI_CONTRACT_ENABLED_CHAINS_JSON="[]"
+
+# NXTP
+LIFI_NXTP_ENABLED_CHAINS_JSON="[1, 10, 56, 100, 137, 250, 1285, 42161, 43114]"
+LIFI_NXTP_ENABLED_CHAINS_TESTNET_JSON="[3, 4, 5, 97, 80001, 421611]"
+LIFI_NXTP_OVERWRITES_JSON='{"56":{"subgraphSyncBuffer":250}}'
+# mainnet router
+LIFI_NXTP_ROUTER_ADDRESS="0x29a519e21d6a97cdb82270b69c98bac6426cdcf9"
diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test"

diff --git a/packages/widget-embedded/src/index.tsx b/packages/widget-embedded/src/index.tsx
@@ -1,4 +1,4 @@
-import { LiFiWidget } from '@lifinance/widget';
+import { LiFiWidget, WidgetConfig } from '@lifinance/widget';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
@@ -10,9 +10,13 @@ if (!rootElement) {
 }
 const root = ReactDOM.createRoot(rootElement);
 
+const config: WidgetConfig = {
+  enabledChains: process.env.LIFI_ENABLED_CHAINS_JSON!,
+};
+
 root.render(
   <React.StrictMode>
-    <LiFiWidget />
+    <LiFiWidget config={config} />
   </React.StrictMode>,
 );
 

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -8,8 +8,21 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/material": "^5.4.0",
+    "@ethersproject/providers": "^5.5.3",
+    "@lifinance/sdk": "^0.4.4",
+    "@mui/icons-material": "^5.4.1",
+    "@mui/lab": "^5.0.0-alpha.68",
+    "@mui/material": "^5.4.1",
+    "@web3-react/core": "^8.0.10-beta.0",
+    "@web3-react/eip1193": "^8.0.5-beta.0",
+    "@web3-react/empty": "^8.0.3-beta.0",
+    "@web3-react/metamask": "^8.0.6-beta.0",
+    "@web3-react/network": "^8.0.5-beta.0",
+    "@web3-react/types": "^8.0.3-beta.0",
+    "@web3-react/url": "^8.0.5-beta.0",
+    "@web3-react/walletconnect": "^8.0.8-beta.0",
+    "@web3-react/walletlink": "^8.0.10-beta.0",
+    "bignumber.js": "^9.0.2",
     "i18next": "^21.6.11",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,11 +1,13 @@
 import { Container } from '@mui/material';
 import { styled, ThemeProvider } from '@mui/material/styles';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { WidgetConfig } from '.';
 import { NavigationHeader } from './components/NavigationHeader';
 import { WalletHeader } from './components/WalletHeader';
 import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapFormProvider } from './providers/SwapFormProvider';
+import { WidgetProvider } from './providers/WidgetProvider';
 import { theme } from './theme';
 import { routes } from './utils/routes';
 
@@ -17,23 +19,29 @@ const MainContainer = styled(Container)(({ theme }) => ({
   overflowX: 'clip',
 }));
 
-export function App() {
+interface AppProps {
+  config: WidgetConfig;
+}
+
+export const App: React.FC<AppProps> = ({ config }) => {
   return (
     <ThemeProvider theme={theme}>
       <MemoryRouter>
         <MainContainer maxWidth="sm" disableGutters>
           <WalletHeader />
           <NavigationHeader />
-          <SwapFormProvider>
-            <Routes>
-              <Route path={routes.home} element={<SwapPage />}>
-                <Route path={routes.selectToken} element={null} />
-              </Route>
-              <Route path={routes.settings} element={<SettingsPage />} />
-            </Routes>
-          </SwapFormProvider>
+          <WidgetProvider config={config}>
+            <SwapFormProvider>
+              <Routes>
+                <Route path={routes.home} element={<SwapPage />}>
+                  <Route path={routes.selectToken} element={null} />
+                </Route>
+                <Route path={routes.settings} element={<SettingsPage />} />
+              </Routes>
+            </SwapFormProvider>
+          </WidgetProvider>
         </MainContainer>
       </MemoryRouter>
     </ThemeProvider>
   );
-}
+};
diff --git a/packages/widget/src/components/SelectTokenDrawer.tsx b/packages/widget/src/components/SelectTokenDrawer.tsx
@@ -32,6 +32,7 @@ import {
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useMatch, useNavigate } from 'react-router-dom';
+import { useWidget } from '../providers/WidgetProvider';
 import { routes } from '../utils/routes';
 import { Input } from './Input';
 import { Select } from './Select';
@@ -85,6 +86,7 @@ export const SelectTokenDrawer = forwardRef<
   const [open, setOpen] = useState(false);
   const homeMatch = useMatch(routes.home);
   const { register } = useFormContext();
+  const { supportedChains } = useWidget();
 
   const openDrawer = useCallback(() => {
     navigate(routes.selectToken, { replace: true });
@@ -141,7 +143,7 @@ export const SelectTokenDrawer = forwardRef<
           <FormControl variant="standard" fullWidth>
             <Input
               size="small"
-              placeholder={t(`swap.form.tokenSearch`)}
+              placeholder={t(`swap.tokenSearch`)}
               endAdornment={
                 <InputAdornment position="end">
                   <SearchIcon />
@@ -158,26 +160,30 @@ export const SelectTokenDrawer = forwardRef<
             sx={{ fontWeight: 500 }}
             mb={1}
           >
-            {t(`swap.form.selectChain`)}
+            {t(`swap.selectChain`)}
           </Typography>
           <FormControl fullWidth>
             <Select
-              defaultValue={1}
+              defaultValue="eth"
               inputProps={{
                 'aria-label': '',
               }}
               MenuProps={{ elevation: 2 }}
             >
-              <MenuItem value={1}>
-                <ListItemIcon>
-                  <Avatar
-                    alt="Ethereum"
-                    src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
-                    sx={{ width: 24, height: 24 }}
-                  />
-                </ListItemIcon>
-                Ethereum
-              </MenuItem>
+              {supportedChains.map((chain) => (
+                <MenuItem key={chain.key} value={chain.key}>
+                  <ListItemIcon>
+                    <Avatar
+                      src={chain.logoURI}
+                      alt={chain.key}
+                      sx={{ width: 24, height: 24 }}
+                    >
+                      {chain.name[0]}
+                    </Avatar>
+                  </ListItemIcon>
+                  {chain.name}
+                </MenuItem>
+              ))}
             </Select>
           </FormControl>
           <Box
@@ -189,7 +195,7 @@ export const SelectTokenDrawer = forwardRef<
             }}
           >
             <Typography variant="subtitle1" noWrap sx={{ fontWeight: 500 }}>
-              {t(`swap.form.selectToken`)}
+              {t(`swap.selectToken`)}
             </Typography>
             <FormControl>
               <TokenFilterSelect
@@ -199,8 +205,8 @@ export const SelectTokenDrawer = forwardRef<
                 }}
                 MenuProps={{ elevation: 2, MenuListProps: { dense: true } }}
               >
-                <MenuItem value={0}>{t(`swap.form.myTokens`)}</MenuItem>
-                <MenuItem value={1}>{t(`swap.form.allTokens`)}</MenuItem>
+                <MenuItem value={0}>{t(`swap.myTokens`)}</MenuItem>
+                <MenuItem value={1}>{t(`swap.allTokens`)}</MenuItem>
               </TokenFilterSelect>
             </FormControl>
           </Box>

diff --git a/packages/widget/src/components/SendToRecipientForm.tsx b/packages/widget/src/components/SendToRecipientForm.tsx
@@ -23,15 +23,15 @@ export const SendToRecipientForm: React.FC = () => {
       <FormControl variant="standard" fullWidth disabled={isSubmitting}>
         <Input
           size="small"
-          placeholder={t(`swap.form.recipientsAddress`, { chain: 'ETH' })}
+          placeholder={t(`swap.recipientsAddress`, { chain: 'ETH' })}
           inputProps={{ ...register('recipientsAddress') }}
           required
         />
       </FormControl>
       <Box mt={0.5} mb={1}>
         <FormControlLabel
           control={<Checkbox required {...register('isAddressConfirmed')} />}
-          label={t(`swap.form.correctnessConfirmation`) as string}
+          label={t(`swap.correctnessConfirmation`) as string}
           disabled={isSubmitting}
           componentsProps={{ typography: { variant: 'body2' } }}
         />

diff --git a/packages/widget/src/components/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment.tsx
@@ -25,16 +25,16 @@ export const SwapFromInputAdornment: React.FC<{
   return (
     <InputAdornment position="end">
       <SwapMaxInputAdornment variant="body2" color="text.primary">
-        {t(`swap.form.max`)}
+        {t(`swap.max`)}
       </SwapMaxInputAdornment>
       <Typography variant="body2" color="text.secondary">
-        {t(`swap.form.maxAmount`, {
+        {t(`swap.maxAmount`, {
           value: maxAmount,
           minimumFractionDigits: 5,
         })}
       </Typography>
       <SwapInputAdornment variant="body2" color="text.secondary">
-        {t(`swap.form.price`, { value: price })}
+        {t(`swap.price`, { value: price })}
       </SwapInputAdornment>
     </InputAdornment>
   );
@@ -47,7 +47,7 @@ export const SwapToInputAdornment: React.FC<{ price: number }> = ({
   return (
     <InputAdornment position="end">
       <SwapInputAdornment variant="body2" color="text.secondary">
-        {t(`swap.form.price`, { value: price })}
+        {t(`swap.price`, { value: price })}
       </SwapInputAdornment>
     </InputAdornment>
   );

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -2,33 +2,33 @@
   "header": {
     "walletConnected": "Connected: {{walletAddress}}",
     "walletNotConnected": "Wallet is not connected.",
+    "disconnect": "Disconnect",
     "swap": "Swap",
     "settings": "Settings",
     "iWouldLikeToSwap": "I'd like to swap",
     "processIsOn": "Process is on..."
   },
   "swap": {
-    "form": {
-      "from": "I'd like to swap",
-      "to": "And receive to",
-      "max": "Max",
-      "maxAmount": "({{value, number}})",
-      "price": "\u2248 {{value, currency(currency: USD)}}",
-      "sendToRecipient": "Send to recipient",
-      "routePriority": {
-        "title": "Route priority",
-        "recommended": "Recommended"
-      },
-      "recipientsAddress": "Recipient's {{chain}} address",
-      "correctnessConfirmation": "I confirm that the address above is correct",
-      "gas": "Gas:",
-      "waitingTime": "Waiting time:",
-      "tokenSearch": "Search your token",
-      "selectChain": "Select Chain",
-      "selectToken": "Select Token",
-      "myTokens": "My tokens",
-      "allTokens": "All tokens"
+    "from": "I'd like to swap",
+    "to": "And receive to",
+    "max": "Max",
+    "maxAmount": "({{value, number}})",
+    "price": "\u2248 {{value, currency(currency: USD)}}",
+    "sendToRecipient": "Send to recipient",
+    "routePriority": {
+      "title": "Route priority",
+      "recommended": "Recommended"
     },
-    "button": "Swap"
+    "recipientsAddress": "Recipient's {{chain}} address",
+    "correctnessConfirmation": "I confirm that the address above is correct",
+    "gas": "Gas:",
+    "waitingTime": "Waiting time:",
+    "tokenSearch": "Search your token",
+    "selectChain": "Select Chain",
+    "selectToken": "Select Token",
+    "myTokens": "My tokens",
+    "allTokens": "All tokens",
+    "submit": "Swap",
+    "connectWallet": "Connect wallet"
   }
 }
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -1,6 +1,8 @@
 import { App } from './App';
 import { configureReactI18next } from './i18n';
 
+export * from './types';
+
 configureReactI18next();
 // ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));