feat: fund wallet - buy eth (#2535)

* fund wallet hook * fund wallet
showtime-xyz · Nov 17, 2023 · 123fa3f · 123fa3f
1 parent 5868475
commit 123fa3f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 22 deletions.
diff --git a/packages/app/components/creator-token/buy-creator-token.web.tsx b/packages/app/components/creator-token/buy-creator-token.web.tsx
@@ -32,6 +32,7 @@ import { useRedirectToCreatorTokensShare } from "app/hooks/use-redirect-to-creat
 import { useUser } from "app/hooks/use-user";
 import { useWallet } from "app/hooks/use-wallet";
 import { useWalletETHBalance } from "app/hooks/use-wallet-balance";
+import { usePrivyFundWallet } from "app/lib/privy/privy-hooks";
 import { useNavigateToLogin } from "app/navigation/use-navigate-to";
 
 import { toast } from "design-system/toast";
@@ -97,6 +98,7 @@ export const BuyCreatorToken = () => {
 
   const usdcBalance = useWalletUSDCBalance();
   const ethBalance = useWalletETHBalance();
+  const fundWallet = usePrivyFundWallet();
   const [showExplanation, setShowExplanation] = useState(false);
   const priceToBuyNext = useCreatorTokenPriceToBuyNext(
     selectedAction === "buy"
@@ -167,11 +169,7 @@ export const BuyCreatorToken = () => {
           <Button
             size="regular"
             onPress={() => {
-              wallets[0].fund({
-                config: {
-                  currencyCode: "USDC_BASE",
-                },
-              });
+              fundWallet("usdc");
             }}
           >
             Add USDC to your wallet
@@ -200,11 +198,7 @@ export const BuyCreatorToken = () => {
           <Button
             size="regular"
             onPress={() => {
-              wallets[0].fund({
-                config: {
-                  currencyCode: "ETH_BASE",
-                },
-              });
+              fundWallet("eth");
             }}
           >
             Add ETH to your wallet

diff --git a/packages/app/components/profile/creator-tokens-panel.tsx b/packages/app/components/profile/creator-tokens-panel.tsx
@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 
+import { Button } from "@showtime-xyz/universal.button";
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { InformationCircle, LockRounded } from "@showtime-xyz/universal.icon";
 import { PressableScale } from "@showtime-xyz/universal.pressable-scale";
@@ -16,6 +17,8 @@ import { useCreatorTokenPriceToBuyNext } from "app/hooks/creator-token/use-creat
 import { useCreatorTokenPriceToSellNext } from "app/hooks/creator-token/use-creator-token-price-to-sell-next";
 import { useWalletUSDCBalance } from "app/hooks/creator-token/use-wallet-usdc-balance";
 import { useWallet } from "app/hooks/use-wallet";
+import { useWalletETHBalance } from "app/hooks/use-wallet-balance";
+import { usePrivyFundWallet } from "app/lib/privy/privy-hooks";
 import { getCurrencyPrice } from "app/utilities";
 
 import { TextTooltip } from "../tooltips/text-tooltip";
@@ -160,6 +163,8 @@ export const CreatorTokensPanel = ({
   const isDark = useIsDarkMode();
 
   const usdcBalance = useWalletUSDCBalance();
+  const ethBalance = useWalletETHBalance();
+  const fundWallet = usePrivyFundWallet();
 
   if (isSelf) {
     return (
@@ -170,9 +175,8 @@ export const CreatorTokensPanel = ({
             <View tw="w-full flex-row items-center justify-between">
               <View tw="flex-row items-center">
                 <Text tw="mr-2 text-gray-500 dark:text-gray-300">
-                  USDC balance
+                  ETH balance
                 </Text>
-
                 <TextTooltip
                   side="bottom"
                   theme={isDark ? "dark" : "light"}
@@ -183,18 +187,25 @@ export const CreatorTokensPanel = ({
                       color={isDark ? colors.gray[300] : colors.gray[500]}
                     />
                   }
-                  text={"Your USDC balance on\nthe Base Ethereum L2."}
+                  text={"Your ETH balance on\nthe Base Ethereum L2."}
                 />
               </View>
               <Text tw="text-base font-bold text-gray-900 dark:text-white">
-                {getCurrencyPrice("USD", usdcBalance.data?.displayBalance)}
+                {ethBalance.data?.displayBalance}
               </Text>
+              {Platform.OS === "web" ? (
+                <Button onPress={() => fundWallet("eth")}>Buy ETH</Button>
+              ) : null}
             </View>
-            {/* TODO: creator tokens p2
+          </View>
+        </View>
+
+        <View tw="mb-2 mt-2 rounded-xl border border-gray-200 bg-slate-50 p-4 dark:border-gray-700 dark:bg-gray-900">
+          <View tw="items-center gap-2">
             <View tw="w-full flex-row items-center justify-between">
               <View tw="flex-row items-center">
                 <Text tw="mr-2 text-gray-500 dark:text-gray-300">
-                  Token earnings
+                  USDC balance
                 </Text>
                 <TextTooltip
                   side="bottom"
@@ -206,16 +217,13 @@ export const CreatorTokensPanel = ({
                       color={isDark ? colors.gray[300] : colors.gray[500]}
                     />
                   }
-                  text={
-                    "Every time someone trades\nyour token you earn a 7%\nfee."
-                  }
+                  text={"Your USDC balance on\nthe Base Ethereum L2."}
                 />
               </View>
               <Text tw="text-base font-bold text-gray-900 dark:text-white">
-                $21.67
+                {getCurrencyPrice("USD", usdcBalance.data?.displayBalance)}
               </Text>
             </View>
-            */}
           </View>
         </View>
       </View>

diff --git a/packages/app/lib/privy/privy-hooks.ts b/packages/app/lib/privy/privy-hooks.ts
@@ -4,3 +4,9 @@ export const useExportPrivyWallet = () => {
   const exportPrivyWallet = async () => {};
   return exportPrivyWallet;
 };
+
+export const usePrivyFundWallet = () => {
+  const fundWallet = (currencyCode: "eth" | "usdc") => {};
+
+  return fundWallet;
+};
diff --git a/packages/app/lib/privy/privy-hooks.web.ts b/packages/app/lib/privy/privy-hooks.web.ts
@@ -1,4 +1,4 @@
-import { usePrivy } from "@privy-io/react-auth";
+import { usePrivy, useWallets } from "@privy-io/react-auth";
 
 export const useLoginWithSMS = () => {
   return {
@@ -11,3 +11,16 @@ export const useExportPrivyWallet = () => {
   const { exportWallet } = usePrivy();
   return exportWallet;
 };
+
+export const usePrivyFundWallet = () => {
+  const { wallets } = useWallets();
+  const fundWallet = (currencyCode: "eth" | "usdc") => {
+    return wallets[0].fund({
+      config: {
+        currencyCode: currencyCode === "usdc" ? "USDC_BASE" : "ETH_BASE",
+      },
+    });
+  };
+
+  return fundWallet;
+};