cartesi/rollups-explorer | Build 8374927293 | packages/ui/src/ERC20DepositForm.tsx | Coveralls

1

import {

1✔

2

    erc20Abi,

1✔

3

    erc20PortalAddress,

1✔

4

    useWriteErc20Approve,

1✔

5

    useSimulateErc20Approve,

1✔

6

    useWriteErc20PortalDepositErc20Tokens,

1✔

7

    useSimulateErc20PortalDepositErc20Tokens,

1✔

8

} from "@cartesi/rollups-wagmi";

1✔

9

import {

1✔

10

    Alert,

1✔

11

    Autocomplete,

1✔

12

    Button,

1✔

13

    Collapse,

1✔

14

    Flex,

1✔

15

    Group,

1✔

16

    Loader,

1✔

17

    Stack,

1✔

18

    Text,

1✔

19

    TextInput,

1✔

20

    Textarea,

1✔

21

    UnstyledButton,

1✔

22

} from "@mantine/core";

1✔

23

import { useForm } from "@mantine/form";

1✔

24

import { useDisclosure } from "@mantine/hooks";

1✔

25

import { isEmpty } from "ramda";

1✔

26

import { FC, useEffect, useState } from "react";

1✔

27

import {

1✔

28

    TbAlertCircle,

1✔

29

    TbCheck,

1✔

30

    TbChevronDown,

1✔

31

    TbChevronUp,

1✔

32

    TbPigMoney,

1✔

33

} from "react-icons/tb";

1✔

34

import {

1✔

35

    BaseError,

1✔

36

    Hex,

1✔

37

    formatUnits,

1✔

38

    getAddress,

1✔

39

    isAddress,

1✔

40

    isHex,

1✔

41

    parseUnits,

1✔

42

    zeroAddress,

1✔

43

} from "viem";

1✔

44

import {

1✔

45

    useAccount,

1✔

46

    useReadContracts,

1✔

47

    useWaitForTransactionReceipt,

1✔

48

} from "wagmi";

1✔

49

import { TransactionProgress } from "./TransactionProgress";

1✔

50

import {

1✔

51

    TransactionStageStatus,

1✔

52

    TransactionWaitStatus,

1✔

53

} from "./TransactionStatus";

1✔

54

import useWatchQueryOnBlockChange from "./hooks/useWatchQueryOnBlockChange";

1✔

55

1✔

56

export const transactionButtonState = (

1✔

57

    prepare: TransactionWaitStatus,

126✔

58

    execute: TransactionStageStatus,

126✔

59

    wait: TransactionWaitStatus,

126✔

60

    disableOnSuccess: boolean = true,

126✔

61

) => {

126✔

62

    const loading =

126✔

63

        prepare.fetchStatus === "fetching" ||

126✔

64

        execute.status === "pending" ||

126✔

65

        wait.fetchStatus === "fetching";

126✔

66

126✔

67

    const disabled =

126✔

68

        prepare.error !== null ||

126✔

70

126✔

71

    return { loading, disabled };

126✔

72

};

126✔

73

1✔

74

export interface ERC20DepositFormProps {

1✔

75

    tokens: string[];

1✔

76

    applications: string[];

1✔

77

    isLoadingApplications: boolean;

1✔

78

    onSearchApplications: (applicationId: string) => void;

1✔

79

    onSearchTokens: (tokenId: string) => void;

1✔

80

1✔

81

1✔

82

export const ERC20DepositForm: FC<ERC20DepositFormProps> = (props) => {

1✔

83

    const {

63✔

84

        tokens,

63✔

85

        applications,

63✔

86

        isLoadingApplications,

63✔

87

        onSearchApplications,

63✔

88

        onSearchTokens,

63✔

89

    } = props;

63✔

90

63✔

91

    const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false);

63✔

92

63✔

93

    // connected account

63✔

94

    const { address } = useAccount();

63✔

95

63✔

96

    const [decimals, setDecimals] = useState<number | undefined>();

63✔

97

63✔

98

