- show sign message

- passkeys details
Web3Auth · Jul 9, 2024 · 5855bb7 · 5855bb7
1 parent 027c56d
commit 5855bb7
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 27 deletions.
diff --git a/example/react-app/src/assets/keyIcon.svg b/example/react-app/src/assets/keyIcon.svg
diff --git a/example/react-app/src/components/Account.tsx b/example/react-app/src/components/Account.tsx
@@ -32,6 +32,7 @@ const Account = () => {
       <Divider />
       <Button
         className="text-sm w-full"
+        title="Copy"
         onClick={() => {
           navigator.clipboard.writeText(address);
           setAddressToShow("Copied!");

diff --git a/example/react-app/src/components/Passkeys.tsx b/example/react-app/src/components/Passkeys.tsx
@@ -1,7 +1,6 @@
 import Card from "./Card";
 import { usePlayground } from "../services/playground";
 import keyIcon from "../assets/keyIcon.svg";
-import deleteIcon from "../assets/deleteIcon.svg";
 import Button from "./Button";
 import Divider from "./Divider";
 import Badge from "./Badge";
@@ -30,18 +29,14 @@ const Passkeys = () => {
       {hasPasskeys && (
         <div className="divide-y divide-app-gray-200 ">
           {passkeys.map((passkey, index) => (
-            <div key={index} className="flex items-center py-4">
+            <div key={passkey.id} className="flex items-center py-4">
               <div className="mr-2">
                 <img src={keyIcon} className="text-app-gray-900 w-5 h-5" alt="key" />
               </div>
               <div>
-                <h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">Passkey #{index + 1}</h4>
-                <p className="text-xs text-app-gray-400">{passkey?.created_at}</p>
-              </div>
-              <div className="ml-auto">
-                <button>
-                  <img src={deleteIcon} className="w-5" alt="key" />
-                </button>
+                <h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">{passkey.name}</h4>
+                <p className="text-xs text-app-gray-400">{passkey.detail1}</p>
+                <p className="text-xs text-app-gray-400">{passkey.detail2}</p>
               </div>
             </div>
           ))}

diff --git a/example/react-app/src/components/WalletServices.tsx b/example/react-app/src/components/WalletServices.tsx
@@ -2,10 +2,29 @@ import Card from "./Card";
 import { usePlayground } from "../services/playground";
 import walletServices from "../assets/walletServices.svg";
 import Button from "./Button";
+import { useState } from "react";
 
 const WalletServices = () => {
+  const [signedMessage, setSignedMessage] = useState<string>("");
+  const [signingState, setSigningState] = useState<"success" | "error" | "">("");
   const { showCheckout, showWalletUI, showWalletScanner, signMessage } = usePlayground();
 
+  async function onSignMessage() {
+    try {
+      const signature = await signMessage();
+      setSignedMessage(signature);
+      setSigningState("success");
+    } catch (error) {
+      console.error(error);
+      setSigningState("error");
+    } finally {
+      setTimeout(() => {
+        setSignedMessage("");
+        setSigningState("");
+      }, 3000);
+    }
+  }
+
   return (
     <Card className="text-center">
       <div className="mb-4">
@@ -23,9 +42,20 @@ const WalletServices = () => {
         <Button className="w-full" onClick={showWalletScanner}>
           Connect to Applications
         </Button>
-        <Button className="w-full" onClick={signMessage}>
-          Sign Personal Message
-        </Button>
+        {signedMessage ? (
+          <div
+            className={`border p-2 border-app-gray-500 text-app-gray-500 flex flex-col items-center justify-center text-sm rounded-md min-h-9 ${
+              signingState === "success" ? "bg-app-green-100 text-app-green-500" : "bg-app-red-100 text-app-red-800"
+            }`}
+          >
+            <div>{signingState === "success" ? "Signature Success!" : "Signature Failed, Try again"}</div>
+            {signedMessage && <div className="break-all text-xxs leading-tight mt-1">{signedMessage}</div>}
+          </div>
+        ) : (
+          <Button className="w-full" onClick={onSignMessage}>
+            Sign Personal Message
+          </Button>
+        )}
       </div>
     </Card>
   );

diff --git a/example/react-app/src/services/playground.tsx b/example/react-app/src/services/playground.tsx
@@ -11,6 +11,12 @@ import { shouldSupportPasskey } from "../utils";
 import { OpenloginUserInfo } from "@toruslabs/openlogin-utils";
 import RPC from "../evm.ethers";
 
+type PasskeysData = {
+  id: string;
+  name: string;
+  detail1: string;
+  detail2: string;
+};
 export interface IPlaygroundContext {
   address: string;
   balance: string;
@@ -22,7 +28,7 @@ export interface IPlaygroundContext {
   playgroundConsoleTitle: string;
   playgroundConsoleData: string;
   hasPasskeys: boolean;
-  passkeys: Record<string, string>[];
+  passkeys: PasskeysData[];
   isCancelModalOpen: boolean;
   showRegisterPasskeyModal: boolean;
   showInfoPopup: boolean;
@@ -36,7 +42,7 @@ export interface IPlaygroundContext {
   showCheckout: () => void;
   showWalletUI: () => void;
   showWalletScanner: () => void;
-  signMessage: () => void;
+  signMessage: () => Promise<string>;
   sendTransaction: () => void;
   toggleCancelModal: (isOpen: boolean) => void;
   toggleRegisterPasskeyModal: () => void;
@@ -69,7 +75,7 @@ export const PlaygroundContext = createContext<IPlaygroundContext>({
   showCheckout: async () => null,
   showWalletUI: async () => null,
   showWalletScanner: async () => null,
-  signMessage: async () => null,
+  signMessage: async () => "",
   sendTransaction: async () => null,
   toggleCancelModal: async () => null,
   toggleRegisterPasskeyModal: async () => null,
@@ -136,7 +142,7 @@ export const Playground = ({ children }: IPlaygroundProps) => {
   const [showRegisterPasskeyModal, setShowRegisterPasskeyModal] = useState<boolean>(false);
   const [showInfoPopup, setShowInfoPopup] = useState<boolean>(false);
   const [infoPopupCopy, setInfoPopupCopy] = useState<InfoPopupCopy>({});
-  const [passkeys, setPasskeys] = useState<Record<string, string>[]>([]);
+  const [passkeys, setPasskeys] = useState<PasskeysData[]>([]);
 
   // Dialog
   const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
@@ -260,14 +266,15 @@ export const Playground = ({ children }: IPlaygroundProps) => {
     await wsPlugin.showWalletUi();
   };
 
-  const signMessage = async () => {
+  const signMessage = async (): Promise<string> => {
     if (!provider) {
       uiConsole("No provider found");
-      return;
+      return "";
     }
     const rpc = new RPC(provider);
     const result = await rpc.signMessage();
     uiConsole(result);
+    return result;
   };
 
   const sendTransaction = async () => {
@@ -372,9 +379,17 @@ export const Playground = ({ children }: IPlaygroundProps) => {
           setChainId(`0x${chainId}`);
 
           const res = (await plugin?.listAllPasskeys()) as unknown as Record<string, string>[];
-          console.log("passkeys", res);
           setHasPasskeys(res.length > 0);
-          setPasskeys(res);
+          setPasskeys(
+            res.map((passkey) => {
+              return {
+                id: passkey.id,
+                name: passkey.provider_name,
+                detail1: `${passkey.browser} ${passkey.browser_version} (${passkey.os})`,
+                detail2: new Date(passkey.updated_at).toLocaleString(),
+              };
+            })
+          );
         });
         web3authSfa.on(ADAPTER_EVENTS.DISCONNECTED, () => {
           console.log("sfa:disconnected");

diff --git a/example/react-app/tailwind.config.js b/example/react-app/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontSize: {
+        xxs: "0.625rem",
+      },
       colors: {
         primary: "#0364FF",
         purple_100: "#EDEBFE",