feat(redux): adding gateway selector; algonode gateway (#128)

* feat(redux): adding gateway selector; algonode gateway * fix: adding ipfs gateways to next config
AlgoWorldNFT · Oct 20, 2022 · 3745e99 · 3745e99 · github-actions · Oct 20, 2022
1 parent 0c51797
commit 3745e99
Show file tree

Hide file tree

Showing 26 changed files with 291 additions and 120 deletions.
diff --git a/api/swaps/get-swap-configurations.py b/api/swaps/get-swap-configurations.py
@@ -87,7 +87,13 @@ def do_GET(self):
         config_file_url = common.get_decoded_note_from_txn(swap_config_txn)
 
         if "ipfs" in config_file_url:
-            config_file_url = f'https://{config_file_url.split("ipfs://")[1]}.ipfs.cf-ipfs.com/aw_swaps.json'
+            gateway = (
+                raw_params["gateway"]
+                if "gateway" in raw_params
+                else "ipfs.algonode.xyz"
+            )
+            config_file_url = f'https://{gateway}/ipfs/{config_file_url.split("ipfs://")[1]}/aw_swaps.json'
+
             try:
                 configFileResponse = http_client.get(config_file_url).json()
                 configFile = json.dumps(

diff --git a/e2e/pages/dashboard.spec.ts b/e2e/pages/dashboard.spec.ts
@@ -7,11 +7,11 @@ test(`should navigate to the about page`, async ({ page }) => {
 
   await page.locator(`#AWNavigationBar >> text=About`).click();
   await expect(
-    page.locator(`text=AlgoWorld Swapper v0.5.2`).first(),
+    page.locator(`text=AlgoWorld Swapper v0.6.0`).first(),
   ).toBeVisible();
 
   await page.locator(`button:has-text("Close")`).click();
   await expect(
-    page.locator(`text=AlgoWorld Swapper v0.5.2`).first(),
+    page.locator(`text=AlgoWorld Swapper v0.6.0`).first(),
   ).toBeHidden();
 });
diff --git a/next.config.js b/next.config.js
@@ -18,14 +18,16 @@ const nextConfig = {
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
   images: {
     domains: [
+      'ipfs.algonode.xyz',
       'cf-ipfs.com',
-      '*.cf-ipfs.com',
+      'dweb.link',
+      'cloudflare-ipfs.com',
+      'ipfs-gateway.cloud',
+
       'images.unsplash.com',
       'vitals.vercel-insights.com',
       'google-analytics.com',
       '*.google-analytics.com',
-      '*.glitchtip.com',
-      'glitchtip.com',
     ],
   },
 };

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "algoworld-swapper",
   "description": "Free and trustless ASA swapper, powered by Algorand ⚡️",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "private": true,
   "author": "AlgoWorld <[email protected]>",
   "license": "GPL-3.0",

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -17,6 +17,7 @@
  */
 
 import { ChainType } from '@/models/Chain';
+import { IpfsGateway } from '@/models/Gateway';
 
 export const CHAIN_TYPE: ChainType =
   (process.env.NEXT_PUBLIC_CHAIN_TYPE ?? `TestNet`) === `TestNet`
@@ -47,7 +48,9 @@ export const ALGOEXPLORER_URL = (chain: ChainType) => {
     : `https://testnet.algoexplorer.io`;
 };
 
-export const EMPTY_ASSET_IMAGE_URL = `https://cf-ipfs.com/ipfs/QmXrsy5TddTiwDCXqGc2yzNowKs7WhCJfQ17rvHuArfnQp`;
+export const EMPTY_ASSET_IMAGE_URL = (gateway: IpfsGateway) => {
+  return `https://${gateway}/ipfs/QmXrsy5TddTiwDCXqGc2yzNowKs7WhCJfQ17rvHuArfnQp`;
+};
 export const LATEST_SWAP_PROXY_VERSION = `0.0.2`;
 export const ALL_SWAP_PROXY_VERSIONS = [LATEST_SWAP_PROXY_VERSION, `0.0.1`];
 export const AWVT_ASSET_INDEX = (chain: ChainType) => {

diff --git a/src/components/Dialogs/AboutDialog.tsx b/src/components/Dialogs/AboutDialog.tsx
@@ -49,7 +49,7 @@ export default function AboutDialog({ open, changeState }: Props) {
         aria-describedby="scroll-dialog-description"
       >
         <DialogTitle color={`primary`} id="scroll-dialog-title">
-          AlgoWorld Swapper v0.5.2
+          AlgoWorld Swapper v0.6.0
         </DialogTitle>
         <DialogContent dividers={true}>
           <DialogContentText ref={descriptionElementRef} tabIndex={-1}>

diff --git a/src/components/Dialogs/ManageSwapDialog.tsx b/src/components/Dialogs/ManageSwapDialog.tsx
@@ -66,9 +66,9 @@ const ManageSwapDialog = ({ open, onClose, onShare }: Props) => {
   const selectedManageSwap = useAppSelector(
     (state) => state.application.selectedManageSwap,
   );
-  const chain = useAppSelector((state) => state.walletConnect.chain);
-  const existingSwaps = useAppSelector((state) => state.walletConnect.swaps);
-  const proxy = useAppSelector((state) => state.walletConnect.proxy);
+  const { chain, swaps, proxy, gateway } = useAppSelector(
+    (state) => state.walletConnect,
+  );
 
   const { enqueueSnackbar } = useSnackbar();
   const [depositLoading, setDepositLoading] = useState<boolean>(false);
@@ -79,7 +79,7 @@ const ManageSwapDialog = ({ open, onClose, onShare }: Props) => {
       return undefined;
     }
 
-    return await getAssetsForAccount(chain, selectedManageSwap.escrow);
+    return await getAssetsForAccount(chain, gateway, selectedManageSwap.escrow);
   }, [selectedManageSwap]);
 
   const swapAssets = useMemo(() => {
@@ -210,7 +210,7 @@ const ManageSwapDialog = ({ open, onClose, onShare }: Props) => {
       return;
     }
 
-    const newSwapConfigs = existingSwaps.filter((swapConfig) => {
+    const newSwapConfigs = swaps.filter((swapConfig) => {
       return swapConfig.escrow !== selectedManageSwap.escrow;
     });
     const cidResponse = await saveSwapConfigurations(newSwapConfigs);

diff --git a/src/components/Dialogs/ToAssetPickerDialog.tsx b/src/components/Dialogs/ToAssetPickerDialog.tsx
@@ -61,7 +61,7 @@ export const ToAssetPickerDialog = ({
     number | undefined
   >(undefined);
 
-  const chain = useAppSelector((state) => state.walletConnect.chain);
+  const { chain, gateway } = useAppSelector((state) => state.walletConnect);
   const [searchContent, setSearchContent] = useState(``);
   const [autocompleteOpen, setAutocompleteOpen] = useState(false);
 
@@ -99,7 +99,7 @@ export const ToAssetPickerDialog = ({
           name: assetParams.hasOwnProperty(`name`) ? assetParams[`name`] : ``,
           imageUrl: assetParams.hasOwnProperty(`url`)
             ? assetParams[`url`]
-            : EMPTY_ASSET_IMAGE_URL,
+            : EMPTY_ASSET_IMAGE_URL(gateway),
           decimals: assetParams[`decimals`],
           unitName: assetParams[`unit-name`],
           amount: 0,
@@ -110,7 +110,7 @@ export const ToAssetPickerDialog = ({
       .filter((asset: { index: number }) => {
         return !unpackedSelectedAssetIndexes.includes(asset.index);
       });
-  }, [data, error, selectedAssets]);
+  }, [data, error, gateway, selectedAssets]);
   const loading = autocompleteOpen && searchedAssets.length === 0;
 
   return (

diff --git a/src/components/Grids/PublicSwapsGrid.tsx b/src/components/Grids/PublicSwapsGrid.tsx
@@ -22,13 +22,15 @@ import { ellipseAddress } from '@/redux/helpers/utilities';
 
 import { ChainType } from '@/models/Chain';
 import PublicSwapAssetsTable from '../Tables/PublicSwapAssetsTable';
+import { IpfsGateway } from '@/models/Gateway';
 
 type Props = {
   publicSwapAccounts: string[];
+  gateway: IpfsGateway;
   chain: ChainType;
 };
 
-const PublicSwapsGrid = ({ publicSwapAccounts, chain }: Props) => {
+const PublicSwapsGrid = ({ publicSwapAccounts, gateway, chain }: Props) => {
   return (
     <Container sx={{ py: 4, pr: 0, pl: 0 }} maxWidth="xl">
       {/* End hero unit */}
@@ -48,7 +50,11 @@ const PublicSwapsGrid = ({ publicSwapAccounts, chain }: Props) => {
                 <Typography gutterBottom variant="h5" component="h2">
                   {`${ellipseAddress(account, 4)}`}
                 </Typography>
-                <PublicSwapAssetsTable address={account} chain={chain} />
+                <PublicSwapAssetsTable
+                  address={account}
+                  gateway={gateway}
+                  chain={chain}
+                />
               </CardContent>
             </Card>
           </Grid>

diff --git a/src/components/Headers/NavBar.tsx b/src/components/Headers/NavBar.tsx
@@ -39,6 +39,7 @@ import {
   getProxy,
   switchChain,
   onSessionUpdate,
+  setGateway,
 } from '@/redux/slices/walletConnectSlice';
 import { formatBigNumWithDecimals } from '@/redux/helpers/utilities';
 import { Asset } from '@/models/Asset';
@@ -49,7 +50,15 @@ import {
 } from '@/redux/slices/applicationSlice';
 import { WalletClient, WalletType } from '@/models/Wallet';
 import { useRouter } from 'next/router';
-import { Divider, FormControlLabel, Grid, Stack, Switch } from '@mui/material';
+import {
+  Divider,
+  FormControlLabel,
+  Grid,
+  Stack,
+  Switch,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { ChainType } from '@/models/Chain';
 import Link from 'next/link';
 import { CONNECTED_WALLET_TYPE } from '@/common/constants';
@@ -67,6 +76,8 @@ import {
   NAV_BAR_SETTINGS_BTN_ID,
   NAV_BAR_SETTINGS_MENU_ITEM_ID,
 } from './constants';
+import { IpfsGateway } from '@/models/Gateway';
+import ValueSelect from '../Select/ValueSelect';
 
 type PageConfiguration = {
   title: string;
@@ -85,6 +96,9 @@ const settings = [`AlgoExplorer`, `My Swaps`, `Logout`];
 const BUG_REPORT_URL = `https://github.com/AlgoWorldNFT/algoworld-swapper/issues/new`;
 
 const NavBar = () => {
+  const theme = useTheme();
+  const largeScreen = useMediaQuery(theme.breakpoints.up(`sm`));
+
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
     null,
   );
@@ -98,9 +112,11 @@ const NavBar = () => {
 
   const assets = useAppSelector(selectAssets);
 
-  const { fetching: loading, address } = useAppSelector(
-    (state) => state.walletConnect,
-  );
+  const {
+    fetching: loading,
+    address,
+    gateway,
+  } = useAppSelector((state) => state.walletConnect);
 
   const selectedChain = useAppSelector((state) => state.walletConnect.chain);
 
@@ -199,6 +215,10 @@ const NavBar = () => {
       dispatch(switchChain(chain));
     };
 
+    const changeGateway = (gateway: IpfsGateway) => {
+      dispatch(setGateway(gateway));
+    };
+
     if (typeof window !== `undefined`) {
       const persistedChainType =
         chain !== undefined
@@ -208,6 +228,14 @@ const NavBar = () => {
           : (localStorage.getItem(`ChainType`) as ChainType) ??
             ChainType.TestNet;
       changeChain(persistedChainType);
+
+      const persistedGateway = localStorage.getItem(
+        `IpfsGateway`,
+      ) as IpfsGateway;
+
+      if (persistedGateway) {
+        changeGateway(persistedGateway);
+      }
     }
 
     const connectedWalletType = localStorage.getItem(CONNECTED_WALLET_TYPE);
@@ -218,11 +246,11 @@ const NavBar = () => {
     }
 
     if (address) {
-      dispatch(getAccountAssets({ chain: selectedChain, address }));
-      dispatch(getProxy({ address, chain: selectedChain }));
-      dispatch(getAccountSwaps({ chain: selectedChain, address }));
+      dispatch(getAccountAssets({ chain: selectedChain, gateway, address }));
+      dispatch(getProxy({ address, chain: selectedChain, gateway }));
+      dispatch(getAccountSwaps({ chain: selectedChain, gateway, address }));
     }
-  }, [dispatch, connector, address, selectedChain, chain, connect]);
+  }, [dispatch, connector, address, selectedChain, chain, connect, gateway]);
 
   const nativeCurrency = assets.find(
     (asset: Asset) => asset.index === 0,
@@ -461,39 +489,43 @@ const NavBar = () => {
                     open={Boolean(anchorElUser)}
                     onClose={handleCloseUserMenu}
                   >
-                    <Typography
-                      variant="subtitle2"
-                      sx={{ textAlign: `center`, color: `primary.main` }}
-                    >
-                      {formatBigNumWithDecimals(
-                        BigInt(nativeCurrency.amount),
-                        nativeCurrency.decimals,
-                      )}
-                      {` `}
-                      {nativeCurrency.unitName || `units`}
-                    </Typography>
-                    <FormControlLabel
-                      id={NAV_BAR_CHAIN_FORM_CONTROL_ID}
-                      control={
-                        <Switch
-                          id={NAV_BAR_CHAIN_SWITCH_ID}
-                          checked={selectedChain === ChainType.MainNet}
-                          onChange={() => {
-                            const newValue =
-                              selectedChain === ChainType.MainNet
-                                ? ChainType.TestNet
-                                : ChainType.MainNet;
-
-                            handleSwitchChain(newValue);
-                          }}
-                        />
-                      }
-                      label={
-                        selectedChain === `mainnet` ? `MainNet` : `TestNet`
-                      }
-                      sx={{ ml: 1, mr: 2 }}
+                    {!largeScreen && (
+                      <Typography
+                        variant="subtitle2"
+                        sx={{ textAlign: `center`, color: `primary.main` }}
+                      >
+                        {formatBigNumWithDecimals(
+                          BigInt(nativeCurrency.amount),
+                          nativeCurrency.decimals,
+                        )}
+                        {` `}
+                        {nativeCurrency.unitName || `units`}
+                      </Typography>
+                    )}
+
+                    <ValueSelect
+                      id={NAV_BAR_CHAIN_SWITCH_ID}
+                      label={`Network type`}
+                      value={selectedChain}
+                      values={[ChainType.TestNet, ChainType.MainNet]}
+                      onSelect={(value: string) => {
+                        dispatch(switchChain(value as ChainType));
+                      }}
                     />
                     <Divider />
+                    <ValueSelect
+                      label={`IPFS Gateway`}
+                      value={gateway}
+                      values={[
+                        IpfsGateway.ALGONODE_IO,
+                        IpfsGateway.DWEB_LINK,
+                        IpfsGateway.IPFS_IO,
+                        IpfsGateway.CLOUDFLARE_IPFS,
+                      ]}
+                      onSelect={(value: string) => {
+                        dispatch(setGateway(value as IpfsGateway));
+                      }}
+                    />
                     {settings.map((setting) => (
                       <MenuItem
                         id={NAV_BAR_SETTINGS_MENU_ITEM_ID(setting)}