From 4faf636a6fc3489593e41ccfdc99d96bb8f7c062 Mon Sep 17 00:00:00 2001 From: jnsdls Date: Sat, 15 Jun 2024 04:27:56 +0000 Subject: [PATCH] feat: integrate abitype library and format ABI items in code overview and contract function components (#2672) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### TL;DR Add `abitype` library and refactor the codebase to utilize `formatAbiItem` for formatting contract functions and events. ### What changed? - Added `abitype` library to `package.json` and `pnpm-lock.yaml` files. - Refactored multiple files to replace existing ABI formatting logic with `formatAbiItem` from `abitype`. - `contract-function.tsx`: Integrated `formatAbiItem` for formatting contract functions and events. - `code-overview.tsx`: Unified ABI formatting using `formatAbiItem`. - Removed dependency on `resolveMethod` from `thirdweb`. ### How to test? 1. Verify the `abitype` library installation in `package.json` and `pnpm-lock.yaml`. 2. Check the refactored files for correct usage of `formatAbiItem`. 3. Run the project and ensure no runtime errors occur related to ABI formatting. 4. Test contract functions and events to ensure they are formatted correctly. ### Why make this change? To improve the consistency and reliability of ABI formatting across the codebase by using a dedicated library (`abitype`). --- --- ## PR-Codex overview The focus of this PR is to introduce the `abitype` package, update dependencies, and refactor code snippets in the `CodePlayground` component. ### Detailed summary - Introduced `abitype` package - Updated dependencies - Refactored code snippets in `CodePlayground.tsx` - Modified imports and functions in various files > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- package.json | 1 + pnpm-lock.yaml | 4 + src/components/connect/CodePlayground.tsx | 3 +- .../tabs/code/components/code-overview.tsx | 76 +++++++++---------- 4 files changed, 40 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 07647e4e14..f39a5fad1c 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@thirdweb-dev/storage": "2.0.15", "@thirdweb-dev/wallets": "2.5.35", "@vercel/og": "^0.6.2", + "abitype": "1.0.0", "airtable": "^0.12.2", "chakra-react-select": "^4.7.6", "class-variance-authority": "^0.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 39205c256d..5c12300cba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -106,6 +106,9 @@ dependencies: '@vercel/og': specifier: ^0.6.2 version: 0.6.2 + abitype: + specifier: 1.0.0 + version: 1.0.0(typescript@5.4.5)(zod@3.23.4) airtable: specifier: ^0.12.2 version: 0.12.2 @@ -12107,6 +12110,7 @@ packages: is-hex-prefixed: 1.0.0 strip-hex-prefix: 1.0.0 dev: false + bundledDependencies: false /event-emitter@0.3.5: resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==} diff --git a/src/components/connect/CodePlayground.tsx b/src/components/connect/CodePlayground.tsx index b1b46fb61d..736a374af9 100644 --- a/src/components/connect/CodePlayground.tsx +++ b/src/components/connect/CodePlayground.tsx @@ -44,8 +44,7 @@ const CodePlayground = ({ const snippet = formatSnippet(COMMANDS[tab as keyof typeof COMMANDS] as any, { contractAddress: "0x6fb2A6C41B44076bc491cC285BA629c0715a6a1b", - fn: - tab === "read" ? read?.name : tab === "write" ? write?.name : event?.name, + fn: (tab === "read" ? read : tab === "write" ? write : event) as any, args: (tab === "read" ? readFunctions : tab === "write" diff --git a/src/contract-ui/tabs/code/components/code-overview.tsx b/src/contract-ui/tabs/code/components/code-overview.tsx index ac98dd1b7a..e6bf523947 100644 --- a/src/contract-ui/tabs/code/components/code-overview.tsx +++ b/src/contract-ui/tabs/code/components/code-overview.tsx @@ -32,6 +32,7 @@ import { AbiFunction, FeatureWithEnabled, } from "@thirdweb-dev/sdk"; +import { formatAbiItem } from "abitype"; import { useContractEnabledExtensions, useContractEvents, @@ -139,20 +140,19 @@ var sdk = ThirdwebManager.Instance.SDK; var contract = sdk.GetContract("{{contract_address}}");`, }, read: { - javascript: `import { readContract, resolveMethod } from "thirdweb"; + javascript: `import { readContract } from "thirdweb"; const data = await readContract({ contract, - method: resolveMethod("{{function}}"), + method: "{{function}}", params: [{{args}}] })`, - react: `import { resolveMethod } from "thirdweb"; - import { useReadContract } from "thirdweb/react"; + react: `import { useReadContract } from "thirdweb/react"; export default function Component() { const { data, isLoading } = useReadContract({ contract, - method: resolveMethod("{{function}}"), + method: "{{function}}", params: [{{args}}] }); }`, @@ -161,24 +161,24 @@ export default function Component() { export default function Component() { const { data, isLoading } = useReadContract({ contract, - method: resolveMethod("{{function}}"), + method: "{{function}}", params: [{{args}}] }); }`, }, write: { - javascript: `import { prepareContractCall, sendTransaction, resolveMethod } from "thirdweb"; + javascript: `import { prepareContractCall, sendTransaction } from "thirdweb"; const transaction = await prepareContractCall({ contract, - method: resolveMethod("{{function}}"), + method: "{{function}}", params: [{{args}}] }); const { transactionHash } = await sendTransaction({ transaction, account })`, - react: `import { prepareContractCall, resolveMethod } from "thirdweb" + react: `import { prepareContractCall } from "thirdweb" import { useSendTransaction } from "thirdweb/react"; export default function Component() { @@ -187,7 +187,7 @@ export default function Component() { const call = async () => { const transaction = await prepareContractCall({ contract, - method: resolveMethod("{{function}}"), + method: "{{function}}", params: [{{args}}] }); const { transactionHash } = await sendTransaction(transaction); @@ -202,27 +202,12 @@ export default function Component() { const call = async () => { const transaction = await prepareContractCall({ contract, - method: resolveMethod("{{function}}"), + method: "{{function}}", params: [{{args}}] }); const { transactionHash } = await sendTransaction(transaction); } }`, - // web3button: `import { TransactionButton } from "thirdweb/react"; - - // export default function Component() { - // return ( - // prepareContractCall({ - // contract, - // method: resolveMethod("{{function}}"), - // params: [{{args}}] - // })} - // > - // {{function}} - // - // ) - // }`, }, events: { javascript: `import { prepareEvent, getContractEvents } from "thirdweb"; @@ -250,19 +235,19 @@ export default function Component() { }); }`, "react-native": `import { prepareEvent } from "thirdweb"; - import { useContractEvents } from "thirdweb/react"; +import { useContractEvents } from "thirdweb/react"; - const preparedEvent = prepareEvent({ - contract, - signature: "{{function}}" - }); +const preparedEvent = prepareEvent({ + contract, + signature: "{{function}}" +}); - export default function Component() { - const { data: event } = useContractEvents({ - contract, - events: [preparedEvent] - }); - }`, +export default function Component() { + const { data: event } = useContractEvents({ + contract, + events: [preparedEvent] + }); +}`, }, }; @@ -340,7 +325,7 @@ public async void ConnectWallet() interface SnippetOptions { contractAddress?: string; - fn?: string; + fn?: AbiFunction | AbiEvent; args?: string[]; address?: string; clientId?: string; @@ -353,6 +338,13 @@ export function formatSnippet( ) { const code = { ...snippet }; + const formattedAbi = fn + ? formatAbiItem({ + ...fn, + type: "stateMutability" in fn ? "function" : "event", + } as any) + : ""; + for (const key of Object.keys(code)) { const env = key as CodeEnvironment; @@ -361,7 +353,7 @@ export function formatSnippet( ?.replace(/{{factory_address}}/gm, contractAddress || "0x...") ?.replace(/{{wallet_address}}/gm, address) ?.replace("YOUR_CLIENT_ID", clientId || "YOUR_CLIENT_ID") - ?.replace(/{{function}}/gm, fn || "") + ?.replace(/{{function}}/gm, formattedAbi || "") ?.replace(/{{chainId}}/gm, chainId || 1); if (args && args?.some((arg) => arg)) { @@ -826,10 +818,10 @@ export const CodeOverview: React.FC = ({ contractAddress, fn: tab === "read" - ? read?.name + ? read : tab === "write" - ? write?.name - : event?.name, + ? write + : event, args: (tab === "read" ? readFunctions : tab === "write"