SOV-5058: ERC-20 bridge

apps/frontend/src/app/1_atoms/GoBackButton/GoBackButton.tsx

@@ -4,10 +4,18 @@ import { Icon, IconNames } from '@sovryn/ui';
 
 type GoBackButtonProps = {
   onClick: () => void;
+  disabled?: boolean;
 };
 
-export const GoBackButton: React.FC<GoBackButtonProps> = ({ onClick }) => (
-  <button onClick={onClick} className="mb-12 md:mb-0">
+export const GoBackButton: React.FC<GoBackButtonProps> = ({
+  onClick,
+  disabled,
+}) => (
+  <button
+    onClick={onClick}
+    disabled={disabled}
+    className="mb-12 md:mb-0 disabled:opacity-60"
+  >
     <Icon icon={IconNames.ARROW_LEFT} className="w-3 h-3" />
   </button>
 );

apps/frontend/src/app/1_atoms/Stepper/Stepper.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+export interface StepperProps {
+  steps: number;
+  activeStep: number;
+  className?: string;
+}
+
+export const Stepper: React.FC<StepperProps> = ({
+  steps,
+  activeStep,
+  className,
+}) => (
+  <div className={classNames('flex items-center gap-2 w-full', className)}>
+    {Array.from({ length: steps }, (_, index) => (
+      <div
+        className={classNames('h-1 flex-1 rounded-full transition-colors', {
+          'bg-primary-20': index < activeStep,
+          'bg-gray-40': index >= activeStep,
+        })}
+        key={index}
+      />
+    ))}
+  </div>
+);

apps/frontend/src/app/2_molecules/NetworkPicker/NetworkPicker.tsx

@@ -35,7 +35,7 @@ export const NetworkPicker: FC<NetworkPickerProps> = ({ className }) => {
       dropdownClassName="z-[10000000]"
     >
       <Menu>
-        {APP_CHAIN_LIST.map(item => (
+        {APP_CHAIN_LIST.filter(item => item.isVisible).map(item => (
           <MenuItem
             key={item.id}
             text={

apps/frontend/src/app/3_organisms/ERC20BridgeDialog/ERC20BridgeDialog.constants.ts

@@ -0,0 +1,5 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const ACTIVE_CLASSNAME = 'border-t-primary-30';
+
+export const queryClient = new QueryClient();

apps/frontend/src/app/3_organisms/ERC20BridgeDialog/ERC20BridgeDialog.tsx

@@ -0,0 +1,148 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  AddressBadge,
+  Button,
+  ButtonStyle,
+  Dialog,
+  DialogSize,
+  Heading,
+  Tabs,
+  VerticalTabs,
+} from '@sovryn/ui';
+
+import { RSK_CHAIN_ID } from '../../../config/chains';
+
+import { MobileCloseButton } from '../../1_atoms/MobileCloseButton/MobileCloseButton';
+import { useAccount } from '../../../hooks/useAccount';
+import { useChainStore } from '../../../hooks/useChainStore';
+import { useIsMobile } from '../../../hooks/useIsMobile';
+import { translations } from '../../../locales/i18n';
+import { ACTIVE_CLASSNAME, queryClient } from './ERC20BridgeDialog.constants';
+import { ReceiveFlow } from './components/ReceiveFlow/ReceiveFlow';
+import { SendFlow } from './components/SendFlow/SendFlow';
+import { ReceiveFlowContextProvider } from './contextproviders/ReceiveFlowContext';
+import { SendFlowContextProvider } from './contextproviders/SendFlowContext';
+
+const translation = translations.erc20Bridge.mainScreen;
+
+type ERC20BridgeDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  step?: number;
+};
+
+export const ERC20BridgeDialog: React.FC<ERC20BridgeDialogProps> = ({
+  isOpen,
+  onClose,
+  step = 0,
+}) => {
+  const [index, setIndex] = useState(step);
+  const { account } = useAccount();
+  const { isMobile } = useIsMobile();
+  const { currentChainId, setCurrentChainId } = useChainStore();
+  const isWrongChain = RSK_CHAIN_ID !== currentChainId;
+
+  const handleClose = useCallback(() => {
+    if (isWrongChain) {
+      setCurrentChainId(RSK_CHAIN_ID);
+    }
+    onClose();
+  }, [onClose, isWrongChain, setCurrentChainId]);
+
+  useEffect(() => {
+    setIndex(step);
+  }, [step]);
+
+  const items = useMemo(() => {
+    return [
+      {
+        label: t(translation.tabs.receiveLabel),
+        infoText: t(translation.tabs.receiveInfoText),
+        content: (
+          <ReceiveFlowContextProvider>
+            <ReceiveFlow onClose={handleClose} />
+            <MobileCloseButton onClick={handleClose} />
+          </ReceiveFlowContextProvider>
+        ),
+        activeClassName: ACTIVE_CLASSNAME,
+        dataAttribute: 'erc20-bridge-receive',
+      },
+      {
+        label: t(translation.tabs.sendLabel),
+        infoText: t(translation.tabs.sendInfoText),
+        content: (
+          <SendFlowContextProvider>
+            <SendFlow onClose={handleClose} />
+            <MobileCloseButton onClick={handleClose} />
+          </SendFlowContextProvider>
+        ),
+        activeClassName: ACTIVE_CLASSNAME,
+        dataAttribute: 'erc20-bridge-send',
+      },
+    ];
+  }, [handleClose]);
+
+  const onChangeIndex = useCallback((index: number | null) => {
+    index !== null ? setIndex(index) : setIndex(0);
+  }, []);
+
+  const dialogSize = useMemo(
+    () => (isMobile ? DialogSize.md : DialogSize.xl3),
+    [isMobile],
+  );
+
+  useEffect(() => {
+    setIndex(0);
+  }, [account]);
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      width={dialogSize}
+      className="p-4 flex items-center sm:p-0"
+      disableFocusTrap
+      closeOnEscape={false}
+    >
+      <QueryClientProvider client={queryClient}>
+        <Tabs
+          index={index}
+          items={items}
+          onChange={onChangeIndex}
+          className="w-full md:hidden"
+          contentClassName="pt-9 px-6 pb-7 h-full"
+        />
+        <VerticalTabs
+          items={items}
+          onChange={onChangeIndex}
+          selectedIndex={index}
+          tabsClassName="min-h-[42rem] h-auto self-stretch block pt-0 relative flex-1"
+          headerClassName="pb-0 pt-5"
+          footerClassName="absolute bottom-5 left-5"
+          contentClassName="px-9 pb-10 pt-6 flex-1"
+          className="hidden md:flex"
+          header={() => (
+            <>
+              <div className="rounded bg-gray-60 px-2 py-1 w-fit mb-9">
+                <AddressBadge address={account} />
+              </div>
+              <Heading className="mb-20">{t(translation.title)}</Heading>
+            </>
+          )}
+          footer={() => (
+            <Button
+              text={t(translations.common.buttons.close)}
+              onClick={handleClose}
+              style={ButtonStyle.ghost}
+              dataAttribute="erc20-bridge-close"
+            />
+          )}
+        />
+      </QueryClientProvider>
+    </Dialog>
+  );
+};

apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/Instructions.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { t } from 'i18next';
+import { Trans } from 'react-i18next';
+
+import { Heading, HeadingType, Link } from '@sovryn/ui';
+
+import { HELPDESK_LINK } from '../../../../constants/links';
+import { translations } from '../../../../locales/i18n';
+
+type InstructionsProps = {
+  isReceive?: boolean;
+};
+
+export const Instructions: React.FC<InstructionsProps> = () => {
+  return (
+    <>
+      <Heading type={HeadingType.h2} className="font-medium leading-[1.375rem]">
+        {t(translations.erc20Bridge.instructions.title)}:
+      </Heading>
+
+      <ul className="list-disc list-inside text-xs leading-5 font-medium text-gray-30 mt-6 mb-12">
+        <li className="mb-2">
+          {t(translations.erc20Bridge.instructions['1'])}
+        </li>
+        <li className="mb-2">
+          {t(translations.erc20Bridge.instructions['2'])}
+        </li>
+        <li className="mb-2">
+          {t(translations.erc20Bridge.instructions['3'])}
+        </li>
+        <li className="mb-2">
+          {t(translations.erc20Bridge.instructions['4'])}
+        </li>
+        <li className="mb-2">
+          <Trans
+            i18nKey={t(translations.erc20Bridge.instructions['5'])}
+            tOptions={{ hours: 1.5 }}
+            components={[
+              <Link
+                text={t(
+                  translations.erc20Bridge.instructions.createSupportTicketCta,
+                )}
+                className="md:ml-4"
+                href={HELPDESK_LINK}
+              />,
+            ]}
+          />
+        </li>
+      </ul>
+    </>
+  );
+};

apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/Limits.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { ChainId } from '@sovryn/ethers-provider';
+import { Accordion, SimpleTable, SimpleTableRow } from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../2_molecules/AmountRenderer/AmountRenderer';
+import { getTokenDisplayName } from '../../../../constants/tokens';
+import { translations } from '../../../../locales/i18n';
+import { useBridgeLimits } from '../hooks/useBridgeLimits';
+
+const translation = translations.erc20Bridge.limits;
+
+type LimitsProps = {
+  sourceChain?: ChainId;
+  targetChain?: ChainId;
+  asset?: string;
+  className?: string;
+};
+
+export const Limits: React.FC<LimitsProps> = ({
+  sourceChain,
+  targetChain,
+  asset,
+  className,
+}) => {
+  const [open, setOpen] = useState(false);
+  const { data: limits } = useBridgeLimits(sourceChain, targetChain, asset);
+  const onClick = useCallback((toOpen: boolean) => setOpen(toOpen), []);
+
+  if (!asset) {
+    return null;
+  }
+
+  return (
+    <>
+      <Accordion
+        label={t(translation.title)}
+        disabled={!asset || !sourceChain || !targetChain}
+        children={
+          limits ? (
+            <SimpleTable border>
+              <SimpleTableRow
+                label={t(translation.minimumAmount)}
+                value={
+                  <AmountRenderer
+                    value={limits.minPerToken}
+                    decimals={0}
+                    suffix={getTokenDisplayName(asset)}
+                  />
+                }
+              />
+              <SimpleTableRow
+                label={t(translation.maximumAmount)}
+                value={
+                  <AmountRenderer
+                    value={limits.maxTokensAllowed}
+                    decimals={0}
+                    suffix={getTokenDisplayName(asset)}
+                  />
+                }
+              />
+              <SimpleTableRow
+                label={t(translation.dailyLimit)}
+                value={
+                  <AmountRenderer
+                    value={limits.dailyLimit}
+                    decimals={0}
+                    suffix={getTokenDisplayName(asset)}
+                  />
+                }
+              />
+              <SimpleTableRow
+                label={t(translation.dailyLimitSpent)}
+                value={
+                  <AmountRenderer
+                    value={limits.spentToday}
+                    decimals={0}
+                    suffix={getTokenDisplayName(asset)}
+                  />
+                }
+              />
+              <SimpleTableRow
+                label={t(translation.fee)}
+                value={
+                  <AmountRenderer
+                    value={limits.feePerToken}
+                    decimals={0}
+                    suffix={getTokenDisplayName(asset)}
+                  />
+                }
+              />
+            </SimpleTable>
+          ) : (
+            <span className="h-10 w-full block bg-gray-50 rounded animate-pulse" />
+          )
+        }
+        className={className}
+        open={open}
+        onClick={onClick}
+        labelClassName="font-medium"
+      />
+    </>
+  );
+};