add eth balance

packages/app/components/creator-token/buy-creator-token.tsx

@@ -32,6 +32,7 @@ import { useCreatorTokenSell } from "app/hooks/creator-token/use-creator-token-s
 import { useWalletUSDCBalance } from "app/hooks/creator-token/use-wallet-usdc-balance";
 import { useRedirectToCreatorTokensShare } from "app/hooks/use-redirect-to-creator-tokens-share-screen";
 import { useWallet } from "app/hooks/use-wallet";
+import { useWalletETHBalance } from "app/hooks/use-wallet-balance";
 
 import { toast } from "design-system/toast";
 import { Toggle } from "design-system/toggle";
@@ -81,6 +82,7 @@ export const BuyCreatorToken = () => {
     selectedActionParam ?? "buy"
   );
   const usdcBalance = useWalletUSDCBalance();
+  const ethBalance = useWalletETHBalance();
   const [showExplanation, setShowExplanation] = useState(false);
   const priceToBuyNext = useCreatorTokenPriceToBuyNext(
     selectedAction === "buy"
@@ -142,7 +144,11 @@ export const BuyCreatorToken = () => {
             : "Sell"}
         </Button>
       );
-    } else if (usdcBalance.data?.balance === 0n && !wallet.isMagicWallet) {
+    } else if (
+      paymentMethod === "USDC" &&
+      usdcBalance.data?.balance === 0n &&
+      !wallet.isMagicWallet
+    ) {
       return (
         <Button
           onPress={() =>
@@ -154,6 +160,18 @@ export const BuyCreatorToken = () => {
           Buy USDC on Uniswap
         </Button>
       );
+    } else if (
+      paymentMethod === "ETH" &&
+      ethBalance.data?.balance === 0n &&
+      !wallet.isMagicWallet
+    ) {
+      return (
+        <Button
+          onPress={() => Linking.openURL("https://bridge.base.org/deposit")}
+        >
+          Bridge ETH to Base
+        </Button>
+      );
     } else {
       return (
         <Button

packages/app/hooks/use-wallet-balance.ts

@@ -1,17 +1,22 @@
-import { useCallback } from "react";
+import useSWR from "swr";
 
 import { publicClient } from "app/lib/wallet-public-client";
 
-export const useWalletBalance = () => {
-  const getBalance = useCallback(async (address: string) => {
-    const balance = await publicClient.getBalance({
-      address: address as `0x${string}`,
-    });
+import { useWallet } from "./use-wallet/use-wallet";
 
-    return balance;
-  }, []);
+export const useWalletETHBalance = () => {
+  const wallet = useWallet();
+  const res = useSWR("ethBalance" + wallet.address, async () => {
+    if (wallet.address) {
+      const res = (await publicClient.getBalance({
+        address: wallet.address,
+      })) as bigint;
+      return {
+        balance: res,
+        displayBalance: (Number(res) / 10 ** 18).toFixed(6).toString(),
+      };
+    }
+  });
 
-  return {
-    getBalance,
-  };
+  return res;
 };

packages/app/hooks/use-wallet/types.ts

@@ -22,7 +22,6 @@ export type UseWalletReturnType = {
   name?: string;
   signMessageAsync: (args: SignMessageArgs) => Promise<string | undefined>;
   isMagicWallet?: boolean;
-  getBalance: (address: string) => Promise<bigint | undefined>;
   walletClient?: WalletClient | null;
   getWalletClient: () => WalletClient | undefined | null;
 };

packages/app/hooks/use-wallet/use-wallet.ts

@@ -8,7 +8,6 @@ import { useWalletMobileSDK } from "app/hooks/use-wallet-mobile-sdk";
 import { useWeb3 } from "app/hooks/use-web3";
 import { useWeb3Modal } from "app/lib/react-native-web3-modal";
 
-import { useWalletBalance } from "../use-wallet-balance";
 import { ConnectResult, UseWalletReturnType } from "./types";
 import { useRandomWallet } from "./use-random-wallet";
 
@@ -18,7 +17,6 @@ const useWallet = (): UseWalletReturnType => {
   const web3Modal = useWeb3Modal();
   const { web3, isMagic, magicWalletAddress, getWalletClient } = useWeb3();
   const mobileSDK = useWalletMobileSDK();
-  const { getBalance } = useWalletBalance();
   const [address, setAddress] = useState<`0x${string}` | undefined>();
 
   // we use this hook to prevent stale values in closures
@@ -128,7 +126,6 @@ const useWallet = (): UseWalletReturnType => {
       connected: walletConnected || isMagic,
       isMagicWallet: isMagic,
       networkChanged: undefined,
-      getBalance,
       walletClient: web3,
       getWalletClient,
       signMessageAsync: async (args: { message: string }) => {
@@ -168,7 +165,6 @@ const useWallet = (): UseWalletReturnType => {
     address,
     walletConnected,
     isMagic,
-    getBalance,
     walletConnectInstanceRef,
     coinbaseMobileSDKInstanceRef,
     web3,

packages/app/hooks/use-wallet/use-wallet.web.ts

@@ -14,12 +14,10 @@ import { Alert } from "@showtime-xyz/universal.alert";
 import { useWeb3 } from "app/hooks/use-web3";
 
 import { useLatestValueRef } from "../use-latest-value-ref";
-import { useWalletBalance } from "../use-wallet-balance";
 import { ConnectResult, UseWalletReturnType } from "./types";
 
 const useWallet = (): UseWalletReturnType => {
   const walletConnectedPromiseResolveCallback = useRef<any>(null);
-  const { getBalance } = useWalletBalance();
   const connectorRef = useRef<any>(null);
   const walletDisconnectedPromiseResolveCallback = useRef<any>(null);
   const wagmiData = useAccount({
@@ -77,7 +75,6 @@ const useWallet = (): UseWalletReturnType => {
   const result = useMemo(() => {
     return {
       address,
-      getBalance,
       isMagicWallet: isMagic,
       walletClient: web3,
       connect: async () => {
@@ -110,7 +107,6 @@ const useWallet = (): UseWalletReturnType => {
     };
   }, [
     address,
-    getBalance,
     isMagic,
     connected,
     web3,