move files around for tutorials reorg

build/contract-integrations/.pages

@@ -3,9 +3,7 @@ nav:
  - index.md
  - 'Wormhole Relayer': 'wormhole-relayers.md'
  - 'Core Contracts': 'core-contracts.md'
- # - 'Token Bridge': 'token-bridge.md'
  - 'CCTP': 'cctp.md'
  - native-token-transfers
  - multigov
  - 'Development Environment': 'dev-env.md'
- - 'FAQs': 'faqs.md'

build/contract-integrations/wormhole-relayers.md

@@ -138,4 +138,4 @@ See the [Wormhole CLI tool docs](/docs/build/toolkit/cli/) for installation and
 
 ## Step-by-Step Tutorial
 
-For detailed, step-by-step guidance on creating cross-chain contracts that interact with the Wormhole relayer, refer to the [Create Cross-Chain Contracts](/docs/tutorials/messaging/cross-chain-contracts/) tutorial.
+For detailed, step-by-step guidance on creating cross-chain contracts that interact with the Wormhole relayer, refer to the [Create Cross-Chain Contracts](/docs/tutorials/by-product/contract-integrations/cross-chain-contracts/) tutorial.

build/toolkit/solidity-sdk.md

@@ -162,5 +162,5 @@ The SDK includes built-in support for Forge-based testing, which allows you to t
 
 For a detailed example, check out the below repositories:
 
- - [Cross chain messaging](/docs/tutorials/messaging/cross-chain-contracts/){target=\_blank}
- - [Cross chain token transfer](/docs/tutorials/messaging/cross-chain-token-contracts/){target=\_blank}
+ - [Cross chain messaging](/docs/tutorials/by-product/contract-integrations/cross-chain-contracts/){target=\_blank}
+ - [Cross chain token transfer](/docs/tutorials/by-product/contract-integrations/cross-chain-token-contracts/){target=\_blank}

learn/governance/index.md

@@ -63,7 +63,7 @@ Discover everything you need to know about MultiGov, Wormhole's cross-chain gove
 
     Access step-by-step guides for executing cross-chain governance actions, including treasury management proposals with MultiGov and Wormhole.
 
-    [:octicons-arrow-right-16: Create MultiGov solutions](/docs/tutorials/multigov/)
+    [:octicons-arrow-right-16: Create MultiGov solutions](/docs/tutorials/by-product/multigov/)
 
 -   :octicons-question-16:{ .lg .middle } **Technical FAQs**
 

tutorials/.pages

@@ -1,5 +1,5 @@
 title: Tutorials
 nav:
  - index.md
- - messaging
- - multigov
+ - by-product
+# - end-to-end

tutorials/by-product/.pages

@@ -0,0 +1,8 @@
+title: Tutorials by Product
+nav:
+ - index.md
+ - connect
+ - contract-integrations
+ - native-token-transfers
+ - multigov
+ - wormhole-sdk

tutorials/by-product/connect/.pages

@@ -0,0 +1,4 @@
+title: Connect
+nav:
+ - index.md
+ - 'Integrate Connect into a React DApp': react-dapp.md

tutorials/by-product/connect/index.md

@@ -0,0 +1,34 @@
+---
+title: Wormhole Connect Tutorials
+description: Enable cross-chain connectivity with Wormhole Connect. Learn integration and simplify user experiences across multiple blockchains.
+---
+
+# Connect Tutorials
+
+Wormhole Connect makes it simple to link your application to multiple blockchain ecosystems. These tutorials will teach you how to integrate Connect into your projects, streamline cross-chain interactions, simplify user onboarding, and deliver a smoother overall experience.
+
+<div class="grid cards" markdown>
+
+-   :octicons-repo-16:{ .lg .middle } **Integrate Connect into a React DApp**
+
+    ---
+
+    Learn how to incorporate Wormhole Connect into a React application. This step-by-step tutorial guides you through enabling cross-chain token transfers and interactions, bridging assets between networks, and enhancing the user experience with streamlined blockchain connectivity.
+
+    [:octicons-arrow-right-16: Start building](/docs/tutorials/by-product/connect/react-dapp/)
+
+</div>
+
+## Additional Resources
+
+<div class="grid cards" markdown>
+
+-   :octicons-tools-16:{ .lg .middle } **Connect**
+
+    ---
+
+    Get deeper insights into setting up and customizing Wormhole Connect. Explore advanced guides, best practices, and configuration tips to streamline your cross-chain integrations.
+
+    [:octicons-arrow-right-16: Learn more](/docs/build/applications/connect/)
+
+</div>

tutorials/messaging/sui-connect.md → tutorials/by-product/connect/react-dapp.md

@@ -1,9 +1,11 @@
 ---
-title: Transfer Tokens Cross-Chain with Connect
+title: Integrate Connect into a React DApp Tutorial
 description: Learn how to use Wormhole Connect to transfers tokens cross-chain seamlessly between Sui and Avalanche Fuji with this step-by-step guide.
 ---
 
