From 091ecf8016a6e4211c77d6b4a3150a5fb8095deb Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Sat, 15 Jun 2024 04:27:58 +0000
Subject: [PATCH] feat: add CodeSegment component with enhanced code snippets
 in ContractFunction (#2673)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### TL;DR

Enhances the `ContractFunction` component by adding interactive code snippets for various environments, helping users utilize contract functions in their applications.

### What changed?

- Added code snippets under `use this function in your app` section.
- Introduced `CodeEnvironment` state to toggle between environments (e.g., JavaScript).
- Added import for `CodeSegment`, `COMMANDS`, `formatSnippet`, and `CodeEnvironment`.
- Removed console log statements and unused imports.

### How to test?

- Verify that code snippets appear as expected for different contract functions.
- Toggle between environments and ensure the correct code is displayed.

### Why make this change?

Provides developers with ready-to-use code snippets, streamlining the integration process for contract functions into applications.

---

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor code related to contract function execution and UI components in the contract overview tab.

### Detailed summary
- Refactored code execution logic for contract functions
- Added `CodeSegment` component for displaying code snippets
- Updated function usage display in UI based on function type and state mutability

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../contract-functions/contract-function.tsx  | 30 +++++++++++++++++++
 .../tabs/code/components/code-overview.tsx    | 18 +++++------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/contract-functions/contract-function.tsx b/src/components/contract-functions/contract-function.tsx
index c10559fe59..2d296c04df 100644
--- a/src/components/contract-functions/contract-function.tsx
+++ b/src/components/contract-functions/contract-function.tsx
@@ -33,6 +33,12 @@ import { camelToTitle } from "contract-ui/components/solidity-inputs/helpers";
 import { useRouter } from "next/router";
 import { Dispatch, SetStateAction, useMemo, useState } from "react";
 import { Badge, Button, Card, Heading, Text } from "tw-components";
+import { CodeSegment } from "../contract-tabs/code/CodeSegment";
+import {
+  COMMANDS,
+  formatSnippet,
+} from "../../contract-ui/tabs/code/components/code-overview";
+import { CodeEnvironment } from "../contract-tabs/code/types";
 
 interface ContractFunctionProps {
   fn?: AbiFunction | AbiEvent;
@@ -43,12 +49,18 @@ const ContractFunction: React.FC<ContractFunctionProps> = ({
   fn,
   contract,
 }) => {
+  const [environment, setEnvironment] = useState<CodeEnvironment>("javascript");
+
   if (!fn) {
     return null;
   }
 
   const isFunction = "stateMutability" in fn;
 
+  const isRead =
+    isFunction &&
+    (fn.stateMutability === "view" || fn.stateMutability === "pure");
+
   return (
     <Flex direction="column" gap={1.5}>
       <Flex
@@ -144,6 +156,24 @@ const ContractFunction: React.FC<ContractFunctionProps> = ({
           abiFunction={fn}
         />
       )}
+
+      <Heading size="subtitle.md" mt={6}>
+        Use this function in your app
+      </Heading>
+      <Divider mb={2} />
+      <CodeSegment
+        environment={environment}
+        setEnvironment={setEnvironment}
+        snippet={formatSnippet(
+          COMMANDS[isFunction ? (isRead ? "read" : "write") : "events"] as any,
+          {
+            contractAddress: contract?.getAddress(),
+            fn,
+            args: fn.inputs?.map((i) => i.name),
+            chainId: contract?.chainId,
+          },
+        )}
+      />
     </Flex>
   );
 };
diff --git a/src/contract-ui/tabs/code/components/code-overview.tsx b/src/contract-ui/tabs/code/components/code-overview.tsx
index e6bf523947..fb07497f64 100644
--- a/src/contract-ui/tabs/code/components/code-overview.tsx
+++ b/src/contract-ui/tabs/code/components/code-overview.tsx
@@ -177,35 +177,35 @@ const transaction = await prepareContractCall({
 const { transactionHash } = await sendTransaction({ 
   transaction, 
   account 
-})`,
+});`,
     react: `import { prepareContractCall } from "thirdweb"
 import { useSendTransaction } from "thirdweb/react";
 
 export default function Component() {
-  const { mutate: sendTransaction, isLoading, isError } = useSendTransaction();
+  const { mutate: sendTransaction } = useSendTransaction();
 
-  const call = async () => {
-    const transaction = await prepareContractCall({ 
+  const onClick = () => {
+    const transaction = prepareContractCall({ 
       contract, 
       method: "{{function}}", 
       params: [{{args}}] 
     });
-    const { transactionHash } = await sendTransaction(transaction);
+    sendTransaction(transaction);
   }
 }`,
     "react-native": `import { prepareContractCall } from "thirdweb"
 import { useSendTransaction } from "thirdweb/react";
     
 export default function Component() {
-  const { mutate: sendTransaction, isLoading, isError } = useSendTransaction();
+  const { mutate: sendTransaction } = useSendTransaction();
     
-  const call = async () => {
-    const transaction = await prepareContractCall({ 
+  const onClick = () => {
+    const transaction = prepareContractCall({ 
       contract, 
       method: "{{function}}", 
       params: [{{args}}] 
     });
-    const { transactionHash } = await sendTransaction(transaction);
+    sendTransaction(transaction);
   }
 }`,
   },