[Docs] Refactor Contract and Tokens docs (#7676)

Author: joaquim-verges

apps/portal/src/app/Header.tsx

@@ -48,12 +48,8 @@ const links = [
     name: "Contracts",
   },
   {
-    href: "/insight",
-    name: "Insight",
-  },
-  {
-    href: "/vault",
-    name: "Vault",
+    href: "/tokens",
+    name: "Tokens",
   },
 ];
 

apps/portal/src/app/contracts/deploy/page.mdx

@@ -0,0 +1,57 @@
+# Deploy Contracts
+
+You can deploy contracts via CLI or programatically.
+
+## Deploying via CLI
+
+From your forge or hardhat project, you can deploy your contract with a single command.
+
+```bash
+npx thirdweb deploy -k <project-secret-key>
+```
+
+You can also publish your contract to be deployable by anyone on any chain.
+
+```bash
+npx thirdweb publish -k <project-secret-key>
+```
+
+
+
+## Deploying via SDK
+
+You can deploy contracts from ABI and bytecode.
+
+```ts
+import { deployContract } from "thirdweb/deploys";
+
+const address = await deployContract({
+  client,
+  chain,
+  bytecode: "0x...",
+  abi: contractAbi,
+  constructorParams: {
+    param1: "value1",
+    param2: 123,
+  },
+  salt, // optional: salt enables deterministic deploys
+});
+```
+
+Or alternatively, you can deploy a contract from a previously published contract.
+
+```ts
+import { deployPublishedContract } from "thirdweb/deploys";
+
+const address = await deployPublishedContract({
+  client,
+  chain,
+  account,
+  contractId: "MyPublishedContract",
+  contractParams: {
+    param1: "value1",
+    param2: 123,
+  },
+  publisher: "0x...", // optional, defaults to the thirdweb deployer
+});
+```

apps/portal/src/app/contracts/events/page.mdx

@@ -0,0 +1,40 @@
+# Listening to Events
+
+The recommended way to listen to contract events is to use the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. This is type-safe based on the Solidity event signature you define. You can get your desired contract event signature from the solidity code directly.
+
+```ts
+import { getContractEvents, prepareEvent } from "thirdweb";
+
+const myEvent = prepareEvent({
+  signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
+});
+
+const events = await getContractEvents({
+  contract: myContract,
+  events: [myEvent],
+});
+```
+
+### Using standard event definitions
+
+You can also use the standard event definitions from the SDK to define the events you want to listen to.
+
+```ts
+import { getContractEvents } from "thirdweb";
+import { transferEvent } from "thirdweb/extensions/erc20";
+
+const events = await getContractEvents({
+  contract: myContract,
+  events: [transferEvent()],
+});
+```
+
+### Generating all read functions and events for a deployed contract
+
+Using the CLI, you can generate optimized functions for all the possible calls to a contract. This saves you time and precomputes all the necessary encoding.
+
+```shell
+npx thirdweb generate <contractId>/<contractAddress>
+```
+
+Read more on how to [generate extension functions using the CLI](/contracts/generate).

apps/portal/src/app/contracts/extensions/page.tsx

