emersoncloud/staking.js

## staking.js
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import {
    useEthers,
    useEtherBalance,
    useContractFunction,
    useContractCall,
    useCalls, useCall, ERC20Interface
} from "@usedapp/core";
import { formatEther } from '@ethersproject/units';
import { useState } from "react";

import token from "/abi/ExampleERC20.json";

import {Contract, ethers} from "ethers";
import {Falsy} from "@usedapp/core/src/model/types";

const tokenAddress = "0x5DB9A7629912EBF95876228C24A848de0bfB43A9";
const walletAddress = "0x8a89e972274cC2171e2A0Cb8955dE72Ea4eb5CdB";

export const tokenInterface = new ethers.utils.Interface(
    token.abi
);

const tokenContract = new Contract(tokenAddress, tokenInterface);

function useTokenBalance(
    tokenAddress: string | Falsy,
    address: string | Falsy
) {
    const { value, error } =
    useCall(
        address &&
        tokenAddress && {
            contract: new Contract(tokenAddress, ERC20Interface), // instance of called contract
            method: "balanceOf", // Method to be called
            args: [address], // Method arguments - address to be checked for balance
        }
    ) ?? {};
    if(error) {
        console.error(error.message)
        return undefined
    }
    return value?.[0]
}

const Staker: NextPage = () => {
    const { activateBrowserWallet, account } = useEthers();
    const balance = useEtherBalance(account);

    const tokenBalance = useTokenBalance(tokenAddress, walletAddress);

    const [stakeAmount, setStakeAmount] = useState(0);
    const [exchangeRate, setExchangeRate] = useState(0);

    const { state, send } = useContractFunction(tokenContract, "mint")
    // const {state, send} = useContractFunction(ggpTokenContract, "getExchangeRate");


    // const meme = () => {
    //     const [v, e] = useContractCall({
    //         abi: tokenInterface,
    //         address: tokenAddress,
    //         method: "mint",
    //         args: [walletAddress, 1]
    //     }) ?? [];
    //
    //     console.log("steven", v);
    //     console.log("steven", e);
    // }

    console.log("tbalance", tokenBalance);

    const deposit = async () => {
        console.log("deposit")

        let test = await send(walletAddress, 1);

        let bb = await state.receipt;
            // const [count] = await send();
        // await send("0x8a89e972274cC2171e2A0Cb8955dE72Ea4eb5CdB", ethers.utils.parseEther(String(12)))
        console.log(test)
        // setExchangeRate(state.receipt);
    }

    return (
            <div className="px-8 items-center flex flex-col">
            <Head>
                <title>GoGoPool</title>
                <meta name="description" content="Decentralized liquid staking for less" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main className="flex flex-col grow justify-center align-center min-h-screen py-16 px-0 w-3/4 max-w-xl">
                <h1 className="m-0 text-6xl leading-normal text-center pb-8">
                    Liquid Staking
                </h1>

                <div className="flex flex-col">
                    <div className="p-4 m-4 text-left border border-solid border-black rounded-xl">
                        <div className="flex justify-between items-end mb-1">
                            <span className="text-sm pl-3">Stake AVAX</span>
                            <div>
                                <span className="text-sm pr-2">
                                    Balance: { balance
                                    ? formatEther(balance)
                                    : 0}
                                </span>
                                <span className="text-sm font-semibold">AVAX</span>
                            </div>
                        </div>
                        <div className="relative">
                            <div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none px-3 py-3 w-2/4">
                                <Image className="absolute items-center justify-center h-10 w-10 rounded-full"
                                       src="/avalanche-avax-logo.svg" alt="coffee" width={28} height={16}
                                />
                            </div>
                            <input
                                onChange={(e) => {setStakeAmount(parseFloat(e.target.value))}}
                                   type="number"
                                   className="border-2 w-full pl-8 appearance-none text-xl"
                                   placeholder="0.00"
                                   // value={stakeAmount}
                            />
                            <div className="absolute inset-y-0 right-2 flex items-center justify-end px-1 z-10 w-2/4">
                                <span className="text-xl">
                                    ~ ${stakeAmount
                                    ? Number(stakeAmount * 98.0).toFixed(2)
                                    : Number(0).toFixed(2)}
                                </span>
                            </div>
                        </div>
                    </div>
                    <Image src="/down-arrow.svg" alt="downarrow" width={48} height={24}/>

                    <div className="flex flex-col">
                        <div className="p-4 m-4 text-left border border-solid border-black rounded-xl">
                            <div className="flex justify-between items-end mb-1">
                                <span className="text-sm pl-3">Receive ggpAVAX</span>
                            </div>
                            <div className="relative">
                                <div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none px-3 py-3">
                                    <Image className="absolute items-center justify-center h-10 w-10 rounded-full"
                                           src="/avalanche-avax-logo.svg" alt="coffee" width={28} height={16}
                                    />
                                </div>
                                <input readOnly={true} value={stakeAmount}
                                    type="number" className="border-2 w-full pl-8 appearance-none text-xl" placeholder="0.00"/>
                            </div>
                        </div>
                    </div>
                    <div className="rounded-md shadow mt-5">
                        {!account && <button
                            className="bg-black w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-semibold rounded-md text-white action-button md:py-5 md:text-xl md:px-10"
                            onClick={activateBrowserWallet}
                        >
                            Connect wallet
                        </button>}

                        {account && <button
                            className="bg-black w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-semibold rounded-md text-white action-button md:py-5 md:text-xl md:px-10"
                            onClick={deposit}
                            >
                            Deposit
                        </button>}
                    </div>
                </div>
            </main>

            <footer className="flex grow px-8 py-0 border-t border-solid justify-center items-center">
                Powered by {<Image src="/coffee.svg" alt="coffee" width={28} height={16} />}
            </footer>
        </div>
    )
}

