Clean up module 100 examples for course launch

gimbalabs · May 3, 2024 · befc074 · befc074
1 parent d458801
commit befc074
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@meshsdk/core": "^1.5.11-beta.6",
     "@meshsdk/react": "^1.1.10-beta.3",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",

diff --git a/src/components/transactions/MintPPBL2024PreprodToken.tsx b/src/components/transactions/MintPPBL2024PreprodToken.tsx
@@ -23,10 +23,19 @@ import {
 import { Input } from "~/components/ui/input";
 import { api } from "~/utils/api";
 import { register } from "module";
+import usePPBL2024Token from "~/hooks/usePPBL2024Token";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion";
 
 export default function MintPPBL2024PreprodToken() {
   const { wallet } = useWallet();
   const address = useAddress();
+  const { connectedContribTokenUnit, contributorName, isLoadingContributor } =
+    usePPBL2024Token();
 
   const [contributorTokenName, setContributorTokenName] = useState<
     string | undefined
@@ -153,37 +162,63 @@ export default function MintPPBL2024PreprodToken() {
     }
   }, [contributorTokenName]);
 
+  if (isLoadingContributor) {
+    return <div className="animate-pulse">Loading Contributor Status</div>;
+  }
+
   return (
-    <div className="flex flex-col w-full">
-      <h2>Mint Your Token!</h2>
-      <pre>{JSON.stringify(tokenNames, null, 2)}</pre>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <FormField
-            control={form.control}
-            name="tokenAlias"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Enter a token alias</FormLabel>
-                <FormControl>
-                  <Input placeholder="your alias" {...field} />
-                </FormControl>
-                <FormDescription>
-                  Your token will have the name ppbl2024-YOUR_ALIAS
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          {!!tokenNames && tokenNames.includes(form.getValues().tokenAlias) && (
-            <div className="bg-orange-700 p-3">
-              This tokenAlias is already minted. Please choose a different
-              alias.
+    <div className="flex w-full flex-col">
+      {connectedContribTokenUnit ? (
+        <h2>You have a PPBL 2024 Preprod Token!</h2>
+      ) : (
+        <>
+          <h2>Mint Your PPBL 2024 Token</h2>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+              <FormField
+                control={form.control}
+                name="tokenAlias"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Enter a token alias</FormLabel>
+                    <FormControl>
+                      <Input placeholder="your alias" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Your token will have the name ppbl2024-YOUR_ALIAS
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {!!tokenNames &&
+                tokenNames.includes(form.getValues().tokenAlias) && (
+                  <div className="bg-orange-700 p-3">
+                    This tokenAlias is already minted. Please choose a different
+                    alias.
+                  </div>
+                )}
+              <Button type="submit">Mint my token!</Button>
+            </form>
+          </Form>
+        </>
+      )}
+      <Accordion type="single" collapsible>
+        <AccordionItem value="faucet-1">
+          <AccordionTrigger>
+            View List of PPBL 2024 Preprod Tokens
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3">
+              {tokenNames?.map((t, i) => (
+                <div key={i} className="flex w-full justify-center items-center bg-accent p-2 text-accent-foreground">
+                  {t}
+                </div>
+              ))}
             </div>
-          )}
-          <Button type="submit">Mint my token!</Button>
-        </form>
-      </Form>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </div>
   );
 }
