Use icp-sdk instead of @dfinity npm module (#3380)

* Use icp-sdk instead of @dfinity npm module

* Update demos/test-app/src/index.tsx

Co-authored-by: Copilot <[email protected]>

* Fix type issue

* Update package json for test-app

* Update signer-js version and cast

* Revert changes package-lock

* Fix toJSON issue with Identity library

* Remove unnecessary comment

* Improve logging

* Revert import in declarations

---------

Co-authored-by: Copilot <[email protected]>

Author: lmuntaner

demos/test-app/package.json

@@ -3,12 +3,10 @@
   "type": "module",
   "private": true,
   "dependencies": {
-    "@dfinity/agent": "*",
-    "@dfinity/candid": "*",
-    "@dfinity/identity": "*",
-    "@dfinity/principal": "*",
-    "@slide-computer/signer": "^3.20.0",
-    "@slide-computer/signer-web": "^3.20.0",
+    "@icp-sdk/core": "*",
+    "@slide-computer/signer": "*",
+    "@slide-computer/signer-web": "*",
+    "@noble/hashes": "*",
     "buffer": "^6.0.3",
     "jose": "^5.1.2",
     "react": "^18.2.0",

demos/test-app/src/auth.ts

@@ -1,11 +1,11 @@
-import type { SignIdentity, Signature } from "@dfinity/agent";
+import type { SignIdentity, Signature } from "@icp-sdk/core/agent";
 import {
   Delegation,
   DelegationChain,
   DelegationIdentity,
   SignedDelegation,
-} from "@dfinity/identity";
-import { Principal } from "@dfinity/principal";
+} from "@icp-sdk/core/identity";
+import { Principal } from "@icp-sdk/core/principal";
 import { Signer } from "@slide-computer/signer";
 import { PostMessageTransport } from "@slide-computer/signer-web";
 
@@ -46,10 +46,12 @@ export const authWithII = async ({
   if (useIcrc25) {
     const transport = new PostMessageTransport({ url: url_ });
     const signer = new Signer({ transport, derivationOrigin });
-    const delegation = await signer.delegation({
+    // We need to cast the delegation from signer-js to avoid a TS issue because one type is imported from cjs and another esm:
+    // Types of property 'delegations' are incompatible.
+    const delegation = (await signer.delegation({
       maxTimeToLive,
       publicKey: sessionIdentity.getPublicKey().toDer(),
-    });
+    })) as unknown as DelegationChain;
     return {
       identity: DelegationIdentity.fromDelegation(sessionIdentity, delegation),
       authnMethod: "passkey",
@@ -138,7 +140,7 @@ const identityFromResponse = ({
 
   const delegationChain = DelegationChain.fromDelegations(
     delegations,
-    response.userPublicKey.buffer,
+    response.userPublicKey,
   );
 
   const identity = DelegationIdentity.fromDelegation(

demos/test-app/src/index.tsx

@@ -1,13 +1,13 @@
 import { VcFlowRequestWire } from "@dfinity/internet-identity-vc-api";
-
-import type { Identity, SignIdentity } from "@dfinity/agent";
-import { Actor, HttpAgent } from "@dfinity/agent";
+import { bytesToHex } from "@noble/hashes/utils";
+import type { Identity, SignIdentity } from "@icp-sdk/core/agent";
+import { Actor, HttpAgent } from "@icp-sdk/core/agent";
 import {
   DelegationChain,
   DelegationIdentity,
   Ed25519KeyIdentity,
-} from "@dfinity/identity";
-import { Principal } from "@dfinity/principal";
+} from "@icp-sdk/core/identity";
+import { Principal } from "@icp-sdk/core/principal";
 
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
@@ -134,11 +134,38 @@ const updateDelegationView = ({
   }
 
   if (identity instanceof DelegationIdentity) {
-    delegationEl.innerText = JSON.stringify(
-      identity.getDelegation().toJSON(),
-      undefined,
-      2,
-    );
+    const delegation = identity.getDelegation();
+    let jsonResult;
+    try {
+      // `toJSON` is failing due to `bytesToHex(delegation.publicKey)`
+      // `bytesToHex` expects a Uint8Array and delegation.publicKey is a ArrayBuffer
+      // jsonResult = delegation.toJSON();
+      jsonResult = {
+        delegations: delegation.delegations.map((signedDelegation) => {
+          const { delegation, signature } = signedDelegation;
+          const { targets } = delegation;
+          return {
+            delegation: {
+              expiration: delegation.expiration.toString(16),
+              pubkey: bytesToHex(delegation.pubkey),
+              ...(targets && {
+                targets: targets.map((t) => t.toHex()),
+              }),
+            },
+            signature: bytesToHex(new Uint8Array(signature)),
+          };
+        }),
+        publicKey: bytesToHex(new Uint8Array(delegation.publicKey)),
+      };
+    } catch (error) {
+      console.error("toJSON error:", error);
+      jsonResult = {
+        error: "toJSON failed",
+        message: error instanceof Error ? error.message : String(error),
+      };
+    }
+
+    delegationEl.innerText = JSON.stringify(jsonResult, undefined, 2);
 
     // cannot use Math.min, as we deal with bigint here
     const nextExpiration = identity
@@ -219,7 +246,7 @@ const readCanisterId = (): string => {
 const init = async () => {
   signInBtn.onclick = async () => {
     const maxTimeToLive_ = BigInt(maxTimeToLiveEl.value);
-    // The default max TTL setin the @dfinity/auth-client library
+    // The default max TTL set in the @icp-sdk/auth/client library
     const authClientDefaultMaxTTL =
       /* hours */ BigInt(8) * /* nanoseconds */ BigInt(3_600_000_000_000);
     const maxTimeToLive =

demos/using-dev-build/webapp/index.ts

@@ -2,8 +2,8 @@
  * then calls the whoami canister to check the user's principal.
  */
 
-import { Actor, ActorMethod, HttpAgent } from "@dfinity/agent";
-import type { Principal } from "@dfinity/principal";
+import { Actor, ActorMethod, HttpAgent } from "@icp-sdk/core/agent";
+import type { Principal } from "@icp-sdk/core/principal";
 import { AuthClient } from "@icp-sdk/auth/client";
 
 const webapp_id = process.env.WHOAMI_CANISTER_ID;

demos/vc_issuer/app/generated/vc_issuer_types.d.ts

@@ -1,6 +1,6 @@
-import type { Principal } from '@dfinity/principal';
-import type { ActorMethod } from '@dfinity/agent';
-import type { IDL } from '@dfinity/candid';
+import type { Principal } from '@icp-sdk/core/principal';
+import type { ActorMethod } from '@icp-sdk/core/agent';
+import type { IDL } from '@icp-sdk/core/candid';
 
 export type ArgumentValue = { 'Int' : number } |
   { 'String' : string };

demos/vc_issuer/app/index.tsx

@@ -1,4 +1,4 @@
-import { AuthClient } from "@dfinity/auth-client";
+import { AuthClient } from "@icp-sdk/auth/client";
 
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";

demos/vc_issuer/app/issuer.ts

@@ -1,5 +1,5 @@
-import { Actor, ActorSubclass, HttpAgent } from "@dfinity/agent";
-import { Principal } from "@dfinity/principal";
+import { Actor, ActorSubclass, HttpAgent } from "@icp-sdk/core/agent";
+import { Principal } from "@icp-sdk/core/principal";
 
 import { idlFactory as vc_issuer_idl } from "./generated/vc_issuer_idl";
 import { _SERVICE } from "./generated/vc_issuer_types";

demos/vc_issuer/package.json

@@ -4,12 +4,9 @@
   "private": true,
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@dfinity/agent": "*",
-    "@dfinity/auth-client": "*",
-    "@dfinity/candid": "*",
-    "@dfinity/identity": "*",
-    "@dfinity/principal": "*",
     "@dfinity/utils": "*",
+    "@icp-sdk/auth": "*",
+    "@icp-sdk/core": "^4.0.4",
     "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

docs/ii-spec.mdx

@@ -221,7 +221,7 @@ sequenceDiagram
 
     The client application frontend needs to be able to detect when any of the delegations in the chain has expired, and re-authorize the user in that case.
 
-The [`@dfinity/auth-client`](https://www.npmjs.com/package/@dfinity/auth-client) NPM package provides helpful functionality here.
+The [`@icp-sdk/auth`](https://www.npmjs.com/package/@icp-sdk/auth) NPM package provides helpful functionality here.
 
 The client application frontend should support delegation chains of length more than one, and delegations with `targets`, even if the present version of this spec does not use them, to be compatible with possible future versions.