Merge pull request #1125 from bz-hashtag-0780/brian-doyle/add-tutorial-section

add token listing guide

Author: bz-hashtag-0780

docs/tutorials/index.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+title: Tutorials
+description: Learn cutting edge techniques to take advantage of the power of Flow with EVM and Cadence.
+---
+
+In this section, you'll find our most complicated and advanced tutorials. Check out the list below to find information on how to power up your apps.

docs/tutorials/token-launch/index.md

@@ -0,0 +1,13 @@
+---
+sidebar_position: 1
+title: Token Launch
+description: Learn how to register your tokens on Flow to ensure visibility in wallets and ecosystem projects.
+---
+
+# Token Launch
+
+This section covers the process of registering your tokens on Flow.
+
+### Guides:
+
+- **[Register Your Token](register-token.md)**: Steps to register your Fungible Token on Flow Cadence or ERC20 on Flow EVM so it appears in Flow Wallet, IncrementFi, and other ecosystem apps.

docs/tutorials/token-launch/register-token.md

@@ -0,0 +1,48 @@
+---
+title: Register Your Token on Flow
+description: 'Register tokens to get listed on Flow Wallet, IncrementFi, and other Flow Apps.'
+sidebar_label: Register Token
+sidebar_position: 2
+---
+
+# Register Your Token on Flow
+
+To make your token visible in Flow ecosystem projects like **Flow Wallet** and **IncrementFi**, you need to register it on the Flow Token List. This process will generate JSON files based on Uniswap TokenList Standard and ensures that wallets, explorers, and onchain apps can recognize and display your token correctly.
+
+There are two ways to register your token: **manually** via a web interface or **programmatically** during token deployment.
+
+---
+
+## Manual Registration (~1 min)
+
+The following works for both fungible tokens on Flow Cadence and ERC20 tokens on Flow EVM.
+
+1. **Go to** [Token List Registration](https://token-list.fixes.world/).
+2. **Enter your contract address** in the **"Quick Register"** field and press **Enter**.
+3. **Click "Register"** and sign the transaction.
+   - If your token is **already registered to VM Bridge**, you're done.
+   - Otherwise, the **first transaction** registers the token to **VM Bridge** (costs **1 $FLOW**).
+   - After that, click **"Register"** again and sign the **second transaction** to finalize the process.
+
+---
+
+## Programmatic Registration (~1-2 hrs)
+
+For seamless automation, you can integrate token registration into your token deployment workflow.
+
+### Register ERC-20 Tokens automatically on Flow EVM
+
+- Use this **Cadence transaction**: [register-evm-asset.cdc](https://github.com/fixes-world/token-list/blob/main/cadence/transactions/register-evm-asset.cdc)
+- This transaction should be executed **right after deploying your ERC-20 contract**.
+- **Note:** Similar to manual registration:
+  - If the token **is not bridged** to **VM Bridge**, you will need to **send the transaction twice**.
+  - The **first transaction** deploys a **VM Bridged Cadence contract** for the ERC-20.
+  - The **second transaction** registers it on the Token List.
+
+---
+
+### Next Steps
+
+- Verify your token listing in Flow Wallet.
+
+For any issues, refer to the [Token List GitHub Repository](https://github.com/fixes-world/token-list) or reach out to the [Flow developer community](https://discord.gg/flow).

docusaurus.config.js

@@ -205,11 +205,11 @@ const config = {
         },
         ...(process.env.GTAG
           ? {
-            gtag: {
-              trackingID: process.env.GTAG,
-              anonymizeIP: true,
-            },
-          }
+              gtag: {
+                trackingID: process.env.GTAG,
+                anonymizeIP: true,
+              },
+            }
           : {}),
       }),
     ],
@@ -302,6 +302,12 @@ const config = {
             label: 'Growth',
             activeBasePath: '/growth',
           },
+          {
+            to: 'tutorials',
+            position: 'left',
+            label: 'Tutorials',
+            activeBasePath: '/tutorials',
+          },
           {
             type: 'custom-connectButton',
             position: 'right',

sidebars.js

@@ -18,6 +18,7 @@ const sidebars = {
   evm: [{ type: 'autogenerated', dirName: 'evm' }],
   tools: [{ type: 'autogenerated', dirName: 'tools' }],
   ecosystem: [{ type: 'autogenerated', dirName: 'ecosystem' }],
+  tutorials: [{ type: 'autogenerated', dirName: 'tutorials' }],
 };
 
 module.exports = sidebars;