export default Staker
	import type { NextPage } from 'next'
	import Head from 'next/head'
	import Image from 'next/image'
	import {
	useEthers,
	useEtherBalance,
	useContractFunction,
	useContractCall,
	useCalls, useCall, ERC20Interface
	} from "@usedapp/core";
	import { formatEther } from '@ethersproject/units';
	import { useState } from "react";

	import token from "/abi/ExampleERC20.json";

	import {Contract, ethers} from "ethers";
	import {Falsy} from "@usedapp/core/src/model/types";

	const tokenAddress = "0x5DB9A7629912EBF95876228C24A848de0bfB43A9";
	const walletAddress = "0x8a89e972274cC2171e2A0Cb8955dE72Ea4eb5CdB";

	export const tokenInterface = new ethers.utils.Interface(
	token.abi
	);

	const tokenContract = new Contract(tokenAddress, tokenInterface);

	function useTokenBalance(
	tokenAddress: string \| Falsy,
	address: string \| Falsy
	) {
	const { value, error } =
	useCall(
	address &&
	tokenAddress && {
	contract: new Contract(tokenAddress, ERC20Interface), // instance of called contract
	method: "balanceOf", // Method to be called
	args: [address], // Method arguments - address to be checked for balance
	}
	) ?? {};
	if(error) {
	console.error(error.message)
	return undefined
	}
	return value?.[0]
	}

	const Staker: NextPage = () => {
	const { activateBrowserWallet, account } = useEthers();
	const balance = useEtherBalance(account);

	const tokenBalance = useTokenBalance(tokenAddress, walletAddress);

	const [stakeAmount, setStakeAmount] = useState(0);
	const [exchangeRate, setExchangeRate] = useState(0);

	const { state, send } = useContractFunction(tokenContract, "mint")
	// const {state, send} = useContractFunction(ggpTokenContract, "getExchangeRate");


	// const meme = () => {
	// const [v, e] = useContractCall({
	// abi: tokenInterface,
	// address: tokenAddress,
	// method: "mint",
	// args: [walletAddress, 1]
	// }) ?? [];
	//
	// console.log("steven", v);
	// console.log("steven", e);
	// }

	console.log("tbalance", tokenBalance);

	const deposit = async () => {
	console.log("deposit")

	let test = await send(walletAddress, 1);

	let bb = await state.receipt;
	// const [count] = await send();
	// await send("0x8a89e972274cC2171e2A0Cb8955dE72Ea4eb5CdB", ethers.utils.parseEther(String(12)))
	console.log(test)
	// setExchangeRate(state.receipt);
	}

	return (
	<div className="px-8 items-center flex flex-col">
	<Head>
	<title>GoGoPool</title>
	<meta name="description" content="Decentralized liquid staking for less" />
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main className="flex flex-col grow justify-center align-center min-h-screen py-16 px-0 w-3/4 max-w-xl">
	<h1 className="m-0 text-6xl leading-normal text-center pb-8">
	Liquid Staking
	</h1>

	<div className="flex flex-col">
	<div className="p-4 m-4 text-left border border-solid border-black rounded-xl">
	<div className="flex justify-between items-end mb-1">
	<span className="text-sm pl-3">Stake AVAX</span>
	<div>
	<span className="text-sm pr-2">
	Balance: { balance
	? formatEther(balance)
	: 0}
	</span>
	<span className="text-sm font-semibold">AVAX</span>
	</div>
	</div>
	<div className="relative">
	<div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none px-3 py-3 w-2/4">
	<Image className="absolute items-center justify-center h-10 w-10 rounded-full"
	src="/avalanche-avax-logo.svg" alt="coffee" width={28} height={16}
	/>
	</div>
	<input
	onChange={(e) => {setStakeAmount(parseFloat(e.target.value))}}
	type="number"
	className="border-2 w-full pl-8 appearance-none text-xl"
	placeholder="0.00"
	// value={stakeAmount}
	/>
	<div className="absolute inset-y-0 right-2 flex items-center justify-end px-1 z-10 w-2/4">
	<span className="text-xl">
	~ ${stakeAmount
	? Number(stakeAmount * 98.0).toFixed(2)
	: Number(0).toFixed(2)}
	</span>
	</div>
	</div>
	</div>
	<Image src="/down-arrow.svg" alt="downarrow" width={48} height={24}/>

	<div className="flex flex-col">
	<div className="p-4 m-4 text-left border border-solid border-black rounded-xl">
	<div className="flex justify-between items-end mb-1">
	<span className="text-sm pl-3">Receive ggpAVAX</span>
	</div>
	<div className="relative">
	<div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none px-3 py-3">
	<Image className="absolute items-center justify-center h-10 w-10 rounded-full"
	src="/avalanche-avax-logo.svg" alt="coffee" width={28} height={16}
	/>
	</div>
	<input readOnly={true} value={stakeAmount}
	type="number" className="border-2 w-full pl-8 appearance-none text-xl" placeholder="0.00"/>
	</div>
	</div>
	</div>
	<div className="rounded-md shadow mt-5">
	{!account && <button
	className="bg-black w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-semibold rounded-md text-white action-button md:py-5 md:text-xl md:px-10"
	onClick={activateBrowserWallet}
	>
	Connect wallet
	</button>}

	{account && <button
	className="bg-black w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-semibold rounded-md text-white action-button md:py-5 md:text-xl md:px-10"
	onClick={deposit}
	>
	Deposit
	</button>}
	</div>
	</div>
	</main>

	<footer className="flex grow px-8 py-0 border-t border-solid justify-center items-center">
	Powered by {<Image src="/coffee.svg" alt="coffee" width={28} height={16} />}
	</footer>
	</div>
	)
	}

	export default Staker