Skip to content
This repository has been archived by the owner on Jun 19, 2024. It is now read-only.

Commit

Permalink
Merge branch 'main' into kien/INFRA-303
Browse files Browse the repository at this point in the history
  • Loading branch information
kien-ngo authored Jun 17, 2024
2 parents 3c639aa + 1e1824f commit a7e2208
Show file tree
Hide file tree
Showing 5 changed files with 482 additions and 442 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions src/components/connect/CodePlayground.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
46 changes: 46 additions & 0 deletions src/components/contract-functions/contract-function.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -43,12 +49,33 @@ const ContractFunction: React.FC<ContractFunctionProps> = ({
fn,
contract,
}) => {
const [environment, setEnvironment] = useState<CodeEnvironment>("javascript");

const enabledExtensions = useContractEnabledExtensions(contract?.abi);

const extensionNamespace = useMemo(() => {
if (enabledExtensions.some((e) => e.name === "ERC20")) {
return "erc20";
}
if (enabledExtensions.some((e) => e.name === "ERC721")) {
return "erc721";
}
if (enabledExtensions.some((e) => e.name === "ERC1155")) {
return "erc1155";
}
return undefined;
}, [enabledExtensions]);

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
Expand Down Expand Up @@ -144,6 +171,25 @@ 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,
extensionNamespace,
},
)}
/>
</Flex>
);
};
Expand Down
Loading

0 comments on commit a7e2208

Please sign in to comment.