feat(proof): connect to spirekey sdk

packages/apps/proof-of-us/.eslintrc.cjs

@@ -25,5 +25,6 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/strict-boolean-expressions': 'off',
     '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/consistent-type-imports': 'off',
   },
 };

packages/apps/proof-of-us/.gitignore

@@ -10,4 +10,6 @@ certificates
 
 # generated files
 src/__generated__
-!src/__generated__/.gitkeep
+!src/__generated__/.gitkeep
+.vercel
+.env*.local

packages/apps/proof-of-us/package.json

@@ -31,6 +31,7 @@
     "@kadena/kode-icons": "workspace:*",
     "@kadena/kode-ui": "workspace:*",
     "@kadena/pactjs": "workspace:*",
+    "@kadena/spirekey-sdk": "0.0.1-dev-12",
     "@pinata/sdk": "^2.1.0",
     "@vanilla-extract/css": "1.14.2",
     "@vanilla-extract/recipes": "0.5.1",

packages/apps/proof-of-us/src/components/AccountProvider/AccountProvider.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { env } from '@/utils/env';
 import { getAccountCookieName } from '@/utils/getAccountCookieName';
-import { getReturnUrl } from '@/utils/getReturnUrl';
 import { store } from '@/utils/socket/store';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { connect, initSpireKey } from '@kadena/spirekey-sdk';
+import { useRouter } from 'next/navigation';
 import type { FC, PropsWithChildren } from 'react';
 import { createContext, useCallback, useEffect, useState } from 'react';
 
@@ -30,27 +30,17 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   const [account, setAccount] = useState<IAccount>();
   const [isMounted, setIsMounted] = useState(false);
   const router = useRouter();
-  const searchParams = useSearchParams();
 
