From c0ffa1c8710f2dfb9aca1dbdd1967326eb06dae1 Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 25 Jul 2025 01:13:51 +0000 Subject: [PATCH] Dashboard: Migrate Published contract > code tab from chakra to tailwind (#7704) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR primarily focuses on improving the `CodeOverview` and `CodeSegment` components by enhancing their layouts, functionality, and structure. It introduces new sections, components, and props to better handle user interactions and display relevant information. ### Detailed summary - Updated `className` in `CodeSegment` for better styling. - Added `scrollableContainerClassName` prop in `CodeSegment`. - Refactored `CodeOverview` to use props instead of interface. - Introduced `AccentButtonListContainer` and `AccentButton` components for button lists. - Created `AccountFactorySection` for account integration guidance. - Enhanced tab handling and layout in `CodeOverview`. - Improved user messaging and conditional rendering for SDK installation instructions. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../blocks/code/code-segment.client.tsx | 5 +- .../@/components/contracts/code-overview.tsx | 681 ++++++++---------- 2 files changed, 319 insertions(+), 367 deletions(-) diff --git a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx index 9f43129e053..ea826517cab 100644 --- a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx +++ b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx @@ -86,7 +86,7 @@ export const CodeSegment: React.FC = ({ return (
{!hideTabs && ( @@ -106,7 +106,8 @@ export const CodeSegment: React.FC = ({ {onlyTabs ? null : ( >; -interface SnippetOptions { +type SnippetOptions = { contractAddress?: string; fn?: AbiFunction | AbiEvent; args?: string[]; @@ -442,7 +418,7 @@ interface SnippetOptions { clientId?: string; chainId?: number; extensionNamespace?: string; -} +}; export function formatSnippet( // biome-ignore lint/suspicious/noExplicitAny: FIXME @@ -537,13 +513,21 @@ export function formatSnippet( return code; } -export const CodeOverview: React.FC = ({ - abi, - contractAddress = "0x...", - onlyInstall = false, - noSidebar = false, - chainId, -}) => { +export function CodeOverview(props: { + abi?: Abi; + contractAddress?: string; + onlyInstall?: boolean; + chainId: number; + noSidebar?: boolean; +}) { + const { + abi, + contractAddress = "0x...", + onlyInstall = false, + noSidebar = false, + chainId, + } = props; + const searchParams = useSearchParams(); const defaultEnvironment = searchParams?.get("environment") as | CodeEnvironment @@ -556,7 +540,7 @@ export const CodeOverview: React.FC = ({ const [tab, setTab] = useState("write"); const address = useActiveAccount()?.address; - const isMobile = useBreakpointValue({ base: true, md: false }); + const isMobile = useIsMobile(); const functionSelectors = useMemo(() => { return (abi || []) @@ -626,340 +610,307 @@ export const CodeOverview: React.FC = ({ events && events.length > 0 ? events[0] : undefined, ); + const tabList = useMemo(() => { + const _tablist: Array<{ + name: string; + onClick: () => void; + isActive: boolean; + }> = []; + + if (writeFunctions && writeFunctions.length > 0) { + _tablist.push({ + name: "Write", + onClick: () => setTab("write"), + isActive: tab === "write", + }); + } + + if (readFunctions && readFunctions.length > 0) { + _tablist.push({ + name: "Read", + onClick: () => setTab("read"), + isActive: tab === "read", + }); + } + + if (events && events.length > 0) { + _tablist.push({ + name: "Events", + onClick: () => setTab("events"), + isActive: tab === "events", + }); + } + + return _tablist; + }, [writeFunctions, readFunctions, events, tab]); + return ( - - - {isAccountFactory && ( - - - Integrate your account factory - - - - Account Factory - - - The recommended way to use account factories is to integrate - the{" "} - - thirdweb SDK - {" "} - in your applications. This will ensure account contracts are - deployed for your users only when they need it. - - - - w.id === "smart-wallet") - ?.supportedLanguages || {}) as Record< - CodeEnvironment, - string - >, - { - address, - chainId, - contractAddress, - }, - )} - /> - - - +
+ {isAccountFactory && ( + + )} + +
+
+

+ {isAccountFactory + ? "Direct contract interaction (advanced)" + : chainInfo + ? "Interact with this contract from your app" + : "Getting Started"} +

+
+ {(noSidebar || isMobile) && ( +
+

Choose a language:

+ +
)} - - - - {isAccountFactory - ? "Direct contract interaction (advanced)" - : chainInfo - ? "Interact with this contract from your app" - : "Getting Started"} - - - {(noSidebar || isMobile) && ( - - Choose a language: +
+ {environment === "react-native" || environment === "unity" ? ( +

+ Install the latest version of the SDK.{" "} + + Learn how in the{" "} + {environment === "react-native" ? "React Native" : "Unity"}{" "} + documentation + + . +

+ ) : ( + <> +

+ Install the latest version of the SDK: +

- + )} - - {environment === "react-native" || environment === "unity" ? ( - - Install the latest version of the SDK.
- - Learn how in the{" "} - {environment === "react-native" ? "React Native" : "Unity"}{" "} - documentation - - . - - ) : ( - <> - Install the latest version of the SDK: - - - )} - - - Initialize the SDK and contract on your project: +
+
+

+ Initialize the SDK and contract on your project: +

+ +

+ You will need to pass a client ID/secret key to use thirdweb's + infrastructure services. If you don't have any API keys yet you + can create one by creating a project for free from the{" "} + dashboard. +

+
+
+ + {!onlyInstall && ( +
+

+ All Functions & Events +

+
+
+ {(writeFunctions || []).length > 0 || + (readFunctions || []).length > 0 ? ( +
+ {/* tabs */} +
+ +
+ + {tab === "write" && ( + + {writeFunctions?.map((fn) => ( + { + setTab("write"); + setWrite(fn); + }} + /> + ))} + + )} + + {tab === "read" && ( + + {readFunctions?.map((fn) => ( + { + setTab("read"); + setRead(fn); + }} + label={fn.name} + /> + ))} + + )} + + {tab === "events" && ( + + {events?.map((ev) => ( + { + setTab("events"); + setEvent(ev); + }} + label={ev.name} + /> + ))} + + )} +
+ ) : null} +
f.type === "function" || f.type === "event", + ) + ?.find( + (f) => + f.name === + (tab === "read" + ? read?.name + : tab === "write" + ? write?.name + : event?.name), + ) + ?.inputs.map((i) => i.name || "") || [], + + chainId, + contractAddress, + extensionNamespace, + fn: tab === "read" ? read : tab === "write" ? write : event, + }, + )} /> - - You will need to pass a client ID/secret key to use - thirdweb's infrastructure services. If you don't have - any API keys yet you can create one by creating a project for free - from the{" "} - - dashboard - - . - - - - {!onlyInstall && ( - - All Functions & Events - - - - {((writeFunctions || []).length > 0 || - (readFunctions || []).length > 0) && ( - - - {(writeFunctions || []).length > 0 && ( - - - Write - - - )} - {(readFunctions || []).length > 0 && ( - - - Read - - - )} - {(events || []).length > 0 && ( - - - Events - - - )} - - - - {writeFunctions?.map((fn) => ( - - - - ))} - - - {readFunctions?.map((fn) => ( - - - - ))} - - - {events?.map((ev) => ( - - - - ))} - - - - )} - - - - f.type === "function" || f.type === "event", - ) - ?.find( - (f) => - f.name === - (tab === "read" - ? read?.name - : tab === "write" - ? write?.name - : event?.name), - ) - ?.inputs.map((i) => i.name || "") || [], - - chainId, - contractAddress, - extensionNamespace, - fn: - tab === "read" ? read : tab === "write" ? write : event, - }, - )} - /> - - - - )} - - +
+
+ )} +
); -}; +} + +function AccentButtonListContainer(props: { children: React.ReactNode }) { + return ( +
+ {props.children} +
+ ); +} + +function AccentButton(props: { + isActive: boolean; + onClick: () => void; + label: string; +}) { + return ( + + ); +} + +function AccountFactorySection(props: { + environment: CodeEnvironment; + setEnvironment: (environment: CodeEnvironment) => void; + address?: string; + chainId: number; + contractAddress: string; +}) { + return ( +
+
+

+ Integrate your account factory +

+ + + Account Factory + + The recommended way to use account factories is to integrate the{" "} + + thirdweb SDK + {" "} + in your applications. This will ensure account contracts are + deployed for your users only when they need it. + + +
+
+ w.id === "smart-wallet") + ?.supportedLanguages || {}) as Record, + { + address: props.address, + chainId: props.chainId, + contractAddress: props.contractAddress, + }, + )} + /> +
+
+ ); +}