Merge pull request #282 from inkonchain/feat/update-docs

Feat/update docs

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/AddNetworkButton.tsx

@@ -1,17 +1,21 @@
 import { useEffect, useState } from "react";
 
-import { isInkSepoliaNetwork, switchToInkSepolia } from "@/utils/add-network";
+import { addNetwork, isNetworkAdded, NetworkType } from "@/utils/add-network";
 
 import { Button } from "./Button";
 
-export const AddNetworkButton = () => {
-  const [isConnected, setIsConnected] = useState<boolean>(false);
+interface AddNetworkButtonProps {
+  network: NetworkType;
+}
+
+export const AddNetworkButton = ({ network }: AddNetworkButtonProps) => {
+  const [isAdded, setIsAdded] = useState<boolean>(false);
 
   useEffect(() => {
     const checkNetwork = async () => {
       if ((window as any).ethereum) {
-        const connected = await isInkSepoliaNetwork();
-        setIsConnected(connected);
+        const added = await isNetworkAdded(network);
+        setIsAdded(added);
       }
     };
 
@@ -26,11 +30,13 @@ export const AddNetworkButton = () => {
         (window as any).ethereum.removeListener("chainChanged", checkNetwork);
       }
     };
-  }, []);
+  }, [network]);
+
+  const networkName = network === "mainnet" ? "Ink Mainnet" : "Ink Sepolia";
 
   return (
     <div className="space-y-2 mt-4">
-      {isConnected ? (
+      {isAdded ? (
         <div className="flex items-center text-green-600 dark:text-green-400 font-semibold">
           <svg
             className="w-5 h-5 mr-2"
@@ -45,17 +51,13 @@ export const AddNetworkButton = () => {
               d="M5 13l4 4L19 7"
             />
           </svg>
-          Successfully connected to Ink Sepolia
+          {networkName} Network Added
         </div>
       ) : (
         <div className="space-y-4">
-          <Button variant="primary" onClick={switchToInkSepolia}>
-            Add Ink Sepolia Network
+          <Button variant="primary" onClick={() => addNetwork(network)}>
+            Add {networkName} Network
           </Button>
-          <div className="text-sm text-gray-600 dark:text-gray-400 italic">
-            Note: Automatic network addition may not work with all wallets. See
-            manual instructions below if needed.
-          </div>
         </div>
       )}
     </div>

src/components/Head.tsx

@@ -40,7 +40,7 @@ export const Head = () => {
       <meta property="twitter:creator" content="@inkonchain" />
 
       {/* Favicon */}
-      <link rel="icon" href="img/icons/favicon.ico" type="image/x-icon" />
+      <link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon" />
     </>
   );
 };

src/components/TestnetDisclaimer.tsx

@@ -0,0 +1,11 @@
+import { Callout } from "nextra/components";
+
+export const TestnetDisclaimer = () => {
+  return (
+    <Callout type="info" emoji="ℹ️">
+      This guide currently references Ink Sepolia (testnet) however it can be
+      used for Ink mainnet as well. Please be sure to change the necessary
+      parameters based on your network of choice.
+    </Callout>
+  );
+};

src/content/shared/faucets-content.mdx

@@ -1,32 +1,19 @@
- ## Faucets
+# Faucets
 
-Get sepolia ETH from these faucets so you can fund your wallet to send transactions and deploy contracts on Ink Sepolia. You can also [bridge](/quick-start/faucets#bridging-funds-to-ink-sepolia) testnet funds to Ink.
+Get sepolia ETH on Ink from these faucets below! Alternatively, you can [bridge](https://inkonchain.com/bridge) testnet funds to Ink.
+
+## [Ink](https://inkonchain.com/faucet)
 
-###### Ink
 Our in house faucet provides a quick and easy way to acquire testnet ETH.
-    - https://inkonchain.com/faucet
-###### Optimism Superchain Faucet
-The Superchain Faucet provides testnet ETH for Ink and all other OP chains. Sign in to claim 0.10 test ETH on 1 network every 24 hours or verify your onchain identity for more tokens.
-    - https://console.optimism.io/faucet
-###### QuickNode
-Use QuickNode Faucet to claim Ink Sepolia for testnet ETH for free - one drip per network every 12 hours.
-    - https://faucet.quicknode.com/drip
-###### Gelato 
-Gelato's Faucet uses Cloudflare authentication and drops up to 0.3 Ink Sepolia ETH every 12 hours.
-    - https://faucet-gel-sepolia.inkonchain.com 
 
-## Bridging funds to Ink Sepolia
+## [Optimism Superchain Faucet](https://console.optimism.io/faucet)
 
-If you need an alternative to the above faucets you can choose to bridge ETH onto Ink Sepolia.
+The Superchain Faucet provides testnet ETH for Ink and all other OP chains. Sign in to claim 0.10 test ETH on 1 network every 24 hours or verify your onchain identity for more tokens.
+
+## [QuickNode](https://faucet.quicknode.com/drip)
 
-1. Get sepolia ETH by using your wallet with one of the existing faucets on the Ethereum Sepolia network:
+Use QuickNode Faucet to claim Ink Sepolia for testnet ETH for free - one drip per network every 12 hours.
 
-* [https://console.optimism.io/faucet](https://console.optimism.io/faucet)
-* [https://www.alchemy.com/faucets/ethereum-sepolia](https://www.alchemy.com/faucets/ethereum-sepolia)
-* [https://faucet.quicknode.com/ethereum/sepolia](https://faucet.quicknode.com/ethereum/sepolia)
-* [https://cloud.google.com/application/web3/faucet/ethereum/sepolia](https://cloud.google.com/application/web3/faucet/ethereum/sepolia)
+## [Gelato](https://faucet-gel-sepolia.inkonchain.com)
 
-2. Transfer your ETH to <CopyableCode code="0x33f60714bbd74d62b66d79213c348614de51901c" />.
-- This is the [`L1StandardBridge Contract`](https://eth-sepolia.blockscout.com/address/0x33f60714BbD74d62b66D79213C348614DE51901C).
-- This contract will help you send your ETH from Sepolia to Ink Sepolia.
-- Once the transaction is confirmed you will quickly receive Ink ETH in your wallet.
+Gelato's Faucet uses Cloudflare authentication and drops up to 0.3 Ink Sepolia ETH every 12 hours.

src/content/shared/multisig-content.mdx

@@ -1,4 +1,4 @@
-# Multisig Solutions
+# Multisig
 
 ## Safe
 Ink hosts [Safe](https://docs.safe.global/home/what-is-safe)'s technology to bring digital ownership of accounts to everyone by building universal and open contract standards for the custody of digital assets, data, and identity.
@@ -9,4 +9,7 @@ Using Safe you can:
 - Access your safe using Web, Mobile and Desktop apps. 
 - Safe also features access to DeFi, open source code, batch transactions, modular extensions, gasless signatures and more.
 
-Safe is available on Ink Sepolia through the Optimism Safe portal: https://safe.optimism.io/welcome/accounts?chain=ink-sepolia
+**Supported Netowkrs**
+- [Ink Sepolia](https://safe.optimism.io/welcome/accounts?chain=ink-sepolia)
+- [Ink Mainnet](https://app.safe.global/new-safe/load?chain=ink)
+

src/pages/_meta.json

@@ -10,7 +10,6 @@
       "pagination": false
     }
   },
-
   "404": {
     "title": "404",
     "display": "hidden",
@@ -23,7 +22,6 @@
       "pagination": false
     }
   },
-
   "500": {
     "title": "500",
     "display": "hidden",
@@ -36,8 +34,6 @@
       "pagination": false
     }
   },
-
-
   "header_status": {
     "title": "Status Page",
     "type": "page",
@@ -47,35 +43,67 @@
   "header_faucet": {
     "title": "Faucets",
     "type": "page",
-    "href": "/quick-start/faucets"
+    "href": "/tools/faucets"
+  },
+  "--- GENERAL": {
+    "title": "General",
+    "type": "separator"
   },
-
-
   "general": {
-    "title": "General"
+    "title": "General",
+    "display": "children"
   },
-
-
-  "quick-start": {
-    "title": "Quick Start"
+  "+++ Build on Ink": {
+    "title": "",
+    "type": "separator"
   },
-
-  "use-ink": {
-    "title": "Use Ink"
+  "--- Build On Ink": {
+    "title": "Build On Ink",
+    "type": "separator"
   },
-
   "build": {
-    "title": "Build on Ink"
+    "title": "Build on Ink",
+    "display": "children"
+  },
+  "+++ Tools": {
+    "title": "",
+    "type": "separator"
+  },
+  "--- Tools": {
+    "title": "Tools",
+    "type": "separator"
+  },
+  "tools": {
+    "title": "Tools",
+    "display": "children"
+  },
+  "+++ Useful Information": {
+    "title": "",
+    "type": "separator"
+  },
+  "--- Useful Information": {
+    "title": "Useful Information",
+    "type": "separator"
+  },
+  "useful-information": {
+    "title": "Useful Information",
+    "display": "children"
+  },
+  "+++ Work with Ink": {
+    "title": "",
+    "type": "separator"
+  },
+  "--- Work with Ink": {
+    "title": "Work with Ink",
+    "type": "separator"
   },
-
-
-  "work-ink": {
+  "work-with-ink": {
     "title": "Work with Ink",
+    "display": "children",
     "theme": {
       "pagination": true
     }
   },
-
   "---": {
     "type": "separator"
   },
@@ -90,4 +118,4 @@
       "pagination": false
     }
   }
-}
+}

src/pages/build/_meta.json

@@ -1,10 +1,12 @@
 {
+  "getting-started": "Getting Started",
   "onchain-clients": "Onchain Clients",
-  "oracles": "Oracles",
-  "run-an-ink-node": "Running Ink Nodes",
-  "fees": "Fees",
+  "run-an-ink-node": {
+    "title": "Running Ink Nodes",
+    "href": "https://github.com/inkonchain/node",
+    "newWindow": true
+  },
+  "transaction-fees": "Transaction Fees",
   "ink-kit": "Ink Kit",
-  "tutorials": "Tutorials",
-  "tools": "Tools",
-  "useful-info": "Useful Information"
+  "tutorials": "Tutorials"
 }

src/pages/build/getting-started.mdx

@@ -0,0 +1,23 @@
+import { Callout, Checkbox } from "nextra/components";
+
+# What do I Need to Start Developing on Ink?
+
+To start developing on Ink, you'll need:
+
+- [ ] An IDE (integrated developer environment) like [Visual Studio Code](https://code.visualstudio.com/), [Cursor](https://cursor.sh/), or [Remix](https://remix.ethereum.org/) to write smart contracts in solidity.
+
+- [ ] A wallet that holds ETH such as [Kraken Wallet](https://www.kraken.com/wallet), [MetaMask](https://metamask.io/), or [Rainbow](https://rainbow.me/).
+
+- We suggest having at least 0.01 ETH for standard deployments on Ink.
+- You can request Ink Sepolia ETH using our [Faucets](/tools/faucets).
+
+- [ ] We recommend using a development framework like [Foundry](https://github.com/foundry-rs/foundry) or [Hardhat](https://hardhat.org/)
+
+- [Guide to deploy a contract using Foundry](/build/tutorials/deploying-a-smart-contract/foundry)
+- [Guide to deploy a contract using Hardhat](/build/tutorials/deploying-a-smart-contract/hardhat)
+- [Guide to deploy a contract using Remix](/build/tutorials/deploying-a-smart-contract/remix)
+
+<Callout type="info" emoji="ℹ️">
+  Try out InkGPT! Blaze through the docs and get deployed in no time with our
+  new AI assistant.
+</Callout>