@@ -0,0 +1,85 @@
+import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
+import { getCustomTag } from "@/app/references/components/TDoc/utils/getSidebarLinkgroups";
+import { DocLink, Heading, Paragraph } from "@/components/Document";
+import { Table, TBody, Td, Th, Tr } from "@/components/Document/Table";
+
+export default async function ExtensionPage() {
+  const docs = await fetchTypeScriptDoc();
+  const extensions = [
+    ...new Set(
+      docs.functions
+        ?.filter((f) => {
+          const [extension] = getCustomTag(f) || [];
+          return extension === "@extension";
+        })
+        ?.map((f) => {
+          const [, extensionName] = getCustomTag(f) || [];
+          return extensionName;
+        })
+        .filter((item) => item !== undefined) || [],
+    ),
+  ];
+
+  const overrides: Record<string, { name?: string; description?: string }> = {
+    common: {
+      description: "Common contract extensions",
+      name: "Common",
+    },
+    erc20: { description: "ERC20 token standard extensions" },
+    erc721: { description: "ERC721 token standard extensions" },
+    erc1155: { description: "ERC1155 token standard extensions" },
+    erc4337: { description: "ERC4337 account abstraction extensions" },
+    erc4626: { description: "ERC4626 Tokenized Vaults extensions" },
+    farcaster: { description: "Farcaster protocol extensions" },
+    lens: { description: "Lens protocol extensions" },
+  };
+  return (
+    <>
+      <Heading anchorId="built-in-extensions" level={1}>
+        Built-in extensions for common standards
+      </Heading>
+      <Paragraph>
+        The SDK comes packed with a set of built-in extensions for common
+        standards. These extensions are designed to make it easy to interact
+        with popular contracts and protocols. They are available as part of the
+        SDK and can be used in your application without any additional setup.
+      </Paragraph>
+      <Table>
+        <TBody>
+          <Tr>
+            <Th>Standard</Th>
+            <Th>Import Path</Th>
+            <Th>Description</Th>
+          </Tr>
+
+          {extensions.map((item) => {
+            return (
+              <Tr key={item}>
+                <Td>{overrides[item]?.name ?? item}</Td>
+                <Td>
+                  <DocLink
+                    href={`/references/typescript/v5/functions#${item.toLowerCase()}`}
+                  >
+                    thirdweb/extensions/{item.toLowerCase()}
+                  </DocLink>
+                </Td>
+                <Td>{overrides[item]?.description ?? `${item} extensions`}</Td>
+              </Tr>
+            );
+          })}
+        </TBody>
+      </Table>
+      <Paragraph>
+        More extensions are being added regularly. Anyone can{" "}
+        <DocLink href="/typescript/v5/extensions/create">
+          create an extension
+        </DocLink>{" "}
+        and contribute it back to the repository. You can also{" "}
+        <DocLink href="/typescript/v5/extensions/generate">
+          generate extensions
+        </DocLink>{" "}
+        for any deployed contract.
+      </Paragraph>
+    </>
+  );
+}

apps/portal/src/app/contracts/generate/page.mdx

@@ -0,0 +1,69 @@
+# Generating extensions
+
+You can generate precompiled, optimized extensions for any deployed contract using the thirdweb CLI.
+
+The thirdweb SDK comes with a CLI that can be run with your package manager of choice.
+
+```bash
+npx thirdweb generate <chainId>/<contract-address>
+```
+
+This will generate a new `thirdweb` directory in your own project, containing the precompiled extension for the contract at the given address.
+
+### Example: Generating an extension for a USDC contract on Optimism
+
+```bash
+npx thirdweb generate 10/0x0b2c639c533813f4aa9d7837caf62653d097ff85
+```
+
+This will generate the following file `thirdweb/10/0x0b2c639c533813f4aa9d7837caf62653d097ff85.ts` in your project, containing:
+
+- Precompiled, type-safe event definitions
+- Precompiled, type-safe function definitions
+
+You can inspect the generated code, modify it, and use it in your project.
+
+### Example: Using a generated extension function
+
+```typescript
+import { permit } from "/thirdweb/10/0x0b2c639c533813f4aa9d7837caf62653d097ff85";
+
+const contract = getContract({
+	client,
+	chain: optimism,
+	address: USDC_ADDRESS,
+});
+
+// Type-safe function to do a permit transaction
+const transaction = permit({
+  owner: ...,
+  spender: ...,
+  value: ...,
+  deadline: ...,
+  signature: ...,
+});
+await sendTransaction({ transaction, account });
+```
+
+### Example: Using a generated event
+
+```typescript
+import { transferEvent } from "/thirdweb/10/0x0b2c639c533813f4aa9d7837caf62653d097ff85";
+
+const contract = getContract({
+	client,
+	chain: optimism,
+	address: USDC_ADDRESS,
+});
+
+// Type-safe event listener
+const events = await getContractEvents({
+  contract,
+  events: [
+    transferEvent({
+      from: ...,
+      to: ...,
+    })
+  ],
+});
+```

apps/portal/src/app/contracts/layout.tsx

@@ -12,10 +12,10 @@ export default async function Layout(props: { children: React.ReactNode }) {
 
 export const metadata = createMetadata({
   description:
-    "Easily create, deploy, and manage smart contracts on any EVM compatible blockchain",
+    "Easily read, write, deploy, and listen to contract events on any EVM compatible blockchain",
   image: {
     icon: "contract",
-    title: "thirdweb contracts",
+    title: "Contracts",
   },
-  title: "thirdweb Contracts",
+  title: "Contracts",
 });