feat: 🎸 update zk logic

sarah-portkey · Aug 26, 2024 · 42bcb35 · 42bcb35
1 parent fbd4e02
commit 42bcb35
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 41 deletions.
diff --git a/packages/did-ui-react/src/components/Guardian/index.component.tsx b/packages/did-ui-react/src/components/Guardian/index.component.tsx
@@ -188,6 +188,7 @@ function GuardianMain({
             );
           }
         }
+        await fetchGuardianList();
         setStep(GuardianStep.guardianList);
         onAddGuardianFinish?.({ syncStatus });
       } catch (e) {
@@ -203,7 +204,7 @@ function GuardianMain({
         setLoading(false);
       }
     },
-    [sandboxId, originChainId, caHash, accelerateChainId, onAddGuardianFinish, onError, isErrorTip],
+    [sandboxId, originChainId, caHash, accelerateChainId, fetchGuardianList, onAddGuardianFinish, onError, isErrorTip],
   );
   const handleEditGuardian = useCallback(
     async (
@@ -224,6 +225,7 @@ function GuardianMain({
           chainId: originChainId,
           caHash,
         });
+        await fetchGuardianList();
         setStep(GuardianStep.guardianList);
       } catch (e) {
         return errorTip(
@@ -238,7 +240,7 @@ function GuardianMain({
         setLoading(false);
       }
     },
-    [preGuardian, sandboxId, originChainId, caHash, isErrorTip, onError],
+    [preGuardian, sandboxId, originChainId, caHash, fetchGuardianList, isErrorTip, onError],
   );
   const handleRemoveGuardian = useCallback(
     async (approvalInfo: GuardiansApproved[], _currentGuardian?: UserGuardianStatus) => {
@@ -254,6 +256,7 @@ function GuardianMain({
           chainId: originChainId,
           caHash,
         });
+        await fetchGuardianList();
         setStep(GuardianStep.guardianList);
       } catch (e) {
         return errorTip(
@@ -268,7 +271,7 @@ function GuardianMain({
         setLoading(false);
       }
     },
-    [currentGuardian, sandboxId, originChainId, caHash, isErrorTip, onError],
+    [currentGuardian, sandboxId, originChainId, caHash, fetchGuardianList, isErrorTip, onError],
   );
   const handleSetLoginGuardian = useCallback(
     async (currentGuardian: UserGuardianStatus, approvalInfo: GuardiansApproved[]) => {

diff --git a/packages/did-ui-react/src/components/GuardianAdd/index.component.tsx b/packages/did-ui-react/src/components/GuardianAdd/index.component.tsx
@@ -48,7 +48,6 @@ import BackHeader from '../BackHeader';
 import {
   AccountGuardianList,
   AddGuardiansType,
-  VerifyTypeEnum,
   guardianAccountExistTip,
   verifierExistTip,
   zkGuardianType,
@@ -177,8 +176,8 @@ function GuardianAdd({
       })),
     [guardianList, verifierList],
   );
-  const defaultSelectedVerifierId = useMemo(
-    () => verifierSelectItems?.find((item) => !item.disabled)?.id || verifierSelectItems?.[0].id,
+  const defaultSelectedVerifier = useMemo(
+    () => verifierSelectItems?.find((item) => !item.disabled) || verifierSelectItems?.[0],
     [verifierSelectItems],
   );
 
@@ -313,7 +312,6 @@ function GuardianAdd({
             redirectURI,
             network: networkType,
             managerAddress: managementAccount?.address,
-            verifyType: VerifyTypeEnum.zklogin,
           });
           if (!response?.token) throw new Error('add guardian failed');
           token = response.token;
@@ -367,7 +365,7 @@ function GuardianAdd({
             verifyToken: {
               type: curGuardian.current?.guardianType,
               accessToken: zkAuth.access_token,
-              verifierId: defaultSelectedVerifierId,
+              verifierId: defaultSelectedVerifier?.id,
               chainId: originChainId,
               operationType: OperationTypeEnum.addGuardian,
             },
@@ -423,7 +421,7 @@ function GuardianAdd({
       zkAuth.id_token,
       zkAuth.timestamp,
       verifyZKLogin,
-      defaultSelectedVerifierId,
+      defaultSelectedVerifier?.id,
       originChainId,
       managementAccount?.address,
       verifyToken,
@@ -462,10 +460,13 @@ function GuardianAdd({
       return false;
     }
     // 4. check verifier exist
-    const _verifierExist = _guardianList?.some((temp) => temp.verifierId === verifier.id);
-    if (_verifierExist) {
-      setVerifierExist(true);
-      return false;
+
+    if (!(curGuardian.current?.guardianType && zkGuardianType.includes(curGuardian.current?.guardianType))) {
+      const _verifierExist = _guardianList?.some((temp) => temp.verifierId === verifier.id);
+      if (_verifierExist) {
+        setVerifierExist(true);
+        return false;
+      }
     }
 
     const _key = `${guardianAccount}&${verifier.id}`;
@@ -648,9 +649,13 @@ function GuardianAdd({
   }, []);
   const approvalSuccess = useCallback(
     async (approvalInfo: GuardiansApproved[]) => {
+      let _cur = curGuardian.current;
+      if (_cur?.guardianType && zkGuardianType.includes(_cur?.guardianType)) {
+        _cur = Object.assign(_cur, { verifierId: defaultSelectedVerifier?.id, verifier: defaultSelectedVerifier });
+      }
       try {
         setLoading(true);
-        await handleAddGuardian?.(curGuardian.current!, approvalInfo);
+        await handleAddGuardian?.(_cur!, approvalInfo);
       } catch (e) {
         errorTip(
           {
@@ -664,7 +669,7 @@ function GuardianAdd({
         setLoading(false);
       }
     },
-    [handleAddGuardian, isErrorTip, onError],
+    [defaultSelectedVerifier, handleAddGuardian, isErrorTip, onError],
   );
   const onConfirm = useCallback(async () => {
     let _valid = true;

diff --git a/packages/did-ui-react/src/components/GuardianEdit/index.less b/packages/did-ui-react/src/components/GuardianEdit/index.less
@@ -26,6 +26,10 @@
         width: 32px;
         height: 32px;
         flex-shrink: 0;
+        svg {
+          width: 16px;
+          height: 16px;
+        }
       }
       .base-verifier-icon {
         margin-right: 12px;

diff --git a/packages/did-ui-react/src/components/GuardianView/index.component.tsx b/packages/did-ui-react/src/components/GuardianView/index.component.tsx
@@ -38,6 +38,7 @@ import ThrottleButton from '../ThrottleButton';
 import { getOperationDetails } from '../utils/operation.util';
 import { getSocialConfig } from '../utils/social.utils';
 import GuardianTypeIcon from '../GuardianTypeIcon';
+import { usePortkeyAsset } from '../context/PortkeyAssetProvider';
 
 export interface GuardianViewProps {
   header?: ReactNode;
@@ -71,6 +72,7 @@ function GuardianView({
     () => currentGuardian?.verifiedByZk || currentGuardian?.manuallySupportForZk,
     [currentGuardian?.manuallySupportForZk, currentGuardian?.verifiedByZk],
   );
+  const [{ managementAccount }] = usePortkeyAsset();
   const curGuardian = useRef<UserGuardianStatus | undefined>(currentGuardian);
   const [verifierVisible, setVerifierVisible] = useState<boolean>(false);
   const [switchDisable, setSwitchDisable] = useState<boolean>(false);
@@ -103,6 +105,9 @@ function GuardianView({
     async (_guardian: UserGuardianStatus) => {
       const { clientId, redirectURI, customLoginHandler } = socialBasic(_guardian?.guardianType as ISocialLogin) || {};
       let token = '';
+      let idToken;
+      let nonce;
+      let timestamp;
       if (
         _guardian?.guardianType === 'Telegram' &&
         telegramInfo?.userId === _guardian?.guardianIdentifier &&
@@ -116,13 +121,21 @@ function GuardianView({
           redirectURI,
           network: networkType,
           guardianIdentifier: _guardian.guardianIdentifier,
+          managerAddress: managementAccount?.address,
         });
+
         if (!response?.token) throw new Error('auth failed');
         token = response.token;
+        idToken = response.idToken;
+        nonce = response.nonce;
+        timestamp = response.timestamp;
       }
+
       const rst = await verifyToken(_guardian?.guardianType as ISocialLogin, {
         accessToken: token,
-        // idToken: _guardian.a
+        idToken,
+        nonce,
+        timestamp,
         id: _guardian.guardianIdentifier || '',
         verifierId: _guardian?.verifier?.id || '',
         chainId: originChainId,
@@ -150,6 +163,7 @@ function GuardianView({
       originChainId,
       networkType,
       operationType,
+      managementAccount?.address,
     ],
   );
 

diff --git a/packages/did-ui-react/src/components/GuardianView/index.less b/packages/did-ui-react/src/components/GuardianView/index.less
@@ -31,6 +31,10 @@
             width: 32px;
             height: 32px;
             flex-shrink: 0;
+            svg {
+              width: 16px;
+              height: 16px;
+            }
           }
           .base-verifier-icon {
             margin-right: 12px;

diff --git a/packages/did-ui-react/src/components/utils/operation.util.ts b/packages/did-ui-react/src/components/utils/operation.util.ts
@@ -28,7 +28,12 @@ export function getOperationDetails(
     operationType === OperationTypeEnum.unsetLoginAccount
   ) {
     const { identifierHash, guardianType, verifierId } = extra || {};
-    return JSON.stringify({ identifierHash, guardianType: getGuardianTypeValue(guardianType), verifierId });
+    return JSON.stringify({
+      identifierHash,
+      guardianType: getGuardianTypeValue(guardianType),
+      verifierId,
+      manager: getManagementAccount().address,
+    });
   }
   if (operationType === OperationTypeEnum.editGuardian) {
     const { identifierHash, guardianType } = extra || {};
@@ -38,6 +43,7 @@ export function getOperationDetails(
       guardianType: getGuardianTypeValue(guardianType),
       preVerifierId,
       newVerifierId,
+      manager: getManagementAccount().address,
     });
   }
   if (operationType === OperationTypeEnum.transferApprove) {

diff --git a/packages/did-ui-react/src/hooks/authentication.ts b/packages/did-ui-react/src/hooks/authentication.ts
@@ -67,11 +67,8 @@ export function useVerifyGoogleToken() {
             network: params.networkType,
             approveDetail: params.approveDetail,
             managerAddress: managerAddress,
-            verifyType: VerifyTypeEnum.zklogin,
           });
         }
-        console.log('googleInfo', googleInfo);
-
         idToken = googleInfo?.idToken;
         nonce = googleInfo?.nonce;
         timestamp = googleInfo?.timestamp;
@@ -83,7 +80,7 @@ export function useVerifyGoogleToken() {
       }
       if (!accessToken) throw new Error('accessToken is not defined');
       if (!idToken) {
-        throw new Error('Invalid idToken');
+        throw new Error('Invalid idToken 1');
       }
       const rst = await verifyZKLogin({
         verifyToken: {
@@ -130,7 +127,6 @@ export function useVerifyAppleToken() {
             network: params.networkType,
             approveDetail: params.approveDetail,
             managerAddress: managerAddress,
-            verifyType: VerifyTypeEnum.zklogin,
           });
           if (!authRes) throw new Error('Missing Response');
           accessToken = authRes?.token;

diff --git a/packages/did-ui-react/src/utils/openlogin/OpenLogin.ts b/packages/did-ui-react/src/utils/openlogin/OpenLogin.ts
@@ -60,29 +60,27 @@ class OpenLogin {
     let zkParams = {};
     let zkNonce = '';
     let zkTimestamp = 0;
-    if (params.verifyType === VerifyTypeEnum.zklogin) {
+
+    if (zkGuardianType.includes(params.loginProvider)) {
       if (!params?.managerAddress) {
         throw 'managerAddress is required';
       }
-
-      if (zkGuardianType.includes(params.loginProvider)) {
-        const { nonce, timestamp } = generateNonceAndTimestamp(params?.managerAddress);
-        if (params.loginProvider === 'Apple') {
-          /**
-           * on App, nonce is hashed by framework,
-           * so the server need to hash the data (timestamp+manager address) twice to verify the nonce.
-           * And also, the extension need to hash the nonce again to verify the nonce.
-           */
-          zkNonce = AElf.utils.sha256(nonce);
-        } else {
-          zkNonce = nonce;
-        }
-        zkTimestamp = timestamp;
-        zkParams = {
-          nonce: zkNonce,
-          socialType: VerifyTypeEnum.zklogin,
-        };
+      const { nonce, timestamp } = generateNonceAndTimestamp(params?.managerAddress);
+      if (params.loginProvider === 'Apple') {
+        /**
+         * on App, nonce is hashed by framework,
+         * so the server need to hash the data (timestamp+manager address) twice to verify the nonce.
+         * And also, the extension need to hash the nonce again to verify the nonce.
+         */
+        zkNonce = AElf.utils.sha256(nonce);
+      } else {
+        zkNonce = nonce;
       }
+      zkTimestamp = timestamp;
+      zkParams = {
+        nonce: zkNonce,
+        socialType: VerifyTypeEnum.zklogin,
+      };
     }
 
     const dataObject: OpenloginParamConfig = {