-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
index.tsx
112 lines (95 loc) · 3.47 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import type { TestContractAbi } from "@/sway-api";
import { TestContractAbi__factory } from "@/sway-api";
import contractIds from "@/sway-api/contract-ids.json";
import { FuelLogo } from "@/components/FuelLogo";
import { bn } from "fuels";
import { useState } from "react";
import { Link } from "@/components/Link";
import { Button } from "@/components/Button";
import toast from "react-hot-toast";
import { useActiveWallet } from "@/hooks/useActiveWallet";
import useAsync from "react-use/lib/useAsync";
import { CURRENT_ENVIRONMENT } from "@/lib";
const contractId =
CURRENT_ENVIRONMENT === "local"
? contractIds.testContract
: (process.env.NEXT_PUBLIC_TESTNET_CONTRACT_ID as string); // Testnet Contract ID
const hasContract = process.env.NEXT_PUBLIC_HAS_CONTRACT === "true";
const hasPredicate = process.env.NEXT_PUBLIC_HAS_PREDICATE === "true";
const hasScript = process.env.NEXT_PUBLIC_HAS_SCRIPT === "true";
export default function Home() {
const { wallet, walletBalance, refreshWalletBalance } = useActiveWallet();
const [contract, setContract] = useState<TestContractAbi>();
const [counter, setCounter] = useState<number>();
/**
* useAsync is a wrapper around useEffect that allows us to run asynchronous code
* See: https://github.com/streamich/react-use/blob/master/docs/useAsync.md
*/
useAsync(async () => {
if (hasContract && wallet) {
const testContract = TestContractAbi__factory.connect(contractId, wallet);
setContract(testContract);
const { value } = await testContract.functions.get_count().get();
setCounter(value.toNumber());
}
}, [wallet]);
// eslint-disable-next-line consistent-return
const onIncrementPressed = async () => {
if (!contract) {
return toast.error("Contract not loaded");
}
if (walletBalance?.eq(0)) {
return toast.error(
"Your wallet does not have enough funds. Please click the 'Top-up Wallet' button in the top right corner, or use the local faucet.",
);
}
const { value } = await contract.functions.increment_counter(bn(1)).call();
setCounter(value.toNumber());
await refreshWalletBalance?.();
};
return (
<>
<div className="flex gap-4 items-center">
<FuelLogo />
<h1 className="text-2xl font-semibold ali">Welcome to Fuel</h1>
</div>
{hasContract && (
<span className="text-gray-400">
Get started by editing <i>sway-programs/contract/main.sw</i> or{" "}
<i>src/pages/index.tsx</i>.
</span>
)}
<span className="text-gray-400">
This template uses the new{" "}
<Link href="https://docs.fuel.network/docs/fuels-ts/fuels/#fuels-cli">
Fuels CLI
</Link>{" "}
to enable type-safe hot-reloading for your Sway programs.
</span>
{hasContract && (
<>
<h3 className="text-xl font-semibold">Counter</h3>
<span data-testid="counter" className="text-gray-400 text-6xl">
{counter}
</span>
<Button onClick={onIncrementPressed} className="mt-6">
Increment Counter
</Button>
</>
)}
{hasPredicate && (
<Link href="/predicate" className="mt-4">
Predicate Example
</Link>
)}
{hasScript && (
<Link href="/script" className="mt-4">
Script Example
</Link>
)}
<Link href="https://docs.fuel.network" target="_blank" className="mt-12">
Fuel Docs
</Link>
</>
);
}