-# Cross-Chain Token Transfers with Wormhole Connect
+# Integrate Connect into a React DApp
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
 
 ## Introduction
 
@@ -127,38 +129,38 @@ To transfer tokens from Sui to Fuji in the Wormhole Connect interface:
 2. Choose **Fuji** as the destination network and connect your wallet with the Fuji network
 3. Enter the amount of SUI tokens you wish to transfer
 
-    ![](/docs/images/tutorials/connect/connect-1.webp)
+    ![](/docs/images/tutorials/by-product/connect/react-dapp/connect-1.webp)
 
 4. Choose to view other routes 
 
-    ![](/docs/images/tutorials/connect/connect-2.webp)
+    ![](/docs/images/tutorials/by-product/connect/react-dapp/connect-2.webp)
 
 5. Select the manual bridge option, which will require two transactions: one on the source chain (Sui) and one on the destination chain (Fuji)
 
     !!! note
         It is recommended to use the manual bridge option for this tutorial. The automatic bridge feature is currently undergoing improvements, while the manual bridge ensures that transfers complete successfully.
 
-    ![](/docs/images/tutorials/connect/connect-3.webp)
+    ![](/docs/images/tutorials/by-product/connect/react-dapp/connect-3.webp)
 
 6. Review and confirm the transfer on Sui. This will lock your tokens on the Sui chain
 
-    ![](/docs/images/tutorials/connect/connect-4.webp)
+    ![](/docs/images/tutorials/by-product/connect/react-dapp/connect-4.webp)
 
 7. Follow the on-screen prompts to approve the transaction. You will be asked to sign with your Sui wallet
 