diff --git a/src/components/transactions/PPBLFaucetWithdrawlTx.tsx b/src/components/transactions/PPBLFaucetWithdrawlTx.tsx
@@ -13,27 +13,22 @@ import {
 import { api } from "~/utils/api";
 import { useEffect, useState } from "react";
 import { hexToString } from "~/utils/text";
+import usePPBL2024Token from "~/hooks/usePPBL2024Token";
 
 export default function PPBLFaucetWithdrawalTx() {
   const address = useAddress();
   const { wallet } = useWallet();
+  const { connectedContribTokenUnit, contributorName, isLoadingContributor } =
+    usePPBL2024Token();
 
   const [outputFaucetUTxO, setOutputFaucetUTxO] = useState<
     Partial<UTxO> | undefined
   >(undefined);
 
-  const [connectedContribTokenUnit, setConnectedContribTokenUnit] = useState<
-    string | undefined
-  >(undefined);
-
   const [contributorPkh, setContributorPkh] = useState<string | undefined>(
     undefined,
   );
 
-  const [contributorName, setContributorName] = useState<string | undefined>(
-    undefined,
-  );
-
   const [redeemer, setRedeemer] = useState<Partial<Action> | undefined>(
     undefined,
   );
@@ -62,7 +57,8 @@ export default function PPBLFaucetWithdrawalTx() {
   ];
 
   // Use Maestro to query input from Faucet address
-  const { data: inputFaucetUTxOs } = api.faucet.getFaucetUTxO.useQuery();
+  const { data: inputFaucetUTxOs, isLoading: isLoadingFaucetUTxO } =
+    api.faucet.getFaucetUTxO.useQuery();
 
   // Calculate the expected output, based on value in input
   // useState and useEffect
@@ -91,25 +87,6 @@ export default function PPBLFaucetWithdrawalTx() {
     }
   }, [inputFaucetUTxOs]);
 
-  useEffect(() => {
-    async function checkPPBLToken() {
-      if (wallet) {
-        // get contributor token
-        const _assets = await wallet.getAssets();
-        _assets.forEach((a: Asset) => {
-          if (
-            a.unit.startsWith(
-              "903c419ee7ebb6bf4687c61fb133d233ef9db2f80e4d734db3fbaf0b",
-            )
-          ) {
-            setConnectedContribTokenUnit(a.unit);
-          }
-        });
-      }
-    }
-    void checkPPBLToken();
-  }, [wallet]);
-
   useEffect(() => {
     if (address) {
       const _pkh = resolvePaymentKeyHash(address);
@@ -142,7 +119,13 @@ export default function PPBLFaucetWithdrawalTx() {
   async function handleFaucetTx() {
     if (inputFaucetUTxOs) {
       try {
-        console.log("click!", address, faucetAssetToBrowserWallet, inputFaucetUTxOs, outputFaucetUTxO);
+        console.log(
+          "click!",
+          address,
+          faucetAssetToBrowserWallet,
+          inputFaucetUTxOs,
+          outputFaucetUTxO,
+        );
         if (
           address &&
           faucetAssetToBrowserWallet &&
@@ -178,6 +161,9 @@ export default function PPBLFaucetWithdrawalTx() {
           const signedTx = await wallet.signTx(unsignedTx, true);
           const txHash = await wallet.submitTx(signedTx);
           console.log(txHash);
+          alert(
+            `Success! You just completed a successful PPBL Faucet transaction. The transaction has is ${txHash}`,
+          );
         }
       } catch (error) {
         console.log(error);
@@ -186,10 +172,39 @@ export default function PPBLFaucetWithdrawalTx() {
     }
   }
 
+  if (isLoadingFaucetUTxO || isLoadingContributor) {
+    return <div className="animate-pulse">Loading...</div>;
+  }
+
   return (
     <div className="text-white">
-      <h2>Faucet Tx</h2>
-      <Button onClick={handleFaucetTx}>Withdraw from Faucet</Button>
+      {inputFaucetUTxOs && inputFaucetUTxOs.length === 1 ? (
+        <>
+          {connectedContribTokenUnit ? (
+            <>
+              <h2>
+                Use a PPBL 2024 to withdraw tokens from the PPBL Faucet
+                Validator
+              </h2>
+              <div className="my-3 bg-primary p-3 text-primary-foreground">
+                <p>
+                  {inputFaucetUTxOs[0]?.output.amount[1]?.quantity} Tokens
+                  locked in Faucet Address
+                </p>
+              </div>
+              <Button onClick={handleFaucetTx}>
+                Withdraw 1000000 Scaffold Tokens from Faucet
+              </Button>
+            </>
+          ) : (
+            <>You must mint a PPBL 2024 to interact with the PPBL Faucet Demo</>
+          )}
+        </>
+      ) : (
+        <>
+          <h2>Cannot find Faucet UTxO</h2>
+        </>
+      )}
     </div>
   );
 }