add bridge prompt

renegade-fi · Oct 22, 2024 · ec71894 · ec71894
1 parent b9c03e1
commit ec71894
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/components/dialogs/transfer/bridge-prompt-usdc.tsx b/components/dialogs/transfer/bridge-prompt-usdc.tsx
@@ -0,0 +1,19 @@
+import { Label } from "@/components/ui/label"
+
+import { cn } from "@/lib/utils"
+
+export function BridgePromptUSDC({ onClick }: { onClick: () => void }) {
+  return (
+    <div
+      className={cn(
+        "text-pretty border p-3 text-muted-foreground transition-colors hover:cursor-pointer hover:border-primary hover:text-primary",
+      )}
+      onClick={onClick}
+    >
+      <div className="space-y-0.5">
+        <Label>Bridge USDC to Arbitrum in seconds</Label>
+        <div className="text-[0.8rem]">{`Powered by Across`}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/dialogs/transfer/review-bridge.tsx b/components/dialogs/transfer/review-bridge.tsx
@@ -13,7 +13,6 @@ import { FetchStatus } from "@tanstack/react-query"
 import { formatUnits } from "viem/utils"
 
 import { getChainName } from "@/components/dialogs/transfer/helpers"
-import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 
 import { cn } from "@/lib/utils"
@@ -101,13 +100,13 @@ function ReviewBridgeContent({ quote }: { quote: LiFiStep }) {
     >
       <AccordionPrimitive.Item value="item-1">
         <AccordionPrimitive.Header>
-          <AccordionPrimitive.Trigger className="flex w-full items-center justify-between [&[data-state=open]>div>span]:hidden [&[data-state=open]>svg]:rotate-180">
-            <div className="text-left">
+          <AccordionPrimitive.Trigger className="flex w-full justify-between [&[data-state=open]>div>.accordion-label]:hidden [&[data-state=open]>svg]:rotate-180">
+            <div className="space-y-3 text-left">
               <div className="flex items-center gap-2">
                 <InfoCircledIcon className="h-4 w-4" />
                 <span>{`Review bridge from ${getChainName(fromChainId)} to ${getChainName(toChainId)}`}</span>
               </div>
-              <span className="text-muted-foreground">{`Bridge ${fromAmountFormatted} ${fromSymbol} using ${toolName}`}</span>
+              <div className="accordion-label text-muted-foreground">{`Bridge ${fromAmountFormatted} ${fromSymbol} using ${toolName}`}</div>
             </div>
             <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
           </AccordionPrimitive.Trigger>

diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx
@@ -7,14 +7,14 @@ import { AlertCircle, Check, Loader2 } from "lucide-react"
 import { UseFormReturn, useWatch } from "react-hook-form"
 import { toast } from "sonner"
 import { useDebounceValue } from "usehooks-ts"
-import { extractChain, formatUnits, isAddress, parseUnits } from "viem"
+import { formatUnits, isAddress, parseUnits } from "viem"
 import { mainnet } from "viem/chains"
 import { useAccount, useSendTransaction, useSwitchChain } from "wagmi"
 import { z } from "zod"
 
 import { TokenSelect } from "@/components/dialogs/token-select"
+import { BridgePromptUSDC } from "@/components/dialogs/transfer/bridge-prompt-usdc"
 import {
-  CHAIN_NAME_MAP,
   ExternalTransferDirection,
   checkAmount,
   checkBalance,
@@ -992,11 +992,23 @@ export function USDCForm({
                     : "--"}
                 </TooltipButton>
               </div>
-              {bridgeRequired && (
+              {bridgeRequired ? (
                 <ReviewBridge
                   fetchStatus={bridgeQuoteFetchStatus}
                   quote={bridgeQuote}
                 />
+              ) : (
+                <BridgePromptUSDC
+                  onClick={() => {
+                    if (Number(formattedUsdcL1Balance)) {
+                      setNetwork(mainnet.id)
+                      form.setValue("amount", formattedUsdcL1Balance, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                      })
+                    }
+                  }}
+                />
               )}
 
               <MaxBalancesWarning