feat(pou): fix check minting (#1718)

kadena-community · Feb 23, 2024 · 26ba2ed · 26ba2ed
1 parent 7dc8e87
commit 26ba2ed
Show file tree

Hide file tree

Showing 25 changed files with 295 additions and 121 deletions.
diff --git a/.changeset/funny-poems-drum.md b/.changeset/funny-poems-drum.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/proof-of-us/src/EditorForm/EditorForm.tsx b/packages/apps/proof-of-us/src/EditorForm/EditorForm.tsx
@@ -13,7 +13,7 @@ interface IProps {
 }
 
 export const EditorForm: FC<IProps> = ({ signer, onClose }) => {
-  const { updateSigner } = useProofOfUs();
+  const { updateSigner, updateProofOfUs } = useProofOfUs();
   const [error, setError] = useState<string>('');
   const formRef = useRef<HTMLFormElement>(null);
   const [socialIcon, setSocialIcon] = useState<
@@ -35,7 +35,7 @@ export const EditorForm: FC<IProps> = ({ signer, onClose }) => {
     firstElm.focus();
   }, [formRef.current]);
 
-  const handleSaveEditor: FormEventHandler<HTMLFormElement> = (evt) => {
+  const handleSaveEditor: FormEventHandler<HTMLFormElement> = async (evt) => {
     evt.preventDefault();
     setError('');
 
@@ -51,9 +51,11 @@ export const EditorForm: FC<IProps> = ({ signer, onClose }) => {
     }
     setSocialIcon(socialType?.icon);
 
-    updateSigner({
-      name: label,
-      socialLink,
+    await updateProofOfUs({
+      signees: updateSigner({
+        name: label,
+        socialLink,
+      }),
     });
 
     onClose();

diff --git a/packages/apps/proof-of-us/src/components/Button/style.css.ts b/packages/apps/proof-of-us/src/components/Button/style.css.ts
@@ -1,6 +1,6 @@
 import { deviceColors } from '@/styles/tokens.css';
 import { atoms } from '@kadena/react-ui/styles';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const buttonClass = style([
   atoms({
@@ -15,6 +15,11 @@ export const buttonClass = style([
     color: deviceColors.kadenaBlack,
     textTransform: 'uppercase',
     width: '100%',
+    selectors: {
+      '&:hover': {
+        opacity: '.8',
+      },
+    },
   },
 ]);
 
@@ -26,3 +31,7 @@ export const tertiaryClass = style({
   border: '0',
   backgroundColor: deviceColors.orange,
 });
+
+globalStyle(`${buttonClass} a`, {
+  textDecoration: 'none',
+});
diff --git a/packages/apps/proof-of-us/src/components/ConnectView/ConnectView.tsx b/packages/apps/proof-of-us/src/components/ConnectView/ConnectView.tsx
@@ -6,10 +6,11 @@ import { useSubmit } from '@/hooks/submit';
 import { isAlreadySigning } from '@/utils/isAlreadySigning';
 import { MonoSignature } from '@kadena/react-icons';
 import { Stack } from '@kadena/react-ui';
+import Link from 'next/link';
 import type { FC } from 'react';
 import { Button } from '../Button/Button';
+import { ListSignees } from '../ListSignees/ListSignees';
 import { ScreenHeight } from '../ScreenHeight/ScreenHeight';
-import { TextField } from '../TextField/TextField';
 
 interface IProps {
   proofOfUs: IProofOfUsData;
@@ -21,7 +22,10 @@ export const ConnectView: FC<IProps> = ({ proofOfUs }) => {
   const { isStatusLoading } = useSubmit();
 
   const handleJoin = async () => {
-    await signToken();
+    //TODO FIX for the isAlreadySigning changes to quick
+    setTimeout(() => {
+      signToken();
+    }, 500);
   };
 
   if (!proofOfUs) return null;
@@ -30,23 +34,30 @@ export const ConnectView: FC<IProps> = ({ proofOfUs }) => {
     <ScreenHeight>
       {isStatusLoading && <MainLoader />}
 
-      <TitleHeader label="Details" />
-
+      <TitleHeader label={proofOfUs.title ?? ''} />
       <ImagePositions />
-
-      <div>status: {proofOfUs?.mintStatus}</div>
-
-      <TextField
-        name="title"
-        placeholder="Title"
-        disabled
-        defaultValue={proofOfUs.title}
-      />
+      <ListSignees />
       <Stack flex={1} />
-      {!isAlreadySigning(proofOfUs.signees) && (
+      {!isAlreadySigning(proofOfUs.signees) ? (
         <Button onPress={handleJoin}>
           Sign <MonoSignature />
         </Button>
+      ) : (
+        <Stack gap="md">
+          <Button variant="secondary">
+            <Link href="/user">Dashboard</Link>
+          </Button>
+
+          {proofOfUs.tokenId && (
+            <Button>
+              <Link
+                href={`/user/proof-of-us/t/${proofOfUs.tokenId}/${proofOfUs.requestKey}`}
+              >
+                Go to Proof
+              </Link>
+            </Button>
+          )}
+        </Stack>
       )}
     </ScreenHeight>
   );

diff --git a/packages/apps/proof-of-us/src/components/ImagePositions/ImagePositions.tsx b/packages/apps/proof-of-us/src/components/ImagePositions/ImagePositions.tsx
@@ -11,7 +11,8 @@ import { imageClass, wrapperClass } from './style.css';
 interface IProps {}
 
 export const ImagePositions: FC<IProps> = () => {
-  const { proofOfUs, updateSigner, background } = useProofOfUs();
+  const { proofOfUs, updateSigner, background, updateProofOfUs } =
+    useProofOfUs();
   const { account } = useAccount();
   const [isMounted, setIsMounted] = useState(false);
   const [isLocked, setIsLocked] = useState(false);
@@ -84,7 +85,7 @@ export const ImagePositions: FC<IProps> = () => {
     };
   }, [wrapperRef, imgRef, proofOfUs?.signees, isMounted]);
 
-  const handleClick: MouseEventHandler<HTMLImageElement> = (e) => {
+  const handleClick: MouseEventHandler<HTMLImageElement> = async (e) => {
     if (!imgRef.current || isLocked) return;
     setIsEditorOpen(true);
 
@@ -93,11 +94,17 @@ export const ImagePositions: FC<IProps> = () => {
     const xPercentage = ((e.clientX - rect.left) / imgRef.current.width) * 100;
     const yPercentage = ((e.clientY - rect.top) / imgRef.current.height) * 100;
 
-    updateSigner({ position: { xPercentage, yPercentage } });
+    await updateProofOfUs({
+      signees: updateSigner({
+        position: { xPercentage, yPercentage },
+      }),
+    });
   };
 
-  const handleRemove = () => {
-    updateSigner({ position: null });
+  const handleRemove = async () => {
+    await updateProofOfUs({
+      signees: updateSigner({ position: null }),
+    });
   };
 
   return (

diff --git a/packages/apps/proof-of-us/src/components/ImagePositions/SavedImagePositions.tsx b/packages/apps/proof-of-us/src/components/ImagePositions/SavedImagePositions.tsx
@@ -32,7 +32,7 @@ export const SavedImagePositions: FC<IProps> = ({ data }) => {
     const wrapper = wrapperRef.current;
     const img = imgRef.current;
 
-    const elms = wrapper.querySelectorAll<HTMLDivElement>('div[data-position]');
+    const elms = wrapper.querySelectorAll<HTMLDivElement>('[data-position]');
     elms.forEach((elm, idx) => {
       const xPercentage: number = parseFloat(
         elm.getAttribute('data-xpercentage') ?? '0',
@@ -77,7 +77,14 @@ export const SavedImagePositions: FC<IProps> = ({ data }) => {
           const position = s.position;
           if (!position || !position?.xPercentage || !position.yPercentage)
             return null;
-          return <SigneePosition key={s.name} position={position} idx={idx} />;
+          return (
+            <SigneePosition
+              variant="small"
+              key={s.name}
+              position={position}
+              idx={idx}
+            />
+          );
         })}
       </section>
     </>

diff --git a/packages/apps/proof-of-us/src/components/ImagePositions/style.css.ts b/packages/apps/proof-of-us/src/components/ImagePositions/style.css.ts
@@ -11,6 +11,7 @@ export const wrapperClass = style([
 
 export const savedImageClass = style([
   atoms({
+    position: 'absolute',
     width: '100%',
   }),
 ]);
@@ -37,10 +38,11 @@ export const imageWrapper = style([
 ]);
 export const gradientClass = style([
   {
-    position: 'relative',
-    bottom: '80px',
+    position: 'absolute',
+    bottom: '0',
     width: '100%',
     height: '80px',
     background: `linear-gradient(0deg, ${deviceColors.kadenaBlack}FF 5%, ${deviceColors.kadenaBlack}00 100%)`,
+    zIndex: 2,
   },
 ]);
diff --git a/packages/apps/proof-of-us/src/components/ListSignees/ListSignees.tsx b/packages/apps/proof-of-us/src/components/ListSignees/ListSignees.tsx
@@ -12,7 +12,6 @@ export const ListSignees: FC = () => {
   const initiator = proofOfUs?.signees?.find((s) => s.initiator);
   const signee = proofOfUs?.signees?.find((s) => !s.initiator);
 
-  console.log(proofOfUs?.signees);
   return (
     <Stack flexDirection="column" gap="md">
       <Heading as="h6">Signees</Heading>

diff --git a/packages/apps/proof-of-us/src/components/MintView/MintView.tsx b/packages/apps/proof-of-us/src/components/MintView/MintView.tsx
@@ -24,24 +24,25 @@ interface IProps {
   status: number;
 }
 
-export const MintView: FC<IProps> = ({ prev }) => {
+export const MintView: FC<IProps> = () => {
   const { proofOfUs } = useProofOfUs();
   const { doSubmit, isStatusLoading, status, result } = useSubmit();
   const { uploadBackground } = useAvatar();
   const router = useRouter();
 
-  const handleGoToProof = async () => {
-    alert('we need to implement this');
-  };
-
   const handleMint = async () => {
     if (!proofOfUs) return;
-    Promise.all([
-      doSubmit(proofOfUs.tx),
-      uploadBackground(proofOfUs.proofOfUsId),
-    ]).then((values) => {
-      console.log(values);
-    });
+
+    try {
+      await uploadBackground(proofOfUs.proofOfUsId);
+    } catch (e) {
+      console.error('UPLOAD ERR');
+    }
+    try {
+      await doSubmit(proofOfUs.tx);
+    } catch (e) {
+      console.error('SUBMIT ERR');
+    }
   };
 
   useEffect(() => {
@@ -53,6 +54,10 @@ export const MintView: FC<IProps> = ({ prev }) => {
     handleMint();
   }, [proofOfUs?.tx]);
 
+  const handleGoToProof = async () => {
+    alert('we need to implement this');
+  };
+
   const handleClose = () => {
     router.push('/user');
   };

diff --git a/packages/apps/proof-of-us/src/components/ProofOfUsProvider/ProofOfUsProvider.tsx b/packages/apps/proof-of-us/src/components/ProofOfUsProvider/ProofOfUsProvider.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useAccount } from '@/hooks/account';
 import { getSigneeAccount } from '@/utils/getSigneeAccount';
+import { isAlreadySigning } from '@/utils/isAlreadySigning';
 import { store } from '@/utils/socket/store';
 import { useParams } from 'next/navigation';
 import type { FC, PropsWithChildren } from 'react';
@@ -26,14 +27,13 @@ export interface IProofOfUsContext {
     signee: IProofOfUsSignee;
   }) => Promise<void>;
   createToken: ({ proofOfUsId }: { proofOfUsId: string }) => Promise<void>;
-  addTx: (tx: string) => Promise<void>;
   changeTitle: (value: string) => Promise<void>;
   updateBackgroundColor: (value: string) => Promise<void>;
   isConnected: () => boolean;
   isInitiator: () => boolean;
   hasSigned: () => boolean;
-  getSigneeAccount: (account: IAccount) => IProofOfUsSignee;
-  updateSigner: (value: any, isOverwrite?: boolean) => Promise<void>;
+  updateSigner: (value: any, isOverwrite?: boolean) => IProofOfUsSignee[];
+  updateProofOfUs: (value: any) => Promise<void>;
 }
 
 export const ProofOfUsContext = createContext<IProofOfUsContext>({
@@ -51,17 +51,10 @@ export const ProofOfUsContext = createContext<IProofOfUsContext>({
   isConnected: () => false,
   isInitiator: () => false,
   hasSigned: () => false,
-  updateSigner: async () => {},
-  addTx: async () => {},
-  getSigneeAccount: (account: IAccount) => {
-    return {
-      accountName: account.accountName,
-      alias: account.alias,
-      initiator: false,
-      signerStatus: 'init',
-      publicKey: '',
-    };
+  updateSigner: () => {
+    return [];
   },
+  updateProofOfUs: async () => {},
 });
 
 export const ProofOfUsProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -130,14 +123,25 @@ export const ProofOfUsProvider: FC<PropsWithChildren> = ({ children }) => {
     await store.updateBackgroundColor(proofOfUs, value);
   };
 
-  const updateSigner = async (value: any, updateSigner: boolean = false) => {
+  const updateSigner = (value: any, isOverwrite: boolean = false) => {
+    if (!proofOfUs) return [];
+    if (!account) return proofOfUs.signees;
+
+    if (!isOverwrite && isAlreadySigning(proofOfUs.signees))
+      return proofOfUs.signees;
+
+    const newList: IProofOfUsSignee[] = proofOfUs.signees.map((a) => {
+      if (a.accountName === account.accountName) {
+        return { ...a, ...value };
+      }
+      return a;
+    });
+
+    return newList;
+  };
+  const updateProofOfUs = async (value: any) => {
     if (!proofOfUs || !account) return;
-    await store.updateSigner(
-      proofOfUs,
-      getSigneeAccount(account, proofOfUs),
-      value,
-      updateSigner,
-    );
+    await store.updateProofOfUs(proofOfUs, value);
   };
 
   const hasSigned = (): boolean => {
@@ -161,12 +165,6 @@ export const ProofOfUsProvider: FC<PropsWithChildren> = ({ children }) => {
     return !!foundAccount?.initiator;
   };
 
-  const addTx = async (tx: string) => {
-    if (!proofOfUs || !account) return;
-
-    await store.updateTx(proofOfUs, tx);
-  };
-
   return (
     <ProofOfUsContext.Provider
       value={{
@@ -176,14 +174,13 @@ export const ProofOfUsProvider: FC<PropsWithChildren> = ({ children }) => {
         createToken,
         isConnected,
         isInitiator,
-        getSigneeAccount,
         background,
         proofOfUs,
         updateStatus,
         changeTitle,
         updateBackgroundColor,
+        updateProofOfUs,
         updateSigner,
-        addTx,
         hasSigned,
       }}
     >

diff --git a/packages/apps/proof-of-us/src/components/Signees/Signees.tsx b/packages/apps/proof-of-us/src/components/Signees/Signees.tsx
@@ -7,7 +7,6 @@ interface IProps {
   authors: { name: string }[];
 }
 export const Signees: FC<IProps> = ({ signees, authors }) => {
-  console.log({ signees, authors });
   return (
     <section className={wrapperClass}>
       {signees