0.0.2 • Published 3 years ago
cra-template-near v0.0.2
Create React App NEAR Template
This template is used to create a NEAR front-end using Create React App. It comes with near-react-hooks.
Getting Started
To get started use this template with Create React App npx create-react-app --template near my-app
.
Usage Tutorial
- create a NEAR Account
- create a new React app using
cra-template-near
- create a landing page for users to signin
- add a form to the landing page to wrap NEAR
- display the wrapped NEAR balance
- add an unwrap NEAR feature to the form
1. Create a NEAR Account
Checkout the official docs to get started creating a NEAR account here.
2. Create a React Application
The cra-template-near
Create React App template sets up a React application preconfigured with near-react-hooks.
To start your project type npx create-react-app --template near wrap-near-app
into a terminal. This will create a new directory wrap-near-app
based on cra-template-near
(see Selecting a template).
3. Create a landing page
To create a landing page we'll edit src/App.js
placing a signin button onto the page.
import React from "react";
import { NearSignin } from "near-react-hooks";
export default function App() {
return (
<NearSignin
contractId="wrap.testnet"
methods={["near_deposit", "near_withdraw"]}
/>
);
}
- Line 2 - import the
NearSignin
button from near-react-hooks. - Line 6-9 - render the
NearSignin
button onto the page
4. Wrap NEAR on form submit
Next we'll add a form to wrap NEAR.
import React, { useState } from "react";
import { NearSignin, useNearContract } from "near-react-hooks";
import { utils } from "near-api-js";
export default function App() {
const [amount, setAmount] = useState("0");
const contract = useNearContract("wrap.testnet", {
changeMethods: ["near_deposit"],
});
const handleSubmit = (event) => {
event.preventDefault();
contract.near_deposit({
args: {},
amount: utils.format.parseNearAmount(amount),
});
};
return (
<>
<NearSignin
contractId="wrap.testnet"
methods={["near_deposit", "near_withdraw"]}
/>
<form onSubmit={handleSubmit}>
<input
type="number"
value={amount}
onChange={({ target }) => setAmount(target.value)}
/>
<button>Wrap NEAR</button>
</form>
</>
);
}
- Line 8-10 - define a NEAR smart contract interface
- Line 26-33 - form to collect the amount of NEAR to wrap from user input
- Line 14-17 - call the
near_deposit
method attachingamount
of NEAR for wrapping
5. View wrapped balance on mount
import React, { useEffect, useState } from "react";
import { NearSignin, useNearContract, useNearWallet } from "near-react-hooks";
import { utils } from "near-api-js";
export default function App() {
const [balance, setBalance] = useState(null);
const [amount, setAmount] = useState("0");
const wallet = useNearWallet();
const accountId = wallet.getAccountId();
const contract = useNearContract("wrap.testnet", {
changeMethods: ["near_deposit"],
viewMethods: ["ft_balance_of"],
});
useEffect(() => {
contract
.ft_balance_of({ account_id: accountId })
.then((balance) => utils.format.formatNearAmount(balance))
.then(setBalance);
}, [contract, accountId]);
const handleSubmit = (event) => {
event.preventDefault();
contract.near_deposit({
args: {},
amount: utils.format.parseNearAmount(amount),
});
};
return (
<>
<NearSignin
contractId="wrap.testnet"
methods={["near_deposit", "near_withdraw"]}
/>
<p>Current Wrapped Balance: {balance}</p>
<form onSubmit={handleSubmit}>
<input
type="number"
value={amount}
onChange={({ target }) => setAmount(target.value)}
/>
<button>Wrap NEAR</button>
</form>
</>
);
}
- Line 13 - add
ft_balance_of
to the contract interface - Line 16-21 - call the
ft_balance_of
method passing theaccount_id
argument - Line 19 - receive the wrapped NEAR balance and convert yoctoNEAR to NEAR.
- Line 37 - display the balance
6. Unwrap NEAR on form submit
import React, { useEffect, useState } from "react";
import { NearSignin, useNearContract, useNearWallet } from "near-react-hooks";
import { utils } from "near-api-js";
export default function App() {
const [balance, setBalance] = useState(null);
const [amount, setAmount] = useState("0");
const [method, setMethod] = useState("wrap");
const wallet = useNearWallet();
const accountId = wallet.getAccountId();
const contract = useNearContract("wrap.testnet", {
changeMethods: ["near_deposit", "near_withdraw"],
viewMethods: ["ft_balance_of"],
});
useEffect(() => {
contract
.ft_balance_of({ account_id: accountId })
.then((balance) => utils.format.formatNearAmount(balance))
.then(setBalance);
}, [contract, accountId]);
const handleSubmit = (event) => {
event.preventDefault();
if (method === "wrap") {
contract.near_deposit({
args: {},
amount: utils.format.parseNearAmount(amount),
});
}
if (method === "unwrap") {
contract.near_withdraw({
args: {
amount: utils.format.parseNearAmount(amount),
},
amount: 1,
});
}
};
return (
<>
<NearSignin
contractId="wrap.testnet"
methods={["near_deposit", "near_withdraw"]}
/>
<p>Current Wrapped Balance: {balance}</p>
<form onSubmit={handleSubmit}>
<select
defaultValue={method}
onChange={({ target }) => setMethod(target.value)}
>
<option value="wrap">Wrap NEAR</option>
<option value="unwrap">Unwrap NEAR</option>
</select>
<input
type="number"
value={amount}
onChange={({ target }) => setAmount(target.value)}
/>
<button>{method} NEAR</button>
</form>
</>
);
}
- Line 13 - add
near_withdraw
to the contract interface - Line 24-41 - check if wrap or unwrap is selected then call either
near_deposit
ornear_withdraw