From a5eccbab05891605c4c434b400f35b4aecd7f40a Mon Sep 17 00:00:00 2001 From: Samuel Castleman <142861450+scastleman-immutable@users.noreply.github.com> Date: Wed, 3 Apr 2024 11:23:36 +1100 Subject: [PATCH 1/5] sample app confirmation example for invoking smart contract --- .../CallSmartContract.tsx | 162 ++++++++++++++++++ .../zkevm/EthSendTransactionExamples/index.ts | 2 + 2 files changed, 164 insertions(+) create mode 100644 packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx new file mode 100644 index 0000000000..e2c433726e --- /dev/null +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx @@ -0,0 +1,162 @@ +import React, { + FormEvent, + useCallback, useEffect, useState, +} from 'react'; +import { Accordion, Form } from 'react-bootstrap'; +import InputGroup from 'react-bootstrap/InputGroup'; +import { usePassportProvider } from '@/context/PassportProvider'; +import WorkflowButton from '@/components/WorkflowButton'; +import { RequestExampleProps } from '@/types'; +import { formatBytes32String } from 'ethers/lib/utils'; +import { useImmutableProvider } from '@/context/ImmutableProvider'; +import { ethers } from 'ethers'; + +function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleProps) { + const { orderbookClient } = useImmutableProvider(); + const defaultAddress = orderbookClient.config().seaportContractAddress; + const [fromAddress, setFromAddress] = useState(''); + const [toAddress, setToAddress] = useState(defaultAddress); + const [toAddressError, setToAddressError] = useState(""); + const [data, setData] = useState('123'); + const { zkEvmProvider } = usePassportProvider(); + const [params, setParams] = useState([]); + const [dataError, setDataError] = useState(''); + const emptyDataError = 'Data should not be empty'; + const invalidToAddressError = 'To address is not valid'; + const [toAddressTouched, setToAddressTouched] = useState(false); + + useEffect(() => { + try { + if (!data) { + setDataError(emptyDataError); + } else { + setDataError(''); + } + setParams([{ + from: fromAddress, + to: toAddress, + data: formatBytes32String(data), + }]); + } catch (err) { + setDataError(emptyDataError); + setParams([{ + from: fromAddress, + to: toAddress, + data: formatBytes32String(data), + }]); + } + }, [fromAddress, toAddress, data]); + + const handleToAddressChanged = ((newAddress: string) => { + setToAddressTouched(true) + if (ethers.utils.isAddress(newAddress)) { + setToAddressError("") + setToAddress(newAddress) + } else { + setToAddressError(invalidToAddressError) + } + }) + + useEffect(() => { + const getAddress = async () => { + if (zkEvmProvider) { + const [walletAddress] = await zkEvmProvider.request({ + method: 'eth_requestAccounts', + }); + setFromAddress(walletAddress || ''); + } + }; + + getAddress(); + }, [zkEvmProvider, setFromAddress]); + + const handleSubmit = useCallback(async (e: React.FormEvent) => { + e.preventDefault(); + e.stopPropagation(); + + await handleExampleSubmitted({ + method: 'eth_sendTransaction', + params, + }); + }, [params, handleExampleSubmitted]); + + return ( + + Call Smart Contract + +
+ + + Preview + + + + + + From + + + + + + To + + + handleToAddressChanged(e.target.value)} + /> + + {toAddressError} + + + + + + Data + + + setData(e.target.value)} + /> + + {dataError} + + + + + Submit + +
+ + + ); +} + +export default CallSmartContract; diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts index 426d9af5d5..2b1ba45bba 100644 --- a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts @@ -2,9 +2,11 @@ import TransferImx from './TransferImx'; import SpendingCapApproval from './SpendingCapApproval'; import NFTApproval from './NFTApproval'; import SeaportFulfillAvailableAdvancedOrders from './SeaportFulfillAvailableAdvancedOrders'; +import CallSmartContract from './CallSmartContract'; const EthSendTransactionExamples = [ TransferImx, + CallSmartContract, SpendingCapApproval, NFTApproval, SeaportFulfillAvailableAdvancedOrders, From 111a16d625e64a2921d62a69f57eca16def68d67 Mon Sep 17 00:00:00 2001 From: Samuel Castleman <142861450+scastleman-immutable@users.noreply.github.com> Date: Wed, 3 Apr 2024 11:38:24 +1100 Subject: [PATCH 2/5] minor change to hex formatting --- .../EthSendTransactionExamples/CallSmartContract.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx index e2c433726e..d1b701c02c 100644 --- a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx @@ -1,5 +1,4 @@ import React, { - FormEvent, useCallback, useEffect, useState, } from 'react'; import { Accordion, Form } from 'react-bootstrap'; @@ -7,9 +6,9 @@ import InputGroup from 'react-bootstrap/InputGroup'; import { usePassportProvider } from '@/context/PassportProvider'; import WorkflowButton from '@/components/WorkflowButton'; import { RequestExampleProps } from '@/types'; -import { formatBytes32String } from 'ethers/lib/utils'; import { useImmutableProvider } from '@/context/ImmutableProvider'; import { ethers } from 'ethers'; +import * as encUtils from 'enc-utils'; function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleProps) { const { orderbookClient } = useImmutableProvider(); @@ -25,6 +24,8 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP const invalidToAddressError = 'To address is not valid'; const [toAddressTouched, setToAddressTouched] = useState(false); + encUtils.isHexString + useEffect(() => { try { if (!data) { @@ -35,14 +36,14 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP setParams([{ from: fromAddress, to: toAddress, - data: formatBytes32String(data), + data: encUtils.utf8ToHex(data, true), }]); } catch (err) { setDataError(emptyDataError); setParams([{ from: fromAddress, to: toAddress, - data: formatBytes32String(data), + data: encUtils.utf8ToHex(data, true), }]); } }, [fromAddress, toAddress, data]); From 026898fae704049b4fd41d41d2262a7c78a649ef Mon Sep 17 00:00:00 2001 From: Samuel Castleman <142861450+scastleman-immutable@users.noreply.github.com> Date: Wed, 3 Apr 2024 12:53:03 +1100 Subject: [PATCH 3/5] linter fixes --- .../CallSmartContract.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx index d1b701c02c..a576f4c0c4 100644 --- a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx @@ -15,7 +15,7 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP const defaultAddress = orderbookClient.config().seaportContractAddress; const [fromAddress, setFromAddress] = useState(''); const [toAddress, setToAddress] = useState(defaultAddress); - const [toAddressError, setToAddressError] = useState(""); + const [toAddressError, setToAddressError] = useState(''); const [data, setData] = useState('123'); const { zkEvmProvider } = usePassportProvider(); const [params, setParams] = useState([]); @@ -24,14 +24,12 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP const invalidToAddressError = 'To address is not valid'; const [toAddressTouched, setToAddressTouched] = useState(false); - encUtils.isHexString - useEffect(() => { try { if (!data) { setDataError(emptyDataError); } else { - setDataError(''); + setDataError(''); } setParams([{ from: fromAddress, @@ -49,14 +47,14 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP }, [fromAddress, toAddress, data]); const handleToAddressChanged = ((newAddress: string) => { - setToAddressTouched(true) + setToAddressTouched(true); if (ethers.utils.isAddress(newAddress)) { - setToAddressError("") - setToAddress(newAddress) + setToAddressError(''); + setToAddress(newAddress); } else { - setToAddressError(invalidToAddressError) + setToAddressError(invalidToAddressError); } - }) + }); useEffect(() => { const getAddress = async () => { @@ -120,9 +118,9 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP handleToAddressChanged(e.target.value)} /> From 95e068d0dcb62d3aa9e165907dc1bc32f89f73d8 Mon Sep 17 00:00:00 2001 From: Samuel Castleman <142861450+scastleman-immutable@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:51:19 +1100 Subject: [PATCH 4/5] PR changes --- ...ontract.tsx => ShowGenericConfirmationScreen.tsx} | 12 ++++++------ .../zkevm/EthSendTransactionExamples/index.ts | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) rename packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/{CallSmartContract.tsx => ShowGenericConfirmationScreen.tsx} (92%) diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/ShowGenericConfirmationScreen.tsx similarity index 92% rename from packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx rename to packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/ShowGenericConfirmationScreen.tsx index a576f4c0c4..b5b0f53c30 100644 --- a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/CallSmartContract.tsx +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/ShowGenericConfirmationScreen.tsx @@ -10,23 +10,23 @@ import { useImmutableProvider } from '@/context/ImmutableProvider'; import { ethers } from 'ethers'; import * as encUtils from 'enc-utils'; -function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleProps) { +function ShowGenericConfirmationScreen({ disabled, handleExampleSubmitted }: RequestExampleProps) { const { orderbookClient } = useImmutableProvider(); const defaultAddress = orderbookClient.config().seaportContractAddress; const [fromAddress, setFromAddress] = useState(''); const [toAddress, setToAddress] = useState(defaultAddress); const [toAddressError, setToAddressError] = useState(''); - const [data, setData] = useState('123'); + const [data, setData] = useState('1234567890'); const { zkEvmProvider } = usePassportProvider(); const [params, setParams] = useState([]); const [dataError, setDataError] = useState(''); - const emptyDataError = 'Data should not be empty'; + const emptyDataError = 'Data should not be empty and should be at least 10 characters'; const invalidToAddressError = 'To address is not valid'; const [toAddressTouched, setToAddressTouched] = useState(false); useEffect(() => { try { - if (!data) { + if (!data || data.length < 10) { setDataError(emptyDataError); } else { setDataError(''); @@ -81,7 +81,7 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP return ( - Call Smart Contract + Show Generic Confirmation Screen
@@ -158,4 +158,4 @@ function CallSmartContract({ disabled, handleExampleSubmitted }: RequestExampleP ); } -export default CallSmartContract; +export default ShowGenericConfirmationScreen; diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts index 2b1ba45bba..9c65b48a9e 100644 --- a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/index.ts @@ -2,11 +2,11 @@ import TransferImx from './TransferImx'; import SpendingCapApproval from './SpendingCapApproval'; import NFTApproval from './NFTApproval'; import SeaportFulfillAvailableAdvancedOrders from './SeaportFulfillAvailableAdvancedOrders'; -import CallSmartContract from './CallSmartContract'; +import ShowGenericConfirmationScreen from './ShowGenericConfirmationScreen'; const EthSendTransactionExamples = [ TransferImx, - CallSmartContract, + ShowGenericConfirmationScreen, SpendingCapApproval, NFTApproval, SeaportFulfillAvailableAdvancedOrders, From 6c7e2141ec5f33d67f0f46ec07e6b6f0c1b98ee3 Mon Sep 17 00:00:00 2001 From: Samuel Castleman <142861450+scastleman-immutable@users.noreply.github.com> Date: Fri, 5 Apr 2024 13:20:41 +1100 Subject: [PATCH 5/5] file name change --- ...ShowGenericConfirmationScreen.tsx => DefaultTransaction.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/{ShowGenericConfirmationScreen.tsx => DefaultTransaction.tsx} (98%) diff --git a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/ShowGenericConfirmationScreen.tsx b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/DefaultTransaction.tsx similarity index 98% rename from packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/ShowGenericConfirmationScreen.tsx rename to packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/DefaultTransaction.tsx index b5b0f53c30..4bc90e490d 100644 --- a/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/ShowGenericConfirmationScreen.tsx +++ b/packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/DefaultTransaction.tsx @@ -81,7 +81,7 @@ function ShowGenericConfirmationScreen({ disabled, handleExampleSubmitted }: Req return ( - Show Generic Confirmation Screen + Default Transaction