    const form = useForm({

63✔

99

        validateInputOnChange: true,

63✔

100

        initialValues: {

63✔

101

            application: "",

63✔

102

            erc20Address: "",

63✔

103

            amount: "",

63✔

104

            execLayerData: "0x",

63✔

105

},

63✔

106

        validate: {

63✔

107

            application: (value) => {

63✔

108

                if (isEmpty(value)) return `Please input ERC20 Address`;

6✔

112

                return null;

1✔

113

},

6✔

114

            erc20Address: (value) => {

63✔

115

                if (isEmpty(value)) return `Please input ERC20 Address`;

6✔

116

                if (!isAddress(value)) {

6✔

117

                    return `Invalid ERC20 address`;

1✔

118

1✔

119

                return null;

1✔

120

},

6✔

121

            amount: (value) =>

63✔

122

                value !== "" && Number(value) > 0 ? null : "Invalid amount",

6✔

123

            execLayerData: (value) =>

63✔

125

},

63✔

126

        transformValues: (values) => ({

63✔

127

            address: isAddress(values.application)

63✔

128

                ? getAddress(values.application)

3✔

129

                : zeroAddress,

60✔

130

            erc20Address: isAddress(values.erc20Address)

63✔

131

                ? getAddress(values.erc20Address)

3✔

132

                : zeroAddress,

60✔

133

            erc20ContractAddress: isAddress(values.erc20Address)

63✔

134

                ? getAddress(values.erc20Address)

3✔

135

                : undefined,

60✔

136

            amountBigInt:

63✔

137

                values.amount !== "" && decimals

63✔

138

                    ? parseUnits(values.amount, decimals)

9✔

139

                    : undefined,

54✔

140

            execLayerData: values.execLayerData

63✔

143

}),

63✔

144

});

63✔

145

63✔

146

    const {

63✔

147

        address: applicationAddress,

63✔

148

        erc20Address,

63✔

149

        erc20ContractAddress,

63✔

150

        execLayerData,

63✔

151

        amountBigInt,

63✔

152

    } = form.getTransformedValues();

63✔

153

63✔

154

    // query token information in a multicall

63✔

155

    const erc20Contract = {

63✔

156

        abi: erc20Abi,

63✔

157

        address: erc20ContractAddress,

63✔

158

};

63✔

159

    const erc20 = useReadContracts({

63✔

160

        contracts: [

63✔

161

            { ...erc20Contract, functionName: "decimals" },

63✔

162

            { ...erc20Contract, functionName: "symbol" },

63✔

163

63✔

164

                ...erc20Contract,

63✔

165

                functionName: "allowance",

63✔

166

                args: [getAddress(address!), erc20PortalAddress],

63✔

167

},

63✔

168

            { ...erc20Contract, functionName: "balanceOf", args: [address!] },

63✔

169

],

63✔

170

});

63✔

171

63✔

172

    useWatchQueryOnBlockChange(erc20.queryKey);

63✔

173

63✔

174

