feat(fe): tier selection ui + chain selection loading bug

SneakySensei · Sep 4, 2024 · fe7df98 · fe7df98
1 parent 7f68c5f
commit fe7df98
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 161 deletions.
diff --git a/packages/frontend/public/tiers/tier-alpha.svg b/packages/frontend/public/tiers/tier-alpha.svg
diff --git a/packages/frontend/public/tiers/tier-beta.svg b/packages/frontend/public/tiers/tier-beta.svg
diff --git a/packages/frontend/public/tiers/tier-free.svg b/packages/frontend/public/tiers/tier-free.svg
diff --git a/packages/frontend/public/tiers/tier-gamma.svg b/packages/frontend/public/tiers/tier-gamma.svg
diff --git a/packages/frontend/src/app/components/TierSelector.tsx b/packages/frontend/src/app/components/TierSelector.tsx
@@ -1,47 +1,57 @@
 import { ChainSelector } from "./profile";
 import Drawer from "@/shared/Drawer";
+import SparkleIcon from "@/shared/icons/SparkleIcon";
 import { useSelectedChainContext } from "@/utils/context/selected-chain.context";
 import { useWeb3AuthContext } from "@/utils/context/web3auth.context";
-import { getTokenBalance } from "@/utils/functions/ethers";
-import { web3auth } from "@/utils/service/web3auth.service";
-import { MappedGame } from "@/utils/types";
-import { Contracts, TIERS_IDS } from "common";
+import { MappedGame, MappedGameTier } from "@/utils/types";
+import Image from "next/image";
 import Link from "next/link";
-import { useEffect, useState } from "react";
 
 type Props = {
     open: boolean;
     selectedGame?: MappedGame;
     onClose: () => void;
 };
 export default function TierSelector({ open, onClose, selectedGame }: Props) {
-    const [currentBalance, setCurrentBalance] = useState("0");
-
     const { user } = useWeb3AuthContext();
-    const { selectedChain } = useSelectedChainContext();
-    useEffect(() => {
-        (async () => {
-            try {
-                if (!user) {
-                    return;
-                }
-
-                const balance = await getTokenBalance(
-                    web3auth.provider!,
-                    user.data.wallet_address,
-                    Contracts.TOKEN_CONTRACT_ADDRESS[
-                        Number(selectedChain.chainId)
-                    ],
-                );
-                setCurrentBalance(balance);
-            } catch (error) {
-                console.error(error);
-            }
-        })();
-    }, [selectedChain, user]);
+    const { selectedChain, chainBalance } = useSelectedChainContext();
 
     const slug = selectedGame?.slug;
 
+    const tiers: (Pick<MappedGameTier, "name" | "tier_id" | "usd_amount"> & {
+        icon: string;
+        popular: boolean;
+    })[] = [
+        {
+            tier_id: "5f534987-4ca5-4b27-8597-835fc9512f85",
+            name: "Alpha",
+            usd_amount: 10,
+            popular: false,
+            icon: "/tiers/tier-alpha.svg",
+        },
+        {
+            tier_id: "397bf400-1d70-4edb-927f-ea6306ea6240",
+            name: "Beta",
+            usd_amount: 3,
+            popular: true,
+            icon: "/tiers/tier-beta.svg",
+        },
+        {
+            tier_id: "0e8cb282-7bab-4631-8b3a-76795e3cb92f",
+            name: "Gamma",
+            usd_amount: 1,
+            popular: false,
+            icon: "/tiers/tier-gamma.svg",
+        },
+        {
+            tier_id: "8abf627a-bd65-4c50-9e16-52554e4064f9",
+            name: "Free",
+            usd_amount: 0,
+            popular: false,
+            icon: "/tiers/tier-free.svg",
+        },
+    ];
+
     return (
         <Drawer
             shouldScaleBackground={false}
@@ -51,29 +61,55 @@ export default function TierSelector({ open, onClose, selectedGame }: Props) {
             <Drawer.DrawerContent>
                 <Drawer.DrawerHeader>
                     <Drawer.DrawerTitle>Choose tier</Drawer.DrawerTitle>
-                    <div className="space-y-1">
+
+                    <div className="my-2 space-y-1">
                         <ChainSelector />
                         <div className="flex items-baseline justify-center gap-x-2 text-center text-body-2 font-medium text-neutral-300">
                             <span>Balance</span>
                             <span className="text-body-1 text-neutral-100">
-                                {currentBalance}
+                                {!selectedChain || chainBalance === null
+                                    ? "..."
+                                    : `${chainBalance} USDT`}
                             </span>
                         </div>
                     </div>
                 </Drawer.DrawerHeader>
+
                 <Drawer.DrawerFooter>
-                    <Link href={`/games/${TIERS_IDS.ALPHA}/${slug}`}>
-                        Alpha $10
-                    </Link>
-                    <Link href={`/games/${TIERS_IDS.BETA}/${slug}`}>
-                        Beta $5
-                    </Link>
-                    <Link href={`/games/${TIERS_IDS.GAMMA}/${slug}`}>
-                        Gamma $1
-                    </Link>
-                    <Link href={`/games/${TIERS_IDS.FREE}/${slug}`}>
-                        Free play
-                    </Link>
+                    {tiers.map(
+                        ({ name, tier_id, usd_amount, icon, popular }) => (
+                            <Link
+                                key={tier_id}
+                                href={`/games/${tier_id}/${slug}`}
+                                className="h-full w-full rounded-lg border border-brand-400 bg-[linear-gradient(89.56deg,_rgba(106,70,229,0.2)_0.38%,_rgba(106,70,229,0)_99.62%)]"
+                            >
+                                {popular && (
+                                    <span className="flex items-center justify-center gap-2 bg-[linear-gradient(90deg,_rgba(18,18,21,0.2)_0%,_rgba(255,255,255,0.08)_52.24%,_rgba(18,18,21,0.2)_100%)] pb-1 pt-2 text-center text-body-4">
+                                        <SparkleIcon />
+
+                                        <span>Most Popular</span>
+                                    </span>
+                                )}
+                                <span className="flex w-full items-center gap-4 p-4">
+                                    <Image
+                                        alt=""
+                                        src={icon}
+                                        height={48}
+                                        width={48}
+                                    />
+
+                                    <span className="text-display-2 font-bold uppercase text-brand-200">
+                                        {name}
+                                    </span>
+
+                                    <span className="ml-auto text-display-2 font-bold uppercase text-neutral-200">
+                                        ${usd_amount.toLocaleString()}
+                                    </span>
+                                </span>
+                            </Link>
+                        ),
+                    )}
+
                     {/* <Button>Submit</Button> */}
                 </Drawer.DrawerFooter>
             </Drawer.DrawerContent>