walletprovider-sdk

The frontend library for Silent Network.

Demo

Under the demo directory we provide the sample webpage that shows example usage of the library. In order to run it execute the following:

1. Build the library

npm install
npm run build

2. Run the demo

cd demo
npm install
npm run dev

The demo fetches configuration from the .env file. We provided example .env here.

The demo communicates with backend service. Run it before using the demo page.

Using the library

The library is published on npmjs registry.

Install it in your project as usual:

npm i @silencelaboratories/walletprovider-sdk

The backend

The library communicates with backend service. The example implementation of such service is accessible here. Please refer to backend documentation in order to run the service.

Frontend uses WalletProviderServiceClient object in order to connect to the backend and send requests.

Documentation

For description of classes, interfaces, types, please refer to documentation.

Authentication

Users authenticate using EOA wallet or Passkey during key generation and register an ephemeral signing key pair and associates it with their identity.

Frontend can later use the ephemeral signing key pair to authorize signing requests for duration of the session without the need for repeated user interaction, providing a seamless and secure authentication mechanism.

Key generation:

• EOAAuth to authenticate the user during keygen. The EOAAuth object is created with the user's wallet address.

• PasskeyAuth to authenticate the user during keygen. The PasskeyAuth object is created with the PasskeyUser, RelyingPartyConfig.

• The ephemeral public key and lifetime of the key in seconds will be associated with both EOAAuth and PasskeyAuth objects.

Signature generation:

• EphAuth to authenticate the user during signing. The EphAuth object is created with the ephemeral keypair.

Keygen

The full working example is in the demo. The core object to use is the NetworkSigner. It allows to generate keys and do signatures.

In order to create your keys, you need two other components. The WalletProviderServiceClient that connects to the Backend part of the SDK, and the authentication module.

Authenticate with EOA wallet

We provide EOA authentication via EOAAuth module. Let's create the NetworkSigner with associated EOAAuth object.

// Generate ephemeral secret key esk
const sk = generateEphPrivateKey();
// Derive public part epk from esk
const ephPK = getEphPublicKey(sk);
// Arbitrary ID to identify the ephemeral key
const ephId = uuidv4();
// Create a client that connects to the backend service
const wpClient = await createWalletProviderService(clusterConfig);

// Create EOA authenticator, signature will include epk
const eoaAuth = new EOAAuth(
  ephId,
  accountsFromBrowserWallet[0],
  new BrowserWallet(),
  ephPK,
  // Lifetime of one hour
  60 * 60,
);

// Create a new signer instance
const sdk = new NetworkSigner(wpClient, threshold, partiesNumber, eoaAuth);

Now you can generate a key, using the generateKey method. The method accepts optional permissions. No permissions means allow all operations.

const permissions = {
  permissions: [
    {
      type: 'erc20',
      method: 'approve',
      to: '0x1234567890123456789012345678901234567890',
      args: {
        spender: '0x1234567890123456789012345678901234567890',
        value: 10000,
        eq: '<',
      },
    },
  ],
};

// Generate a new key
let resp: KeygenResponse = await sdk.generateKey(JSON.stringify(permissions));

Calling this method will cause to the Browser Wallet window to pop up, requesting the User to sign the request.

The returned KeygenResponse contains keyId and publicKey. The publicKey is the public part of the key generated by Silent Network. Use the keyId in subsequent calls to sign.

The esk key can be later used by the frontend in subsequent signgen requests for authenticating.

Authenticate with Passkey

We provide Passkey authentication via PasskeyAuth module. Let's create the NetworkSigner with associated PasskeyAuth object.

// Generate ephemeral secret key esk
const sk = generateEphPrivateKey();
// Derive public part epk from esk
const ephPK = getEphPublicKey(sk);
// Arbitrary ID to identify the ephemeral key
const ephId = uuidv4();
// Create a client that connects to the backend service
const wpClient = await createWalletProviderService(clusterConfig);
// Here we configure the relying party for local development
const rpConfig: RelyingPartyConfig = {
  rpId: 'localhost',
  rpName: 'http://localhost:5173',
};
// Information about the owner of the passkey 
const passkeyUser: PasskeyUser = {
  id: userId,
  displayName: 'Alice',
  name: '[email protected] ' + userId, // For development purposes
};

// Get passkey credential id from your storage
const credentialId = getPasskeyCredentialId();
// Create EOA authenticator, signature will include epk
const passkeyAuth = new PasskeyAuth(
  rpConfig,
  passkeyUser,
  ephId,
  ephPK,
  // Lifetime of one hour
  60 * 60,
  // If credentialId is null, we will do passkey register, otherwise, we will do passkey auth/login
  credentialId,
);

// Create a new signer instance
const sdk = new NetworkSigner(wpClient, threshold, partiesNumber, passkeyAuth);

Now you can generate a key like in the EOA example by calling the generateKey method.

Calling this method will prompt the browser to request Passkey User Verification. Once user verification is done, the KeygenResponse is returned.

The esk key can be later used by the frontend in subsequent signgen requests for authenticating.

Signing

The full signing example is here.

Let's create NetworkSigner for signing. Note the EphAuth is used to avoid user interaction when generating the signatures.

const authModule = new EphAuth(ephId, ephSK);
// Create a new signer instance
const sdk = new NetworkSigner(wpClient, threshold, partiesNumber, authModule);

Use the NetworkSigner.signMessage method in order to generate a signature.

let signMessage = JSON.stringify({
    message: JSON.stringify({
      userOperation: {
        sender: '0x8d4cb2540d993fe34c646299f1ab4af3012ff34c',
        nonce: '0x7',
        initCode: '0x',
        callData: '0000189...',
        callGasLimit: '0x18473',
        verificationGasLimit: '0x18473',
        preVerificationGas: '66768',
        maxFeePerGas: '',
        maxPriorityFeePerGas: '',
        paymasterAndData: '0x',
      },
      entryPointVersion: 'v0.6.0',
      entryPointAddress: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
      chainId: 80002,
    }),
    requestType: 'accountAbstractionTx',
  });

let resp = await sdk.signMessage(selectedKeyId, signMessage);

The SignResponse contains the signature sign and the recovery ID recid.

Install dependencies

npm install

Build

npm run build

The output will be in the dist folder.

End to end tests

Please refer to README.md for instructions how to execute them.

Format the code

npm run format

Generate the documentation

npm run docs