In this exercise we connect Ethereum and NEAR wallets to a dapplet using Core.wallet interface.
The dapplet that we implement will send some amount of tokens from your wallet to itself.
Here is the initial code for this example: ex05-wallet-exercise.
Core.wallet() method receives config with one parameter -
authMetods and returns Promise.
AuthMethods is an array of strings that are combinations of chain and net names.
At the moment three combinations are available:
You can define one or more combinations if you want users to choose the chain and the net they want.
However, you have to understand that APIs of different chains are not equal. So when you provide a choice your code becomes more complex.
Let's consider this situation and get the
On this stage we are not connected to any wallet so our
wallet is typed with
IEthWallet | INearWallet interfaces.
Each of them consists of chain-specific API and
authMethod parameter and three methods:
wallet.authMethod appears after connecting to a wallet and shows which one is connected.
We also have to set transfer amounts of ETH and NEAR. It's convenient to define appropriate values in the config and get them in the dapplet. In this case the user would set any amounts they like.
At last define the variable to save and reuse Ethereum addresses that we will get from the connected Ethereum wallet.
There is a
button in the
POST. We want the wallet to connect when the button is clicked, to see the transfer amount and currency near the button, and on second click to send the tokens.
We consider a few states of the button besides the
DEFAULT state. Look at the scheme that describes all the states.
Firstly, we need to describe button with a label. But we remember that wallets' APIs are different.
We have two ways: create a
CONNECTED state and make several forks for Ethereum and NEAR wallets inside, or create two separate states.
Let's choose the second option and create
We implement the logic of sending transactions later, after creating all the states.
Next we want to see if the transaction succeeded or failed. Accordingly create
These states appear after successful wallet connections, so
We can also reject any transaction. So we need the
The other two states
MINING, are for when the button is waiting for a transaction to be approved or mined.
These states are intermediate and the button has to be disabled,
thats why they have no
exec functions and the
loading perameter is
The last one disables the button and shows the loader instead of the picture on it.
We've defined all of the button's states and now we are going back to the
Here we have to add the button click action that connects the wallet.
This is a wallet.connect() method. It returns
After a successful connection the button switches the state to
NEAR_CONNECTED depending on which wallet has been chosen.
If the connection was cancelled we switch the state to
Firstly, add a check of the
wallet.authMethod. If we implement the states' switching correctly it will always be
But if we make a mistake the check will save us from an error. Also, after the check the typescript compiler will understand exactly the type of the wallet we use.
Switch the button's state to
If we haven't got the
currentEthAddresses yet, we need to get it using the wallet.request() method.
This method is used for all requests to the Ethereum wallet. It recieves a config with two required parameters: method and params.
method parameter of the
string type is one of the Ethereum JSON-RPC methods.
params is an array of parameters that are passed to the method.
We use the
eth_accounts JSON-RPC method with an empty array as the
The next step is to send tokens. We use the
eth_sendTransaction method. It requires three parameters:
From and to are the same in our example. It is the current Ethereum address.
Value is a transfer amount in Wei with a string representation of a hexadecimal number.
When the transaction is approved by the user we will get the transaction hash.
It's time to switch the button's state to
Now all we can do is wait for the the chain to confirm the transaction. We have the wallet.waitTransaction() method. It receives two parameters:
txHash: string - (required) a transaction hash returned from
confirmations?: number - (optional, default === 1) the number of blocks confirming the transaction;
Promise<ITransactionReceipt>. ITransactionReceipt has a
that can tell us if the transaction has been completed successfully (
"0x1") or failed (
We can set an appropriate state for the button.
After getting the
transactionReceipt we disconnect the wallet.
It is not required but convenient for our example.
We can connect the wallet to another chain after sending the transaction.
The entire code for this step:
Start this step by checking
wallet.authMethod and switching the button's state to
We don't need to make a request to get an account ID when working with a NEAR wallet. It's already available in the connected wallet.
There are methods of NEAR-API-JS library in the INearWallet.
In the example we will use the
wallet.sendMoney() method. It receives two parameters:
receiverId— NEAR account receiving Ⓝ;
amount— Amount to send in yoctoⓃ;
Let's add the library.
Import it to the
./src/index.ts module and get the
Now we can call the
finalExecutionOutcome also has a
status property. It is an object with a single key-value property.
If the key is
'SuccessReceiptId', we consider that the transaction was successful.
Result of this step:
The dapplet is finished. 🎉
Don't forget to install dependencies and run the dapplet:
Currently you need to reload the page to select a different wallet after disconnecting it. We will fix it soon.
Here is the result code of the example: ex05-wallet-solution.
There is another way to get a Wallet connection by using
Core.login(). It's described in Ex14: Core Login.