- use confirmationStrategy modal

- update deps - added nft services - minor fixes
Web3Auth · Jul 10, 2024 · 9599a4c · 9599a4c
1 parent 4631406
commit 9599a4c
Show file tree

Hide file tree

Showing 13 changed files with 14,078 additions and 17,213 deletions.
diff --git a/example/react-app/.env.development b/example/react-app/.env.development
@@ -0,0 +1,2 @@
+VITE_APP_NFT_CHECKOUT_HOST=https://develop-nft-checkout.web3auth.io
+VITE_APP_NFT_CHECKOUT_API_KEY=pk_test_4ca499b1f017c2a96bac63493dca4ac2eb08d1e91de0a796d87137dc7278e0af
diff --git a/example/react-app/package-lock.json b/example/react-app/package-lock.json
diff --git a/example/react-app/package.json b/example/react-app/package.json
@@ -11,15 +11,13 @@
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@web3auth/base": "^8.4.1",
-    "@web3auth/ethereum-provider": "^8.4.1",
+    "@web3auth/base": "^8.8.0",
+    "@web3auth/ethereum-provider": "^8.10.1",
     "@web3auth/passkeys-sfa-plugin": "^8.0.1",
     "@web3auth/single-factor-auth": "../../",
-    "@web3auth/wallet-services-plugin": "^8.6.1",
+    "@web3auth/wallet-services-plugin": "^8.10.1",
     "bowser": "^2.11.0",
     "ethers": "^6.12.1",
-    "firebase": "^10.12.0",
-    "hamburger-react": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",

