Merge remote-tracking branch 'origin' into linh/hubble-stats-network-…

…table
tangle-network · Jul 26, 2023 · bc7b6d2 · bc7b6d2
2 parents c6b0f8b + 1a9efab
commit bc7b6d2
Show file tree

Hide file tree

Showing 34 changed files with 404 additions and 283 deletions.
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -68,4 +68,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2
diff --git a/.github/workflows/deploy-bridge-dapp-dev.yml b/.github/workflows/deploy-bridge-dapp-dev.yml
@@ -56,7 +56,7 @@ jobs:
           args: deploy context=deploy-preview site=$NETLIFY_BRIDGE_SITE_ID --dir=./dist/apps/bridge-dapp/
 
       - name: Netlify Preview URL
-        uses: unsplash/[email protected].0
+        uses: unsplash/[email protected].1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           OUTPUT: |

diff --git a/.github/workflows/deploy-faucet.yml b/.github/workflows/deploy-faucet.yml
@@ -75,7 +75,7 @@ jobs:
           echo "NETLIFY_LOGS_URL=$LOGS_URL" >> $GITHUB_OUTPUT
 
       - name: Netlify Preview URL
-        uses: unsplash/[email protected].0
+        uses: unsplash/[email protected].1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           MSG: |

diff --git a/.github/workflows/deploy-hubble-stats.yml b/.github/workflows/deploy-hubble-stats.yml
@@ -68,7 +68,7 @@ jobs:
           echo "NETLIFY_LOGS_URL=$LOGS_URL" >> $GITHUB_OUTPUT
 
       - name: Netlify Preview URL
-        uses: unsplash/[email protected].0
+        uses: unsplash/[email protected].1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           MSG: |

diff --git a/.github/workflows/deploy-stats-dapp-dev.yml b/.github/workflows/deploy-stats-dapp-dev.yml
@@ -46,7 +46,7 @@ jobs:
           args: deploy context=deploy-preview site=$NETLIFY_SITE_ID --dir=./dist/apps/stats-dapp/
 
       - name: Netlify Preview URL
-        uses: unsplash/[email protected].0
+        uses: unsplash/[email protected].1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           OUTPUT: |

diff --git a/.github/workflows/deploy-tangle-website.yml b/.github/workflows/deploy-tangle-website.yml
@@ -76,7 +76,7 @@ jobs:
           echo "NETLIFY_LOGS_URL=$LOGS_URL" >> $GITHUB_OUTPUT
 
       - name: Netlify Preview URL
-        uses: unsplash/[email protected].0
+        uses: unsplash/[email protected].1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           MSG: |

diff --git a/.github/workflows/deploy-webbsite-dev.yml b/.github/workflows/deploy-webbsite-dev.yml
@@ -83,7 +83,7 @@ jobs:
           echo "NETLIFY_LOGS_URL=$LOGS_URL" >> $GITHUB_OUTPUT
 
       - name: Netlify Preview URL
-        uses: unsplash/[email protected].0
+        uses: unsplash/[email protected].1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           MSG: |

diff --git a/apps/faucet/src/components/ChainDropdown.tsx b/apps/faucet/src/components/ChainDropdown.tsx
@@ -1,5 +1,7 @@
 import { RadioGroup, RadioItem } from '@radix-ui/react-dropdown-menu';
+import { chainsConfig } from '@webb-tools/dapp-config/chains/chain-config';
 import { ChainIcon } from '@webb-tools/icons';
