fix: diasble buy button on native

showtime-xyz · Oct 28, 2023 · 11085c9 · 11085c9
1 parent 58ba549
commit 11085c9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 47 deletions.
diff --git a/packages/app/components/creator-channels/components/message-input.tsx b/packages/app/components/creator-channels/components/message-input.tsx
@@ -26,6 +26,7 @@ import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
 import { colors } from "@showtime-xyz/universal.tailwind";
 
 import { MessageBox } from "app/components/messages";
+import { PlatformBuyButton } from "app/components/profile/buy-and-sell-buttons";
 import { useCreatorTokenPriceToBuyNext } from "app/hooks/creator-token/use-creator-token-price-to-buy-next";
 import { CreatorEditionResponse } from "app/hooks/use-creator-collection-detail";
 import { usePlatformBottomHeight } from "app/hooks/use-platform-bottom-height";
@@ -215,48 +216,23 @@ export const MessageInput = memo(
       channelOwnerProfile?.creator_token?.address &&
       !hasUnlockedMessages
     ) {
-      const buyPath = `/creator-token/${channelOwnerProfile?.username}/buy`;
-
       return (
         <LeanView
           tw="flex-row items-center justify-start bg-black px-2 py-2"
           style={{
             paddingBottom: Math.max(bottom || 0, 8),
           }}
         >
-          <Pressable
-            tw="web:min-w-[200px] mr-4 min-w-[180px] items-center  rounded-full bg-[#08F6CC] px-4 py-3"
-            onPress={() => {
-              router.push(
-                Platform.select({
-                  native: buyPath + "?selectedAction=buy",
-                  web: {
-                    pathname: router.pathname,
-                    query: {
-                      ...router.query,
-                      creatorTokenBuyModal: true,
-                      username: channelOwnerProfile?.username,
-                      selectedAction: "buy",
-                    },
-                  } as any,
-                }),
-                Platform.select({
-                  native: buyPath,
-                  web: router.asPath === "/" ? buyPath : router.asPath,
-                }),
-                { shallow: true }
-              );
-            }}
-          >
-            <LeanText tw="text-center text-base font-semibold">
-              Buy - ${priceToBuyNext.data?.displayPrice}
-            </LeanText>
-          </Pressable>
-          {/* <LeanView tw="flex-1">
-            <LeanText tw="text-xs font-semibold text-white">
-              99 collected
-            </LeanText>
-          </LeanView> */}
+          <PlatformBuyButton
+            username={channelOwnerProfile?.username}
+            text={
+              <LeanText tw="text-center text-base font-semibold">
+                Buy - ${priceToBuyNext.data?.displayPrice}
+              </LeanText>
+            }
+            side="top"
+            tw="web:min-w-[200px] mr-4 min-w-[180px]"
+          />
         </LeanView>
       );
     }

diff --git a/packages/app/components/profile/buy-and-sell-buttons.tsx b/packages/app/components/profile/buy-and-sell-buttons.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, isValidElement } from "react";
 import { Platform } from "react-native";
 
 import * as Tooltip from "universal-tooltip";
@@ -10,10 +10,12 @@ import { colors } from "@showtime-xyz/universal.tailwind";
 import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
-const BuyButton = ({
-  username,
-  ...rest
-}: { username?: string } & ButtonProps) => {
+type BuyButtonProps = {
+  username?: string;
+  text?: JSX.Element | string;
+  side?: "top" | "bottom";
+} & ButtonProps;
+const BuyButton = ({ username, text = "Buy", ...rest }: BuyButtonProps) => {
   const buyPath = `/creator-token/${username}/buy`;
   const router = useRouter();
   return (
@@ -45,13 +47,16 @@ const BuyButton = ({
         {...rest}
       >
         <>
-          <Text tw="text-base font-bold text-gray-900">Buy</Text>
+          {isValidElement(text) ? (
+            text
+          ) : (
+            <Text tw="text-base font-bold text-gray-900">Buy</Text>
+          )}
         </>
       </Button>
     </View>
   );
 };
-
 const SellButton = ({
   username,
   ...rest
@@ -94,7 +99,9 @@ const SellButton = ({
   );
 };
 
-export const PlatformSellButton = (props: { username?: string }) => {
+export const PlatformSellButton = (
+  props: { username?: string } & ButtonProps
+) => {
   const [open, setOpen] = useState(false);
   const isDark = useIsDarkMode();
   if (Platform.OS !== "web") {
@@ -148,7 +155,10 @@ export const PlatformSellButton = (props: { username?: string }) => {
   return <SellButton {...props} />;
 };
 
-export const PlatformBuyButton = (props: { username?: string }) => {
+export const PlatformBuyButton = ({
+  side = "bottom",
+  ...rest
+}: BuyButtonProps) => {
   const [open, setOpen] = useState(false);
   const isDark = useIsDarkMode();
   if (Platform.OS !== "web") {
@@ -162,7 +172,7 @@ export const PlatformBuyButton = (props: { username?: string }) => {
       >
         <Tooltip.Trigger>
           <BuyButton
-            {...props}
+            {...rest}
             onPress={() => {
               setOpen(true);
             }}
@@ -177,7 +187,7 @@ export const PlatformBuyButton = (props: { username?: string }) => {
             paddingBottom: 8,
           }}
           className="web:outline-none"
-          side="bottom"
+          side={side}
           presetAnimation="fadeIn"
           backgroundColor={isDark ? "#fff" : colors.gray[900]}
           borderRadius={12}
@@ -199,5 +209,5 @@ export const PlatformBuyButton = (props: { username?: string }) => {
       </Tooltip.Root>
     );
   }
-  return <BuyButton {...props} />;
+  return <BuyButton {...rest} />;
 };