Merge branch '292-update-flow-to-start-off-ramping-from-evm-networks'…

… into account-for-min-balance-assethub
pendulum-chain · Jan 3, 2025 · 89598a1 · 89598a1
2 parents 7cbbb3f + 7afd806
commit 89598a1
Show file tree

Hide file tree

Showing 31 changed files with 326 additions and 283 deletions.
diff --git a/src/components/FeeComparison/index.tsx b/src/components/FeeComparison/index.tsx
@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
 import vortexIcon from '../../assets/logo/blue.svg';
-import { Networks } from '../../contexts/network';
+import { getNetworkDisplayName, isNetworkEVM, Networks } from '../../helpers/networks';
 import { Skeleton } from '../Skeleton';
 import { QuoteProvider, quoteProviders } from './quoteProviders';
 import { OfframpingParameters, useEventsContext } from '../../contexts/events';
@@ -126,14 +126,17 @@ function FeeComparisonTable({
       <div className="flex items-center justify-center w-full mb-3">
         <div className="flex items-center justify-center w-full gap-4">
           <span className="font-bold text-md">
-            Sending {amount.toFixed(2)} {sourceAssetSymbol}
-            <div
-              className="tooltip tooltip-primary before:whitespace-pre-wrap before:content-[attr(data-tip)]"
-              data-tip="Quotes are for Polygon, as the providers don't support Asset hub."
-            >
-              (Polygon)
-            </div>
-            <br />
+            Sending {amount.toFixed(2)} {sourceAssetSymbol}{' '}
+            {isNetworkEVM(network) ? (
+              <></>
+            ) : (
+              <div
+                className="tooltip tooltip-primary before:whitespace-pre-wrap before:content-[attr(data-tip)]"
+                data-tip={`Quotes are for Polygon, as the providers don't support ${getNetworkDisplayName(network)}.`}
+              >
+                (Polygon)
+              </div>
+            )}{' '}
             with
           </span>
         </div>

diff --git a/src/components/Nabla/useSwapForm.tsx b/src/components/Nabla/useSwapForm.tsx
@@ -13,7 +13,8 @@ import {
 import { debounce } from '../../helpers/function';
 import { storageService } from '../../services/storage/local';
 import schema, { SwapFormValues } from './schema';
-import { Networks, useNetwork } from '../../contexts/network';
+import { getCaseSensitiveNetwork } from '../../helpers/networks';
+import { useNetwork } from '../../contexts/network';
 
 type SwapSettings = {
   from: string;
@@ -22,26 +23,9 @@ type SwapSettings = {
 
 type TokenSelectType = 'from' | 'to';
 
-type NetworkMap = Record<Lowercase<Networks>, Networks>;
-
-const NETWORK_MAPPING: NetworkMap = {
-  assethub: Networks.AssetHub,
-  polygon: Networks.Polygon,
-  ethereum: Networks.Ethereum,
-  bsc: Networks.BSC,
-  arbitrum: Networks.Arbitrum,
-  base: Networks.Base,
-  avalanche: Networks.Avalanche,
-};
-
 const storageSet = debounce(storageService.set, 1000);
 const setStorageForSwapSettings = storageSet.bind(null, storageKeys.SWAP_SETTINGS);
 
-export function getCaseSensitiveNetwork(network: string): Networks {
-  const lowercasedNetwork = network.toLowerCase() as keyof typeof NETWORK_MAPPING;
-  return NETWORK_MAPPING[lowercasedNetwork] ?? Networks.AssetHub;
-}
-
 function mergeIfDefined<T>(target: T, source: Nullable<T> | undefined): void {
   if (!source) return;
 

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -19,8 +19,12 @@ interface MobileMenuProps {
 }
 
 const MobileMenu: FC<MobileMenuProps> = ({ onClick }) => (
-  <button className="ml-2 bg-pink-600 btn btn-square btn-ghost lg:hidden" type="button" onClick={onClick}>
-    <Bars4Icon className="w-8 text-white" />
+  <button
+    className="ml-2 bg-pink-600 group btn-vortex-secondary btn btn-circle lg:hidden"
+    type="button"
+    onClick={onClick}
+  >
+    <Bars4Icon className="w-6 text-white group-hover:text-pink-600" />
   </button>
 );
 
@@ -59,7 +63,7 @@ const MobileMenuList: FC<MobileMenuListProps> = ({ showMenu, closeMenu }) => (
         exit="exit"
         variants={menuVariants}
       >
-        <button onClick={closeMenu} className="absolute right-6 top-8">
+        <button onClick={closeMenu} className="absolute right-12 top-7">
           <XMarkIcon className="w-8 text-white" />
         </button>
         <nav>
@@ -83,7 +87,7 @@ const Links = () => (
           href={link.href}
           target={link.href.startsWith('https') ? '_blank' : ''}
           rel={link.href.startsWith('https') ? 'noreferrer' : ''}
-          className="px-3 text-lg font-thin text-white lg:px-4 lg:text-xl lg:px-7 hover:text-amber-500 hover:underline"
+          className="px-3 text-lg font-thin text-white lg:px-4 xl:px-7 hover:text-amber-500 hover:underline"
         >
           {link.title}
         </a>
@@ -100,7 +104,7 @@ export const Navbar = () => {
     <header className="flex items-center justify-between px-4 py-4 bg-blue-950 md:py-5 md:px-10">
       <div className="flex">
         <a href="https://www.vortexfinance.co/" target="_blank" rel="noreferrer" className="flex text-slate-400">
-          <img src={whiteLogo} alt="Vortex Logo" className="mr-1 max-w-26 max-h-6 lg:max-w-52 lg:max-h-12" />
+          <img src={whiteLogo} alt="Vortex Logo" className="mr-1 max-h-6 lg:max-h-8 xl:max-h-12" />
           Alpha
         </a>
         <nav className="hidden m-auto lg:block">

diff --git a/src/components/NetworkIcon/index.tsx b/src/components/NetworkIcon/index.tsx
@@ -1,14 +1,15 @@
 import { FC, HTMLAttributes } from 'preact/compat';
-import { useGetNetworkIcon, NetworkIconType } from '../../hooks/useGetNetworkIcon';
+import { useGetNetworkIcon } from '../../hooks/useGetNetworkIcon';
+import { getNetworkDisplayName, Networks } from '../../helpers/networks';
 
 interface Props extends HTMLAttributes<HTMLImageElement> {
-  chainId: NetworkIconType;
+  network: Networks;
 }
 
-export const NetworkIcon: FC<Props> = ({ chainId, ...props }) => {
-  const iconSrc = useGetNetworkIcon(chainId);
+export const NetworkIcon: FC<Props> = ({ network, ...props }) => {
+  const iconSrc = useGetNetworkIcon(network);
 
-  if (iconSrc) return <img src={iconSrc} alt={chainId} {...props} />;
+  if (iconSrc) return <img src={iconSrc} alt={getNetworkDisplayName(network)} {...props} />;
 
   return <></>;
 };
diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
@@ -1,23 +1,10 @@
-import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import { NetworkIcon } from '../NetworkIcon';
-import { NetworkIconType } from '../../hooks/useGetNetworkIcon';
-import { Networks, useNetwork } from '../../contexts/network';
 import { useState, useRef, useEffect } from 'preact/hooks';
+import { motion, AnimatePresence } from 'framer-motion';
 
-const NETWORK_DISPLAY_NAMES: Record<Networks, string> = {
-  [Networks.AssetHub]: 'Polkadot AssetHub',
-  [Networks.Polygon]: 'Polygon',
-  [Networks.Ethereum]: 'Ethereum',
-  [Networks.BSC]: 'BNB Smart Chain',
-  [Networks.Arbitrum]: 'Arbitrum One',
-  [Networks.Base]: 'Base',
-  [Networks.Avalanche]: 'Avalanche',
-};
-
-function networkToDisplayName(network: Networks): string {
-  return NETWORK_DISPLAY_NAMES[network] ?? network;
-}
+import { Networks, getNetworkDisplayName, getNetworkId } from '../../helpers/networks';
+import { useNetwork } from '../../contexts/network';
+import { NetworkIcon } from '../NetworkIcon';
 
 interface NetworkButtonProps {
   selectedNetwork: Networks;
@@ -36,8 +23,8 @@ const NetworkButton = ({ selectedNetwork, isOpen, onClick, disabled }: NetworkBu
     whileTap={{ scale: disabled ? 1 : 0.98 }}
     disabled={disabled}
   >
-    <NetworkIcon chainId={selectedNetwork} className={`w-5 h-5 ${disabled ? 'opacity-50' : ''}`} />
-    <span className={`hidden sm:block ${disabled ? 'opacity-50' : ''}`}>{networkToDisplayName(selectedNetwork)}</span>
+    <NetworkIcon network={selectedNetwork} className={`w-5 h-5 ${disabled ? 'opacity-50' : ''}`} />
+    <span className={`hidden sm:block ${disabled ? 'opacity-50' : ''}`}>{getNetworkDisplayName(selectedNetwork)}</span>
     <motion.div
       animate={{ rotate: isOpen ? 180 : 0 }}
       transition={{ duration: 0.2 }}
@@ -50,7 +37,7 @@ const NetworkButton = ({ selectedNetwork, isOpen, onClick, disabled }: NetworkBu
 
 interface NetworkDropdownProps {
   isOpen: boolean;
-  onNetworkSelect: (networkId: NetworkIconType) => void;
+  onNetworkSelect: (network: Networks) => void;
   disabled?: boolean;
 }
 
@@ -65,16 +52,19 @@ const NetworkDropdown = ({ isOpen, onNetworkSelect, disabled }: NetworkDropdownP
         className="absolute z-50 w-48 p-2 mt-2 shadow-lg bg-base-100 rounded-box whitespace-nowrap"
         layout
       >
-        {Object.values(Networks).map((networkId) => (
-          <button
-            key={networkId}
-            onClick={() => onNetworkSelect(networkId)}
-            className="flex items-center w-full gap-2 p-2 rounded-lg hover:bg-base-200"
-          >
-            <NetworkIcon chainId={networkId} className="w-5 h-5" />
-            <span>{networkToDisplayName(networkId)}</span>
-          </button>
-        ))}
+        {Object.values(Networks).map((network) => {
+          const networkId = getNetworkId(network);
+          return (
+            <button
+              key={networkId}
+              onClick={() => onNetworkSelect(network)}
+              className="flex items-center w-full gap-2 p-2 rounded-lg hover:bg-base-200"
+            >
+              <NetworkIcon network={network} className="w-5 h-5" />
+              <span>{getNetworkDisplayName(network)}</span>
+            </button>
+          );
+        })}
       </motion.div>
     )}
   </AnimatePresence>
@@ -100,8 +90,8 @@ export const NetworkSelector = ({ disabled }: { disabled?: boolean }) => {
 
   useClickOutside(dropdownRef, () => setIsOpen(false));
 
-  const handleNetworkSelect = (networkId: NetworkIconType) => {
-    setSelectedNetwork(networkId);
+  const handleNetworkSelect = (network: Networks) => {
+    setSelectedNetwork(network);
     setIsOpen(false);
   };
 

diff --git a/src/components/SigningBox/index.tsx b/src/components/SigningBox/index.tsx
@@ -3,7 +3,8 @@ import { FC } from 'preact/compat';
 import accountBalanceWalletIcon from '../../assets/account-balance-wallet.svg';
 
 import { SigningPhase } from '../../hooks/offramp/useMainProcess';
-import { isNetworkEVM, Networks, useNetwork } from '../../contexts/network';
+import { isNetworkEVM, Networks } from '../../helpers/networks';
+import { useNetwork } from '../../contexts/network';
 import { Spinner } from '../Spinner';
 
 type ProgressStep = {

diff --git a/src/components/buttons/ConnectWalletButton/index.tsx b/src/components/buttons/ConnectWalletButton/index.tsx
@@ -1,13 +1,14 @@
-import { isNetworkEVM, useNetwork } from '../../../contexts/network';
+import { isNetworkEVM } from '../../../helpers/networks';
+import { useNetwork } from '../../../contexts/network';
 import { EVMWalletButton } from '../EVMWalletButton';
 import { PolkadotWalletButton } from '../PolkadotWalletButton';
 
 export const ConnectWalletButton = ({ customStyles, hideIcon }: { customStyles?: string; hideIcon?: boolean }) => {
   const { selectedNetwork } = useNetwork();
 
-  if (!isNetworkEVM(selectedNetwork)) {
-    return <PolkadotWalletButton customStyles={customStyles} hideIcon={hideIcon} />;
+  if (isNetworkEVM(selectedNetwork)) {
+    return <EVMWalletButton customStyles={customStyles} hideIcon={hideIcon} />;
   }
 
-  return <EVMWalletButton customStyles={customStyles} hideIcon={hideIcon} />;
+  return <PolkadotWalletButton customStyles={customStyles} hideIcon={hideIcon} />;
 };