transfer dialog: wrap eth

app/components/wrap-eth-dialog.tsx

@@ -0,0 +1,139 @@
+import React from "react"
+
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { Token } from "@renegade-fi/react"
+import { useQueryClient } from "@tanstack/react-query"
+import { formatUnits } from "viem"
+import { useAccount, useBalance } from "wagmi"
+
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+
+import { useWrapEth } from "@/hooks/use-wrap-eth"
+import { useReadErc20BalanceOf } from "@/lib/generated"
+import { cn } from "@/lib/utils"
+
+export function WrapEthDialog(props: React.PropsWithChildren) {
+ return (
+ <Dialog>
+ <DialogTrigger asChild>{props.children}</DialogTrigger>
+ <DialogContent
+ hideCloseButton
+ className="max-h-[80vh] gap-0 p-0 sm:max-w-[425px]"
+ onPointerDownOutside={(e) => {
+ // Prevent closing the dialog when clicking inside toast
+ if (
+ e.target instanceof Element &&
+ e.target.closest("[data-sonner-toast]")
+ ) {
+ e.preventDefault()
+ }
+ }}
+ >
+ <DialogHeader>
+ <div className="flex flex-row border-b border-border">
+ <Button
+ className={cn("flex-1 border-0 font-extended text-lg font-bold")}
+ size="xl"
+ variant="outline"
+ >
+ Deposit
+ </Button>
+ <Button
+ className={cn(
+ "border-l-1 flex-1 border-y-0 border-r-0 font-extended text-lg font-bold",
+ )}
+ size="xl"
+ variant="outline"
+ >
+ Withdraw
+ </Button>
+ </div>
+ <VisuallyHidden>
+ <DialogTitle>Wrap ETH</DialogTitle>
+ <DialogDescription>Wrap ETH into WETH</DialogDescription>
+ </VisuallyHidden>
+ </DialogHeader>
+ <div className="p-4">
+ <Content />
+ </div>
+ </DialogContent>
+ </Dialog>
+ )
+}
+
+function Content() {
+ const { address } = useAccount()
+ const queryClient = useQueryClient()
+ const { data: ethBalance, queryKey: ethBalanceQueryKey } = useBalance({
+ address,
+ })
+ const weth = Token.findByTicker("WETH")
+ const { data: l2Balance, queryKey: wethBalanceQueryKey } =
+ useReadErc20BalanceOf({
+ address: weth?.address,
+ args: [address ?? "0x"],
+ })
+
+ const [amount, setAmount] = React.useState("")
+ const { wrapEth, status } = useWrapEth({
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ethBalanceQueryKey })
+ queryClient.invalidateQueries({ queryKey: wethBalanceQueryKey })
+ },
+ onError: (error) => {
+ console.error("Error wrapping ETH:", error)
+ // You can add error handling logic here, e.g., showing an error toast
+ },
+ })
+
+ const onSubmit = () => {
+ wrapEth(amount)
+ }
+
+ return (
+ <>
+ <div>
+ <Input
+ placeholder="Amount"
+ value={amount}
+ onChange={(e) => setAmount(e.target.value)}
+ />
+ <div>
+ <span>WETH Balance:&nbsp;</span>
+ <span>
+ {formatUnits(l2Balance ?? BigInt(0), weth?.decimals ?? 18)}
+ </span>
+ </div>
+ <div>
+ <span>{ethBalance?.symbol} Balance:&nbsp;</span>
+ <span>
+ {formatUnits(
+ ethBalance?.value ?? BigInt(0),
+ ethBalance?.decimals ?? 18,
+ )}
+ </span>
+ </div>
+ </div>
+ <DialogFooter>
+ <Button
+ disabled={status === "pending"}
+ variant="ghost"
+ onClick={onSubmit}
+ >
+ {status === "pending" ? "Confirm in wallet" : "Wrap"}
+ </Button>
+ </DialogFooter>
+ {status === "success" && <div>Transaction confirmed!</div>}
+ </>
+ )
+}

components/dialogs/token-select.tsx

@@ -3,9 +3,9 @@ import * as React from "react"
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { Token, useBackOfQueueWallet } from "@renegade-fi/react"
 import { erc20Abi, isAddress } from "viem"
-import { useAccount, useReadContracts } from "wagmi"
+import { useAccount, useBalance, useReadContracts } from "wagmi"
 
-import { ExternalTransferDirection } from "@/components/dialogs/transfer/transfer-dialog"
+import { ExternalTransferDirection } from "@/components/dialogs/transfer/helpers"
 import { Button } from "@/components/ui/button"
 import {
  Command,
@@ -43,6 +43,9 @@ export function TokenSelect({
 }) {
  const [open, setOpen] = React.useState(false)
  const { address } = useAccount()
+
+ const { data: ethBalance } = useBalance({ address })
+
  const { data: l2Balances, queryKey } = useReadContracts({
  contracts: DISPLAY_TOKENS().map((token) => ({
  address: token.address,
@@ -73,10 +76,16 @@ export function TokenSelect({
  },
  })
 
- const displayBalances =
- direction === ExternalTransferDirection.Deposit
- ? l2Balances
- : renegadeBalances
+ // TODO: Sometimes old balances are added
+ const displayBalances = React.useMemo(() => {
+ if (direction !== ExternalTransferDirection.Deposit) return renegadeBalances
+ if (!l2Balances) return undefined
+ const weth = Token.findByTicker("WETH")
+ const combinedEthBalance =
+ (l2Balances?.get(weth.address) ?? BigInt(0)) +
+ (ethBalance?.value ?? BigInt(0))
+ return new Map(l2Balances).set(weth.address, combinedEthBalance)
+ }, [direction, ethBalance?.value, l2Balances, renegadeBalances])
 
  const isDesktop = useMediaQuery("(min-width: 1024px)")