-  const decodeAccount = useCallback((userResponse: string) => {
-    if (!userResponse) return;
+  const login = useCallback(async () => {
     try {
-      const account: IAccount = JSON.parse(
-        Buffer.from(userResponse, 'base64').toString(),
-      );
-      return account;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      return;
+      setIsMounted(true);
+      const acc = await connect(env.NETWORKID, env.CHAINID);
+      setAccount(acc);
+      localStorage.setItem(getAccountCookieName(), JSON.stringify(acc));
+      store.saveAlias(account);
+    } catch (e) {
+      localStorage.removeItem(getAccountCookieName());
     }
-  }, []);
-
-  const login = useCallback(() => {
-    router.push(
-      `${env.WALLET_URL}/connect?returnUrl=${getReturnUrl([
-        'user',
-      ])}&networkId=${env.NETWORKID}&chainId=${env.CHAINID}&optimistic=true`,
-    );
   }, [router]);
 
   const logout = useCallback(() => {
@@ -59,38 +49,22 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
     router.replace('/');
   }, []);
 
-  const loginResponse = useCallback(async () => {
-    const innerSearchParams = new URLSearchParams(window.location.search);
-    const userResponse = innerSearchParams.has('user')
-      ? innerSearchParams.get('user')
-      : localStorage.getItem(getAccountCookieName());
-
-    if (!userResponse) {
-      setIsMounted(true);
-      return;
+  useEffect(() => {
+    const storage = localStorage.getItem(getAccountCookieName());
+    if (storage) {
+      try {
+        setAccount(JSON.parse(storage));
+      } catch (e) {
+        localStorage.removeItem(getAccountCookieName());
+      }
     }
 
-    if (innerSearchParams.has('user')) {
-      localStorage.setItem(getAccountCookieName(), userResponse);
-    }
-    const account = decodeAccount(userResponse);
-    store.saveAlias(account);
-    setAccount(account);
+    initSpireKey({
+      hostUrl: 'https://spirekey.kadena.io',
+    });
     setIsMounted(true);
-
-    if (searchParams.has('user')) {
-      setTimeout(() => {
-        router.replace(getReturnUrl(['user']));
-      }, 100);
-    }
-  }, [setAccount, setIsMounted, searchParams, decodeAccount, router]);
-
-  useEffect(() => {
-    loginResponse();
   }, []);
 
-  console.log({ account }, account?.accountName);
-
   return (
     <AccountContext.Provider value={{ account, login, logout, isMounted }}>
       {children}

packages/apps/proof-of-us/src/components/LoginBoundry/LoginBoundry.tsx

@@ -1,14 +1,30 @@
 import { useAccount } from '@/hooks/account';
+import { Stack } from '@kadena/kode-ui';
 import type { FC, PropsWithChildren } from 'react';
-import { useEffect } from 'react';
+import { Button } from '../Button/Button';
 
 export const LoginBoundry: FC<PropsWithChildren> = ({ children }) => {
   const { account, isMounted, login } = useAccount();
 
-  useEffect(() => {
-    if (!account && isMounted) {
-      login();
-    }
-  }, [account, isMounted]);
+  const handleLogin = () => {
+    login();
+  };
+
+  if (!isMounted) return;
+
+  if (isMounted && !account) {
+    return (
+      <Stack
+        width="100%"
+        height="100%"
+        justifyContent="center"
+        alignItems="center"
+        paddingInline="xxxl"
+      >
+        <Button onPress={handleLogin}>Login</Button>
+      </Stack>
+    );
+  }
+
   return <>{children}</>;
 };

packages/apps/proof-of-us/src/components/ProofOfUsProvider/ProofOfUsProvider.tsx

@@ -44,6 +44,7 @@ export interface IProofOfUsContext {
   hasSigned: () => Promise<boolean>;
   isSignee: () => Promise<boolean>;
   getSignee: () => Promise<IProofOfUsSignee | undefined>;
+  getSignees: () => Promise<IProofOfUsSignee[]>;
   updateSigneePing: (signee: IProofOfUsSignee) => Promise<void>;
   updateProofOfUs: (value: any) => Promise<void>;
   getSignature: (tx: IUnsignedCommand) => Promise<string | undefined>;
@@ -69,6 +70,7 @@ export const ProofOfUsContext = createContext<IProofOfUsContext>({
   hasSigned: async () => false,
   isSignee: async () => false,
   getSignee: async () => undefined,
+  getSignees: async () => [],
   updateSigneePing: async () => {},
   updateProofOfUs: async () => {},
   getSignature: async () => undefined,
@@ -299,6 +301,12 @@ export const ProofOfUsProvider: FC<IProps> = ({ children, proofOfUsId }) => {
     return signee;
   };
 
+  const getSignees = async (): Promise<IProofOfUsSignee[]> => {
+    if (!proofOfUs) return [];
+
+    return store.getProofOfUsSignees(proofOfUs.proofOfUsId);
+  };
+
   const updateSigneePing = async (signee: IProofOfUsSignee): Promise<void> => {
     if (!proofOfUs) return;
     return store.updateSigneePing(proofOfUs, signee);
@@ -359,6 +367,7 @@ export const ProofOfUsProvider: FC<IProps> = ({ children, proofOfUsId }) => {
         hasSigned,
         isSignee,
         getSignee,
+        getSignees,
         updateSigneePing,
         getSignature,
         resetSignatures,

packages/apps/proof-of-us/src/components/Providers/Providers.tsx

@@ -2,7 +2,7 @@
 import { localStorageProvider } from '@/utils/localStorageProvider';
 import type { NormalizedCacheObject } from '@apollo/client';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-
+import { darkThemeClass } from '@kadena/kode-ui/styles';
 import { ThemeProvider } from 'next-themes';
 import type { FC, PropsWithChildren } from 'react';
 import { SWRConfig } from 'swr';
@@ -26,7 +26,15 @@ export const Providers: FC<PropsWithChildren> = ({ children }) => {
       <ApolloProvider client={client}>
         <AccountProvider>
           <TokenProvider>
-            <ThemeProvider>{children}</ThemeProvider>
+            <ThemeProvider
+              attribute="class"
+              value={{
+                light: 'light',
+                dark: darkThemeClass,
+              }}
+            >
+              {children}
+            </ThemeProvider>
           </TokenProvider>
         </AccountProvider>
       </ApolloProvider>

packages/apps/proof-of-us/src/components/ShareView/ShareView.tsx

@@ -149,12 +149,9 @@ export const ShareView: FC<IProps> = ({ prev, status }) => {
     const transactionData = await createTx();
 
     if (!transactionData) return;
-    const transaction = Buffer.from(
-      JSON.stringify(transactionData.transaction),
-    ).toString('base64');
 
     updateProofOfUs({
-      tx: transaction,
+      tx: JSON.stringify(transactionData.transaction),
       requestKey: transactionData.transaction?.hash,
       tokenId: transactionData.tokenId,
       manifestData: JSON.stringify(transactionData.manifest),

packages/apps/proof-of-us/src/features/CreateProofOfUs/CreateProofOfUs.tsx

@@ -1,6 +1,5 @@
 import { AvatarEditor } from '@/components/AvatarEditor/AvatarEditor';
 import { DetailView } from '@/components/DetailView/DetailView';
-import { MintView } from '@/components/MintView/MintView';
 import { ShareView } from '@/components/ShareView/ShareView';
 import { useProofOfUs } from '@/hooks/proofOfUs';
 import { createProofOfUsID } from '@/utils/createProofOfUsID';
@@ -56,7 +55,6 @@ export const CreateProofOfUs: FC<IProps> = ({ params }) => {
       {status === 1 && <AvatarEditor next={next} status={status} />}
       {status === 2 && <DetailView next={next} prev={prev} />}
       {status === 3 && <ShareView next={next} prev={prev} status={status} />}
-      {status >= 4 && <MintView next={next} prev={prev} status={status} />}
     </div>
   );
 };