diff --git a/example/react-app/src/assets/nftSample.svg b/example/react-app/src/assets/nftSample.svg
diff --git a/example/react-app/src/components/Account.tsx b/example/react-app/src/components/Account.tsx
@@ -26,7 +26,7 @@ const Account = () => {
       <div>
         <h3 className="font-bold text-app-gray-800 mb-2">{userInfo?.name || ""}</h3>
         <p className="text-xs text-app-gray-400 mb-1">{userInfo?.email ? userInfo?.email : userInfo?.name}</p>
-        <button className="leading-none text-xs text-app-primary-600" onClick={getUserInfo}>
+        <button className="leading-none text-xs text-app-primary-600 hover:underline" onClick={getUserInfo}>
           View User Info
         </button>
       </div>

diff --git a/example/react-app/src/components/Button.tsx b/example/react-app/src/components/Button.tsx
@@ -1,13 +1,49 @@
 type BaseButtonAttributes = React.ComponentPropsWithoutRef<"button">;
+type BaseHyperlinkAttributes = React.ComponentPropsWithoutRef<"a">;
 
-interface ButtonProps extends BaseButtonAttributes {}
+const Button = (props: BaseButtonAttributes | BaseHyperlinkAttributes) => {
+  const { children, className } = props as BaseButtonAttributes;
+  const { href } = props as BaseHyperlinkAttributes;
 
-const Button = (props: ButtonProps) => {
-  const { children, className } = props;
+  if (href) {
+    return (
+      <a
+        {...(props as BaseHyperlinkAttributes)}
+        className={`flex
+          rounded-md
+          h-[42px]
+          px-5
+          py-2.5
+          text-sm
+          items-center
+          justify-center
+          ease-linear
+          transition-all
+          duration-150
+          outline-none
+          bg-transparent
+          text-app-gray-800
+          border
+          border-app-gray-300
+          hover:bg-app-gray-200
+          active:bg-transparent
+          active:border-app-primary-600
+          active:ring-1
+          active:ring-app-primary-600
+          focus-visible:border-app-primary-600
+          focus-visible:bg-transparent
+          focus-visible:ring-1
+          focus-visible:ring-app-primary-600
+      ${className}`}
+      >
+        {children}
+      </a>
+    );
+  }
 
   return (
     <button
-      {...props}
+      {...(props as BaseButtonAttributes)}
       className={`flex
         rounded-md
         h-[42px]

diff --git a/example/react-app/src/components/DocsDetails.tsx b/example/react-app/src/components/DocsDetails.tsx
@@ -8,7 +8,12 @@ const DocsDetails = () => {
         <h3 className="font-semibold text-app-gray-900  mb-1">Experience Web3Auth, first hand</h3>
         <p className="text-xs text-app-gray-500 ">
           Browse our full suite of features for your dApp with our docs. Access codes examples for these features by visiting our
-          <a href="https://web3auth.io/customers.html" className="text-xs text-app-primary-600 ml-1" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://web3auth.io/customers.html"
+            className="text-xs text-app-primary-600 hover:underline ml-1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             playground
           </a>
           .

diff --git a/example/react-app/src/components/NftServices.tsx b/example/react-app/src/components/NftServices.tsx
@@ -0,0 +1,112 @@
+import Button from "./Button";
+import Card from "./Card";
+import nftSample from "../assets/nftSample.svg";
+import { useEffect, useState } from "react";
+import config from "../config";
+import { usePlayground } from "../services/playground";
+
+const FREE_MINT_CONTRACT_ID = "b5b4de3f-0212-11ef-a08f-0242ac190003";
+const PAID_MINT_CONTRACT_ID = "d1145a8b-98ae-44e0-ab63-2c9c8371caff";
+
+const DocsDetails = () => {
+  const [showNftMinting, setShowNftMinting] = useState(false);
+  const [showNftPurchase, setShowNftPurchase] = useState(false);
+  const { address: receiverAddress } = usePlayground();
+
+  const demoNftMintingUrl = `${config.nftCheckoutHost}/?contract_id=${FREE_MINT_CONTRACT_ID}&receiver_address=${receiverAddress}&api_key=${config.nftCheckoutApiKey}`;
+
+  const demoNftPurchaseUrl = `${config.nftCheckoutHost}/?contract_id=${PAID_MINT_CONTRACT_ID}&receiver_address=${receiverAddress}&api_key=${config.nftCheckoutApiKey}`;
+
+  const openNftMinting = () => {
+    setShowNftMinting(true);
+  };
+
+  const openNftPurchase = () => {
+    setShowNftPurchase(true);
+  };
+
+  function closeFromFrame(event: MessageEvent) {
+    if (event.origin === config.nftCheckoutHost && event.data === "close-nft-checkout") {
+      setShowNftMinting(false);
+      setShowNftPurchase(false);
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("message", closeFromFrame);
+    return () => {
+      window.removeEventListener("message", closeFromFrame);
+    };
+  });
+
+  return (
+    <Card>
+      <div className="mb-4 text-center">
+        <h3 className="font-semibold text-app-gray-900  mb-1">NFT Services</h3>
+        <p className="text-xs text-app-gray-500 ">Let your users to claim or buy NFT in seconds</p>
+      </div>
+
+      <img src={nftSample} className="w-full max-w-xs mx-auto h-auto mb-6" alt="" />
+
+      <div className="space-y-2 mb-4">
+        <Button className="w-full" onClick={openNftMinting}>
+          Mint free NFT airdrop
+        </Button>
+        <Button className="w-full" onClick={openNftPurchase}>
+          NFT Checkout
+        </Button>
+      </div>
+
+      <div className="text-center">
+        <a
+          className="text-sm text-app-primary-600 hover:underline"
+          href="https://docs.stripe.com/testing#cards"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Try with our test credit cards
+        </a>
+      </div>
+      {showNftMinting && (
+        <iframe
+          id="nftCheckoutIFrame"
+          title="nft_minting"
+          src={demoNftMintingUrl}
+          name="nft_minting"
+          allow="clipboard-write"
+          style={{
+            position: "fixed",
+            top: 0,
+            right: 0,
+            width: "100%",
+            height: "100%",
+            border: "none",
+            borderRadius: 0,
+            zIndex: 99999,
+          }}
+        />
+      )}
+
+      {showNftPurchase && (
+        <iframe
+          id="nftCheckoutIFrame"
+          src={demoNftPurchaseUrl}
+          title="nft_purchase"
+          name="nft_purchase"
+          style={{
+            position: "fixed",
+            top: 0,
+            right: 0,
+            width: "100%",
+            height: "100%",
+            border: "none",
+            borderRadius: 0,
+            zIndex: 99999,
+          }}
+          allow="clipboard-write"
+        />
+      )}
+    </Card>
+  );
+};
+export default DocsDetails;
diff --git a/example/react-app/src/config.ts b/example/react-app/src/config.ts
@@ -0,0 +1,6 @@
+const config = {
+  nftCheckoutHost: import.meta.env.VITE_APP_NFT_CHECKOUT_HOST,
+  nftCheckoutApiKey: import.meta.env.VITE_APP_NFT_CHECKOUT_API_KEY,
+};
+
+export default config;
diff --git a/example/react-app/src/pages/HomePage.tsx b/example/react-app/src/pages/HomePage.tsx
@@ -8,6 +8,7 @@ import WalletServices from "../components/WalletServices";
 import Card from "../components/Card";
 import DocsDetails from "../components/DocsDetails";
 import Console from "../components/Console";
+import NftServices from "../components/NftServices";
 
 function HomePage() {
   const dialogHowRef = useRef<HTMLDialogElement>(null);
@@ -24,25 +25,33 @@ function HomePage() {
     toggleDialog(showRegisterPasskeyModal);
   }, [showRegisterPasskeyModal]);
 
+
+  useEffect(() => {
+    document.title = "Home";
+    console.log("Home Page");
+  });
   return isLoading ? (
     <Loader />
   ) : (
     <div className="flex-grow flex py-4 px-4 sm:py-6 sm:px-10">
-      <div className="w-full columns-1 sm:columns-2 lg:columns-3 break-before-avoid max-w-6xl mx-auto">
+      <div className="w-full columns-1 sm:columns-2 lg:columns-3 xl:columns-4 break-before-avoid mx-auto">
         <div className="break-inside-avoid space-y-4 mb-4">
           <Account />
           <Passkeys />
         </div>
-        <div className="break-inside-avoid space-y-4 mb-4">
+        <div className="break-inside-avoid lg:break-after-avoid xl:break-after-column mb-4">
           <WalletServices />
         </div>
+        <div className="break-inside-avoid xl:break-after-column mb-4">
+          <NftServices />
+        </div>
         <div className="break-inside-avoid space-y-4">
           <DocsDetails />
           <Card>
             <p className="text-sm text-app-gray-800">
               Have any questions?
               <a
-                className="text-app-primary-600 inline mx-1"
+                className="text-app-primary-600 hover:underline inline mx-1"
                 href="https://calendly.com/web3auth/meeting-with-web3auth"
                 target="_blank"
                 rel="noopener noreferrer"

diff --git a/example/react-app/src/services/playground.tsx b/example/react-app/src/services/playground.tsx
@@ -251,10 +251,15 @@ export const Playground = ({ children }: IPlaygroundProps) => {
       uiConsole("No provider found");
       return "";
     }
-    const rpc = new RPC(provider);
-    const result = await rpc.signMessage();
-    uiConsole(result);
-    return result;
+
+    const message = "YOUR_MESSAGE";
+    const from = address;
+    const signedMessage = (await wsPlugin?.wsEmbedInstance.provider.request<[string, string], string>({
+      method: "personal_sign",
+      params: [message, from],
+    })) as string;
+    uiConsole(signedMessage);
+    return signedMessage;
   };
 
   const sendTransaction = async () => {
@@ -321,6 +326,7 @@ export const Playground = ({ children }: IPlaygroundProps) => {
               logoLight: "https://web3auth.io/images/web3auth-logo.svg",
               logoDark: "https://web3auth.io/images/web3auth-logo-w.svg",
             },
+            confirmationStrategy: "modal",
           },
         });
         web3authSfa?.addPlugin(wsPlugin);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_APP_NFT_CHECKOUT_HOST=https://develop-nft-checkout.web3auth.io
		VITE_APP_NFT_CHECKOUT_API_KEY=pk_test_4ca499b1f017c2a96bac63493dca4ac2eb08d1e91de0a796d87137dc7278e0af