📱
Building dApps
How to integrate Spirals into your web apps, mobile apps, etc.
The following examples use an open-source library of React hooks built for Ethereum called Wagmi. Please create a new file
GreenTokenVaultInterface.json in your project to import the ABI and get started on these code examples 👇GreenTokenVaultInterface.json
94KB
Code
Let's start with a simple example where we render a component that attempts to deposit 1 token (assuming 18 decimals) to the vault when clicked on.
Note that in order for this to succeed on you must approve the spending amount first on the ERC-20 token for the vault address as the spender.
Use
depositETH instead if you are integrating with a native token like ETH or Celo1
import { ethers } from "ethers";
2
import {useAccount, useSigner, useContractWrite, usePrepareContractWrite} from "wagmi";
3
import ImpactVaultInterface from "~/abis/ImpactVaultInterface.json";
4
5
export const MyComponent = () => {
6
const { address } = useAccount();
7
const { signer } = useSigner();
8
9
const { config: depositConfig } = usePrepareContractWrite({
10
addressOrName: "<insert-vault-address>",
11
contractInterface: ImpactVaultInterface.abi,
12
functionName: "deposit",
13
signerOrProvider: signer,
14
args: [ethers.utils.parseEther("1"), address],
15
});
16
17
const { write: deposit } = useContractWrite({
18
...depositConfig,
19
onSuccess: async (data: any) => {
20
console.log("wallet prompt success");
21
const res = await data.wait();
22
if (res.status === 1) {
23
console.log("txn success");
24
} else {
25
console.log("txn error");
26
}
27
},
28
onError: error => {
29
console.log("wallet prompt error");
30
},
31
});
32
33
return (
34
<div onClick={deposit}>Deposit 1 token</div>
35
);
36
}
Great! Now we can also read the gToken balance like any other ERC-20 token contract. Doing this is simple with Wagmi using the
useBalance hook.1
import { ethers } from "ethers";
2
import {useAccount, useBalance} from "wagmi";
3
4
export const MyComponent = () => {
5
const { address } = useAccount();
6
7
const { data: gTokenBalance, refetch: refetchBalance } = useBalance({
8
addressOrName: address,
9
token: "<insert-vault-address>"
10
});
11
12
return (
13
<div>gToken balance {gTokenBalance.formatted}</div>
14
);
15
}
Let's merge this with the first snippet so that after we deposit we refetch the user's gToken balance and see it change!
1
import { ethers } from "ethers";
2
import {useAccount, useSigner, useBalance, useContractWrite, usePrepareContractWrite} from "wagmi";
3
import ImpactVaultInterface from "~/abis/ImpactVaultInterface.json";
4
5
export const MyComponent = () => {
6
const { address } = useAccount();
7
const { signer } = useSigner();
8
9
const { data: gTokenBalance, refetch: refetchBalance } = useBalance({
10
addressOrName: address,
11
token: "<insert-vault-address>"
12
});
13
14
console.log(`pre-deposit gToken balance: ${gTokenBalance?.formatted}`);
15
16
const { config: depositConfig } = usePrepareContractWrite({
17
addressOrName: "<insert-vault-address>",
18
contractInterface: ImpactVaultInterface.abi,
19
functionName: "deposit",
20
signerOrProvider: signer,
21
args: [ethers.utils.parseEther("1"), address],
22
});
23
24
const { write: deposit } = useContractWrite({
25
...depositConfig,
26
onSuccess: async (data: any) => {
27
console.log("wallet prompt success");
28
const res = await data.wait();
29
if (res.status === 1) {
30
console.log("txn success");
31
await refetchBalance();
32
console.log(`post-deposit gToken balance: ${gTokenBalance?.formatted}`);
33
} else {
34
console.log("txn error");
35
}
36
},
37
onError: error => {
38
console.log("wallet prompt error");
39
},
40
});
41
42
return (
43
<div onClick={deposit}>Deposit 1 token</div>
44
<div>gToken balance {gTokenBalance.formatted}</div>
45
);
46
}
Woo! Now we have a full end-to-end example of a front-end dapp that deposits an ERC-20 token into the gToken vault and refetches the user's gToken balance 😤