Argent Login
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 Era (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 Era, we are building the most secure and simple wallet experience (seedless recovery, fraud monitoring, etc.). This is why Argent Login is focused on zkSync Era. This tutorial will explain how to make sure your dapp is 100% compatible with Argent wallet. NOTE: zkSync Era is currently on Fair Onboarding Alpha.
Get started
As with all development processes, we assume that you will be building and running initial tests on a testnet, so the next few sections will instruct you on how to integrate and test Argent login on the Goerli testnet.
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:
(note: these builds are running on Goerli testnet)
When setting up your wallet, you do NOT need to provide a phone number: tap on Can't receive text messages
.
If you use Gmail, you can include the +
character before the @
sign to simulate a different email address, for example, use joe+test1@gmail.com
to fake a new address and still receive emails in joe@gmail.com
.
The default pin code is 111111
.
Once your wallet is created, you may have to tap on the network selector at the top left, then tap the +
icon, and add the zkSync Era account.
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. See the section below for more information.
Add Argent Login in your "connect wallet" options
There are many options for integrating Argent to a dapp:
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://onboard.blocknative.com/#get-started
Install the dependencies:
You can now add the argent
module to your Web3-onboard configuration object, and make sure you declare the zkSync chain.
You should now see the Argent option when connecting to your dapp:
Mainnet integration
Once your dApp is ready for production, ensure to make the following changes to your chainID and RPC:
id
: 324 or "0x144"rpcUrl
: https://mainnet.era.zksync.io
NB: It's important to note that the production app is still in early access, and you need to be whitelisted to use it. To get whitelisted, please reach out to us at dapp@argent.xyz.
Getting started with React
You can add a ready-made "Log in with Argent" button to your project.
Install the dependency:
Starter code using the component:
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:
Basic connection:
Usage with zksync-web3
(recommended):
Usage with ethers.js
:
Important considerations
Issues with Brave, Safari & ad blockers
One of the great benefits of using Argent Login is that users need to scan a QR code only once and can then connect to any dapp easily. This is enabled by localStorage
access via iframes
, however, some browsers block this.
If you believe most of your users are Brave & Safari users, you can enable this setting which will fix the issue:
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:
Need help?
If you need support, please contact dapps@argent.xyz
Last updated