SOV-5058: ERC-20 bridge

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/3_organisms/ERC20BridgeDialog/ERC20BridgeDialog.tsx

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  AddressBadge,
+  Button,
+  ButtonStyle,
+  Dialog,
+  DialogSize,
+  Heading,
+  Paragraph,
+  ParagraphSize,
+  Tabs,
+  VerticalTabs,
+} from '@sovryn/ui';
+
+import { MobileCloseButton } from '../../1_atoms/MobileCloseButton/MobileCloseButton';
+import { useAccount } from '../../../hooks/useAccount';
+import { useIsMobile } from '../../../hooks/useIsMobile';
+import { translations } from '../../../locales/i18n';
+import { useChainDetails } from '../RuneBridgeDialog/hooks/useChainDetails';
+import { ReceiveFlow } from './components/ReceiveFlow/ReceiveFlow';
+import { SendFlow } from './components/SendFlow/SendFlow';
+import { ACTIVE_CLASSNAME } from './constants';
+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 { supported: isChainSupported, chainName } = useChainDetails();
+  const { isMobile } = useIsMobile();
+
+  useEffect(() => {
+    setIndex(step);
+  }, [step]);
+
+  const items = useMemo(() => {
+    if (!isChainSupported) {
+      return [
+        {
+          label: '',
+          infoText: '',
+          content: (
+            <div className="mt-0 md:mt-12">
+              <Paragraph
+                size={ParagraphSize.base}
+                children={`${chainName} is currently not supported by the ERC20 Bridge.`}
+              />
+              <MobileCloseButton onClick={onClose} />
+            </div>
+          ),
+          activeClassName: ACTIVE_CLASSNAME,
+        },
+      ];
+    }
+    return [
+      {
+        label: t(translation.tabs.receiveLabel),
+        infoText: t(translation.tabs.receiveInfoText),
+        content: (
+          <>
+            <ReceiveFlow onClose={onClose} />
+            <MobileCloseButton onClick={onClose} />
+          </>
+        ),
+        activeClassName: ACTIVE_CLASSNAME,
+        dataAttribute: 'erc20-bridge-receive',
+      },
+      {
+        label: t(translation.tabs.sendLabel),
+        infoText: t(translation.tabs.sendInfoText),
+        content: (
+          <SendFlowContextProvider>
+            <SendFlow onClose={onClose} />
+            <MobileCloseButton onClick={onClose} />
+          </SendFlowContextProvider>
+        ),
+        activeClassName: ACTIVE_CLASSNAME,
+        dataAttribute: 'erc20-bridge-send',
+      },
+    ];
+  }, [onClose, chainName, isChainSupported]);
+
+  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}
+    >
+      <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] block pt-0 relative"
+        headerClassName="pb-0 pt-5"
+        footerClassName="absolute bottom-5 left-5"
+        contentClassName="px-10 pb-10 pt-6"
+        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-6">{t(translation.title)}</Heading>
+          </>
+        )}
+        footer={() => (
+          <Button
+            text={t(translations.common.buttons.close)}
+            onClick={onClose}
+            style={ButtonStyle.ghost}
+            dataAttribute="erc20-bridge-close"
+          />
+        )}
+      />
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,52 @@
+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-4 mb-12">
+        <li className="mb-4">
+          {t(translations.erc20Bridge.instructions['1'])}
+        </li>
+        <li className="mb-4">
+          {t(translations.erc20Bridge.instructions['2'])}
+        </li>
+        <li className="mb-4">
+          {t(translations.erc20Bridge.instructions['3'])}
+        </li>
+        <li className="mb-4">
+          {t(translations.erc20Bridge.instructions['4'])}
+        </li>
+        <li className="mb-4">
+          <Trans
+            i18nKey={t(translations.erc20Bridge.instructions['5'])}
+            tOptions={{ hours: 1.5 }}
+            components={[
+              <Link
+                text={t(
+                  translations.erc20Bridge.instructions.createSupportTicketCta,
+                )}
+                href={HELPDESK_LINK}
+              />,
+            ]}
+          />
+        </li>
+      </ul>
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+
+type ReceiveFlowProps = {
+  onClose: () => void;
+};
+
+export const ReceiveFlow: React.FC<ReceiveFlowProps> = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Paragraph size={ParagraphSize.base}>
+        Placeholder for ERC20 Bridge Receive Flow
+      </Paragraph>
+      {/* Add your receive flow implementation here */}
+    </div>
+  );
+};

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

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+
+import { GoBackButton } from '../../../../1_atoms/GoBackButton/GoBackButton';
+import { Stepper } from '../../../../1_atoms/Stepper/Stepper';
+import { SendFlowStep, useSendFlowContext } from '../../contexts/sendflow';
+import { InitialScreen } from './components/InitialScreen';
+import { MainScreen } from './components/MainScreen';
+
+type SendFlowProps = {
+  onClose: () => void;
+};
+
+const allowedStepsToGoBackFrom = [
+  SendFlowStep.MAIN,
+  SendFlowStep.AMOUNT,
+  SendFlowStep.REVIEW,
+];
+
+const getBackStep = (step: SendFlowStep) => {
+  switch (step) {
+    case SendFlowStep.MAIN:
+      return SendFlowStep.INITIAL;
+    case SendFlowStep.AMOUNT:
+      return SendFlowStep.MAIN;
+    case SendFlowStep.REVIEW:
+      return SendFlowStep.AMOUNT;
+    default:
+      return SendFlowStep.AMOUNT;
+  }
+};
+
+export const SendFlow: React.FC<SendFlowProps> = () => {
+  const { set, step } = useSendFlowContext();
+  const onBackClick = useCallback(() => {
+    set(prevState => ({ ...prevState, step: getBackStep(step) }));
+  }, [set, step]);
+
+  return (
+    <>
+      {allowedStepsToGoBackFrom.includes(step) && (
+        <GoBackButton onClick={onBackClick} />
+      )}
+
+      {step !== SendFlowStep.INITIAL && (
+        <Stepper className="mt-6" steps={4} activeStep={step} />
+      )}
+
+      <div className="mt-0 md:mt-20">
+        {step === SendFlowStep.INITIAL && <InitialScreen />}
+        {step === SendFlowStep.MAIN && <MainScreen />}
+      </div>
+    </>
+  );
+};

apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/SendFlow/components/InitialScreen.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useContext } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, ButtonStyle, ErrorBadge, ErrorLevel } from '@sovryn/ui';
+
+import { useAccount } from '../../../../../../hooks/useAccount';
+import { translations } from '../../../../../../locales/i18n';
+import { SendFlowContext, SendFlowStep } from '../../../contexts/sendflow';
+import { Instructions } from '../../Instructions';
+
+export const InitialScreen: React.FC = () => {
+  const { account } = useAccount();
+  const { set } = useContext(SendFlowContext);
+  const erc20BridgeLocked = false;
+  const onContinueClick = useCallback(
+    () => set(prevState => ({ ...prevState, step: SendFlowStep.MAIN })),
+    [set],
+  );
+
+  return (
+    <div>
+      <Instructions />
+
+      {erc20BridgeLocked ? (
+        <ErrorBadge
+          level={ErrorLevel.Warning}
+          message={t(translations.maintenanceMode.erc20Bridge)}
+        />
+      ) : (
+        <Button
+          disabled={!account}
+          onClick={onContinueClick}
+          text={t(translations.common.buttons.continue)}
+          className="w-full"
+          style={ButtonStyle.secondary}
+          dataAttribute="funding-send-instructions-confirm"
+        />
+      )}
+    </div>
+  );
+};