    useEffect(() => {

63✔

175

        if (erc20.data?.[0]?.result) {

36✔

176

            setDecimals(erc20.data?.[0].result as number | undefined);

36✔

177

36✔

178

    }, [erc20.data]);

63✔

179

63✔

180

    const symbol = erc20.data?.[1].result as string | undefined;

63✔

181

    const allowance = erc20.data?.[2].result as bigint | undefined;

63✔

182

    const balance = erc20.data?.[3].result as bigint | undefined;

63✔

183

    const erc20Errors = erc20.data

63✔

184

        ? erc20.data

63✔

185

              .filter((d) => d.error instanceof Error)

63✔

186

              .map((d) => {

63✔

190

63✔

191

    // prepare approve transaction

63✔

192

    const approvePrepare = useSimulateErc20Approve({

63✔

193

        address: erc20Address,

63✔

194

        args: [erc20PortalAddress, amountBigInt!],

63✔

195

        query: {

63✔

196

            enabled:

63✔

197

                amountBigInt !== undefined &&

63✔

198

                allowance !== undefined &&

9✔

199

                amountBigInt > allowance,

9✔

200

},

63✔

201

});

63✔

202

    const approve = useWriteErc20Approve();

63✔

203

    const approveWait = useWaitForTransactionReceipt({

63✔

204

        hash: approve.data,

63✔

205

});

63✔

206

63✔

207

    // prepare deposit transaction

63✔

208

    const depositPrepare = useSimulateErc20PortalDepositErc20Tokens({

63✔

209

        args: [erc20Address, applicationAddress, amountBigInt!, execLayerData],

63✔

210

        query: {

63✔

211

            enabled:

63✔

212

                amountBigInt !== undefined &&

63✔

213

                balance !== undefined &&

9✔

214

                allowance !== undefined &&

9✔

215

                !form.errors.erc20Address &&

9✔

216

                !form.errors.application &&

9✔

217

                isHex(execLayerData) &&

9✔

218

                amountBigInt <= balance &&

9✔

219

                amountBigInt <= allowance,

6✔

220

},

63✔

221

});

63✔

222

    const deposit = useWriteErc20PortalDepositErc20Tokens();

63✔

223

    const depositWait = useWaitForTransactionReceipt({

63✔

224

        hash: deposit.data,

63✔

225

});

63✔

226

63✔

227

    // true if current allowance is less than the amount to deposit

63✔

228

    const needApproval =

63✔

229

        allowance !== undefined &&

63✔

230

        decimals !== undefined &&

63✔

231

        amountBigInt !== undefined &&

48✔

232

        allowance < amountBigInt;

9✔

233

63✔

234

    const canDeposit =

63✔

235

        allowance !== undefined &&

63✔

236

        balance !== undefined &&

63✔

237

        decimals !== undefined &&

63✔

238

        amountBigInt !== undefined &&

48✔

239

        amountBigInt > 0 &&

9✔

242

63✔

243

    const { disabled: approveDisabled, loading: approveLoading } =

63✔

244

        transactionButtonState(approvePrepare, approve, approveWait, false);

63✔

245

    const { disabled: depositDisabled, loading: depositLoading } =

63✔

246

        transactionButtonState(depositPrepare, deposit, depositWait, true);

63✔

247

63✔

248

    useEffect(() => {

63✔

249

        if (depositWait.isSuccess) {

15✔

250

            form.reset();

1✔

251

            onSearchApplications("");

1✔

252

1✔

253

        // eslint-disable-next-line react-hooks/exhaustive-deps

15✔

254

    }, [depositWait.isSuccess, onSearchApplications]);

63✔

255

63✔

256

    return (

63✔

257

        <form data-testid="erc20-deposit-form">

63✔

258

            <Stack>

63✔

259

                <Autocomplete

63✔

260

                    label="Application"

63✔

261

                    description="The application smart contract address"

63✔

262

                    placeholder="0x"

63✔

263

                    data={applications}

63✔

264

                    withAsterisk

63✔

265

                    data-testid="application"

63✔

267

                    {...form.getInputProps("application")}

63✔

268

                    onChange={(nextValue) => {

63✔

269

                        form.setFieldValue("application", nextValue);

1✔

270

                        onSearchApplications(nextValue);

1✔

271

}}

1✔

272

/>

63✔

273

63✔

274

                {isAddress(applicationAddress) &&

63✔

275

                    applicationAddress !== zeroAddress &&

63✔

276

                    !applications.length && (

3✔

277

                        <Alert

3✔

278

                            variant="light"

3✔

279

                            color="yellow"

3✔

280

                            icon={<TbAlertCircle />}

3✔

281

3✔

282

                            This is a deposit to an undeployed application.

3✔

283

                        </Alert>

3✔

284

)}

63✔

285

63✔

286

                <Autocomplete

63✔

287

                    label="ERC-20"

63✔

288

                    description="The ERC-20 smart contract address"

63✔

289

                    placeholder="0x"

63✔

290

                    data={tokens}

63✔

291

                    withAsterisk

63✔

292

                    data-testid="erc20Address"

63✔

294

                    {...form.getInputProps("erc20Address")}

63✔

295

                    error={erc20Errors[0] || form.errors.erc20Address}

63✔

296

                    onChange={(nextValue) => {

63✔

297

                        const formattedValue = nextValue.substring(

2✔

298

                            nextValue.indexOf("0x"),

2✔

299

);

2✔

300

                        form.setFieldValue("erc20Address", formattedValue);

2✔

301

                        onSearchTokens(formattedValue);

2✔

302

}}

2✔

303

/>

63✔

304

63✔

305

                {isAddress(erc20Address) &&

63✔

306

                    erc20Address !== zeroAddress &&

63✔

307

                    !tokens.length &&

3✔

308

                    !erc20.isLoading && (

3✔

309

                        <Alert

3✔

310

                            variant="light"

3✔

311

                            color="yellow"

3✔

312

                            icon={<TbAlertCircle />}

3✔

313

3✔

314

                            This is the first deposit of that token.

3✔

315

                        </Alert>

3✔

316

)}

63✔

317

63✔

318

                <Collapse in={erc20.isSuccess && erc20Errors.length == 0}>

63✔

319

                    <Stack>

63✔

320

                        <TextInput

63✔

321

                            type="number"

63✔

322

                            min={0}

63✔

323

                            step={1}

63✔

324

                            label="Amount"

63✔

325

                            description="Amount of tokens to deposit"

63✔

326

                            placeholder="0"

63✔

327

                            rightSectionWidth={60}

63✔

328

                            rightSection={<Text>{symbol}</Text>}

63✔

329

                            withAsterisk

63✔

330

                            data-testid="amount-input"

63✔

331

                            {...form.getInputProps("amount")}

63✔

332

/>

63✔

333

                        <Flex

63✔

334

                            mt="-sm"

63✔

335

                            justify={"space-between"}

63✔

336

                            direction={"row"}

63✔

337

63✔

338

                            <Flex rowGap={6} c={"dark.2"}>

63✔

339

                                <Text fz="xs">Balance:</Text>

63✔

340

                                <Text id="token-balance" fz="xs" mx={4}>

63✔

341

                                    {" "}

63✔

342

                                    {balance !== undefined && decimals

63✔

343

                                        ? formatUnits(balance, decimals)

48✔

344

                                        : ""}

15✔

345

                                </Text>

63✔

346

                                {balance !== undefined &&

63✔

347

                                    balance > 0 &&

63✔

348

                                    decimals && (

63✔

349

                                        <UnstyledButton

48✔

350

                                            fz={"xs"}

48✔

351

                                            c={"cyan"}

48✔

352

                                            onClick={() => {

48✔

353

                                                form.setFieldValue(

1✔

354

                                                    "amount",

1✔

355

                                                    formatUnits(

1✔

356

                                                        balance,

1✔

357

                                                        decimals,

1✔

358

),

1✔

359

);

1✔

360

}}

1✔

361

                                            data-testid="max-button"

48✔

362

48✔

363

Max

48✔

364

                                        </UnstyledButton>

48✔

365

)}

63✔

366

                            </Flex>

63✔

367

                            <Flex rowGap={6} c={"dark.2"}>

63✔

368

                                <Text size="xs">Allowance:</Text>

63✔

369

                                <Text ml={4} fz="xs">

63✔

370

                                    {allowance != undefined && decimals

63✔

371

                                        ? formatUnits(allowance, decimals)

48✔

372

                                        : ""}

15✔

373

                                </Text>

63✔

374

                            </Flex>

63✔

375

                        </Flex>

63✔

376

                    </Stack>

63✔

377

                </Collapse>

63✔

378

                <Collapse in={advanced}>

63✔

379

                    <Textarea

63✔

380

                        label="Extra data"

63✔

381

                        description="Extra execution layer data handled by the application"

63✔

382

                        {...form.getInputProps("execLayerData")}

63✔

383

/>

63✔

384

                </Collapse>

63✔

385

                <Collapse in={approve.isPending || approveWait.isLoading}>

63✔

386

                    <TransactionProgress

63✔

387

                        prepare={approvePrepare}

63✔

388

                        execute={approve}

63✔

389

                        wait={approveWait}

63✔

390

                        confirmationMessage="Approve transaction confirmed"

63✔

391

/>

63✔

392

                </Collapse>

63✔

393

                <Collapse in={!deposit.isIdle}>

63✔

394

                    <TransactionProgress

63✔

395

                        prepare={depositPrepare}

63✔

396

                        execute={deposit}

63✔

397

                        wait={depositWait}

63✔

398

/>

63✔

399

                </Collapse>

63✔

400

                <Group justify="right">

63✔

401

                    <Button

63✔

402

                        leftSection={

63✔

404

63✔

405

                        size="xs"

63✔

406

                        visibleFrom="sm"

63✔

407

                        variant="transparent"

63✔

408

                        onClick={toggleAdvanced}

63✔

409

63✔

410

                        Advanced

63✔

411

                    </Button>

63✔

412

                    <Button

63✔

413

                        variant="filled"

63✔

414

                        disabled={approveDisabled || !needApproval}

63✔

415

                        leftSection={<TbCheck />}

63✔

416

                        loading={approveLoading}

63✔

417

                        onClick={() =>

63✔

419

63✔

420

63✔

421

                        Approve

63✔

422

                    </Button>

63✔

423

                    <Button

63✔

424

                        variant="filled"

63✔

425

                        disabled={

63✔

427

63✔

428

                        leftSection={<TbPigMoney />}

63✔

429

                        loading={depositLoading}

63✔

430

                        onClick={() =>

63✔

432

63✔

433

63✔

434

                        Deposit

63✔

435

                    </Button>

63✔

436

                </Group>

63✔

437

            </Stack>

63✔

438

        </form>

63✔

439

);

63✔

440

};

63✔

cartesi / rollups-explorer / 8374927293

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1	import {	1✔
2	erc20Abi,	1✔
3	erc20PortalAddress,	1✔
4	useWriteErc20Approve,	1✔
5	useSimulateErc20Approve,	1✔
6	useWriteErc20PortalDepositErc20Tokens,	1✔
7	useSimulateErc20PortalDepositErc20Tokens,	1✔
8	} from "@cartesi/rollups-wagmi";	1✔
9	import {	1✔
10	Alert,	1✔
11	Autocomplete,	1✔
12	Button,	1✔
13	Collapse,	1✔
14	Flex,	1✔
15	Group,	1✔
16	Loader,	1✔
17	Stack,	1✔
18	Text,	1✔
19	TextInput,	1✔
20	Textarea,	1✔
21	UnstyledButton,	1✔
22	} from "@mantine/core";	1✔
23	import { useForm } from "@mantine/form";	1✔
24	import { useDisclosure } from "@mantine/hooks";	1✔
25	import { isEmpty } from "ramda";	1✔
26	import { FC, useEffect, useState } from "react";	1✔
27	import {	1✔
28	TbAlertCircle,	1✔
29	TbCheck,	1✔
30	TbChevronDown,	1✔
31	TbChevronUp,	1✔
32	TbPigMoney,	1✔
33	} from "react-icons/tb";	1✔
34	import {	1✔
35	BaseError,	1✔
36	Hex,	1✔
37	formatUnits,	1✔
38	getAddress,	1✔
39	isAddress,	1✔
40	isHex,	1✔
41	parseUnits,	1✔
42	zeroAddress,	1✔
43	} from "viem";	1✔
44	import {	1✔
45	useAccount,	1✔
46	useReadContracts,	1✔
47	useWaitForTransactionReceipt,	1✔
48	} from "wagmi";	1✔
49	import { TransactionProgress } from "./TransactionProgress";	1✔
50	import {	1✔
51	TransactionStageStatus,	1✔
52	TransactionWaitStatus,	1✔
53	} from "./TransactionStatus";	1✔
54	import useWatchQueryOnBlockChange from "./hooks/useWatchQueryOnBlockChange";	1✔
55		1✔
56	export const transactionButtonState = (	1✔
57	prepare: TransactionWaitStatus,	126✔
58	execute: TransactionStageStatus,	126✔
59	wait: TransactionWaitStatus,	126✔
60	disableOnSuccess: boolean = true,	126✔
61	) => {	126✔
62	const loading =	126✔
63	prepare.fetchStatus === "fetching" \|\|	126✔
64	execute.status === "pending" \|\|	126✔
65	wait.fetchStatus === "fetching";	126✔
66		126✔
67	const disabled =	126✔
68	prepare.error !== null \|\|	126✔
69	(disableOnSuccess && wait.status === "success");	9!
70		126✔
71	return { loading, disabled };	126✔
72	};	126✔
73		1✔
74	export interface ERC20DepositFormProps {	1✔
75	tokens: string[];	1✔
76	applications: string[];	1✔
77	isLoadingApplications: boolean;	1✔
78	onSearchApplications: (applicationId: string) => void;	1✔
79	onSearchTokens: (tokenId: string) => void;	1✔
80	}	1✔
81		1✔
82	export const ERC20DepositForm: FC<ERC20DepositFormProps> = (props) => {	1✔
83	const {	63✔
84	tokens,	63✔
85	applications,	63✔
86	isLoadingApplications,	63✔
87	onSearchApplications,	63✔
88	onSearchTokens,	63✔
89	} = props;	63✔
90		63✔
91	const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false);	63✔
92		63✔
93	// connected account	63✔
94	const { address } = useAccount();	63✔
95		63✔
96	const [decimals, setDecimals] = useState<number \| undefined>();	63✔
97		63✔
98	const form = useForm({	63✔
99	validateInputOnChange: true,	63✔
100	initialValues: {	63✔
101	application: "",	63✔
102	erc20Address: "",	63✔
103	amount: "",	63✔
104	execLayerData: "0x",	63✔
105	},	63✔
106	validate: {	63✔
107	application: (value) => {	63✔
108	if (isEmpty(value)) return `Please input ERC20 Address`;	6✔
109	if (!isAddress(value)) {	6!
110	return `Invalid Application address`;	×
111	}	✔
112	return null;	1✔
113	},	6✔
114	erc20Address: (value) => {	63✔
115	if (isEmpty(value)) return `Please input ERC20 Address`;	6✔
116	if (!isAddress(value)) {	6✔
117	return `Invalid ERC20 address`;	1✔
118	}	1✔
119	return null;	1✔
120	},	6✔
121	amount: (value) =>	63✔
122	value !== "" && Number(value) > 0 ? null : "Invalid amount",	6✔
123	execLayerData: (value) =>	63✔
124	isHex(value) ? null : "Invalid hex string",	6!
125	},	63✔
126	transformValues: (values) => ({	63✔
127	address: isAddress(values.application)	63✔
128	? getAddress(values.application)	3✔
129	: zeroAddress,	60✔
130	erc20Address: isAddress(values.erc20Address)	63✔
131	? getAddress(values.erc20Address)	3✔
132	: zeroAddress,	60✔
133	erc20ContractAddress: isAddress(values.erc20Address)	63✔
134	? getAddress(values.erc20Address)	3✔
135	: undefined,	60✔
136	amountBigInt:	63✔
137	values.amount !== "" && decimals	63✔
138	? parseUnits(values.amount, decimals)	9✔
139	: undefined,	54✔
140	execLayerData: values.execLayerData	63✔
141	? (values.execLayerData as Hex)	63!
142	: "0x",	×
143	}),	63✔
144	});	63✔
145		63✔
146	const {	63✔
147	address: applicationAddress,	63✔
148	erc20Address,	63✔
149	erc20ContractAddress,	63✔
150	execLayerData,	63✔
151	amountBigInt,	63✔
152	} = form.getTransformedValues();	63✔
153		63✔
154	// query token information in a multicall	63✔
155	const erc20Contract = {	63✔
156	abi: erc20Abi,	63✔
157	address: erc20ContractAddress,	63✔
158	};	63✔
159	const erc20 = useReadContracts({	63✔
160	contracts: [	63✔
161	{ ...erc20Contract, functionName: "decimals" },	63✔
162	{ ...erc20Contract, functionName: "symbol" },	63✔
163	{	63✔
164	...erc20Contract,	63✔
165	functionName: "allowance",	63✔
166	args: [getAddress(address!), erc20PortalAddress],	63✔
167	},	63✔
168	{ ...erc20Contract, functionName: "balanceOf", args: [address!] },	63✔
169	],	63✔
170	});	63✔
171		63✔
172	useWatchQueryOnBlockChange(erc20.queryKey);	63✔
173		63✔
174	useEffect(() => {	63✔
175	if (erc20.data?.[0]?.result) {	36✔
176	setDecimals(erc20.data?.[0].result as number \| undefined);	36✔
177	}	36✔
178	}, [erc20.data]);	63✔
179		63✔
180	const symbol = erc20.data?.[1].result as string \| undefined;	63✔
181	const allowance = erc20.data?.[2].result as bigint \| undefined;	63✔
182	const balance = erc20.data?.[3].result as bigint \| undefined;	63✔
183	const erc20Errors = erc20.data	63✔
184	? erc20.data	63✔
185	.filter((d) => d.error instanceof Error)	63✔
186	.map((d) => {	63✔
187	return (d.error as BaseError).shortMessage;	×
188	})	63!
189	: [];	×
190		63✔
191	// prepare approve transaction	63✔
192	const approvePrepare = useSimulateErc20Approve({	63✔
193	address: erc20Address,	63✔
194	args: [erc20PortalAddress, amountBigInt!],	63✔
195	query: {	63✔
196	enabled:	63✔
197	amountBigInt !== undefined &&	63✔
198	allowance !== undefined &&	9✔
199	amountBigInt > allowance,	9✔
200	},	63✔
201	});	63✔
202	const approve = useWriteErc20Approve();	63✔
203	const approveWait = useWaitForTransactionReceipt({	63✔
204	hash: approve.data,	63✔
205	});	63✔
206		63✔
207	// prepare deposit transaction	63✔
208	const depositPrepare = useSimulateErc20PortalDepositErc20Tokens({	63✔
209	args: [erc20Address, applicationAddress, amountBigInt!, execLayerData],	63✔
210	query: {	63✔
211	enabled:	63✔
212	amountBigInt !== undefined &&	63✔
213	balance !== undefined &&	9✔
214	allowance !== undefined &&	9✔
215	!form.errors.erc20Address &&	9✔
216	!form.errors.application &&	9✔
217	isHex(execLayerData) &&	9✔
218	amountBigInt <= balance &&	9✔
219	amountBigInt <= allowance,	6✔
220	},	63✔
221	});	63✔
222	const deposit = useWriteErc20PortalDepositErc20Tokens();	63✔
223	const depositWait = useWaitForTransactionReceipt({	63✔
224	hash: deposit.data,	63✔
225	});	63✔
226		63✔
227	// true if current allowance is less than the amount to deposit	63✔
228	const needApproval =	63✔
229	allowance !== undefined &&	63✔
230	decimals !== undefined &&	63✔
231	amountBigInt !== undefined &&	48✔
232	allowance < amountBigInt;	9✔
233		63✔
234	const canDeposit =	63✔
235	allowance !== undefined &&	63✔
236	balance !== undefined &&	63✔
237	decimals !== undefined &&	63✔
238	amountBigInt !== undefined &&	48✔
239	amountBigInt > 0 &&	9✔
240	amountBigInt <= allowance &&	9!
241	amountBigInt <= balance;	×
242		63✔
243	const { disabled: approveDisabled, loading: approveLoading } =	63✔
244	transactionButtonState(approvePrepare, approve, approveWait, false);	63✔
245	const { disabled: depositDisabled, loading: depositLoading } =	63✔
246	transactionButtonState(depositPrepare, deposit, depositWait, true);	63✔
247		63✔
248	useEffect(() => {	63✔
249	if (depositWait.isSuccess) {	15✔
250	form.reset();	1✔
251	onSearchApplications("");	1✔
252	}	1✔
253	// eslint-disable-next-line react-hooks/exhaustive-deps	15✔
254	}, [depositWait.isSuccess, onSearchApplications]);	63✔
255		63✔
256	return (	63✔
257	<form data-testid="erc20-deposit-form">	63✔
258	<Stack>	63✔
259	<Autocomplete	63✔
260	label="Application"	63✔
261	description="The application smart contract address"	63✔
262	placeholder="0x"	63✔
263	data={applications}	63✔
264	withAsterisk	63✔
265	data-testid="application"	63✔
266	rightSection={isLoadingApplications && <Loader size="xs" />}	63!
267	{...form.getInputProps("application")}	63✔
268	onChange={(nextValue) => {	63✔
269	form.setFieldValue("application", nextValue);	1✔
270	onSearchApplications(nextValue);	1✔
271	}}	1✔
272	/>	63✔
273		63✔
274	{isAddress(applicationAddress) &&	63✔
275	applicationAddress !== zeroAddress &&	63✔
276	!applications.length && (	3✔
277	<Alert	3✔
278	variant="light"	3✔
279	color="yellow"	3✔
280	icon={<TbAlertCircle />}	3✔
281	>	3✔
282	This is a deposit to an undeployed application.	3✔
283	</Alert>	3✔
284	)}	63✔
285		63✔
286	<Autocomplete	63✔
287	label="ERC-20"	63✔
288	description="The ERC-20 smart contract address"	63✔
289	placeholder="0x"	63✔
290	data={tokens}	63✔
291	withAsterisk	63✔
292	data-testid="erc20Address"	63✔
293	rightSection={erc20.isLoading && <Loader size="xs" />}	63!
294	{...form.getInputProps("erc20Address")}	63✔
295	error={erc20Errors[0] \|\| form.errors.erc20Address}	63✔
296	onChange={(nextValue) => {	63✔
297	const formattedValue = nextValue.substring(	2✔
298	nextValue.indexOf("0x"),	2✔
299	);	2✔
300	form.setFieldValue("erc20Address", formattedValue);	2✔
301	onSearchTokens(formattedValue);	2✔
302	}}	2✔
303	/>	63✔
304		63✔
305	{isAddress(erc20Address) &&	63✔
306	erc20Address !== zeroAddress &&	63✔
307	!tokens.length &&	3✔
308	!erc20.isLoading && (	3✔
309	<Alert	3✔
310	variant="light"	3✔
311	color="yellow"	3✔
312	icon={<TbAlertCircle />}	3✔
313	>	3✔
314	This is the first deposit of that token.	3✔
315	</Alert>	3✔
316	)}	63✔
317		63✔
318	<Collapse in={erc20.isSuccess && erc20Errors.length == 0}>	63✔
319	<Stack>	63✔
320	<TextInput	63✔
321	type="number"	63✔
322	min={0}	63✔
323	step={1}	63✔
324	label="Amount"	63✔
325	description="Amount of tokens to deposit"	63✔
326	placeholder="0"	63✔
327	rightSectionWidth={60}	63✔
328	rightSection={<Text>{symbol}</Text>}	63✔
329	withAsterisk	63✔
330	data-testid="amount-input"	63✔
331	{...form.getInputProps("amount")}	63✔
332	/>	63✔
333	<Flex	63✔
334	mt="-sm"	63✔
335	justify={"space-between"}	63✔
336	direction={"row"}	63✔
337	>	63✔
338	<Flex rowGap={6} c={"dark.2"}>	63✔
339	<Text fz="xs">Balance:</Text>	63✔
340	<Text id="token-balance" fz="xs" mx={4}>	63✔
341	{" "}	63✔
342	{balance !== undefined && decimals	63✔
343	? formatUnits(balance, decimals)	48✔
344	: ""}	15✔
345	</Text>	63✔
346	{balance !== undefined &&	63✔
347	balance > 0 &&	63✔
348	decimals && (	63✔
349	<UnstyledButton	48✔
350	fz={"xs"}	48✔
351	c={"cyan"}	48✔
352	onClick={() => {	48✔
353	form.setFieldValue(	1✔
354	"amount",	1✔
355	formatUnits(	1✔
356	balance,	1✔
357	decimals,	1✔
358	),	1✔
359	);	1✔
360	}}	1✔
361	data-testid="max-button"	48✔
362	>	48✔
363	Max	48✔
364	</UnstyledButton>	48✔
365	)}	63✔
366	</Flex>	63✔
367	<Flex rowGap={6} c={"dark.2"}>	63✔
368	<Text size="xs">Allowance:</Text>	63✔
369	<Text ml={4} fz="xs">	63✔
370	{allowance != undefined && decimals	63✔
371	? formatUnits(allowance, decimals)	48✔
372	: ""}	15✔
373	</Text>	63✔
374	</Flex>	63✔
375	</Flex>	63✔
376	</Stack>	63✔
377	</Collapse>	63✔
378	<Collapse in={advanced}>	63✔
379	<Textarea	63✔
380	label="Extra data"	63✔
381	description="Extra execution layer data handled by the application"	63✔
382	{...form.getInputProps("execLayerData")}	63✔
383	/>	63✔
384	</Collapse>	63✔
385	<Collapse in={approve.isPending \|\| approveWait.isLoading}>	63✔
386	<TransactionProgress	63✔
387	prepare={approvePrepare}	63✔
388	execute={approve}	63✔
389	wait={approveWait}	63✔
390	confirmationMessage="Approve transaction confirmed"	63✔
391	/>	63✔
392	</Collapse>	63✔
393	<Collapse in={!deposit.isIdle}>	63✔
394	<TransactionProgress	63✔
395	prepare={depositPrepare}	63✔
396	execute={deposit}	63✔
397	wait={depositWait}	63✔
398	/>	63✔
399	</Collapse>	63✔
400	<Group justify="right">	63✔
401	<Button	63✔
402	leftSection={	63✔
403	advanced ? <TbChevronUp /> : <TbChevronDown />	63!
404	}	63✔
405	size="xs"	63✔
406	visibleFrom="sm"	63✔
407	variant="transparent"	63✔
408	onClick={toggleAdvanced}	63✔
409	>	63✔
410	Advanced	63✔
411	</Button>	63✔
412	<Button	63✔
413	variant="filled"	63✔
414	disabled={approveDisabled \|\| !needApproval}	63✔
415	leftSection={<TbCheck />}	63✔
416	loading={approveLoading}	63✔
417	onClick={() =>	63✔
NEW 418	approve.writeContract(approvePrepare.data!.request)	×
419	}	63✔
420	>	63✔
421	Approve	63✔
422	</Button>	63✔
423	<Button	63✔
424	variant="filled"	63✔
425	disabled={	63✔
426	depositDisabled \|\| !canDeposit \|\| !form.isValid()	63!
427	}	63✔
428	leftSection={<TbPigMoney />}	63✔
429	loading={depositLoading}	63✔
430	onClick={() =>	63✔
NEW 431	deposit.writeContract(depositPrepare.data!.request)	×
432	}	63✔
433	>	63✔
434	Deposit	63✔
435	</Button>	63✔
436	</Group>	63✔
437	</Stack>	63✔
438	</form>	63✔
439	);	63✔
440	};	63✔

cartesi / rollups-explorer / 8374927293

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous