Merge branch 'main' into transaction-payloads-json

examples/wallet/src/ConfirmIdentity.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { extractIdentityObjectUrl, fetchIdentity } from './util';
+import { identityObjectKey } from './constants';
+
+export function ConfirmIdentity() {
+    const location = useLocation();
+    const [error, setError] = useState<string>();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const identityObjectUrl = extractIdentityObjectUrl(location.hash);
+        fetchIdentity(identityObjectUrl)
+            .then((raw) => {
+                localStorage.setItem(identityObjectKey, JSON.stringify(raw));
+                navigate('/identity');
+            })
+            .catch(setError);
+    }, [location.hash]);
+
+    if (error) {
+        return (
+            <div>
+                <h3>Identity creation failed</h3>
+                <div>{error}</div>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <h3>Identity is not ready yet. Please wait.</h3>
+        </>
+    );
+}

examples/wallet/src/CreateAccount.tsx

@@ -1,7 +1,5 @@
 import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { mnemonicToSeedSync } from '@scure/bip39';
-import { Buffer } from 'buffer/';
 import { AccountWorkerInput } from './types';
 import {
     credNumber,
@@ -16,10 +14,11 @@ import {
     getCryptographicParameters,
     getIdentityProviders,
     getDefaultTransactionExpiry,
+    createCredentialDeploymentKeysAndRandomness,
 } from './util';
 import {
     CredentialDeploymentTransaction,
-    CredentialInput,
+    CredentialInputNoSeed,
     IdentityObjectV1,
     getAccountAddress,
     signCredentialTransaction,
@@ -79,19 +78,35 @@ export function CreateAccount({ identity }: { identity: IdentityObjectV1 }) {
         });
 
         const global = await getCryptographicParameters();
-        const credentialInput: CredentialInput = {
-            net: network,
+
+        const {
+            idCredSec,
+            prfKey,
+            attributeRandomness,
+            blindingRandomness,
+            credentialPublicKeys,
+        } = createCredentialDeploymentKeysAndRandomness(
+            seedPhrase,
+            network,
+            selectedIdentityProvider.ipInfo.ipIdentity,
+            identityIndex,
+            credNumber
+        );
+
+        const credentialInput: CredentialInputNoSeed = {
             revealedAttributes: [],
-            seedAsHex: Buffer.from(mnemonicToSeedSync(seedPhrase)).toString(
-                'hex'
-            ),
             idObject: identity,
-            identityIndex,
             globalContext: global,
             credNumber,
             ipInfo: selectedIdentityProvider.ipInfo,
             arsInfos: selectedIdentityProvider.arsInfos,
+            attributeRandomness,
+            credentialPublicKeys,
+            idCredSec,
+            prfKey,
+            sigRetrievelRandomness: blindingRandomness,
         };
+
         const expiry = getDefaultTransactionExpiry();
         const workerInput: AccountWorkerInput = {
             credentialInput,

examples/wallet/src/CreateIdentity.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
+    ConcordiumHdWallet,
     CryptographicParameters,
     IdObjectRequestV1,
-    IdentityRequestInput,
+    IdentityRequestWithKeysInput,
     Versioned,
 } from '@concordium/web-sdk';
 import { IdentityProviderWithMetadata } from './types';
@@ -14,8 +15,6 @@ import {
     getRedirectUri,
     sendIdentityRequest,
 } from './util';
-import { mnemonicToSeedSync } from '@scure/bip39';
-import { Buffer } from 'buffer/';
 import {
     identityIndex,
     network,
@@ -87,22 +86,40 @@ export function CreateIdentity() {
             worker.removeEventListener('message', listener);
         });
 
-        const identityRequestInput: IdentityRequestInput = {
-            net: network,
-            seed: Buffer.from(mnemonicToSeedSync(seedPhrase)).toString('hex'),
-            identityIndex,
+        // Derive the required secret key material.
+        const wallet = ConcordiumHdWallet.fromSeedPhrase(seedPhrase, network);
+        const identityProviderIndex =
+            selectedIdentityProvider.ipInfo.ipIdentity;
+        const idCredSec = wallet
+            .getIdCredSec(identityProviderIndex, identityIndex)
+            .toString('hex');
+        const prfKey = wallet
+            .getPrfKey(identityProviderIndex, identityIndex)
+            .toString('hex');
+        const blindingRandomness = wallet
+            .getSignatureBlindingRandomness(
+                identityProviderIndex,
+                identityIndex
+            )
+            .toString('hex');
+
+        const identityRequestInput: IdentityRequestWithKeysInput = {
             arsInfos: selectedIdentityProvider.arsInfos,
             arThreshold: determineAnonymityRevokerThreshold(
                 Object.keys(selectedIdentityProvider.arsInfos).length
             ),
             ipInfo: selectedIdentityProvider.ipInfo,
             globalContext: cryptographicParameters,
+            idCredSec,
+            prfKey,
+            blindingRandomness,
         };
         worker.postMessage(identityRequestInput);
     }
 
     return (
         <div>
+            <h3>Identity Issuance</h3>
             <label>
                 Select an identity provider
                 <select

examples/wallet/src/Identity.tsx

@@ -1,8 +1,7 @@
 import { AttributeList, IdentityObjectV1 } from '@concordium/web-sdk';
-import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { extractIdentityObjectUrl, fetchIdentity } from './util';
+import React, { useMemo, useState } from 'react';
 import { CreateAccount } from './CreateAccount';
+import { identityObjectKey } from './constants';
 
 function DisplayIdentity({ attributes }: { attributes: AttributeList }) {
     return (
@@ -17,31 +16,20 @@ function DisplayIdentity({ attributes }: { attributes: AttributeList }) {
 }
 
 export function Identity() {
-    const location = useLocation();
-    const [identity, setIdentity] = useState<IdentityObjectV1>();
-    const [error, setError] = useState<string>();
-
-    useEffect(() => {
-        const identityObjectUrl = extractIdentityObjectUrl(location.hash);
-
-        // To be able to create an account the identity is required. In a production
-        // wallet the identity should be persisted, and not only kept in memory as in this
-        // example.
-        fetchIdentity(identityObjectUrl).then(setIdentity).catch(setError);
-    }, [location.hash]);
-
-    if (error) {
-        return (
-            <div>
-                <h3>Identity creation failed</h3>
-                <div>{error}</div>
-            </div>
-        );
-    }
+    const [missingIdentity, setMissingIdentity] = useState<boolean>(false);
+    const identity = useMemo<IdentityObjectV1>(() => {
+        const identityObjectJson = localStorage.getItem(identityObjectKey);
+        if (identityObjectJson) {
+            return JSON.parse(identityObjectJson);
+        } else {
+            setMissingIdentity(true);
+        }
+    }, []);
 
     return (
         <>
             <h3>Your Concordium identity</h3>
+            {missingIdentity && <h3>Missing identity in storage</h3>}
             {identity && (
                 <>
                     <DisplayIdentity attributes={identity.attributeList} />

examples/wallet/src/Index.tsx

@@ -6,6 +6,9 @@ import { Identity } from './Identity';
 import { Account } from './Account';
 import { CreateIdentity } from './CreateIdentity';
 import { SetupSeedPhrase } from './Setup';
+import { RecoverIdentity } from './RecoverIdentity';
+import { ConfirmIdentity } from './ConfirmIdentity';
+import { NewIdentity } from './NewIdentity';
 
 const container = document.getElementById('root');
 
@@ -18,14 +21,26 @@ const router = createBrowserRouter([
         path: '/',
         element: <SetupSeedPhrase />,
     },
+    {
+        path: '/new',
+        element: <NewIdentity />,
+    },
     {
         path: '/create',
         element: <CreateIdentity />,
     },
+    {
+        path: '/confirm-identity',
+        element: <ConfirmIdentity />,
+    },
     {
         path: '/identity',
         element: <Identity />,
     },
+    {
+        path: '/recover',
+        element: <RecoverIdentity />,
+    },
     {
         path: '/account/:accountAddress',
         element: <Account />,

examples/wallet/src/NewIdentity.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export function NewIdentity() {
+    const navigate = useNavigate();
+    return (
+        <div>
+            <h3>Your Concordium Identity</h3>
+            <button onClick={() => navigate('/create')}>
+                Create new identity
+            </button>
+            <button onClick={() => navigate('/recover')}>
+                Recover existing identity
+            </button>
+        </div>
+    );
+}