From 968caa73c8cb4f8b530b6d204e16cc8ce2e237a8 Mon Sep 17 00:00:00 2001 From: Zil-B Date: Sun, 30 Jan 2022 04:02:16 +0000 Subject: [PATCH 1/3] Fix AbiMethodView to allow reading/writing to contracts via explorer --- .../ContractDetails/AbiMethodView.tsx | 135 +++++++++--------- 1 file changed, 71 insertions(+), 64 deletions(-) diff --git a/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx b/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx index d41a940..446ed5c 100644 --- a/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx +++ b/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx @@ -1,11 +1,11 @@ -import { Box, Spinner, Text, TextInput } from "grommet"; -import React, { useEffect, useState } from "react"; -import styled from "styled-components"; -import { Button } from "src/components/ui/Button"; -import Web3 from "web3"; -import { AbiItem } from "web3-utils"; -import { convertInputs } from "./helpers"; -import { uniqid } from "src/pages/VerifyContract/VerifyContract"; +import {Box, Spinner, Text, TextInput} from 'grommet'; +import React, {useEffect, useState} from 'react'; +import styled from 'styled-components'; +import {Button} from 'src/components/ui/Button'; +import Web3 from 'web3'; +import {AbiItem} from 'web3-utils'; +import {convertInputs} from './helpers'; +import {uniqid} from 'src/pages/VerifyContract/VerifyContract'; const Field = styled(Box)``; @@ -36,7 +36,7 @@ export const ActionButton = styled(Button)` font-weight: 500; `; -const GreySpan = styled("span")` +const GreySpan = styled('span')` font-size: 14px; opacity: 0.7; font-weight: 400; @@ -57,23 +57,23 @@ export const AbiMethodsView = (props: { isRead?: boolean; validChainId?: boolean; }) => { - const { abiMethod, address, index } = props; + const {abiMethod, address, index} = props; const [inputsValue, setInputsValue] = useState( - [...new Array(abiMethod.inputs?.length)].map(() => "") + [...new Array(abiMethod.inputs?.length)].map(() => '') ); const [multipleValue, setMultipleValue] = useState({ write: {}, read: {}, } as any); - const [amount, setAmount] = useState(""); - const [error, setError] = useState(""); - const [result, setResult] = useState(""); + const [amount, setAmount] = useState(''); + const [error, setError] = useState(''); + const [result, setResult] = useState([]); const [loading, setLoading] = useState(false); const query = async () => { try { - setError(""); - setResult(""); + setError(''); + setResult([]); setLoading(true); // @ts-ignore @@ -92,7 +92,7 @@ export const AbiMethodsView = (props: { if (abiMethod.name) { let res; - if (abiMethod.stateMutability === "view") { + if (abiMethod.stateMutability === 'view') { res = await contract.methods[abiMethod.name] .apply(contract, convertInputs(inputsValue, abiMethod.inputs || [])) .call(); @@ -100,7 +100,7 @@ export const AbiMethodsView = (props: { // @ts-ignore const accounts = await ethereum.enable(); - const account = accounts[0] || web3.eth.defaultAccount; + const account = accounts[0] || undefined; // if function is not a view method it will require a signer res = await contract.methods[abiMethod.name] .apply(contract, convertInputs(inputsValue, abiMethod.inputs || [])) @@ -112,7 +112,13 @@ export const AbiMethodsView = (props: { }); } - setResult(typeof res === "object" ? res.status.toString() : res); + setResult( + Array.isArray(res) + ? res + : typeof res === 'object' + ? Object.values(res) + : [res.toString()] + ); } } catch (e) { // @ts-ignore @@ -124,7 +130,7 @@ export const AbiMethodsView = (props: { useEffect(() => { if ( - abiMethod.stateMutability !== "payable" && + abiMethod.stateMutability !== 'payable' && (!abiMethod.inputs || !abiMethod.inputs.length) && props.isRead ) { @@ -138,17 +144,17 @@ export const AbiMethodsView = (props: { }; return ( - - - + + + {index + 1}. {abiMethod.name} - - {abiMethod.stateMutability === "payable" ? ( - - + + {abiMethod.stateMutability === 'payable' ? ( + + payableAmount ONE ) : null} {abiMethod.inputs && abiMethod.inputs.length ? ( - + {abiMethod.inputs.map((input, idx) => { - const name = input.name || ""; - const isArrayValue = input.type.indexOf("[]") >= 0; - const tabMethod = props.isRead ? "read" : "write"; + const name = input.name || ''; + const isArrayValue = input.type.indexOf('[]') >= 0; + const tabMethod = props.isRead ? 'read' : 'write'; const itemValue = isArrayValue - ? multipleValue[tabMethod][idx] || [{ value: "", id: "1" }] + ? multipleValue[tabMethod][idx] || [{value: '', id: '1'}] : inputsValue[idx]; - const itemType = input.type.slice(0, input.type.indexOf("[]")); + const itemType = input.type.slice(0, input.type.indexOf('[]')); return ( - - + + {name} ({input.type}) {isArrayValue ? ( - + {itemValue.map( - ( - item: { id: string; value: string }, - itemId: number - ) => { + (item: {id: string; value: string}, itemId: number) => { return ( - + direction={'row'} + align={'center'} + margin={'small'}> + {itemId}. {itemValue.length === 1 ? null : ( { setMultipleValue({ ...multipleValue, @@ -232,8 +234,7 @@ export const AbiMethodsView = (props: { ), }, }); - }} - > + }}> remove )} @@ -242,9 +243,9 @@ export const AbiMethodsView = (props: { } )} { - itemValue.push({ value: "", id: uniqid() }); + itemValue.push({value: '', id: uniqid()}); setMultipleValue({ ...multipleValue, @@ -253,8 +254,7 @@ export const AbiMethodsView = (props: { [idx]: itemValue, }, }); - }} - > + }}> + add one more @@ -274,16 +274,15 @@ export const AbiMethodsView = (props: { ) : null} {!result || abiMethod.inputs?.length ? ( - + {loading ? ( - ) : abiMethod.stateMutability === "view" ? ( + ) : abiMethod.stateMutability === 'view' ? ( Query ) : ( + onClick={query}> Write )} @@ -291,17 +290,25 @@ export const AbiMethodsView = (props: { ) : null} {abiMethod.outputs - ? abiMethod.outputs.map((input) => { + ? abiMethod.outputs.map((input, i) => { return ( - {result ? ( - - {result} {input.type} + {result[i] ? ( + + + {input.name} + {` (${input.type})`} + {' '} + {'-> '} + {result[i].toString()} ) : ( - - {"-> "} - {input.type} + + + {input.name} + {` (${input.type})`} + {' '} + {'-> '} )} @@ -310,7 +317,7 @@ export const AbiMethodsView = (props: { : null} {error && ( - + {error} )} From 2962c24cbd721a3bba530d101ee54cd54e450a73 Mon Sep 17 00:00:00 2001 From: Zil-B Date: Tue, 1 Feb 2022 17:16:06 +0000 Subject: [PATCH 2/3] Supports calls which return an array value --- src/pages/AddressPage/ContractDetails/AbiMethodView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx b/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx index 446ed5c..705e9bd 100644 --- a/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx +++ b/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx @@ -291,16 +291,17 @@ export const AbiMethodsView = (props: { {abiMethod.outputs ? abiMethod.outputs.map((input, i) => { + console.log(result); return ( - {result[i] ? ( + {result.length ? ( {input.name} {` (${input.type})`} {' '} {'-> '} - {result[i].toString()} + {result.length === 1 ? [result] : result.toString()} ) : ( From 778eb7308a1dc73d791da85ad86f284e17eba3d9 Mon Sep 17 00:00:00 2001 From: Zil-B Date: Tue, 1 Feb 2022 17:18:54 +0000 Subject: [PATCH 3/3] remove console log --- src/pages/AddressPage/ContractDetails/AbiMethodView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx b/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx index 705e9bd..05a6d42 100644 --- a/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx +++ b/src/pages/AddressPage/ContractDetails/AbiMethodView.tsx @@ -290,8 +290,7 @@ export const AbiMethodsView = (props: { ) : null} {abiMethod.outputs - ? abiMethod.outputs.map((input, i) => { - console.log(result); + ? abiMethod.outputs.map((input) => { return ( {result.length ? (