+import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id';
 import {
   ChainInput,
   Dropdown,
@@ -13,20 +15,28 @@ import { useFaucetContext } from '../provider';
 
 const ChainDropdown: FC = () => {
   // State to hold the selected chain
-  const [chain, setChain] = useState<string | undefined>();
+  const [typedChainId, setTypedChainId] = useState<number | undefined>();
 
   const { config, inputValues$ } = useFaucetContext();
 
-  const chainNames = useMemo(() => Object.keys(config), [config]);
+  const chains = useMemo(
+    () =>
+      Object.keys(config)
+        .map((c) => chainsConfig[+c])
+        .filter(Boolean),
+    [config]
+  );
 
   const chainInputVal = useMemo(
-    () => (chain ? { name: chain } : undefined),
-    [chain]
+    () =>
+      typedChainId ? { name: chainsConfig[typedChainId].name } : undefined,
+    [typedChainId]
   );
 
   const handleValueChange = useCallback(
-    (val: string) => {
-      setChain(val);
+    (nextTypedChainId: string) => {
+      const val = +nextTypedChainId;
+      setTypedChainId(+val);
       const currentVal = inputValues$.getValue();
       inputValues$.next({ ...currentVal, chain: val });
     },
@@ -48,11 +58,18 @@ const ChainDropdown: FC = () => {
       </DropdownBasicButton>
 
       <DropdownBody className="radix-side-bottom:mt-3 radix-side-top:mb-3 w-[277px]">
-        <RadioGroup value={chain} onValueChange={handleValueChange}>
-          {chainNames.map((chainName, i) => (
-            <RadioItem key={`${chainName}-${i}`} value={chainName} asChild>
-              <MenuItem startIcon={<ChainIcon size="lg" name={chainName} />}>
-                {chainName}
+        <RadioGroup
+          value={typedChainId?.toString()}
+          onValueChange={handleValueChange}
+        >
+          {chains.map((chain, i) => (
+            <RadioItem
+              key={`${chain.name}-${i}`}
+              value={`${calculateTypedChainId(chain.chainType, chain.id)}`}
+              asChild
+            >
+              <MenuItem startIcon={<ChainIcon size="lg" name={chain.name} />}>
+                {chain.name}
               </MenuItem>
             </RadioItem>
           ))}

diff --git a/apps/faucet/src/components/ContractAddressInput.tsx b/apps/faucet/src/components/ContractAddressInput.tsx
diff --git a/apps/faucet/src/components/Header.tsx b/apps/faucet/src/components/Header.tsx
@@ -1,5 +1,10 @@
 import links from '@webb-tools/dapp-config/links';
-import { Button, Logo, Navbar } from '@webb-tools/webb-ui-components';
+import {
+  Button,
+  Logo,
+  Navbar,
+  Typography,
+} from '@webb-tools/webb-ui-components';
 import { NavItemType } from '@webb-tools/webb-ui-components/components/Navbar/types';
 import cx from 'classnames';
 import Link from 'next/link';
@@ -47,8 +52,12 @@ const Header = () => {
       })}
     >
       <div className="max-w-[1160px] flex items-center justify-between min-h-[72px] mx-auto">
-        <Link href="/">
+        <Link className="flex items-center gap-2" href="/">
           <Logo />
+
+          <Typography variant="mkt-body2" fw="medium">
+            {'| Faucet'}
+          </Typography>
         </Link>
 
         <Navbar buttonProps={buttonProps} navItems={navItems} />

diff --git a/apps/faucet/src/components/ProcessingModal.tsx b/apps/faucet/src/components/ProcessingModal.tsx
@@ -18,11 +18,14 @@ import { useObservableState } from 'observable-hooks';
 import { useCallback, useMemo } from 'react';
 
 import FaucetError from '../errors/FaucetError';
+import FaucetErrorCode from '../errors/FaucetErrorCode';
+import ErrorPayload from '../errors/FaucetErrorPayload';
 import failedAnimation from '../lottie/failed.json';
 import processingAnimation from '../lottie/processing.json';
 import sucessAnimation from '../lottie/success.json';
 import { useFaucetContext } from '../provider';
 import addTokenToMetamask from '../utils/addTokenToMetamask';
+import parseErrorFromResult from '../utils/parseErrorFromResult';
 
 const ProcessingModal = () => {
   const {
@@ -107,6 +110,11 @@ const ProcessingModal = () => {
     }
   }, [mintTokenRes]);
 
+  const errorMessage = useMemo(
+    () => parseErrorFromResult(mintTokenRes),
+    [mintTokenRes]
+  );
+
   const handleOpenChange = useCallback(
     (nextOpen: boolean) => {
       // Only close the modal when the minting is successful or failed
@@ -163,7 +171,7 @@ const ProcessingModal = () => {
             {isSuccess
               ? 'This transfer has been made to your wallet address.'
               : isFailed
-              ? 'Oops, the transfer could not be completed.'
+              ? errorMessage
               : 'Your request is in progress. It may take up to a few seconds to complete the request.'}
           </Typography>
 

diff --git a/apps/faucet/src/components/TokenDropdown.tsx b/apps/faucet/src/components/TokenDropdown.tsx
@@ -22,10 +22,11 @@ const TokenDropdown = () => {
   );
 
   const setToken = useCallback(
-    (token: string | undefined) => {
+    (token: string | undefined, contractAddress?: string) => {
       const currentVal = inputValues$.getValue();
       inputValues$.next({
         ...currentVal,
+        contractAddress,
         token,
       });
     },
@@ -36,13 +37,19 @@ const TokenDropdown = () => {
     inputValues$.pipe(map((inputValues) => inputValues.chain))
   );
 
+  const currentChainData = useMemo(() => {
+    if (!selectedChain) return undefined;
+
+    return config[selectedChain];
+  }, [config, selectedChain]);
+
   const tokenNames = useMemo(() => {
-    if (!selectedChain || !config[selectedChain]?.tokenAddresses) {
+    if (!selectedChain || !currentChainData) {
       return [];
     }
 
-    return Object.keys(config[selectedChain].tokenAddresses);
-  }, [config, selectedChain]);
+    return Object.keys(currentChainData.tokenAddresses);
+  }, [currentChainData, selectedChain]);
 
   const tokenInputVal = useMemo(
     () => (token ? { symbol: token } : undefined),
@@ -51,17 +58,18 @@ const TokenDropdown = () => {
 
   const handleValueChange = React.useCallback(
     (val: string) => {
-      setToken(val);
+      setToken(val, currentChainData?.tokenAddresses[val]);
     },
-    [setToken]
+    [currentChainData?.tokenAddresses, setToken]
   );
 
   // Effect to reset the token value when the chain changes
   useEffect(() => {
-    if (tokenNames.length > 0) {
-      setToken(tokenNames[0]);
+    if (tokenNames.length > 0 && currentChainData) {
+      const defaultToken = tokenNames[0];
+      setToken(defaultToken, currentChainData.tokenAddresses[defaultToken]);
     }
-  }, [setToken, tokenNames]);
+  }, [currentChainData, setToken, tokenNames]);
 
   return (
     <Dropdown className="block grow shrink basis-0">