Gasless Transactions on zkSync Era for Global Wallets

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

This guide is currently React only.

Overview

If you have zkSync smart accounts enabled in your dashboard, users will get a smart wallet on login

Setup by connecting to the global wallet client

import { createGlobalWalletClient } from '@dynamic-labs/global-wallet-client';

const globalWalletClient = createGlobalWalletClient({
    environmentId: '<GLOBAL WALLET ENVIRONMENT ID>',
    popup: {
        url: '<GLOBAL WALLET DOMAIN>',
        width: 400,
        height: 600,
    },
});

const globalWalletClient = useMemo(() => getGlobalWalletClient(), [getGlobalWalletClient]);

const wallet = globalWalletClient.wallets[0];

You may need to reload the page after login for the wallet to become available on the globalWalletClient

Create a zkSync session

import {
createZksyncSession,
} from '@dynamic-labs/global-wallet-client/zksync';

...

const createSession = async () => {
    if (!wallet) {
        return;
    }

    const {
        sessionId, // session hash
        expiresAt,
        session: {
            sessionConfiguration, // session configuration w/ bigints as string
            sessionKey, // registered session private key
            sessionKeyValidator // session key validator contract address
        }
    } = await createZksyncSession(wallet, {
        sessionConfig: <YOUR SESSION CONFIGURATION HERE>
    });
}

...

List zkSync sessions

import {
listZksyncSessions,
} from '@dynamic-labs/global-wallet-client/zksync';

...

const listSessions = async () => {
    if (!wallet) {
        return;
    }

    const sessions = listZksyncSessions(wallet);

    ...
}

Revoke a session with session ID

import {
    revokeZksyncSession
} from '@dynamic-labs/global-wallet-client/zksync';

const revokeSession = async (sessionId: string) => {
    if (!wallet) {
        return;
    }

    await revokeZksyncSession(wallet, { sessionId });

    alert('session revoked');
}