Add Drawer for custom tunneling through partners

webapp/app/[locale]/tunnel/_components/evmDeposit.tsx

@@ -2,6 +2,10 @@
 
 import { useUmami } from 'app/analyticsEvents'
 import { Button } from 'components/button'
+import {
+  CustomTunnelsThroughPartner,
+  tunnelsThroughPartner,
+} from 'components/customTunnelsThroughPartner'
 import { useNativeTokenBalance, useTokenBalance } from 'hooks/useBalance'
 import { useChain } from 'hooks/useChain'
 import { useNetworkType } from 'hooks/useNetworkType'
@@ -85,6 +89,7 @@ export const EvmDeposit = function ({ state }: EvmDepositProps) {
 
   // use this state to toggle the Erc20 token approval
   const [extendedErc20Approval, setExtendedErc20Approval] = useState(false)
+  const [isPartnersDrawerOpen, setIsPartnersDrawerOpen] = useState(false)
 
   const t = useTranslations()
   const { track } = useUmami()
@@ -242,73 +247,97 @@ export const EvmDeposit = function ({ state }: EvmDepositProps) {
     symbol: fromChain?.nativeCurrency.symbol,
   }
 
-  return (
-    <TunnelForm
-      belowForm={
-        canDeposit ? (
-          <EvmSummary
-            gas={gas}
-            operationSymbol={fromToken.symbol}
-            total={totalDeposit}
-          />
-        ) : null
-      }
-      formContent={
-        <FormContent
+  const getSubmitButton = function () {
+    if (tunnelsThroughPartner(fromToken)) {
+      return (
+        <Button onClick={() => setIsPartnersDrawerOpen(true)} type="button">
+          {t('tunnel-page.tunnel-partners.tunnel-with-our-partners')}
+        </Button>
+      )
+    }
+    if (walletIsConnected(status)) {
+      return (
+        <SubmitEvmDeposit
+          canDeposit={canDeposit}
           isRunningOperation={isRunningOperation}
-          setMaxBalanceButton={
-            <SetMaxEvmBalance
-              fromToken={fromToken}
-              gas={depositGasFees}
-              isRunningOperation={isRunningOperation}
-              onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
+          needsApproval={needsApproval}
+          operationRunning={operationRunning}
+        />
+      )
+    }
+    return <ConnectEvmWallet />
+  }
+
+  return (
+    <>
+      <TunnelForm
+        belowForm={
+          canDeposit ? (
+            <EvmSummary
+              gas={gas}
+              operationSymbol={fromToken.symbol}
+              total={totalDeposit}
             />
-          }
-          tokenApproval={
-            operatesNativeToken ? null : (
-              <Erc20TokenApproval
-                checked={extendedErc20Approval}
-                disabled={!needsApproval || isRunningOperation}
-                onCheckedChange={() => setExtendedErc20Approval(prev => !prev)}
+          ) : null
+        }
+        formContent={
+          <FormContent
+            isRunningOperation={isRunningOperation}
+            setMaxBalanceButton={
+              <SetMaxEvmBalance
+                fromToken={fromToken}
+                gas={depositGasFees}
+                isRunningOperation={isRunningOperation}
+                onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
               />
-            )
-          }
-          tunnelState={{
-            ...state,
-            // patch these events to update the extendedErc20Approval state
-            toggleInput() {
-              // toToken becomes fromToken, so we must check that one
-              if (isNativeToken(state.toToken)) {
+            }
+            tokenApproval={
+              operatesNativeToken ? null : (
+                <Erc20TokenApproval
+                  checked={extendedErc20Approval}
+                  disabled={!needsApproval || isRunningOperation}
+                  onCheckedChange={() =>
+                    setExtendedErc20Approval(prev => !prev)
+                  }
+                />
+              )
+            }
+            tunnelState={{
+              ...state,
+              // patch these events to update the extendedErc20Approval state
+              toggleInput() {
+                // toToken becomes fromToken, so we must check that one
+                if (isNativeToken(state.toToken)) {
+                  setExtendedErc20Approval(false)
+                }
+                state.toggleInput()
+              },
+              updateFromNetwork(payload: number) {
                 setExtendedErc20Approval(false)
-              }
-              state.toggleInput()
-            },
-            updateFromNetwork(payload: number) {
-              setExtendedErc20Approval(false)
-              state.updateFromNetwork(payload)
-            },
-            updateFromToken(from, to) {
-              if (isNativeToken(from)) {
-                setExtendedErc20Approval(false)
-              }
-              state.updateFromToken(from, to)
-            },
-          }}
-        />
-      }
-      onSubmit={handleDeposit}
-      submitButton={
-        walletIsConnected(status) ? (
-          <SubmitEvmDeposit
-            canDeposit={canDeposit}
-            isRunningOperation={isRunningOperation}
-            needsApproval={needsApproval}
-            operationRunning={operationRunning}
+                state.updateFromNetwork(payload)
+              },
+              updateFromToken(from, to) {
+                if (isNativeToken(from)) {
+                  setExtendedErc20Approval(false)
+                }
+                if (tunnelsThroughPartner(from)) {
+                  setIsPartnersDrawerOpen(true)
+                }
+                state.updateFromToken(from, to)
+              },
+            }}
           />
-        ) : (
-          <ConnectEvmWallet />
-        )
-      }
-    />
+        }
+        onSubmit={handleDeposit}
+        submitButton={getSubmitButton()}
+      />
+      {isPartnersDrawerOpen && (
+        <CustomTunnelsThroughPartner
+          onClose={() => setIsPartnersDrawerOpen(false)}
+          operation="deposit"
+          token={fromToken}
+        />
+      )}
+    </>
   )
 }

webapp/app/[locale]/tunnel/_components/withdraw.tsx

@@ -1,5 +1,9 @@
 import { Big } from 'big.js'
 import { Button } from 'components/button'
+import {
+  CustomTunnelsThroughPartner,
+  tunnelsThroughPartner,
+} from 'components/customTunnelsThroughPartner'
 import { useAccounts } from 'hooks/useAccounts'
 import { useNativeTokenBalance, useTokenBalance } from 'hooks/useBalance'
 import { useWithdrawBitcoin } from 'hooks/useBtcTunnel'
@@ -254,6 +258,7 @@ type EvmWithdrawProps = {
 
 const EvmWithdraw = function ({ state }: EvmWithdrawProps) {
   const [isWithdrawing, setIsWithdrawing] = useState(false)
+  const [isPartnersDrawerOpen, setIsPartnersDrawerOpen] = useState(false)
 
   const t = useTranslations()
 
@@ -345,6 +350,30 @@ const EvmWithdraw = function ({ state }: EvmWithdrawProps) {
     symbol: fromChain?.nativeCurrency.symbol,
   }
 
+  const getSubmitButton = function () {
+    if (tunnelsThroughPartner(fromToken)) {
+      return (
+        <Button onClick={() => setIsPartnersDrawerOpen(true)} type="button">
+          {t('tunnel-page.tunnel-partners.tunnel-with-our-partners')}
+        </Button>
+      )
+    }
+
+    if (walletIsConnected(status)) {
+      return (
+        <Button disabled={!canWithdraw || isWithdrawing} type="submit">
+          {t(
+            `tunnel-page.submit-button.${
+              isWithdrawing ? 'withdrawing' : 'initiate-withdrawal'
+            }`,
+          )}
+        </Button>
+      )
+    }
+
+    return <ConnectEvmWallet />
+  }
+
   return (
     <>
       <TunnelForm
@@ -368,24 +397,27 @@ const EvmWithdraw = function ({ state }: EvmWithdrawProps) {
                 onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
               />
             }
-            tunnelState={state}
+            tunnelState={{
+              ...state,
+              updateFromToken(from, to) {
+                if (tunnelsThroughPartner(from)) {
+                  setIsPartnersDrawerOpen(true)
+                }
+                state.updateFromToken(from, to)
+              },
+            }}
           />
         }
         onSubmit={handleWithdraw}
-        submitButton={
-          walletIsConnected(status) ? (
-            <Button disabled={!canWithdraw || isWithdrawing} type="submit">
-              {t(
-                `tunnel-page.submit-button.${
-                  isWithdrawing ? 'withdrawing' : 'initiate-withdrawal'
-                }`,
-              )}
-            </Button>
-          ) : (
-            <ConnectEvmWallet />
-          )
-        }
+        submitButton={getSubmitButton()}
       />
+      {isPartnersDrawerOpen && (
+        <CustomTunnelsThroughPartner
+          onClose={() => setIsPartnersDrawerOpen(false)}
+          operation="withdraw"
+          token={fromToken}
+        />
+      )}
     </>
   )
 }

webapp/components/connectWallets/connectWalletsDrawer.tsx

@@ -4,18 +4,14 @@ import {
   useConnectModal,
 } from '@rainbow-me/rainbowkit'
 import { featureFlags } from 'app/featureFlags'
-import { Drawer, DrawerTitle } from 'components/drawer'
+import { Drawer, DrawerParagraph, DrawerTitle } from 'components/drawer'
 import { useNetworkType } from 'hooks/useNetworkType'
 import { useUmami } from 'hooks/useUmami'
 import { useTranslations } from 'next-intl'
 import { CloseIcon } from 'ui-common/components/closeIcon'
 
 import { BtcWallet, EvmWallet } from './wallets'
 
-const P = ({ text }: { text: string }) => (
-  <p className="text-sm font-medium text-neutral-500">{text}</p>
-)
-
 type Props = {
   closeDrawer: () => void
 }
@@ -44,7 +40,7 @@ export const ConnectWalletsDrawer = function ({ closeDrawer }: Props) {
 
   return (
     <Drawer onClose={onClose}>
-      <div className="pb-18 h-full bg-white px-4 pt-6 md:max-w-md md:p-6 md:px-6">
+      <div className="pb-18 h-full bg-white px-4 pt-6 md:max-w-md md:p-6">
         <div className="flex h-full flex-col gap-y-3">
           <div className="flex items-center justify-between">
             <DrawerTitle>{t('common.connect-wallets')}</DrawerTitle>
@@ -53,7 +49,9 @@ export const ConnectWalletsDrawer = function ({ closeDrawer }: Props) {
             </button>
           </div>
           {featureFlags.btcTunnelEnabled ? (
-            <P text={t('connect-wallets.description')} />
+            <DrawerParagraph>
+              {t('connect-wallets.description')}
+            </DrawerParagraph>
           ) : (
             // Prevent layout shift when text is not shown
             <div className="invisible min-w-[400px]"></div>
@@ -64,7 +62,9 @@ export const ConnectWalletsDrawer = function ({ closeDrawer }: Props) {
           {featureFlags.btcTunnelEnabled && (
             <>
               <BtcWallet />
-              <P text={t('connect-wallets.btc-wallet-requirement')} />
+              <DrawerParagraph>
+                {t('connect-wallets.btc-wallet-requirement')}
+              </DrawerParagraph>
             </>
           )}
         </div>

webapp/components/customTokenDrawer/index.tsx

@@ -2,7 +2,7 @@
 
 import { useQueryClient } from '@tanstack/react-query'
 import { Button } from 'components/button'
-import { Drawer, DrawerTitle } from 'components/drawer'
+import { Drawer, DrawerParagraph, DrawerTitle } from 'components/drawer'
 import { useChain } from 'hooks/useChain'
 import { useCustomTokenAddress } from 'hooks/useCustomTokenAddress'
 import { useL2Token } from 'hooks/useL2Token'
@@ -181,9 +181,7 @@ export const CustomTokenDrawer = function ({
             <CloseIcon className="[&>path]:hover:stroke-black" />
           </button>
         </div>
-        <p className="text-sm font-medium text-neutral-500">
-          {t('subheading')}
-        </p>
+        <DrawerParagraph>{t('subheading')}</DrawerParagraph>
         <TokenSection
           addressDisabled
           addressValidity={getL1AddressValidity(l1CustomToken)}

webapp/components/customTokenDrawer/tokenSection.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { DrawerParagraph } from 'components/drawer'
 import { SearchInput } from 'components/inputText'
 import { ShortVerticalLine } from 'components/verticalLines'
 import { useChain } from 'hooks/useChain'
@@ -49,9 +50,7 @@ export const TokenSection = function ({
 
   return (
     <>
-      <p className="text-sm font-medium text-neutral-500">
-        {t('layer-token-address', { layer })}
-      </p>
+      <DrawerParagraph>{t('layer-token-address', { layer })}</DrawerParagraph>
       <div>
         <div className="left-2.25 relative top-0.5">
           <ShortVerticalLine stroke="stroke-neutral-300/55" />