-
Notifications
You must be signed in to change notification settings - Fork 43
/
GreeterContractInteractions.tsx
108 lines (100 loc) · 3.39 KB
/
GreeterContractInteractions.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
import { Button, Card, FormControl, FormLabel, Input, Stack } from '@chakra-ui/react'
import { ContractIds } from '@deployments/deployments'
import {
contractQuery,
contractTx,
unwrapResultOrError,
useInkathon,
useRegisteredContract,
} from '@scio-labs/use-inkathon'
import { FC, useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import toast from 'react-hot-toast'
import 'twin.macro'
export const GreeterContractInteractions: FC = () => {
const { api, account, isConnected, signer } = useInkathon()
const { contract } = useRegisteredContract(ContractIds.greeter)
const [greeterMessage, setGreeterMessage] = useState<string>()
const [fetchIsLoading, setFetchIsLoading] = useState<boolean>()
const [updateIsLoading, setUpdateIsLoading] = useState<boolean>()
const form = useForm<{ newMessage: string }>()
// Fetch Greeting
const fetchGreeting = async () => {
if (!contract || !api) return
setFetchIsLoading(true)
try {
const result = await contractQuery(api, '', contract, 'greet')
const message = unwrapResultOrError<string>(result)
setGreeterMessage(message)
} catch (e) {
console.error(e)
toast.error('Error while fetching greeting. Try again…')
setGreeterMessage(undefined)
} finally {
setFetchIsLoading(false)
}
}
useEffect(() => {
fetchGreeting()
}, [contract])
// Update Greeting
const updateGreeting = async () => {
if (!account || !contract || !signer || !api) {
toast.error('Wallet not connected. Try again…')
return
}
setUpdateIsLoading(true)
try {
// Gather form value
const newMessage = form.getValues('newMessage')
// Estimate gas & send transaction
await contractTx(api, account.address, contract, 'setMessage', {}, [newMessage], (result) => {
if (result?.status?.isInBlock) fetchGreeting()
})
toast.success(`Successfully updated greeting`)
} catch (e) {
console.error(e)
toast.error('Error while updating greeting. Try again.')
} finally {
setUpdateIsLoading(false)
}
}
if (!contract) return null
return (
<>
<div tw="flex grow flex-col space-y-4 max-w-[20rem]">
<h2 tw="text-center font-mono text-gray-400">Greeter Smart Contract</h2>
{/* Fetched Greeting */}
<Card variant="outline" p={4} bgColor="whiteAlpha.100">
<FormControl>
<FormLabel>Fetched Greeting</FormLabel>
<Input placeholder={fetchIsLoading ? 'Loading…' : greeterMessage} disabled={true} />
</FormControl>
</Card>
{/* Update Greeting */}
{!!isConnected && (
<Card variant="outline" p={4} bgColor="whiteAlpha.100">
<form>
<Stack direction="row" spacing={2} align="end">
<FormControl>
<FormLabel>Update Greeting</FormLabel>
<Input disabled={updateIsLoading} {...form.register('newMessage')} />
</FormControl>
<Button
mt={4}
colorScheme="purple"
isLoading={updateIsLoading}
disabled={updateIsLoading}
type="button"
onClick={updateGreeting}
>
Submit
</Button>
</Stack>
</form>
</Card>
)}
</div>
</>
)
}