-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
941b990
commit 392f348
Showing
7 changed files
with
237 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
nuxt/components/scaffold-eth/debug/ContractWriteMethods.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <script setup lang="ts"> | ||
| import type { AbiFunction } from 'viem' | ||
| import type { Contract, ContractName, InheritedFunctions } from '~/utils/scaffold-eth/contract' | ||
| const { deployedContractData } = defineProps<{ | ||
| deployedContractData: Contract<ContractName> | ||
| }>() | ||
| defineEmits(['change']) | ||
| const functionsToDisplay = computed(() => { | ||
| return ((deployedContractData.abi.filter(part => part.type === 'function')) as AbiFunction[]) | ||
| .filter(fn => fn.stateMutability !== 'view' && fn.stateMutability !== 'pure') | ||
| .map(fn => ({ | ||
| fn, | ||
| inheritedFrom: (deployedContractData.inheritedFunctions as InheritedFunctions)?.[fn.name], | ||
| })) | ||
| .sort((a, b) => b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div v-if="!functionsToDisplay.length"> | ||
| No write methods | ||
| </div> | ||
| <WriteOnlyFunctionForm | ||
| v-for="({ fn, inheritedFrom }, index) in functionsToDisplay" | ||
| v-else | ||
| :key="`${fn.name}-${index}`" | ||
| :abi="deployedContractData.abi" | ||
| :abi-function="fn" | ||
| :contract-address="deployedContractData.address" | ||
| :inherited-from="inheritedFrom" | ||
| @change="$emit('change')" | ||
| /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <script setup lang="ts"> | ||
| import type { TransactionReceipt } from 'viem' | ||
| import ObjectFieldDisplay from './ObjectFieldDisplay.vue' | ||
| import { replacer } from '~/utils/scaffold-eth/common' | ||
| const { txResult } = defineProps<{ | ||
| txResult: TransactionReceipt | ||
| }>() | ||
| const txResultCopied = ref(false) | ||
| const { copy } = useClipboard() | ||
| function handleClick() { | ||
| txResultCopied.value = true | ||
| const text = JSON.stringify(txResult, replacer, 2) | ||
| copy(text) | ||
| setTimeout(() => { | ||
| txResultCopied.value = false | ||
| }, 800) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex text-sm rounded-3xl peer-checked:rounded-b-none min-h-0 bg-secondary py-0"> | ||
| <div class="mt-1 pl-2"> | ||
| <button @click="handleClick"> | ||
| <Icon | ||
| v-if="txResultCopied" | ||
| name="i-uil-check-circle" | ||
| class="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer" | ||
| aria-hidden="true" | ||
| /> | ||
| <Icon | ||
| v-else | ||
| name="i-uil-copy" | ||
| class="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer" | ||
| aria-hidden="true" | ||
| /> | ||
| </button> | ||
| </div> | ||
| <div class="flex-wrap collapse collapse-arrow"> | ||
| <input type="checkbox" class="min-h-0 peer"> | ||
| <div class="collapse-title text-sm min-h-0 py-1.5 pl-1"> | ||
| <strong>Transaction Receipt</strong> | ||
| </div> | ||
| <div class="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl !pl-0"> | ||
| <pre class="text-xs"> | ||
| <ObjectFieldDisplay | ||
| v-for="[k, v] in Object.entries(txResult)" | ||
| :key="k" | ||
| :name="k" | ||
| :value="v" | ||
| size="xs" | ||
| :left-pad="false" | ||
| /> | ||
| </pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
119 changes: 119 additions & 0 deletions
119
nuxt/components/scaffold-eth/debug/WriteOnlyFunctionForm.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <script setup lang="tsx"> | ||
| import type { Abi, AbiFunction, Address } from 'viem' | ||
| import { useAccount, useWaitForTransactionReceipt, useWriteContract } from '@wagmi/vue' | ||
| import IntegerInput from '../input/IntegerInput.vue' | ||
| import InheritanceTooltip from './InheritanceTooltip.vue' | ||
| import ContractInput from './ContractInput.vue' | ||
| import { getFunctionInputKey, getInitialFormState, getParsedContractFunctionArgs, transformAbiFunction } from '~/utils/scaffold-eth/utilsContract' | ||
| interface WriteOnlyFunctionFormProps { | ||
| abi: Abi | ||
| abiFunction: AbiFunction | ||
| contractAddress: Address | ||
| inheritedFrom?: string | ||
| } | ||
| const { abiFunction, contractAddress, abi } = defineProps<WriteOnlyFunctionFormProps>() | ||
| const emit = defineEmits(['change']) | ||
| const form = ref(getInitialFormState(abiFunction)) | ||
| const txValue = ref<string | bigint>('') | ||
| const writeTxn = useTransactor() | ||
| const { chain } = useAccount() | ||
| const { targetNetwork } = useTargetNetwork() | ||
| const writeDisabled = computed(() => { | ||
| return !chain.value || chain.value?.id !== targetNetwork.value.id | ||
| }) | ||
| const { data: result, isPending, writeContractAsync } = useWriteContract() | ||
| const transformedFunction = transformAbiFunction(abiFunction) | ||
| function RenderInputs() { | ||
| return transformedFunction.inputs.map((input, index) => { | ||
| const key = getFunctionInputKey(abiFunction.name, input, index) | ||
| return ( | ||
| <ContractInput | ||
| key={key} | ||
| stateObjectKey={key} | ||
| paramType={input} | ||
| v-model={form.value} | ||
| /> | ||
| ) | ||
| }) | ||
| } | ||
| const zeroInputs = computed(() => { | ||
| return transformedFunction.inputs.length === 0 && abiFunction.stateMutability !== 'payable' | ||
| }) | ||
| const { data: txResult } = useWaitForTransactionReceipt({ | ||
| hash: result, | ||
| }) | ||
| async function handleClick() { | ||
| if (writeContractAsync) { | ||
| try { | ||
| const makeWriteWithParams = () => writeContractAsync({ | ||
| address: contractAddress, | ||
| functionName: abiFunction.name, | ||
| abi, | ||
| args: getParsedContractFunctionArgs(form.value), | ||
| value: BigInt(txValue.value), | ||
| }) | ||
| await writeTxn(makeWriteWithParams) | ||
| emit('change') | ||
| } | ||
| catch (e) { | ||
| console.error('⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error', e) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="py-5 space-y-3 first:pt-0 last:pb-1"> | ||
| <div | ||
| class="flex gap-3" | ||
| :class="[zeroInputs ? 'flex-grow justify-between items-center' : 'flex-col']" | ||
| > | ||
| <p class="font-medium my-0 break-words"> | ||
| {{ abiFunction.name }} | ||
| <InheritanceTooltip :inherited-from /> | ||
| </p> | ||
| <RenderInputs /> | ||
| <div v-if="abiFunction.stateMutability === 'payable'" class="flex flex-col gap-1.5 w-full"> | ||
| <div class="flex items-center ml-2"> | ||
| <span class="text-xs font-medium mr-2 leading-none"> | ||
| payable value | ||
| </span> | ||
| <span class="block text-xs font-extralight leading-none">wei</span> | ||
| </div> | ||
| <IntegerInput v-model="txValue" placeholder="vlaue (wei)" /> | ||
| </div> | ||
| <div class="flex justify-between gap-2"> | ||
| <div v-if="!zeroInputs" class="flex-grow basis-0"> | ||
| <TxReceipt v-if="txResult" :tx-result /> | ||
| </div> | ||
| <div | ||
| class="flex" | ||
| :class="{ 'tooltip before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none': writeDisabled }" | ||
| :data-tip="`${writeDisabled && 'Wallet not connected or in the wrong network'}`" | ||
| > | ||
| <button | ||
| class="btn btn-secondary btn-sm" | ||
| :disabled="writeDisabled || isPending" | ||
| @click="handleClick" | ||
| > | ||
| <span v-if="isPending" class="loading loading-spinner loading-xs" /> | ||
| Send 💸 | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div v-if="zeroInputs && txResult" class="flex-grow basis-0"> | ||
| <TxReceipt :tx-result /> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters