Stake drawers pre-changes

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

@@ -21,7 +21,7 @@ import { ReceivingAddress } from './receivingAddress'
 import { SubmitWithTwoWallets } from './submitWithTwoWallets'
 
 const SetMaxBtcBalance = dynamic(
-  () => import('./setMaxBalance').then(mod => mod.SetMaxBtcBalance),
+  () => import('components/setMaxBalance').then(mod => mod.SetMaxBtcBalance),
   { ssr: false },
 )
 
@@ -138,9 +138,9 @@ export const BtcDeposit = function ({ state }: BtcDepositProps) {
             })}
             setMaxBalanceButton={
               <SetMaxBtcBalance
-                fromToken={fromToken}
                 isRunningOperation={isDepositing}
                 onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
+                token={fromToken}
               />
             }
             tunnelState={state}

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

@@ -28,7 +28,7 @@ import { EvmSummary } from './evmSummary'
 import { FormContent, TunnelForm } from './form'
 
 const SetMaxEvmBalance = dynamic(
-  () => import('./setMaxBalance').then(mod => mod.SetMaxEvmBalance),
+  () => import('components/setMaxBalance').then(mod => mod.SetMaxEvmBalance),
   { ssr: false },
 )
 
@@ -285,10 +285,10 @@ export const EvmDeposit = function ({ state }: EvmDepositProps) {
             isRunningOperation={isRunningOperation}
             setMaxBalanceButton={
               <SetMaxEvmBalance
-                fromToken={fromToken}
                 gas={depositGasFees}
                 isRunningOperation={isRunningOperation}
                 onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
+                token={fromToken}
               />
             }
             tokenApproval={

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

@@ -1,5 +1,6 @@
 import { Card } from 'components/card'
 import { SwitchToNetworkToast } from 'components/switchToNetworkToast'
+import { TokenInput } from 'components/tokenInput'
 import { useCustomTokenAddress } from 'hooks/useCustomTokenAddress'
 import { useHemi } from 'hooks/useHemi'
 import dynamic from 'next/dynamic'
@@ -11,7 +12,6 @@ import { useToastIfNotConnectedTo } from '../_hooks/useToastIfNotConnectedTo'
 import { useTunnelState } from '../_hooks/useTunnelState'
 
 import { NetworkSelectors } from './networkSelectors'
-import { TokenInput } from './tokenInput'
 
 const CustomTokenDrawer = dynamic(() =>
   import('components/customTokenDrawer').then(mod => mod.CustomTokenDrawer),
@@ -84,7 +84,7 @@ export const FormContent = function ({
         updateToNetwork={updateToNetwork}
       />
       <TokenInput
-        fromNetworkId={fromNetworkId}
+        chainId={fromNetworkId}
         isRunningOperation={isRunningOperation}
         label={t('form.send')}
         maxBalanceButton={setMaxBalanceButton}

webapp/app/[locale]/tunnel/_components/reviewOperation/drawerCallToAction.tsx

@@ -1,8 +1,7 @@
+import { SubmitWhenConnectedToChain } from 'components/submitWhenConnectedToChain'
 import { FormEvent, ReactNode } from 'react'
 import { RemoteChain } from 'types/chain'
 
-import { SubmitWhenConnectedToChain } from '../submitWhenConnectedToChain'
-
 type Props = {
   expectedChainId: RemoteChain['id']
   onSubmit: (e: FormEvent) => void

webapp/app/[locale]/tunnel/_components/reviewOperation/operation.tsx

@@ -1,3 +1,4 @@
+import { DrawerSection } from 'components/drawer'
 import { ComponentProps, ReactNode } from 'react'
 
 import { Amount } from './amount'
@@ -22,11 +23,11 @@ export const Operation = ({
   title,
   token,
 }: Props) => (
-  <div className="flex h-full flex-col">
-    <div className="mb-6 px-4">
+  <>
+    <div className="mb-3">
       <Header onClose={onClose} subtitle={subtitle} title={title} />
     </div>
-    <div className="border-y border-solid border-neutral-300/55 bg-neutral-50 p-6">
+    <DrawerSection>
       <Amount token={token} value={amount} />
       <div
         className="mt-4 flex flex-col gap-y-8"
@@ -39,7 +40,7 @@ export const Operation = ({
           <Step key={index} position={index + 1} {...stepProps} />
         ))}
       </div>
-    </div>
-    {!!callToAction && <div className="h-full px-4 py-6">{callToAction}</div>}
-  </div>
+    </DrawerSection>
+    {!!callToAction && <div className="h-full py-3">{callToAction}</div>}
+  </>
 )

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

@@ -52,7 +52,7 @@ const Operation = function () {
 
   return (
     <Drawer onClose={onClose}>
-      <div className="h-[80dvh] w-full overflow-y-auto bg-white py-6 md:h-full md:w-[450px]">
+      <div className="drawer-content h-[80dvh] md:h-full">
         {isDeposit(tunnelOperation) ? (
           <ViewDeposit deposit={tunnelOperation} onClose={onClose} />
         ) : (

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

@@ -43,7 +43,7 @@ import { SubmitWithTwoWallets } from './submitWithTwoWallets'
 const minBitcoinWithdraw = '0.01'
 
 const SetMaxEvmBalance = dynamic(
-  () => import('./setMaxBalance').then(mod => mod.SetMaxEvmBalance),
+  () => import('components/setMaxBalance').then(mod => mod.SetMaxEvmBalance),
   { ssr: false },
 )
 
@@ -177,10 +177,10 @@ const BtcWithdraw = function ({ state }: BtcWithdrawProps) {
           })}
           setMaxBalanceButton={
             <SetMaxEvmBalance
-              fromToken={fromToken}
               gas={estimatedFees}
               isRunningOperation={isWithdrawing}
               onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
+              token={fromToken}
             />
           }
           tunnelState={state}
@@ -340,10 +340,10 @@ const EvmWithdraw = function ({ state }: EvmWithdrawProps) {
             isRunningOperation={isWithdrawing}
             setMaxBalanceButton={
               <SetMaxEvmBalance
-                fromToken={fromToken}
                 gas={withdrawGasFees}
                 isRunningOperation={isWithdrawing}
                 onSetMaxBalance={maxBalance => updateFromInput(maxBalance)}
+                token={fromToken}
               />
             }
             tunnelState={{

webapp/components/connectWallets/connectWalletsDrawer.tsx

@@ -40,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">
+      <div className="drawer-content max-md:pb-18 h-full md:max-w-md">
         <div className="flex h-full flex-col gap-y-3">
           <div className="flex items-center justify-between">
             <DrawerTitle>{t('common.connect-wallets')}</DrawerTitle>

webapp/components/customTokenDrawer/addPairToHemi.tsx

@@ -17,19 +17,21 @@ export const AddPairToHemi = function () {
   }
 
   return (
-    <WarningBox
-      heading={t('add-this-pair')}
-      onClose={() => setHideWarning(true)}
-      subheading={t.rich('make-a-request-to-add', {
-        link: (chunk: string) => (
-          <ExternalLink
-            className="text-orange-500 hover:text-orange-700"
-            href="https://github.com/hemilabs/token-list/issues/new"
-          >
-            {chunk}
-          </ExternalLink>
-        ),
-      })}
-    />
+    <div>
+      <WarningBox
+        heading={t('add-this-pair')}
+        onClose={() => setHideWarning(true)}
+        subheading={t.rich('make-a-request-to-add', {
+          link: (chunk: string) => (
+            <ExternalLink
+              className="text-orange-500 hover:text-orange-700"
+              href="https://github.com/hemilabs/token-list/issues/new"
+            >
+              {chunk}
+            </ExternalLink>
+          ),
+        })}
+      />
+    </div>
   )
 }

webapp/components/customTokenDrawer/index.tsx

@@ -168,7 +168,7 @@ export const CustomTokenDrawer = function ({
   return (
     <Drawer onClose={closeDrawer}>
       <form
-        className="flex h-[80dvh] w-full flex-col gap-y-3 overflow-y-auto bg-white px-4 py-6 md:h-full md:w-[450px] md:max-w-md md:px-6"
+        className="drawer-content h-[80dvh] md:h-full"
         onSubmit={handleSubmit}
       >
         <div className="flex items-center justify-between">

webapp/components/customTokenDrawer/tokenPreview.tsx

@@ -10,7 +10,7 @@ type Props = { isLoading: boolean; token: Token }
 export const TokenPreview = function ({ isLoading, token }: Props) {
   const t = useTranslations('token-custom-drawer')
   return (
-    <div className="relative -mx-4 my-1 border-b border-t border-dashed border-neutral-300/55 bg-neutral-50 md:-mx-6">
+    <div className="skip-parent-padding-x relative my-1 border-b border-t border-dashed border-neutral-300/55 bg-neutral-50">
       <div className="absolute bottom-0 left-0 right-0 top-0">
         <Image alt="Token Preview background" fill src={background} />
       </div>

webapp/components/customTunnelsThroughPartner/index.tsx

@@ -33,7 +33,7 @@ export const CustomTunnelsThroughPartner = function ({
 
   return (
     <Drawer onClose={onClose}>
-      <div className="flex w-full flex-col gap-y-3 overflow-y-auto bg-white px-4 pb-16 pt-6 md:h-full md:w-[450px] md:max-w-md md:px-6 md:pb-6">
+      <div className="drawer-content max-md:pb-16 md:h-full">
         <div className="flex items-center justify-between">
           <DrawerTitle>
             {t(`${operation}.heading`, { symbol: fromToken.symbol })}
@@ -47,14 +47,18 @@ export const CustomTunnelsThroughPartner = function ({
             {t(`${operation}.subheading`, { symbol: fromToken.symbol })}
           </DrawerParagraph>
         </div>
-        <Stargate fromToken={fromToken} toToken={toToken} />
+        <div>
+          <Stargate fromToken={fromToken} toToken={toToken} />
+        </div>
         <p className="mb-3 text-sm font-medium text-zinc-500">
           {t('description')}
         </p>
-        <WarningBox
-          heading={t('use-at-your-own-risk')}
-          subheading={t('hemi-bears-no-responsibility')}
-        />
+        <div>
+          <WarningBox
+            heading={t('use-at-your-own-risk')}
+            subheading={t('hemi-bears-no-responsibility')}
+          />
+        </div>
       </div>
     </Drawer>
   )

webapp/components/drawer/drawer.css

@@ -0,0 +1,11 @@
+@layer components {
+  .drawer-content {
+    @apply flex w-full flex-col gap-y-3 overflow-y-auto bg-white py-6 md:w-[450px];
+  }
+
+  /* Use the .skip-parent-padding-x for elements that should not have the px-* applied. For example, components
+  that must stretch with some background along the entire drawer, and should not have the drawer's padding. */
+  .drawer-content > *:not(.skip-parent-padding-x) {
+    @apply px-4 md:px-6;
+  }
+}

webapp/components/drawer.tsx → webapp/components/drawer/index.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
 import { useOnClickOutside } from 'ui-common/hooks/useOnClickOutside'
 import { useOnKeyUp } from 'ui-common/hooks/useOnKeyUp'
 
-import { Overlay } from './overlay'
+import { Overlay } from '../overlay'
 
 type Props = {
   children: React.ReactNode
@@ -46,3 +46,9 @@ export const DrawerParagraph = ({ children }: { children: string }) => (
 export const DrawerTitle = ({ children }: { children: string }) => (
   <h2 className="text-2xl font-medium text-neutral-950">{children}</h2>
 )
+
+export const DrawerSection = ({ children }: { children: React.ReactNode }) => (
+  <div className="skip-parent-padding-x border-y border-solid border-neutral-300/55 bg-neutral-50 p-6">
+    {children}
+  </div>
+)

webapp/app/[locale]/tunnel/_components/setMaxBalance.tsx → webapp/components/setMaxBalance.tsx

@@ -31,33 +31,33 @@ const MaxButton = function ({
 }
 
 type Props<T extends Token = Token> = {
-  fromToken: T
+  token: T
   isRunningOperation: boolean
   onSetMaxBalance: (maxBalance: string) => void
 }
 
 export const SetMaxEvmBalance = function ({
-  fromToken,
+  token,
   gas,
   isRunningOperation,
   onSetMaxBalance,
 }: Props<EvmToken> & { gas: bigint }) {
   const {
     balance: walletNativeTokenBalance,
     isLoading: isLoadingNativeTokenBalance,
-  } = useNativeTokenBalance(fromToken.chainId)
+  } = useNativeTokenBalance(token.chainId)
 
   const { balance: walletTokenBalance } = useTokenBalance(
-    fromToken,
-    !isNativeToken(fromToken),
+    token,
+    !isNativeToken(token),
   )
 
   // gas is paid in native token. So we must deduct gas for native tokens, but not for erc20 tokens
-  const finalBalance = isNativeToken(fromToken)
+  const finalBalance = isNativeToken(token)
     ? walletNativeTokenBalance - gas
     : walletTokenBalance
 
-  const maxBalance = formatUnits(finalBalance, fromToken.decimals)
+  const maxBalance = formatUnits(finalBalance, token.decimals)
 
   const handleClick = () => onSetMaxBalance(maxBalance)
 
@@ -68,7 +68,7 @@ export const SetMaxEvmBalance = function ({
 }
 
 export const SetMaxBtcBalance = function ({
-  fromToken,
+  token,
   isRunningOperation,
   onSetMaxBalance,
 }: Props<BtcToken>) {
@@ -86,7 +86,7 @@ export const SetMaxBtcBalance = function ({
     btcBalance <= fees
 
   const handleClick = () =>
-    onSetMaxBalance(formatUnits(BigInt(btcBalance - fees), fromToken.decimals))
+    onSetMaxBalance(formatUnits(BigInt(btcBalance - fees), token.decimals))
 
   return <MaxButton disabled={disabled} onClick={handleClick} />
 }

webapp/app/[locale]/tunnel/_components/tokenInput.tsx → webapp/components/tokenInput.tsx

@@ -28,7 +28,7 @@ type Props = {
   token: Token
   value: string
 } & AllOrNone<{
-  fromNetworkId: RemoteChain['id']
+  chainId: RemoteChain['id']
   onSelectToken: (token: Token) => void
 }>
 
@@ -41,7 +41,7 @@ export const TokenInput = function ({
   value,
   ...props
 }: Props) {
-  const readOnly = !('fromNetworkId' in props)
+  const readOnly = !('chainId' in props)
 
   const t = useTranslations('tunnel-page')
   return (
@@ -79,7 +79,7 @@ export const TokenInput = function ({
             </div>
           ) : (
             <TokenSelector
-              chainId={props.fromNetworkId}
+              chainId={props.chainId}
               disabled={isRunningOperation}
               onSelectToken={props.onSelectToken}
               selectedToken={token}

webapp/components/tokenSelector/tokenList.tsx

@@ -96,7 +96,11 @@ const List = function ({
   }
 
   return (
-    <div className="h-[212px] w-full overflow-y-auto" ref={parentRef}>
+    <div
+      className="skip-parent-padding-x mx-auto h-[212px] w-[calc(100%-theme(spacing.4)*2)]
+      overflow-y-auto md:w-[calc(100%-theme(spacing.6)*2)]"
+      ref={parentRef}
+    >
       <ul
         className="relative w-full"
         style={{
@@ -158,7 +162,7 @@ export const TokenList = function ({
     .concat(customTokens.sort(bySymbol))
 
   const content = (
-    <div className="flex h-[357px] w-full flex-col gap-x-3 bg-white p-6 px-4 md:w-96 md:px-6">
+    <div className="drawer-content h-[357px] gap-x-3 gap-y-0 md:w-96">
       <div className="flex items-center justify-between">
         <h3 className="text-xl font-medium text-neutral-950">
           {t('select-token')}