Argent Login on zkSync

Search…
Introduction
Why Argent Login? 
We created Argent Login to provide the best interaction between a browser dapp and Argent mobile wallet. 
Who is it for?
Argent Login is currently available to any dapp developers building on zkSync 2.0. 
Integrating Argent Login to your dapp will ensure that Argent users can effortlessly interact with your browser dapp.
Thanks to native account abstraction support on zkSync 2.0, we are building the most secure and simple wallet experience (seedless recovery, fraud monitoring, etc.). This is why Argent Login is focused on zkSync 2.0.

This tutorial will explain how to make sure your dapp is 100% compatible with Argent wallet.

NOTE: zkSync 2.0 is currently on testnet
Get started 
Install an Argent test build on your mobile phone
The private key of an Argent wallet is stored on mobile, so you'll need a mobile device with our beta app to test the integration:
Android: https://appdistribution.firebase.dev/i/2207189f1adf2385​
iOS: https://testflight.apple.com/join/KtnaM8yO​
When setting up your wallet, you do NOT need to provide a phone number. If you use Gmail, you can include the + character before the @ sign to simulate different email addresses, for example: use [email protected] to receive mails in [email protected].
Account abstraction
Account abstraction means that the dapp doesn't need to know which wallet it is interacting with. Everything should be transparent for the dapp developer if all of the necessary precautions have been taken.
Add Argent Login in your "connect wallet" options
There are many options for integrating Argent to a dapp:
Using Web3-onboard: https://docs.blocknative.com/onboard​
Using Web3Modal: https://github.com/Web3Modal/web3modal​
Using a ready-made React component
Using vanilla JavaScript
Getting started with Web3-onboard
The following assumes you're familiar with Web3-onboard and your dapp already uses it. If not, you can begin with their tutorial here: https://docs.blocknative.com/onboard#quickstart​
Install the dependencies:
yarn add @argent/login @web3-onboard/[email protected]/web3-onboard-argent
You can now add the argent module to your Web3-onboard configuration object, and make sure you declare the zkSync chain.
import Onboard from "@web3-onboard/core";
import argentModule from "@web3-onboard/argent";
​
// initialize the module
const argent = argentModule();
​
const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    argent,
    // ... other wallets
  ],
  chains: [
    {
      id: "0x118",  // = 280
      token: "ETH",
      label: "zkSync Goerli",
      rpcUrl: "https://zksync2-testnet.zksync.dev",
    },
    // ... other chains
  ]
});
​
const connectedWallets = await onboard.connectWallet();
console.log(connectedWallets);
You should now see the Argent option when connecting to your dapp:
Getting started with Web3Modal
The following assumes you're familiar with Web3Modal and your dapp already uses it. If not, you can begin with their tutorial here: https://github.com/Web3Modal/web3modal#usage​
Edit your package.json, add the @argent/login dependency, replace your existing web3modal dependency by the one below, and run yarn or npm install .
If you encounter import issues when running the dapp, try removing your lockfile and node_modules, then reinstall.
package.json
{
  "name": "my-dapp",
  "version": "1.0.0",
  "dependencies": {
    "@argent/login": "^0.0.0-alpha.8",
    "web3modal": "argentlabs/web3modal#feat/argent-dist",
    // ...
  }
}
You can now use argent provider option:
import Web3Modal from "web3modal";
import ArgentLogin from "@argent/login";
​
const web3Modal = new Web3Modal({
  providerOptions: {
    argent: {
      package: ArgentLogin,
      options: {
        chainId: 280,
        rpcUrl: "https://zksync2-testnet.zksync.dev",
      },
    },
    // ... other wallets
  },
});
​
You should now see the Argent option when connecting to your dapp:
Getting started with React
You can add a ready-made "Log in with Argent" button to your project.
Install the dependency:
yarn add @argent/login-react
Starter code using the component:
import React, { FC, useState } from "react";
import { ethers } from "ethers";
import { ArgentLoginButton, IEthereumProvider } from "@argent/login-react";
​
export const App: FC = () => {
  const [provider, setProvider] = useState<ethers.providers.Web3Provider>();
​
  const handleConnect = async (ethereumProvider: IEthereumProvider) => {
    const provider = new ethers.providers.Web3Provider(ethereumProvider);
    setProvider(provider);
  };
​
  const handleDisconnect = async () => {
    localStorage.removeItem("walletconnect"); // to make sure WC is disconnected
    setProvider(undefined);
  };
​
  return (
    <div>
      {!provider ? (
        <ArgentLoginButton
          options={{
            chainId: 280,
            rpcUrl: "https://zksync2-testnet.zksync.dev",
          }}
          onConnect={handleConnect}
          onError={console.error}
        />
      ) : (
        <>
          <h2>Connected as {provider.getSigner()._address}</h2>
          <p>
            <button onClick={handleDisconnect}>Disconnect</button>
          </p>
        </>
      )}
    </div>
  );
};
If you're starting from a brand new create-react-app project with version >= 5.0, you may need to run:
yarn add buffer
And then add:
import { Buffer } from "buffer";
window.Buffer = Buffer;
Getting started with vanilla JavaScript
If you're not using a standard onboarding library, are not developing with React or need to customize the connection experience, you can use the core JavaScript package which will give you access to the EIP-1193 Ethereum Provider object.
Install the dependency:
yarn add @argent/login
Basic connection:
import { getEthereumProvider } from "@argent/login";
​
const ethereumProvider = await getEthereumProvider({ 
  chainId: 280,
  rpcUrl: "https://zksync2-testnet.zksync.dev",
});
await ethereumProvider.enable();
Usage with zksync-web3(recommended):
import * as zksync from "zksync-web3";
​
const provider = new zksync.Web3Provider(ethereumProvider);
await provider.sendTransaction(...);
Usage with ethers.js:
import { ethers } from "ethers";
​
const provider = new ethers.providers.Web3Provider(ethereumProvider);
await provider.sendTransaction(...);
Verify transaction requests are working properly
On zkSync 2.0, you can submit two types of transactions (legacy Ethereum transactions or custom EIP-712 type transactions), see more details here.
If you use EIP-712 type transactions, the end user won't be able to choose their fee token in their wallet, so the dapp will have to provide that functionality.
We encourage dapp developers to use the zksync-web3 SDK in their front-end:
npm: zksync-web3
npm
Make sure your dapp is compatible with account abstraction
Signature validation
Use EIP-1271 signature validation instead of ecrecover in your smart contracts (Solidity) and front-end (JavaScript). Matter Labs provides a great library to abstract that logic away for both Solidity and JavaScript, see here:
Important: Account abstraction support | zkSync: secure, scalable crypto payments
Don't ignore this warning when you compile your Solidity code!
​
​
Need help?
If you need support, please contact [email protected] 
Argent Vault on Ethereum L1
Last modified 6d ago
Copy link
Outline
Install an Argent test build on your mobile phone
Account abstraction
Add Argent Login in your "connect wallet" options
Getting started with Web3-onboard
Getting started with Web3Modal
Getting started with React
Getting started with vanilla JavaScript
Verify transaction requests are working properly
Make sure your dapp is compatible with account abstraction
Need help?