Skip to content

Commit 52999fd

Browse files
technophile-04technophile-04
authored
(docs): Debug contracts pacakge (#92)
1 parent d15ab7b commit 52999fd

File tree

12 files changed

+495
-3
lines changed

12 files changed

+495
-3
lines changed

‎docs/components/ContractExample/deployedContracts.ts‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
export const deployedContracts = {
2+
11155111: {
3+
YourCollectible: {
4+
address: "0x17Ed03686653917efa2194A5252c5f0a4f3Dc49c",
5+
abi: [
6+
{ inputs: [], stateMutability: "nonpayable", type: "constructor" },
7+
{
8+
anonymous: false,
9+
inputs: [
10+
{ indexed: true, internalType: "address", name: "owner", type: "address" },
11+
{ indexed: true, internalType: "address", name: "approved", type: "address" },
12+
{ indexed: true, internalType: "uint256", name: "tokenId", type: "uint256" },
13+
],
14+
name: "Approval",
15+
type: "event",
16+
},
17+
{
18+
anonymous: false,
19+
inputs: [
20+
{ indexed: true, internalType: "address", name: "owner", type: "address" },
21+
{ indexed: true, internalType: "address", name: "operator", type: "address" },
22+
{ indexed: false, internalType: "bool", name: "approved", type: "bool" },
23+
],
24+
name: "ApprovalForAll",
25+
type: "event",
26+
},
27+
{
28+
anonymous: false,
29+
inputs: [
30+
{ indexed: true, internalType: "address", name: "previousOwner", type: "address" },
31+
{ indexed: true, internalType: "address", name: "newOwner", type: "address" },
32+
],
33+
name: "OwnershipTransferred",
34+
type: "event",
35+
},
36+
{
37+
anonymous: false,
38+
inputs: [
39+
{ indexed: true, internalType: "address", name: "from", type: "address" },
40+
{ indexed: true, internalType: "address", name: "to", type: "address" },
41+
{ indexed: true, internalType: "uint256", name: "tokenId", type: "uint256" },
42+
],
43+
name: "Transfer",
44+
type: "event",
45+
},
46+
{
47+
inputs: [
48+
{ internalType: "address", name: "to", type: "address" },
49+
{ internalType: "uint256", name: "tokenId", type: "uint256" },
50+
],
51+
name: "approve",
52+
outputs: [],
53+
stateMutability: "nonpayable",
54+
type: "function",
55+
},
56+
{
57+
inputs: [{ internalType: "address", name: "owner", type: "address" }],
58+
name: "balanceOf",
59+
outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
60+
stateMutability: "view",
61+
type: "function",
62+
},
63+
{
64+
inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
65+
name: "getApproved",
66+
outputs: [{ internalType: "address", name: "", type: "address" }],
67+
stateMutability: "view",
68+
type: "function",
69+
},
70+
{
71+
inputs: [
72+
{ internalType: "address", name: "owner", type: "address" },
73+
{ internalType: "address", name: "operator", type: "address" },
74+
],
75+
name: "isApprovedForAll",
76+
outputs: [{ internalType: "bool", name: "", type: "bool" }],
77+
stateMutability: "view",
78+
type: "function",
79+
},
80+
{
81+
inputs: [
82+
{ internalType: "address", name: "to", type: "address" },
83+
{ internalType: "string", name: "uri", type: "string" },
84+
],
85+
name: "mintItem",
86+
outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
87+
stateMutability: "nonpayable",
88+
type: "function",
89+
},
90+
{
91+
inputs: [],
92+
name: "name",
93+
outputs: [{ internalType: "string", name: "", type: "string" }],
94+
stateMutability: "view",
95+
type: "function",
96+
},
97+
{
98+
inputs: [],
99+
name: "owner",
100+
outputs: [{ internalType: "address", name: "", type: "address" }],
101+
stateMutability: "view",
102+
type: "function",
103+
},
104+
{
105+
inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
106+
name: "ownerOf",
107+
outputs: [{ internalType: "address", name: "", type: "address" }],
108+
stateMutability: "view",
109+
type: "function",
110+
},
111+
{ inputs: [], name: "renounceOwnership", outputs: [], stateMutability: "nonpayable", type: "function" },
112+
{
113+
inputs: [
114+
{ internalType: "address", name: "from", type: "address" },
115+
{ internalType: "address", name: "to", type: "address" },
116+
{ internalType: "uint256", name: "tokenId", type: "uint256" },
117+
],
118+
name: "safeTransferFrom",
119+
outputs: [],
120+
stateMutability: "nonpayable",
121+
type: "function",
122+
},
123+
{
124+
inputs: [
125+
{ internalType: "address", name: "from", type: "address" },
126+
{ internalType: "address", name: "to", type: "address" },
127+
{ internalType: "uint256", name: "tokenId", type: "uint256" },
128+
{ internalType: "bytes", name: "data", type: "bytes" },
129+
],
130+
name: "safeTransferFrom",
131+
outputs: [],
132+
stateMutability: "nonpayable",
133+
type: "function",
134+
},
135+
{
136+
inputs: [
137+
{ internalType: "address", name: "operator", type: "address" },
138+
{ internalType: "bool", name: "approved", type: "bool" },
139+
],
140+
name: "setApprovalForAll",
141+
outputs: [],
142+
stateMutability: "nonpayable",
143+
type: "function",
144+
},
145+
{
146+
inputs: [{ internalType: "bytes4", name: "interfaceId", type: "bytes4" }],
147+
name: "supportsInterface",
148+
outputs: [{ internalType: "bool", name: "", type: "bool" }],
149+
stateMutability: "view",
150+
type: "function",
151+
},
152+
{
153+
inputs: [],
154+
name: "symbol",
155+
outputs: [{ internalType: "string", name: "", type: "string" }],
156+
stateMutability: "view",
157+
type: "function",
158+
},
159+
{
160+
inputs: [{ internalType: "uint256", name: "index", type: "uint256" }],
161+
name: "tokenByIndex",
162+
outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
163+
stateMutability: "view",
164+
type: "function",
165+
},
166+
{
167+
inputs: [
168+
{ internalType: "address", name: "owner", type: "address" },
169+
{ internalType: "uint256", name: "index", type: "uint256" },
170+
],
171+
name: "tokenOfOwnerByIndex",
172+
outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
173+
stateMutability: "view",
174+
type: "function",
175+
},
176+
{
177+
inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
178+
name: "tokenURI",
179+
outputs: [{ internalType: "string", name: "", type: "string" }],
180+
stateMutability: "view",
181+
type: "function",
182+
},
183+
{
184+
inputs: [],
185+
name: "totalSupply",
186+
outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
187+
stateMutability: "view",
188+
type: "function",
189+
},
190+
{
191+
inputs: [
192+
{ internalType: "address", name: "from", type: "address" },
193+
{ internalType: "address", name: "to", type: "address" },
194+
{ internalType: "uint256", name: "tokenId", type: "uint256" },
195+
],
196+
name: "transferFrom",
197+
outputs: [],
198+
stateMutability: "nonpayable",
199+
type: "function",
200+
},
201+
{
202+
inputs: [{ internalType: "address", name: "newOwner", type: "address" }],
203+
name: "transferOwnership",
204+
outputs: [],
205+
stateMutability: "nonpayable",
206+
type: "function",
207+
},
208+
],
209+
},
210+
},
211+
} as const;

‎docs/components/ContractExample/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import { sepolia } from "viem/chains";
3+
import { Contract } from "@scaffold-ui/debug-contracts";
4+
import { deployedContracts } from "./deployedContracts";
5+
import "./mobile.css";
6+
7+
export const ContractExample = () => {
8+
const chainId = sepolia.id;
9+
const contractName = "YourCollectible";
10+
const contract = deployedContracts[chainId][contractName];
11+
return (
12+
<div className="contract-mobile-frame">
13+
<Contract
14+
contractName={contractName}
15+
contract={contract}
16+
chainId={chainId}
17+
/>
18+
</div>
19+
);
20+
};

‎docs/components/ContractExample/mobile.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.contract-mobile-frame {
2+
max-width: 100%;
3+
margin: 0 auto;
4+
}
5+
6+
/* Force the Contract component to stay in its mobile layout even on large screens */
7+
.contract-mobile-frame .lg\:grid-cols-6,
8+
.contract-mobile-frame .lg\:grid-cols-3 {
9+
grid-template-columns: repeat(1, minmax(0, 1fr));
10+
}
11+
12+
.contract-mobile-frame .lg\:col-span-2,
13+
.contract-mobile-frame .lg\:col-span-3,
14+
.contract-mobile-frame .col-span-5 {
15+
grid-column: span 1 / span 1;
16+
}
17+
18+
.contract-mobile-frame .lg\:gap-12,
19+
.contract-mobile-frame .lg\:gap-10 {
20+
gap: 2rem;
21+
}
22+
23+
.contract-mobile-frame .lg\:px-10,
24+
.contract-mobile-frame .lg\:px-8 {
25+
padding-left: 1.5rem;
26+
padding-right: 1.5rem;
27+
}

‎docs/components/DocsProvider.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
import React from "react";
44
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
55
import { WagmiProvider } from "wagmi";
6-
import { mainnet, polygon } from "viem/chains";
6+
import { mainnet, polygon, sepolia } from "viem/chains";
77
import { createConfig, http } from "wagmi";
88
import { createClient } from "viem";
99
import "@scaffold-ui/components/styles.css";
10+
import "@scaffold-ui/debug-contracts/styles.css";
1011
import { getAlchemyHttpUrl } from "../utils";
1112

12-
export const chains = [mainnet, polygon] as const;
13+
export const chains = [mainnet, polygon, sepolia] as const;
1314

1415
const wagmiConfig = createConfig({
1516
chains: chains,

‎docs/components/IntegerInputExample.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use client";
2+
3+
import React, { useState } from "react";
4+
import { IntegerInput, IntegerVariant } from "@scaffold-ui/debug-contracts";
5+
6+
interface IntegerInputExampleProps {
7+
initialValue?: string;
8+
placeholder?: string;
9+
variant?: IntegerVariant;
10+
disableMultiplyBy1e18?: boolean;
11+
disabled?: boolean;
12+
}
13+
14+
export const IntegerInputExample = ({
15+
initialValue = "",
16+
placeholder,
17+
variant = IntegerVariant.UINT256,
18+
disableMultiplyBy1e18,
19+
disabled,
20+
}: IntegerInputExampleProps) => {
21+
const [value, setValue] = useState(initialValue);
22+
23+
return (
24+
<IntegerInput
25+
value={value}
26+
onChange={setValue}
27+
placeholder={placeholder}
28+
variant={variant}
29+
disableMultiplyBy1e18={disableMultiplyBy1e18}
30+
disabled={disabled}
31+
/>
32+
);
33+
};

‎docs/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vocs dev",
8-
"build": "pnpm --filter @scaffold-ui/hooks --filter @scaffold-ui/components run build && vocs build",
8+
"build": "pnpm --filter @scaffold-ui/hooks --filter @scaffold-ui/components --filter @scaffold-ui/debug-contracts run build && vocs build",
99
"preview": "vocs preview",
1010
"format": "prettier --write ."
1111
},
@@ -18,6 +18,7 @@
1818
"license": "ISC",
1919
"dependencies": {
2020
"@scaffold-ui/components": "workspace:*",
21+
"@scaffold-ui/debug-contracts": "workspace:*",
2122
"@scaffold-ui/hooks": "workspace:*",
2223
"@tanstack/react-query": "^5.59.15",
2324
"@types/react": "^19",

‎docs/pages/debug-contracts/Contract.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
layout: docs
3+
---
4+
5+
import React, { useMemo } from "react";
6+
import { ContractExample } from "../../components/ContractExample";
7+
import { DocsProvider } from "../../components/DocsProvider";
8+
9+
# Contract Component
10+
11+
The `Contract` is a UI component for debugging deployed contracts.
12+
13+
## Import
14+
15+
```tsx
16+
import { Contract } from "@scaffold-ui/debug-contracts";
17+
```
18+
19+
## Props
20+
21+
| Prop | Type | Default | Description |
22+
| -------------------------- | -------------------------------- | ----------- | ------------------------------------------------ |
23+
| `contractName` | `string` | - | The name of the contract to display |
24+
| `contract` | `{ address: Address, abi: Abi }` | - | The abi and address of the contract to display |
25+
| `chainId` | `number` | - | The chain ID where the contract is deployed |
26+
| `blockExplorerAddressLink` | `string` | `undefined` | The block explorer link for the contract address |
27+
28+
## Live Example:
29+
30+
#### Code
31+
32+
```tsx twoslash
33+
import React from "react";
34+
import { Contract } from "@scaffold-ui/debug-contracts";
35+
import { deployedContracts } from "./components/ContractExample/deployedContracts";
36+
import { sepolia } from "viem/chains";
37+
38+
<Contract
39+
contractName="YourCollectible"
40+
contract={deployedContracts[sepolia.id]["YourCollectible"]}
41+
chainId={sepolia.id}
42+
/>;
43+
```
44+
45+
#### Example
46+
47+
<DocsProvider>
48+
<ContractExample />
49+
</DocsProvider>

0 commit comments

Comments
 (0)