Jerry Musaga | Register for OpenGuild Da Nang Hackcamp 2025

README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 
 ![Da Nang Hackcamp](./assets/danang_hackcamp.png)
@@ -33,7 +32,7 @@ git clone https://github.com/openguild-labs/open-danang-hackcamp-2025.git
 Go to **Participant Registration** section and register to be the workshop participants. Add the below to the list, replace any placeholder with your personal information.
 
 ```
-| 🦄 | Name | Github username | Your current occupation |
+| 🦄 | Jerry Musaga | jerrymusaga | Intern @ Blockfuse Labs |
 ```
 
 - Step 5: `Commit` your code and push to the forked Github repository
@@ -53,38 +52,36 @@ git commit -m "<Your Name> | Register for OpenGuild Da Nang Hackcamp 2025"
 
 ## Discover the List of Challenges 🏆
 
-Total OpenGuild prize pool: **2000$ / 5 winners** 
+Total OpenGuild prize pool: **2000$ / 5 winners**
 <br/>
 Total Bifrost Parner prize pool: **300$-1000$** (dedicated to Bifrost's Challenge)
-| Challenge | Description                                                                                                                                                                                                      | Action                                               | Bounty |
+| Challenge | Description | Action | Bounty |
 | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------ |
-| 1         | Building Uniswap V2 Application                                                                      | [Take Challenge](./challenge-1-uniswapv2/README.md)    | $    |
-| 2         | Building Lending and Borrowing Application                                                                       | [Take Challenge](./challenge-2-lending-borrowing/README.md) | $    |
-| 3         | Build a cross-chain application using XCM | [Take Challenge](./challenge-3-xcm/README.md)   | $    |
-| 4        | Polkadot SDK  | [Take Challenge](./challenge-4-polkadot-sdk/README.md)   | $    |
-| Parner Track - Bifrost        | Create a unique and optimal UX for interacting with Bifrost Liquid Staking Tokens available on many chains | [Take Challenge](./challenge-bifrost/README.md)   | $300-$1000    |
+| 1 | Building Uniswap V2 Application | [Take Challenge](./challenge-1-uniswapv2/README.md) | $ |
+| 2 | Building Lending and Borrowing Application | [Take Challenge](./challenge-2-lending-borrowing/README.md) | $ |
+| 3 | Build a cross-chain application using XCM | [Take Challenge](./challenge-3-xcm/README.md) | $ |
+| 4 | Polkadot SDK | [Take Challenge](./challenge-4-polkadot-sdk/README.md) | $ |
+| Parner Track - Bifrost | Create a unique and optimal UX for interacting with Bifrost Liquid Staking Tokens available on many chains | [Take Challenge](./challenge-bifrost/README.md) | $300-$1000 |
 </br>
 </br>
 
 </div>
 
 ## 👉 Resource for Development and Support Channels
 
-### Paseo Contract Faucet 
+### Paseo Contract Faucet
 
 Link : https://faucet.polkadot.io/?parachain=1111
 
-### Explorer 
+### Explorer
 
 Link : https://blockscout-passet-hub.parity-testnet.parity.io/
 
 ### RPC
 
-+ ETH - EVM-compatible RPC: `https://testnet-passet-hub-eth-rpc.polkadot.io/`
-
-+ ChainID: `0x190f1b45`
-
+- ETH - EVM-compatible RPC: `https://testnet-passet-hub-eth-rpc.polkadot.io/`
 
+- ChainID: `0x190f1b45`
 
 ### Resources
 
@@ -97,17 +94,13 @@ Link : https://blockscout-passet-hub.parity-testnet.parity.io/
 - [OpenGuild Learn](https://learn.openguild.wtf/)
 
 ### Support Channels
+
 - [Discord OpenGuild](https://github.com/openguild-labs)
 - [Discord Polkadot](https://discord.gg/polkadot)
 - [Stack Exchange](https://substrate.meta.stackexchange.com/)
 - [Telegram](https://t.me/substratedevs)
 - [Reddit](https://www.reddit.com/r/Polkadot/)
 
-
-
-
-
-
 ## 👉 Contribute to OpenGuild Community
 
 OpenGuild is a builder-driven community centered around Polkadot. OpenGuild is built by Web3 builders for Web3 builders. Our primary aim is to cater to developers seeking a comprehensive understanding of the Polkadot blockchain, providing curated, in-depth materials with a low-level approach.
@@ -116,8 +109,3 @@ OpenGuild is a builder-driven community centered around Polkadot. OpenGuild is b
 - **Website:** [OpenGuild Website](https://openguild.wtf/)
 - **Github:** [OpenGuild Labs](https://github.com/openguild-labs)
 - **Discord**: [Openguild Discord Channel](https://discord.gg/bcjMzxqtD7)
-
-
-
-
-

challenge-3-xcm/frontend/app/crosschainNFT/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const XCM = dynamic(() => import("@/components/xcm/NFT"), {
+  ssr: false,
+});
+
+export default function VestingPage() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
+        Crosschain NFT Marketplace
+      </h1>
+      <XCM />
+    </div>
+  );
+}

challenge-3-xcm/frontend/app/layout.tsx

@@ -1,14 +1,15 @@
 import type { Metadata } from "next";
 import { Unbounded } from "next/font/google";
 import "./globals.css";
-import '@rainbow-me/rainbowkit/styles.css';
-import { Providers } from '@/app/providers';
+import "@rainbow-me/rainbowkit/styles.css";
+import { Providers } from "@/app/providers";
+import Navbar from "@/components/navbar";
 
 const unbounded = Unbounded({
-  subsets: ['latin'],
-  weight: ['400', '700'],
-  display: 'swap',
-})
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: "DOT UI kit",
@@ -22,13 +23,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={unbounded.className}
-      >
+      <body className={unbounded.className}>
         <Providers>
-          <main>
-            {children}
-          </main>
+          <Navbar />
+          <main className="flex flex-col min-h-screen">{children}</main>
         </Providers>
       </body>
     </html>

challenge-3-xcm/frontend/app/page.tsx

@@ -102,7 +102,24 @@ export default function Home() {
           </a>
         </div>
         <div className="text-sm text-muted-foreground">
-          Maintained by <a className="underline underline-offset-4" href="https://buildstation.org" target="_blank" rel="noopener noreferrer">buildstation.org</a> with support from <a className="underline underline-offset-4" href="https://openguild.wtf" target="_blank" rel="noopener noreferrer">OpenGuild</a>
+          Maintained by{" "}
+          <a
+            className="underline underline-offset-4"
+            href="https://buildstation.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            buildstation.org
+          </a>{" "}
+          with support from{" "}
+          <a
+            className="underline underline-offset-4"
+            href="https://openguild.wtf"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            OpenGuild
+          </a>
         </div>
       </footer>
     </div>

challenge-3-xcm/frontend/components/create-wallet-dialog.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useAtom } from "jotai";
+import { createWalletDialogOpenAtom } from "@/lib/atoms";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { KeyRound, Ban, ExternalLink, LockKeyhole, Shield } from "lucide-react";
+import Image from "next/image";
+import {
+  createSigpassWallet,
+  checkBrowserWebAuthnSupport,
+} from "@/lib/sigpass";
+
+/**
+ * Globally mounted dialog that lets users generate a Sigpass wallet.
+ * Because it's outside the drawer hierarchy, it survives when the drawer unmounts.
+ */
+export default function CreateWalletDialog() {
+  const [open, setOpen] = useAtom(createWalletDialogOpenAtom);
+  const [webAuthn, setWebAuthn] = useState(false);
+
+  useEffect(() => {
+    setWebAuthn(checkBrowserWebAuthnSupport());
+  }, []);
+
+  const handleCreate = async () => {
+    await createSigpassWallet("dapp");
+    // Dialog closes only after successful creation
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-[450px] border-purple-200 dark:border-purple-800 shadow-lg overflow-hidden p-0">
+        {/* Header with gradient background */}
+        <div className="bg-gradient-to-r from-purple-600 to-blue-500 p-6 text-white">
+          <DialogHeader>
+            <DialogTitle className="text-2xl font-bold flex items-center gap-2">
+              <LockKeyhole className="h-5 w-5" />
+              Create Wallet
+            </DialogTitle>
+            <DialogDescription className="text-white/90 mt-2">
+              Instantly get a wallet secured by&nbsp;
+              <a
+                href="https://www.yubico.com/resources/glossary/what-is-a-passkey/"
+                className="inline-flex items-center gap-1 font-bold text-white underline underline-offset-2 hover:text-white/80 transition-colors"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Passkey <ExternalLink className="h-3 w-3" />
+              </a>
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="p-6">
+          <div className="flex flex-col gap-5">
+            <h2 className="font-bold text-lg text-gray-800 dark:text-gray-200">
+              What is a Wallet?
+            </h2>
+
+            <div className="flex items-center gap-4 bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
+              <div className="bg-gradient-to-br from-purple-500 to-blue-500 p-2 rounded-lg">
+                <Image
+                  src="/rainbowkit-1.svg"
+                  alt="Digital assets icon"
+                  width={40}
+                  height={40}
+                  className="dark:filter dark:brightness-0 dark:invert"
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <h3 className="text-sm font-bold">
+                  A Home for your Digital&nbsp;Assets
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Wallets are used to send, receive, store, and display digital
+                  assets like Polkadot and NFTs.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
+              <div className="bg-gradient-to-br from-purple-500 to-blue-500 p-2 rounded-lg">
+                <Image
+                  src="/rainbowkit-2.svg"
+                  alt="Login icon"
+                  width={40}
+                  height={40}
+                  className="dark:filter dark:brightness-0 dark:invert"
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <h3 className="text-sm font-bold">A new way to Log In</h3>
+                <p className="text-sm text-muted-foreground">
+                  Instead of creating new accounts and passwords on every
+                  website, just connect your wallet.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="mt-6 flex flex-col sm:flex-row gap-4">
+            <a
+              href="https://learn.rainbow.me/understanding-web3?utm_source=rainbowkit&utm_campaign=learnmore"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-md font-medium text-purple-600 dark:text-purple-400 hover:underline flex items-center justify-center"
+            >
+              Learn more <ExternalLink className="ml-1 h-3 w-3" />
+            </a>
+
+            {webAuthn ? (
+              <Button
+                className="bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-md hover:opacity-90 transition-opacity"
+                onClick={handleCreate}
+              >
+                <Shield className="mr-2 h-4 w-4" />
+                Create Secure Wallet
+              </Button>
+            ) : (
+              <Button disabled className="rounded-lg font-bold text-md">
+                <Ban className="mr-2 h-4 w-4" />
+                Unsupported&nbsp;Browser
+              </Button>
+            )}
+          </DialogFooter>
+        </div>
+
+        <div className="bg-gray-50 dark:bg-gray-900/50 p-4 border-t border-purple-100 dark:border-purple-900/30">
+          <p className="text-center text-sm text-muted-foreground">
+            Powered by&nbsp;
+            <a
+              href="https://github.com/gmgn-app/sigpass"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-bold text-purple-600 dark:text-purple-400 hover:underline underline-offset-2"
+            >
+              Sigpass <ExternalLink className="h-3 w-3" />
+            </a>
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}