Fix/creator token buy modal issues

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

@@ -46,23 +46,23 @@ type Query = {
 
 const { useParam } = createParam<Query>();
 // Disable ETH payment on dev for now because it doesn't support the dev environment yet.
-const PAYMENT_METHODS = __DEV__
-  ? [
-      {
-        title: "USDC",
-        value: "USDC",
-      },
-    ]
-  : [
-      {
-        title: "ETH",
-        value: "ETH",
-      },
-      {
-        title: "USDC",
-        value: "USDC",
-      },
-    ];
+const BUY_PAYMENTS = [
+  {
+    title: "ETH",
+    value: "ETH",
+  },
+  {
+    title: "USDC",
+    value: "USDC",
+  },
+];
+const SELL_PAYMENTS = [
+  {
+    title: "USDC",
+    value: "USDC",
+  },
+];
+
 const SELECT_LIST = [
   {
     title: "Buy",
@@ -168,6 +168,7 @@ export const BuyCreatorToken = () => {
               "https://app.uniswap.org/swap?outputCurrency=0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913&chain=base"
             )
           }
+          size="regular"
         >
           Buy USDC on Uniswap
         </Button>
@@ -180,6 +181,7 @@ export const BuyCreatorToken = () => {
       return (
         <Button
           onPress={() => Linking.openURL("https://bridge.base.org/deposit")}
+          size="regular"
         >
           Bridge ETH to Base
         </Button>
@@ -262,15 +264,21 @@ export const BuyCreatorToken = () => {
               <Avatar size={100} url={profileData?.data?.profile.img_url} />
               <View tw="flex-1" style={{ rowGap: 16 }}>
                 <View tw="w-full flex-row items-center justify-between">
-                  <Toggle
-                    options={
-                      selectedAction === "buy"
-                        ? PAYMENT_METHODS
-                        : PAYMENT_METHODS.filter((m) => m.value === "USDC")
-                    }
-                    value={paymentMethod}
-                    onChange={(value: any) => setPaymentMethod(value)}
-                  />
+                  {selectedAction === "buy" ? (
+                    <Toggle
+                      options={BUY_PAYMENTS}
+                      value={paymentMethod}
+                      onChange={(value: any) => setPaymentMethod(value)}
+                      key="BUY_PAYMENTS"
+                    />
+                  ) : (
+                    <Toggle
+                      options={SELL_PAYMENTS}
+                      value={paymentMethod}
+                      onChange={(value: any) => setPaymentMethod(value)}
+                      key="SELL_PAYMENTS"
+                    />
+                  )}
                   <Pressable
                     onPress={() => {
                       setShowExplanation(true);

packages/app/components/creator-token/self-serve-explainer.tsx

@@ -36,7 +36,9 @@ export const SelfServeExplainer = () => {
   const isDark = useIsDarkMode();
   const { user } = useUser();
   const { top } = useSafeAreaInsets();
-  const userProfilePic = user?.data.profile.img_url;
+  const userProfilePic =
+    user?.data.profile.img_url ||
+    "https://media.showtime.xyz/assets/default-creator-token-pic.png";
 
   const [profilePic, setProfilePic] = useState<string | undefined | File>(
     userProfilePic

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

@@ -7,6 +7,7 @@ import { useWallet } from "./use-wallet/use-wallet";
 export const useWalletETHBalance = () => {
   const wallet = useWallet();
   const res = useSWR("ethBalance" + wallet.address, async () => {
+    if (__DEV__) return { balance: 0, displayBalance: "0" };
     if (wallet.address) {
       const res = (await publicClient.getBalance({
         address: wallet.address,

packages/design-system/toggle/index.tsx

@@ -4,6 +4,8 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
   useSharedValue,
+  FadeIn,
+  Layout,
 } from "react-native-reanimated";
 
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
@@ -71,6 +73,7 @@ export const Toggle = ({
               backgroundColor: isDark ? colors.white : colors.gray[900],
             },
           ]}
+          entering={FadeIn}
         />
       ) : null}
       {options.map((item, index) => (