-    ![](/docs/images/tutorials/connect/connect-5.webp)
+    ![](/docs/images/tutorials/by-product/connect/react-dapp/connect-5.webp)
 
 Once the transaction has been submitted, Wormhole Connect will display the progress of the transfer. Monitor the status until you’re prompted to complete the transaction on the destination chain. You can also track your transactions on [Wormholescan](https://wormholescan.io/#/?network=Testnet){target=\_blank}.
 
 ## Claim Tokens on Fuji
 
 After the Sui transaction is complete, confirm the final transaction on Fuji by claiming the wrapped tokens. You will be asked to confirm the transaction with your Fuji wallet.
 
-![](/docs/images/tutorials/connect/connect-6.webp)
+![](/docs/images/tutorials/by-product/connect/react-dapp/connect-6.webp)
 
 Once confirmed, check your Fuji wallet to verify that the wrapped SUI tokens have been successfully received.
 
-![](/docs/images/tutorials/connect/connect-7.webp)
+![](/docs/images/tutorials/by-product/connect/react-dapp/connect-7.webp)
 
 ## Resources
 

tutorials/by-product/contract-integrations/.pages

@@ -0,0 +1,5 @@
+title: Contract Integrations
+nav:
+ - index.md
+ - 'Create Messaging Contracts': 'cross-chain-contracts.md'
+ - 'Create Token Transfer Contracts': 'cross-chain-token-contracts.md'

tutorials/messaging/cross-chain-contracts.md → tutorials/by-product/contract-integrations/cross-chain-contracts.md

@@ -3,7 +3,7 @@ title: Create Cross-Chain Contracts
 description: Learn how to create cross-chain contracts using Wormhole's Solidity SDK. Deploy contracts on Avalanche and Celo Testnets and send messages across chains.
 ---
 
-# Create Cross-Chain Contracts
+# Create Cross-Chain Messaging Contracts
 
 ## Introduction
 
@@ -55,15 +55,15 @@ Key functions include:
 Here's the core of the contract:
 
 ```solidity
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-1.sol:24:43"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-1.sol:24:43"
 ```
 
 You can find the full code for the `MessageSender.sol` below.
 
 ??? code "MessageSender.sol"
 
     ```solidity
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-1.sol"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-1.sol"
     ```
 
 ### Receiver Contract: MessageReceiver
@@ -81,24 +81,24 @@ Key implementation details include:
  - **`isRegisteredSender`** - restricts the processing of messages to only those from registered senders, preventing unauthorized cross-chain communication
 
 ```solidity
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-2.sol:12:13"
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-2.sol:22:39"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-2.sol:12:13"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-2.sol:22:39"
 ```
 
 #### Message Processing
 
 The `receiveWormholeMessages` is the core function that processes the received message. It checks that the Wormhole relayer sent the message, decodes the payload, and emits an event with the message content. It is essential to verify the message sender to prevent unauthorized messages.
 
 ```solidity
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-2.sol:42:64"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-2.sol:42:64"
 ```
 
 You can find the full code for the `MessageReceiver.sol` below.
 
 ??? code "MessageReceiver.sol"
 
     ```solidity
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-2.sol"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-2.sol"
     ```
 
 ## Deploy Contracts
@@ -165,7 +165,7 @@ The repository includes:
 
 The expected output should be similar to this:
 
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-7.html"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-7.html"
 
 ### Deployment Process
 
@@ -176,19 +176,19 @@ Both deployment scripts, `deploySender.js` and `deployReceiver.js`, perform the
     === "`chains.json`"
 
         ```json
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-9.json"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-9.json"
         ```
 
     === "`deploySender.js`"
 
         ```javascript
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-5.js:7:15"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-5.js:7:15"
         ```
 
     === "`deployReceiver.js`"
 
         ```javascript
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-6.js:7:15"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-6.js:7:15"
         ```
 
     !!! note
@@ -199,49 +199,49 @@ Both deployment scripts, `deploySender.js` and `deployReceiver.js`, perform the
     === "`deploySender.js`"
 
         ```javascript
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-5.js:18:19"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-5.js:18:19"
         ```
 
     === "`deployReceiver.js`"
 
         ```javascript
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-6.js:18:19"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-6.js:18:19"
         ```
 
 3. **Deploy the contract** - the contract is deployed to the network specified in the configuration. Upon successful deployment, the contract address is returned, which is crucial for interacting with the contract later on
 
     === "`deploySender.js`"
 
         ```javascript
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-5.js:36:39"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-5.js:36:39"
         ```
 
     === "`deployReceiver.js`"
 
         ```javascript
-        --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-6.js:39:42"
+        --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-6.js:39:42"
         ```
 
 4. **Register the `MessageSender` on the target chain** - after you deploy the `MessageReceiver` contract on the Celo Alfajores network, the sender contract address from Avalanche Fuji needs to be registered. This ensures that only messages from the registered `MessageSender` contract are processed
 
     This additional step is essential to enforce emitter validation, preventing unauthorized senders from delivering messages to the `MessageReceiver` contract
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-6.js:55:66"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-6.js:55:66"
     ```
 
 You can find the full code for the `deploySender.js` and `deployReceiver.js` below.
 
 ??? code "deploySender.js"
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-5.js"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-5.js"
     ```
 
 ??? code "deployReceiver.js"
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-6.js"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-6.js"
     ```
 
 ### Deploy the Sender Contract
@@ -256,7 +256,7 @@ The sender contract will handle quoting and sending messages cross-chain.
 
 2. Once deployed, the contract address will be displayed. You may check the contract on the [Avalanche Fuji Explorer](https://testnet.snowtrace.io/){target=\_blank}
 
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-8.html"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-8.html"
 
 
 ### Deploy the Receiver Contract
@@ -286,53 +286,53 @@ Let's break down the script step by step.
     2. **`deployedContracts.json`** - stores the addresses of the deployed sender and receiver contracts. This file is dynamically updated when contracts are deployed, but users can also manually add their own deployed contract addresses if needed
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:8:16"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:8:16"
     ```
 
 2. **Configure the provider and signer** - the script first reads the chain configurations and extracts the contract addresses. One essential step in interacting with a blockchain is setting up a _provider_. A provider is your connection to the blockchain network. It allows your script to interact with the blockchain, retrieve data, and send transactions. In this case, we're using a JSON-RPC provider
 
     Next, we configure the wallet, which will be used to sign transactions. The wallet is created using the private key and the provider. This ensures that all transactions sent from this wallet are broadcast to the Avalanche Fuji network:
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:34:35"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:34:35"
     ```
 
     After setting up the wallet, the script loads the ABI for the `MessageSender.sol` contract and creates an instance of it:
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:38:43"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:38:43"
     ```
 
 3. **Set up the message details** - the next part of the script defines the target chain (Celo) and the target address (the receiver contract on Celo):
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:55:56"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:55:56"
     ```
 
     You can customize the message that will be sent across chains:
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:59:59"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:59:59"
     ```
 
 4. **Estimate cross-chain cost** - before sending the message, we dynamically calculate the cross-chain cost using the `quoteCrossChainCost` function:
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:62:62"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:62:62"
     ```
 
     This ensures that the transaction includes enough funds to cover the gas fees for the cross-chain message.
 
 5. **Send a message** - with everything set up, the message is sent using the `sendMessage` function:
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:65:72"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:65:72"
     ```
 
     After sending, the script waits for the transaction to be confirmed:
 
     ```javascript
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js:75:75"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js:75:75"
     ```
 
 6. **Run the script** - to send the message, run the following command:
@@ -345,14 +345,14 @@ If everything is set up correctly, the message will be sent from the Avalanche F
 
 The console should output something similar to this:
 
---8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-4.html"
+--8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-4.html"
 
 You can find the full code for the `sendMessage.js` below.
 
 ??? code "sendMessage.js"
 
     ```solidity
-    --8<-- "code/tutorials/messaging/cross-chain-contracts/snippet-3.js"
+    --8<-- "code/tutorials/by-product/contract-integrations/cross-chain-contracts/snippet-3.js"
     ```
 
 ## Conclusion