In this tutorial, we'll guide you through the process of developing a simple ink! dApp using Typink- a new set of react hooks & utilities to help to build new ink! dApp faster & easier.
Let's make a simple PSP22 Transfer dApp using Typink!
Create a new project via create-typink CLI
We're going to set up a new ink! dapp project via the create-typinkcli.
npx create-typink@latest
Let's choose greeter as example contract and deploy our contract to Pop Testnet.
We can now go to the psp22-transferfolder and run yarn startto start the development server at: http://localhost:8080
Claim testnet token via faucet
Next step, in order to deploy & interact with contracts on Pop Testnet, we'll need to claim some test token. Since Pop Testnet as a parachain uses the native token of the Relay Chain (Paseo) as its token to pay transaction fee, so it requires 2 steps to claim testnet token on Pop Testnet.
After cloning the repo, we can build the contract using the following commands:
git clone https://github.com/Cardinal-Cryptography/PSP22
cd PSP22
cargo contract build --release
After building the contract, we'll get all the compiled artifacts in folder: target/ink
Now let's copy all these 3 files into the folder: contracts/artifacts/psp22in our psp2-transferproject.
Next, let's deploy our PSP22 contract to Pop Testnet via https://ui.use.ink/
We'll fill in some basic information of the PSP22 token as below, feel free to adjust the params as to your preferences.
We deployed the contract, and its address is: 13JSR8RUSxtg11MLg2Pj5jV7Yh9sh9gCnjFW7ReHGmDj5Rvq
Finally, let's update the contract deployments list in file: contracts/deployment.ts to register our new PSP22 contract to the list, this helps us quickly initiate new Contract instance via Typink's react hooks: useContract
Next, let's generate TypeScript bindings/types for our PSP22 contract using its metadata. This helps us enable auto-complete & suggestions (IntelliSense) later when we deal & interact with contract messages / events.
We can do this via dedotcli, dedot is a required dependency and will be install for every Typink-based projects. Let's put the generated types in folder: contracts/types :
After this step, we're ready to start coding the logic for our application.
Fetch & show PSP22 balance
First, let's initiate a global Contractinstance in AppProvider (ui/src/providers/AppProvider.tsx) so we can use it across our app & components.
import { createContext, useContext } from 'react';
import { Props } from '@/types.ts';
import { ContractId } from 'contracts/deployments.ts';
import { Psp22ContractApi } from 'contracts/types/psp22';
import { Contract } from 'dedot/contracts';
import { useContract } from 'typink';
interface AppContextProps {
psp22Contract?: Contract<Psp22ContractApi>;
}
const AppContext = createContext<AppContextProps>({} as any);
export const useApp = () => {
return useContext(AppContext);
};
export function AppProvider({ children }: Props) {
const { contract: psp22Contract } = useContract<Psp22ContractApi>(ContractId.PSP22);
return (
<AppContext.Provider
value={{
psp22Contract,
}}>
{children}
</AppContext.Provider>
);
}
Next, let's fetch & show the PSP22 balance for connected account. We're going to update the MainBoardcomponent (ui/src/components/MainBoard.tsx) to add the logic using useContractQueryhook to fetch basic contract information (symbol, decimals) and psp22 balance of the connected account.
