From 6004a6fd247e0597af7e0f61fa9a718c1e1b0521 Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:31:36 -0700
Subject: [PATCH] add network icons

---
 components/dialogs/transfer/default-form.tsx | 25 ++++++++++---
 components/dialogs/transfer/usdc-form.tsx    | 21 ++++++++---
 components/dialogs/transfer/weth-form.tsx    | 37 ++++++++++++++------
 providers/wagmi-provider/wagmi-provider.tsx  |  2 +-
 4 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/components/dialogs/transfer/default-form.tsx b/components/dialogs/transfer/default-form.tsx
index 55d08f02..f08f348b 100644
--- a/components/dialogs/transfer/default-form.tsx
+++ b/components/dialogs/transfer/default-form.tsx
@@ -549,9 +549,19 @@ export function DefaultForm({
             />
             <div className="space-y-1">
               <div className="flex justify-between">
-                <div className="text-sm text-muted-foreground">
+                <div className="flex items-center gap-1 text-sm text-muted-foreground">
                   Balance&nbsp;on&nbsp;
-                  {isDeposit ? "Arbitrum" : "Renegade"}
+                  {isDeposit ? (
+                    <>
+                      <TokenIcon
+                        ticker="ARB"
+                        size={16}
+                      />
+                      Arbitrum
+                    </>
+                  ) : (
+                    "Renegade"
+                  )}
                 </div>
                 <Button
                   className="h-5 p-0"
@@ -578,8 +588,13 @@ export function DefaultForm({
                 hidden: !userHasL1Balance || !isDeposit,
               })}
             >
-              <div className="text-sm text-muted-foreground">
-                Balance on Ethereum
+              <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                Balance on&nbsp;
+                <TokenIcon
+                  ticker="WETH"
+                  size={16}
+                />
+                Ethereum
               </div>
               <Tooltip>
                 <TooltipTrigger
@@ -590,7 +605,7 @@ export function DefaultForm({
                 >
                   <Button
                     asChild
-                    className="h-5 p-0 font-mono text-sm"
+                    className="h-5 cursor-pointer p-0 font-mono text-sm"
                     type="button"
                     variant="link"
                   >
diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx
index c7bf9628..5e35d0be 100644
--- a/components/dialogs/transfer/usdc-form.tsx
+++ b/components/dialogs/transfer/usdc-form.tsx
@@ -29,6 +29,7 @@ import { useIsMaxBalances } from "@/components/dialogs/transfer/use-is-max-balan
 import { useSwapQuote } from "@/components/dialogs/transfer/use-swap-quote"
 import { useSwapState } from "@/components/dialogs/transfer/use-swap-state"
 import { NumberInput } from "@/components/number-input"
+import { TokenIcon } from "@/components/token-icon"
 import { Button } from "@/components/ui/button"
 import {
   DialogClose,
@@ -654,8 +655,13 @@ export function USDCForm({
             />
             <div className="space-y-1">
               <div className="flex items-center justify-between">
-                <div className="text-sm text-muted-foreground">
-                  Balance on Arbitrum
+                <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                  Balance on&nbsp;
+                  <TokenIcon
+                    ticker="ARB"
+                    size={16}
+                  />
+                  Arbitrum
                 </div>
                 <div className="flex items-center">
                   <ResponsiveTooltip>
@@ -732,14 +738,19 @@ export function USDCForm({
                 hidden: !userHasL1Balance,
               })}
             >
-              <div className="text-sm text-muted-foreground">
-                Balance on Ethereum
+              <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                Balance on&nbsp;
+                <TokenIcon
+                  ticker="WETH"
+                  size={16}
+                />
+                Ethereum
               </div>
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
                     asChild
-                    className="h-5 p-0 font-mono text-sm"
+                    className="h-5 cursor-pointer p-0 font-mono text-sm"
                     type="button"
                     variant="link"
                   >
diff --git a/components/dialogs/transfer/weth-form.tsx b/components/dialogs/transfer/weth-form.tsx
index c2084a73..00bdb521 100644
--- a/components/dialogs/transfer/weth-form.tsx
+++ b/components/dialogs/transfer/weth-form.tsx
@@ -29,6 +29,7 @@ import {
 } from "@/components/dialogs/transfer/transfer-details-page"
 import { useIsMaxBalances } from "@/components/dialogs/transfer/use-is-max-balances"
 import { NumberInput } from "@/components/number-input"
+import { TokenIcon } from "@/components/token-icon"
 import { Button } from "@/components/ui/button"
 import {
   DialogClose,
@@ -703,9 +704,19 @@ export function WETHForm({
             />
             <div className="space-y-1">
               <div className="flex items-center justify-between">
-                <div className="text-sm text-muted-foreground">
+                <div className="flex items-center gap-1 text-sm text-muted-foreground">
                   Balance&nbsp;on&nbsp;
-                  {isDeposit ? "Arbitrum" : "Renegade"}
+                  {isDeposit ? (
+                    <>
+                      <TokenIcon
+                        ticker="ARB"
+                        size={16}
+                      />
+                      Arbitrum
+                    </>
+                  ) : (
+                    "Renegade"
+                  )}
                 </div>
                 <div className="flex items-center">
                   <ResponsiveTooltip>
@@ -783,14 +794,20 @@ export function WETHForm({
             </div>
 
             <div
-              className={cn("flex justify-between", {
-                hidden: !userHasL1WETHBalance && !userHasL1ETHBalance,
+              className={cn("flex items-start justify-between", {
+                hidden:
+                  (!userHasL1WETHBalance && !userHasL1ETHBalance) || !isDeposit,
               })}
             >
-              <div className="text-sm text-muted-foreground">
-                Balance on Ethereum
+              <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                Balance on&nbsp;
+                <TokenIcon
+                  ticker="WETH"
+                  size={16}
+                />
+                Ethereum
               </div>
-              <div className="flex flex-col items-end space-y-1">
+              <div className="flex flex-col items-end">
                 <Tooltip>
                   <TooltipTrigger
                     asChild
@@ -800,7 +817,7 @@ export function WETHForm({
                   >
                     <Button
                       asChild
-                      className="h-5 p-0 font-mono text-sm"
+                      className="mb-1 h-5 cursor-pointer p-0 font-mono text-sm"
                       type="button"
                       variant="link"
                     >
@@ -832,7 +849,7 @@ export function WETHForm({
                   >
                     <Button
                       asChild
-                      className="h-5 p-0 font-mono text-sm"
+                      className="h-5 cursor-pointer p-0 font-mono text-sm"
                       type="button"
                       variant="link"
                     >
@@ -858,7 +875,7 @@ export function WETHForm({
             <div
               className={cn({
                 hidden:
-                  !isDeposit && !userHasL1WETHBalance && !userHasL1ETHBalance,
+                  !isDeposit || (!userHasL1WETHBalance && !userHasL1ETHBalance),
               })}
             >
               <BridgePrompt
diff --git a/providers/wagmi-provider/wagmi-provider.tsx b/providers/wagmi-provider/wagmi-provider.tsx
index f8118b00..ab7bf616 100644
--- a/providers/wagmi-provider/wagmi-provider.tsx
+++ b/providers/wagmi-provider/wagmi-provider.tsx
@@ -51,7 +51,7 @@ export const config = createConfig(
 export const mainnetConfig = createConfig({
   chains: [mainnet],
   transports: {
-    [mainnet.id]: http("https://node1.web3api.com"),
+    [mainnet.id]: http(),
   },
 })