From fda49618d81448afdac4f48e5c77256ebec38d28 Mon Sep 17 00:00:00 2001 From: Nishan Date: Thu, 16 Nov 2023 17:52:58 +0530 Subject: [PATCH] fix: separate web.tsx code --- .../creator-token/buy-creator-token.tsx | 542 +---------------- .../creator-token/buy-creator-token.web.tsx | 543 ++++++++++++++++++ ...l-item.tsx => settings-email-item.web.tsx} | 0 ...tsx => settings-phone-number-item.web.tsx} | 0 .../tabs/{accounts.tsx => account.tsx} | 0 packages/app/hooks/use-wallet/use-wallet.ts | 1 - 6 files changed, 544 insertions(+), 542 deletions(-) create mode 100644 packages/app/components/creator-token/buy-creator-token.web.tsx rename packages/app/components/settings/{settings-email-item.tsx => settings-email-item.web.tsx} (100%) rename packages/app/components/settings/{settings-phone-number-item.tsx => settings-phone-number-item.web.tsx} (100%) rename packages/app/components/settings/tabs/{accounts.tsx => account.tsx} (100%) diff --git a/packages/app/components/creator-token/buy-creator-token.tsx b/packages/app/components/creator-token/buy-creator-token.tsx index d2c2d384f3..acaeabdcfe 100644 --- a/packages/app/components/creator-token/buy-creator-token.tsx +++ b/packages/app/components/creator-token/buy-creator-token.tsx @@ -1,543 +1,3 @@ -import { useState, useEffect } from "react"; -import { Linking } from "react-native"; - -import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui"; -import { useWallets } from "@privy-io/react-auth"; -import { createParam } from "solito"; - -import { Avatar } from "@showtime-xyz/universal.avatar"; -import { BottomSheetModalProvider } from "@showtime-xyz/universal.bottom-sheet"; -import { Button } from "@showtime-xyz/universal.button"; -import { useIsDarkMode } from "@showtime-xyz/universal.hooks"; -import { InformationCircle, LockBadge } from "@showtime-xyz/universal.icon"; -import { Image } from "@showtime-xyz/universal.image"; -import { ModalSheet } from "@showtime-xyz/universal.modal-sheet"; -import { Pressable } from "@showtime-xyz/universal.pressable"; -import { useRouter } from "@showtime-xyz/universal.router"; -import { Skeleton } from "@showtime-xyz/universal.skeleton"; -import { colors } from "@showtime-xyz/universal.tailwind"; -import { Text } from "@showtime-xyz/universal.text"; -import { VerificationBadge } from "@showtime-xyz/universal.verification-badge"; -import { View } from "@showtime-xyz/universal.view"; - -import { useUserProfile } from "app/hooks/api-hooks"; -import { useGetETHForUSDC } from "app/hooks/auth/use-get-eth-for-usdc"; -import { useContractBalanceOfToken } from "app/hooks/creator-token/use-balance-of-token"; -import { useCreatorTokenBuy } from "app/hooks/creator-token/use-creator-token-buy"; -import { useCreatorTokenPriceToBuyNext } from "app/hooks/creator-token/use-creator-token-price-to-buy-next"; -import { useCreatorTokenPriceToSellNext } from "app/hooks/creator-token/use-creator-token-price-to-sell-next"; -import { useCreatorTokenSell } from "app/hooks/creator-token/use-creator-token-sell"; -import { useWalletUSDCBalance } from "app/hooks/creator-token/use-wallet-usdc-balance"; -import { useRedirectToCreatorTokensShare } from "app/hooks/use-redirect-to-creator-token-share-screen"; -import { useUser } from "app/hooks/use-user"; -import { useWallet } from "app/hooks/use-wallet"; -import { useWalletETHBalance } from "app/hooks/use-wallet-balance"; -import { useNavigateToLogin } from "app/navigation/use-navigate-to"; - -import { toast } from "design-system/toast"; -import { Toggle } from "design-system/toggle"; - -import { CreatorTokensExplanation } from "../profile/tokens-explanation"; - -type Query = { - username: string; - selectedAction: "buy" | "sell"; -}; - -const { useParam } = createParam(); -// Disable ETH payment on dev for now because it doesn't support the dev environment yet. -const BUY_PAYMENTS = [ - { - title: "ETH", - value: "ETH", - }, - { - title: "USDC", - value: "USDC", - }, -]; -const SELL_PAYMENTS = [ - { - title: "USDC", - value: "USDC", - }, -]; - -const SELECT_LIST = [ - { - title: "Buy", - value: "buy", - }, - { - title: "Sell", - value: "sell", - }, -]; - export const BuyCreatorToken = () => { - const wallet = useWallet(); - const [username] = useParam("username"); - const [selectedActionParam] = useParam("selectedAction"); - const [tokenAmount, setTokenAmount] = useState(1); - const { wallets } = useWallets(); - const isPrivyWalletConnected = wallets?.[0]?.walletClientType === "privy"; - - const { data: profileData } = useUserProfile({ address: username }); - const sellToken = useCreatorTokenSell(); - const redirectToCreatorTokensShare = useRedirectToCreatorTokensShare(); - - const [selectedAction, setSelectedAction] = useState( - selectedActionParam ?? "buy" - ); - - const [paymentMethod, setPaymentMethod] = useState<"ETH" | "USDC">( - __DEV__ ? "USDC" : selectedAction === "buy" ? "ETH" : "USDC" - ); - const buyToken = useCreatorTokenBuy({ username, tokenAmount, paymentMethod }); - - const usdcBalance = useWalletUSDCBalance(); - const ethBalance = useWalletETHBalance(); - const [showExplanation, setShowExplanation] = useState(false); - const priceToBuyNext = useCreatorTokenPriceToBuyNext( - selectedAction === "buy" - ? { - address: profileData?.data?.profile.creator_token?.address, - tokenAmount, - } - : undefined - ); - - const ethPriceToBuyNext = useGetETHForUSDC( - paymentMethod === "ETH" - ? { - amount: priceToBuyNext.data?.totalPrice, - } - : undefined - ); - - const priceToSellNext = useCreatorTokenPriceToSellNext( - selectedAction === "sell" - ? { - address: profileData?.data?.profile.creator_token?.address, - tokenAmount, - } - : undefined - ); - const router = useRouter(); - - const tokenBalance = useContractBalanceOfToken({ - ownerAddress: wallet.address, - contractAddress: profileData?.data?.profile.creator_token?.address, - }); - const renderBuyButton = () => { - if (selectedAction === "sell") { - return ( - - ); - } else if ( - paymentMethod === "USDC" && - Number(usdcBalance.data?.balance) === 0 - ) { - if (isPrivyWalletConnected) { - return ( - - ); - } - - return ( - - ); - } else if ( - paymentMethod === "ETH" && - Number(ethBalance.data?.balance) === 0 - ) { - if (isPrivyWalletConnected) { - return ( - - ); - } - - return ( - - ); - } else { - return ( - - ); - } - }; - - const navigateToLogin = useNavigateToLogin(); - const { isAuthenticated } = useUser(); - useEffect(() => { - if (selectedAction === "sell" && typeof tokenBalance.data !== "undefined") { - setTokenAmount(Math.min(1, Number(tokenBalance.data))); - } else { - setTokenAmount(1); - } - }, [selectedAction, tokenBalance.data]); - - useEffect(() => { - if (selectedAction === "sell") { - setPaymentMethod("USDC"); - } - }, [selectedAction, tokenBalance.data]); - const isDark = useIsDarkMode(); - - const crossmintConfig = { - collectionId: profileData?.data?.profile.creator_token?.crossmint_id, - projectId: process.env.NEXT_PUBLIC_CROSSMINT_PROJECT_ID, - mintConfig: { - totalPrice: ( - Number(priceToBuyNext.data?.totalPrice) / 1000000 - ).toString(), - _numOfTokens: tokenAmount, - _maxPayment: priceToBuyNext.data?.totalPrice?.toString(), - }, - mintTo: wallet.address, - environment: - process.env.NEXT_PUBLIC_STAGE === "production" ? "production" : "staging", - successCallbackURL: - typeof window !== "undefined" - ? window.location.origin + - `/creator-token/${profileData?.data?.profile.username}/share` - : undefined, - } as const; - - return ( - - <> - - - - - {selectedAction === "buy" ? "Buy" : "Sell"} @{username} - - - - tokens - - {selectedAction === "buy" ? ( - - - - Unlocks exclusive channel content - - - ) : ( - - )} - - - - - - {selectedAction === "buy" ? ( - setPaymentMethod(value)} - key="BUY_PAYMENTS" - /> - ) : ( - setPaymentMethod(value)} - key="SELL_PAYMENTS" - /> - )} - { - setShowExplanation(true); - }} - > - - - - - {paymentMethod === "USDC" || selectedAction === "sell" ? ( - - ) : ( - - )} - {selectedAction === "buy" ? ( - - {(priceToBuyNext.isLoading && paymentMethod === "USDC") || - (ethPriceToBuyNext.isLoading && - paymentMethod === "ETH") ? ( - - ) : ( - - {paymentMethod === "USDC" - ? priceToBuyNext.data?.displayPrice - : ethPriceToBuyNext.data?.displayValue} - - )} - - ) : ( - - {priceToSellNext.isLoading ? ( - - ) : ( - - {priceToSellNext.data?.displayPrice ?? "0.00"} - - )} - - )} - - {/* - ^ $2.49 (25%) Month - */} - - - - - - setSelectedAction(value as Query["selectedAction"]) - } - tw="ml-auto" - /> - - You own: - {tokenBalance.isLoading ? ( - - ) : ( - - {tokenBalance.data?.toString() ?? "N/A"} - - )} - - - - Quantity to {selectedAction === "buy" ? "buy" : "sell"}: - - - - - - {tokenAmount} - - - { - setTokenAmount((t) => (t > 1 ? t - 1 : 1)); - }} - tw="-mt-0.5 flex-1 items-center border-[1px] border-transparent border-l-gray-200 border-r-gray-200 bg-blue-50 p-4 dark:border-l-gray-600 dark:border-r-gray-600 dark:bg-gray-800" - > - - — - - - { - setTokenAmount((t) => - selectedAction === "sell" && - tokenBalance.data && - t >= Number(tokenBalance.data) - ? t - : t + 1 - ); - }} - tw="-mt-1 flex-1 items-center justify-center bg-blue-50 p-4 dark:bg-gray-800" - > - - + - - - - - {/* - Estimated transaction fee: - $4.00 - */} - - - {selectedAction === "buy" - ? `You will pay in ${paymentMethod}:` - : "You will receive in USDC:"} - - {selectedAction === "buy" ? ( - <> - {(priceToBuyNext.isLoading && paymentMethod === "USDC") || - (ethPriceToBuyNext.isLoading && paymentMethod === "ETH") ? ( - - ) : ( - - {paymentMethod === "USDC" - ? "$" + priceToBuyNext.data?.displayPrice - : ethPriceToBuyNext.data?.displayValue} - - )} - - ) : ( - <> - {priceToSellNext.isLoading ? ( - - ) : ( - - ${priceToSellNext.data?.displayPrice} - - )} - - )} - - - - {renderBuyButton()} - - - {paymentMethod === "USDC" - ? "Trade with USDC on the Base Ethereum L2." - : "Buy with ETH or USDC on the Base Ethereum L2."} - - - - {selectedAction === "buy" && crossmintConfig.collectionId ? ( - <> - - { - if (!isAuthenticated) { - navigateToLogin(); - e.preventDefault(); - return; - } - router.pop(); - }} - {...crossmintConfig} - /> - - ) : null} - setShowExplanation(false)} - onClose={() => setShowExplanation(false)} - tw="sm:w-[400px] md:w-[400px] lg:w-[400px] xl:w-[400px] " - > - - - - - ); + return null; }; diff --git a/packages/app/components/creator-token/buy-creator-token.web.tsx b/packages/app/components/creator-token/buy-creator-token.web.tsx new file mode 100644 index 0000000000..d2c2d384f3 --- /dev/null +++ b/packages/app/components/creator-token/buy-creator-token.web.tsx @@ -0,0 +1,543 @@ +import { useState, useEffect } from "react"; +import { Linking } from "react-native"; + +import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui"; +import { useWallets } from "@privy-io/react-auth"; +import { createParam } from "solito"; + +import { Avatar } from "@showtime-xyz/universal.avatar"; +import { BottomSheetModalProvider } from "@showtime-xyz/universal.bottom-sheet"; +import { Button } from "@showtime-xyz/universal.button"; +import { useIsDarkMode } from "@showtime-xyz/universal.hooks"; +import { InformationCircle, LockBadge } from "@showtime-xyz/universal.icon"; +import { Image } from "@showtime-xyz/universal.image"; +import { ModalSheet } from "@showtime-xyz/universal.modal-sheet"; +import { Pressable } from "@showtime-xyz/universal.pressable"; +import { useRouter } from "@showtime-xyz/universal.router"; +import { Skeleton } from "@showtime-xyz/universal.skeleton"; +import { colors } from "@showtime-xyz/universal.tailwind"; +import { Text } from "@showtime-xyz/universal.text"; +import { VerificationBadge } from "@showtime-xyz/universal.verification-badge"; +import { View } from "@showtime-xyz/universal.view"; + +import { useUserProfile } from "app/hooks/api-hooks"; +import { useGetETHForUSDC } from "app/hooks/auth/use-get-eth-for-usdc"; +import { useContractBalanceOfToken } from "app/hooks/creator-token/use-balance-of-token"; +import { useCreatorTokenBuy } from "app/hooks/creator-token/use-creator-token-buy"; +import { useCreatorTokenPriceToBuyNext } from "app/hooks/creator-token/use-creator-token-price-to-buy-next"; +import { useCreatorTokenPriceToSellNext } from "app/hooks/creator-token/use-creator-token-price-to-sell-next"; +import { useCreatorTokenSell } from "app/hooks/creator-token/use-creator-token-sell"; +import { useWalletUSDCBalance } from "app/hooks/creator-token/use-wallet-usdc-balance"; +import { useRedirectToCreatorTokensShare } from "app/hooks/use-redirect-to-creator-token-share-screen"; +import { useUser } from "app/hooks/use-user"; +import { useWallet } from "app/hooks/use-wallet"; +import { useWalletETHBalance } from "app/hooks/use-wallet-balance"; +import { useNavigateToLogin } from "app/navigation/use-navigate-to"; + +import { toast } from "design-system/toast"; +import { Toggle } from "design-system/toggle"; + +import { CreatorTokensExplanation } from "../profile/tokens-explanation"; + +type Query = { + username: string; + selectedAction: "buy" | "sell"; +}; + +const { useParam } = createParam(); +// Disable ETH payment on dev for now because it doesn't support the dev environment yet. +const BUY_PAYMENTS = [ + { + title: "ETH", + value: "ETH", + }, + { + title: "USDC", + value: "USDC", + }, +]; +const SELL_PAYMENTS = [ + { + title: "USDC", + value: "USDC", + }, +]; + +const SELECT_LIST = [ + { + title: "Buy", + value: "buy", + }, + { + title: "Sell", + value: "sell", + }, +]; + +export const BuyCreatorToken = () => { + const wallet = useWallet(); + const [username] = useParam("username"); + const [selectedActionParam] = useParam("selectedAction"); + const [tokenAmount, setTokenAmount] = useState(1); + const { wallets } = useWallets(); + const isPrivyWalletConnected = wallets?.[0]?.walletClientType === "privy"; + + const { data: profileData } = useUserProfile({ address: username }); + const sellToken = useCreatorTokenSell(); + const redirectToCreatorTokensShare = useRedirectToCreatorTokensShare(); + + const [selectedAction, setSelectedAction] = useState( + selectedActionParam ?? "buy" + ); + + const [paymentMethod, setPaymentMethod] = useState<"ETH" | "USDC">( + __DEV__ ? "USDC" : selectedAction === "buy" ? "ETH" : "USDC" + ); + const buyToken = useCreatorTokenBuy({ username, tokenAmount, paymentMethod }); + + const usdcBalance = useWalletUSDCBalance(); + const ethBalance = useWalletETHBalance(); + const [showExplanation, setShowExplanation] = useState(false); + const priceToBuyNext = useCreatorTokenPriceToBuyNext( + selectedAction === "buy" + ? { + address: profileData?.data?.profile.creator_token?.address, + tokenAmount, + } + : undefined + ); + + const ethPriceToBuyNext = useGetETHForUSDC( + paymentMethod === "ETH" + ? { + amount: priceToBuyNext.data?.totalPrice, + } + : undefined + ); + + const priceToSellNext = useCreatorTokenPriceToSellNext( + selectedAction === "sell" + ? { + address: profileData?.data?.profile.creator_token?.address, + tokenAmount, + } + : undefined + ); + const router = useRouter(); + + const tokenBalance = useContractBalanceOfToken({ + ownerAddress: wallet.address, + contractAddress: profileData?.data?.profile.creator_token?.address, + }); + const renderBuyButton = () => { + if (selectedAction === "sell") { + return ( + + ); + } else if ( + paymentMethod === "USDC" && + Number(usdcBalance.data?.balance) === 0 + ) { + if (isPrivyWalletConnected) { + return ( + + ); + } + + return ( + + ); + } else if ( + paymentMethod === "ETH" && + Number(ethBalance.data?.balance) === 0 + ) { + if (isPrivyWalletConnected) { + return ( + + ); + } + + return ( + + ); + } else { + return ( + + ); + } + }; + + const navigateToLogin = useNavigateToLogin(); + const { isAuthenticated } = useUser(); + useEffect(() => { + if (selectedAction === "sell" && typeof tokenBalance.data !== "undefined") { + setTokenAmount(Math.min(1, Number(tokenBalance.data))); + } else { + setTokenAmount(1); + } + }, [selectedAction, tokenBalance.data]); + + useEffect(() => { + if (selectedAction === "sell") { + setPaymentMethod("USDC"); + } + }, [selectedAction, tokenBalance.data]); + const isDark = useIsDarkMode(); + + const crossmintConfig = { + collectionId: profileData?.data?.profile.creator_token?.crossmint_id, + projectId: process.env.NEXT_PUBLIC_CROSSMINT_PROJECT_ID, + mintConfig: { + totalPrice: ( + Number(priceToBuyNext.data?.totalPrice) / 1000000 + ).toString(), + _numOfTokens: tokenAmount, + _maxPayment: priceToBuyNext.data?.totalPrice?.toString(), + }, + mintTo: wallet.address, + environment: + process.env.NEXT_PUBLIC_STAGE === "production" ? "production" : "staging", + successCallbackURL: + typeof window !== "undefined" + ? window.location.origin + + `/creator-token/${profileData?.data?.profile.username}/share` + : undefined, + } as const; + + return ( + + <> + + + + + {selectedAction === "buy" ? "Buy" : "Sell"} @{username} + + + + tokens + + {selectedAction === "buy" ? ( + + + + Unlocks exclusive channel content + + + ) : ( + + )} + + + + + + {selectedAction === "buy" ? ( + setPaymentMethod(value)} + key="BUY_PAYMENTS" + /> + ) : ( + setPaymentMethod(value)} + key="SELL_PAYMENTS" + /> + )} + { + setShowExplanation(true); + }} + > + + + + + {paymentMethod === "USDC" || selectedAction === "sell" ? ( + + ) : ( + + )} + {selectedAction === "buy" ? ( + + {(priceToBuyNext.isLoading && paymentMethod === "USDC") || + (ethPriceToBuyNext.isLoading && + paymentMethod === "ETH") ? ( + + ) : ( + + {paymentMethod === "USDC" + ? priceToBuyNext.data?.displayPrice + : ethPriceToBuyNext.data?.displayValue} + + )} + + ) : ( + + {priceToSellNext.isLoading ? ( + + ) : ( + + {priceToSellNext.data?.displayPrice ?? "0.00"} + + )} + + )} + + {/* + ^ $2.49 (25%) Month + */} + + + + + + setSelectedAction(value as Query["selectedAction"]) + } + tw="ml-auto" + /> + + You own: + {tokenBalance.isLoading ? ( + + ) : ( + + {tokenBalance.data?.toString() ?? "N/A"} + + )} + + + + Quantity to {selectedAction === "buy" ? "buy" : "sell"}: + + + + + + {tokenAmount} + + + { + setTokenAmount((t) => (t > 1 ? t - 1 : 1)); + }} + tw="-mt-0.5 flex-1 items-center border-[1px] border-transparent border-l-gray-200 border-r-gray-200 bg-blue-50 p-4 dark:border-l-gray-600 dark:border-r-gray-600 dark:bg-gray-800" + > + + — + + + { + setTokenAmount((t) => + selectedAction === "sell" && + tokenBalance.data && + t >= Number(tokenBalance.data) + ? t + : t + 1 + ); + }} + tw="-mt-1 flex-1 items-center justify-center bg-blue-50 p-4 dark:bg-gray-800" + > + + + + + + + + {/* + Estimated transaction fee: + $4.00 + */} + + + {selectedAction === "buy" + ? `You will pay in ${paymentMethod}:` + : "You will receive in USDC:"} + + {selectedAction === "buy" ? ( + <> + {(priceToBuyNext.isLoading && paymentMethod === "USDC") || + (ethPriceToBuyNext.isLoading && paymentMethod === "ETH") ? ( + + ) : ( + + {paymentMethod === "USDC" + ? "$" + priceToBuyNext.data?.displayPrice + : ethPriceToBuyNext.data?.displayValue} + + )} + + ) : ( + <> + {priceToSellNext.isLoading ? ( + + ) : ( + + ${priceToSellNext.data?.displayPrice} + + )} + + )} + + + + {renderBuyButton()} + + + {paymentMethod === "USDC" + ? "Trade with USDC on the Base Ethereum L2." + : "Buy with ETH or USDC on the Base Ethereum L2."} + + + + {selectedAction === "buy" && crossmintConfig.collectionId ? ( + <> + + { + if (!isAuthenticated) { + navigateToLogin(); + e.preventDefault(); + return; + } + router.pop(); + }} + {...crossmintConfig} + /> + + ) : null} + setShowExplanation(false)} + onClose={() => setShowExplanation(false)} + tw="sm:w-[400px] md:w-[400px] lg:w-[400px] xl:w-[400px] " + > + + + + + ); +}; diff --git a/packages/app/components/settings/settings-email-item.tsx b/packages/app/components/settings/settings-email-item.web.tsx similarity index 100% rename from packages/app/components/settings/settings-email-item.tsx rename to packages/app/components/settings/settings-email-item.web.tsx diff --git a/packages/app/components/settings/settings-phone-number-item.tsx b/packages/app/components/settings/settings-phone-number-item.web.tsx similarity index 100% rename from packages/app/components/settings/settings-phone-number-item.tsx rename to packages/app/components/settings/settings-phone-number-item.web.tsx diff --git a/packages/app/components/settings/tabs/accounts.tsx b/packages/app/components/settings/tabs/account.tsx similarity index 100% rename from packages/app/components/settings/tabs/accounts.tsx rename to packages/app/components/settings/tabs/account.tsx diff --git a/packages/app/hooks/use-wallet/use-wallet.ts b/packages/app/hooks/use-wallet/use-wallet.ts index 049133e6a5..faa4d8b86c 100644 --- a/packages/app/hooks/use-wallet/use-wallet.ts +++ b/packages/app/hooks/use-wallet/use-wallet.ts @@ -33,7 +33,6 @@ const useWallet = (): UseWalletReturnType => { } }, [privyWallet]); - console.log("walletConnectInstanceRef", privyWallet); const walletConnected = web3Modal.isConnected || mobileSDK.connected || isPrivyWallet; const [address, setAddress] = useState<`0x${string}` | undefined>();