Repository: wormhole-foundation/wormhole-docs
Pull request #375: Connect - Get Started page
Author: login: dawnkelly09
Labels: name: A1 - Maintenance Major
description: Pull request contains major updates to an existing page (i.e., adding a new section, reorgs, etc.)
name: B1 - Ready to Merge
description: Pull request is ready to be merged
Created: 2025-04-24T19:52:08Z | Merged: 2025-05-13T04:33:09Z

### Description

This PR does the following:
- adds markdown, code snippet, and image for Get Started with Connect page
- I did not delete or remove any existing content, images, or snippets to make these changes

Marked as TODO:
- The links to demo repo and deployed app will change. They are pointing to a temp home on my GH until I can reach out to WH team to get them approved and moved
- The Next Steps section is currently blank until we decide how to style things

### Checklist

- [ x] **Required** - I have added a label to this PR 🏷️
- [ x] **Required** - I have run my changes through Grammarly
- [n/a ] If pages have been moved, I have created redirects in the `wormhole-mkdocs` repo



Diff:
diff --git a/.snippets/code/products/connect/configuration/get-started/App.tsx b/.snippets/code/products/connect/configuration/get-started/App.tsx
new file mode 100644
index 000000000..4740d2bad
--- /dev/null
+++ b/.snippets/code/products/connect/configuration/get-started/App.tsx
@@ -0,0 +1,30 @@
+import './App.css';
+import WormholeConnect, {
+  WormholeConnectConfig,
+  WormholeConnectTheme,
+} from '@wormhole-foundation/wormhole-connect';
+
+function App() {
+  const config: WormholeConnectConfig = {
+    // Define the network
+    network: 'Testnet',
+
+    // Define the chains
+    chains: ['Sui', 'Avalanche'],
+
+    // UI configuration
+    ui: {
+      title: 'SUI Connect TS Demo',
+    },
+  };
+
+  const theme: WormholeConnectTheme = {
+    // Define the theme
+    mode: 'dark',
+    primary: '#78c4b6',
+  };
+
+  return <WormholeConnect config={config} theme={theme} />;
+}
+
+export default App;
diff --git a/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp b/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp
new file mode 100644
index 000000000..f6ebe452f
Binary files /dev/null and b/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp differ
diff --git a/products/connect/get-started.md b/products/connect/get-started.md
index 30404ce4c..9d1386f7c 100644
--- a/products/connect/get-started.md
+++ b/products/connect/get-started.md
@@ -1 +1,76 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: Follow this guide to configure and use the Connect UI widget to easily add an intuitive, multichain asset transfer UI to your web applications.  
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how to configure the Connect widget, add it to a React application, and view it locally.
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank}
+
+- (Optional) To test a transfer from your demo app, you'll need:
+
+    - A wallet with [Sui testnet tokens](https://faucet.sui.io/){target=\_blank}
+    - A wallet with an Avalanche Fuji address (to use as the recipient; no tokens required)
+
+## Install and Setup Project
+
+1. Clone the demo repository and navigate to the project directory:
+
+    ```bash
+    git clone https://github.com/wormhole-foundation/demo-basic-connect.git
+    cd demo-basic-connect
+    ```
+
+2. Install the dependencies:
+
+    ```bash
+    npm install
+    ```
+
+3. Start the application:
+
+    ```bash
+    npm start
+    ```
+
+4. Open your browser to [localhost:3000](http://localhost:3000){target=\_blank} to view the application locally. It will look similar to the following:
+
+    ![Deployed Connect Widget](/docs/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp)
+
+## Configure Connect
+
+Open the `App.tsx` file in your code editor of choice. You will see code similar to the following:
+
+```typescript title="App.tsx"
+--8<-- 'code/products/connect/configuration/get-started/App.tsx'
+```
+
+The preceding sample code configures Connect by setting values inside `config` and `theme` as follows:
+
+- **Defines the network** - options include `Mainnet`, `Testnet`, or `Devnet`
+- **Defines chains to include** - this example uses Sui and Avalanche. See the complete list of [Connect-supported chain names](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts){target=\_blank} if you would like to use different chains
+- **Adds a title to UI** - (optional) if defined, it will render above the widget in the UI
+- **Defines the theme** - this example sets the mode to `dark` and adds a primary color
+
+## Interact with Connect
+
+Congratulations! You've successfully used Connect to create a simple multichain token transfer application. You can now follow the prompts in the UI to connect your developer wallets and send a test transfer.
+
+## Next Steps
+
+For more `config` options, see the [Connect Data Configuration](/docs/products/connect/configuration/data/){target=\_blank} guide.
+
+For more `theme` options, see the [Connect Theme Configuration](/docs/products/connect/configuration/theme/){target=\_blank} guide.
+
+<!--TODO: links to other guides and tutorials. Definitely want to feature using Connect to interact with your NTT deployment-->


Reviews:
user: login: martin0995
body: Great job! LGTM!
Tested it and it worked on my end
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T11:34:09Z
user: login: eshaben
body: Nice job!
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T01:20:43Z
user: login: eshaben
body: LGTM!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T03:53:12Z

Review comments:
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view the application locally.
path: products/connect/get-started.md
user: login: martin0995
body: ```suggestion
Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view it locally.
```
created_at: 2025-05-08T11:14:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,30 @@
+import './App.css';
path: .snippets/code/products/connect/configuration/get-started/App.tsx
user: login: eshaben
body: Spacing is off in this file. Please run prettier on it
created_at: 2025-05-09T01:07:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
path: products/connect/get-started.md
user: login: eshaben
body: Please don't forget about this!
created_at: 2025-05-09T01:08:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view the application locally.
path: products/connect/get-started.md
user: login: eshaben
body: how-to should be how to (no hyphen)
created_at: 2025-05-09T01:09:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view the application locally.
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank}
+
+- **Optional** - if you would like to send a testnet transfer using your demo application, you will also need the following:
+
+    - **Developer wallet with Sui testnet tokens** - you can use the [Sui Testnet Faucet](https://faucet.sui.io/){target=\_blank} to obtain tokens
+    - **Developer wallet with Avalanche Fuji address** - to use as the recipient address; no tokens required
path: products/connect/get-started.md
user: login: eshaben
body: ```suggestion
- (Optional) To test a transfer from your demo app, you'll need:

    - A wallet with [Sui testnet tokens](https://faucet.sui.io/){target=\_blank}
    - A wallet with an Avalanche Fuji address (to use as the recipient; no tokens required)
```

To make it more concise
created_at: 2025-05-09T01:10:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view the application locally.
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank}
+
+- **Optional** - if you would like to send a testnet transfer using your demo application, you will also need the following:
+
+    - **Developer wallet with Sui testnet tokens** - you can use the [Sui Testnet Faucet](https://faucet.sui.io/){target=\_blank} to obtain tokens
+    - **Developer wallet with Avalanche Fuji address** - to use as the recipient address; no tokens required
+
+## Install and Setup Project
+
+1. Clone the demo repository and navigate to the project directory:
+
+    ```bash
+    git clone https://github.com/wormhole-foundation/demo-basic-connect.git
+    cd demo-basic-connect
+    ```
+
+2. Install the dependencies:
+
+    ```bash
+    npm install
+    ```
+
+3. Start the application:
+
+    ```bash
+    npm start
+    ```
+
+4. Open your browser to [localhost:3000](http://localhost:3000){target=\_blank} to view the application locally. It will look similar to the following:
+
+    ![Deployed Connect Widget](/docs/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp)
+
+## Configure Connect
+
+Open the `App.tsx` file in your code editor of choice. You will see code similar to the following:
+
+```typescript title="App.tsx"
+--8<-- 'code/products/connect/configuration/get-started/App.tsx'
+```
+
+The preceding sample code configures Connect by setting values inside `config` and `theme` as follows:
+
+- **Define the network** - options include `Mainnet`, `Testnet`, or `Devnet`
+- **Define chains to include** - this example uses Sui and Avalanche. See the complete list of [Connect-supported chain names](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts){target=\_blank} if you would like to use different chains
+- **Add a title to UI** - optional. If defined, it will render above the widget in the UI
+- **Define the theme** - this example sets mode to `dark` and adds a primary color
path: products/connect/get-started.md
user: login: eshaben
body: ```suggestion
The preceding sample code configures Connect by setting values inside `config` and `theme` as follows:

- **Defines the network** - options include `Mainnet`, `Testnet`, or `Devnet`
- **Defines chains to include** - this example uses Sui and Avalanche. See the complete list of [Connect-supported chain names](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts){target=\_blank} if you would like to use different chains
- **Adds a title to UI** - (optional) if defined, it will render above the widget in the UI
- **Defines the theme** - this example sets the mode to `dark` and adds a primary color
```

These items sounded slightly off being action-oriented because we're reflecting on what the code does and describing it rather than instructing users to change these items. 
created_at: 2025-05-09T01:19:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view the application locally.
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank}
+
+- **Optional** - if you would like to send a testnet transfer using your demo application, you will also need the following:
+
+    - **Developer wallet with Sui testnet tokens** - you can use the [Sui Testnet Faucet](https://faucet.sui.io/){target=\_blank} to obtain tokens
+    - **Developer wallet with Avalanche Fuji address** - to use as the recipient address; no tokens required
+
+## Install and Setup Project
+
+1. Clone the demo repository and navigate to the project directory:
+
+    ```bash
+    git clone https://github.com/wormhole-foundation/demo-basic-connect.git
+    cd demo-basic-connect
+    ```
+
+2. Install the dependencies:
+
+    ```bash
+    npm install
+    ```
+
+3. Start the application:
+
+    ```bash
+    npm start
+    ```
+
+4. Open your browser to [localhost:3000](http://localhost:3000){target=\_blank} to view the application locally. It will look similar to the following:
+
+    ![Deployed Connect Widget](/docs/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp)
+
+## Configure Connect
+
+Open the `App.tsx` file in your code editor of choice. You will see code similar to the following:
+
+```typescript title="App.tsx"
+--8<-- 'code/products/connect/configuration/get-started/App.tsx'
+```
+
+The preceding sample code configures Connect by setting values inside `config` and `theme` as follows:
+
+- **Define the network** - options include `Mainnet`, `Testnet`, or `Devnet`
+- **Define chains to include** - this example uses Sui and Avalanche. See the complete list of [Connect-supported chain names](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts){target=\_blank} if you would like to use different chains
+- **Add a title to UI** - optional. If defined, it will render above the widget in the UI
+- **Define the theme** - this example sets mode to `dark` and adds a primary color
+
+For more `config` options, see the [Connect Data Configuration](/docs/products/connect/configuration/data/){target=\_blank} guide.
+
+For more `theme` options, see the [Connect Theme Configuration](/docs/products/connect/configuration/theme/){target=\_blank} guide.
path: products/connect/get-started.md
user: login: eshaben
body: Maybe these can go in next steps?
created_at: 2025-05-09T01:20:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1 +1,81 @@
-TODO
\ No newline at end of file
+---
+title: Get Started with Connect
+description: TODO 
+categories: Connect, Transfer
+---
+
+# Get Started with Connect
+
+:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}
+
+## Introduction
+
+Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how-to configure the Connect widget, add it to a React application, and view the application locally.
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank}
+
+- **Optional** - if you would like to send a testnet transfer using your demo application, you will also need the following:
+
+    - **Developer wallet with Sui testnet tokens** - you can use the [Sui Testnet Faucet](https://faucet.sui.io/){target=\_blank} to obtain tokens
+    - **Developer wallet with Avalanche Fuji address** - to use as the recipient address; no tokens required
+
+## Install and Setup Project
+
+1. Clone the demo repository and navigate to the project directory:
+
+    ```bash
+    git clone https://github.com/wormhole-foundation/demo-basic-connect.git
+    cd demo-basic-connect
+    ```
+
+2. Install the dependencies:
+
+    ```bash
+    npm install
+    ```
+
+3. Start the application:
+
+    ```bash
+    npm start
+    ```
+
+4. Open your browser to [localhost:3000](http://localhost:3000){target=\_blank} to view the application locally. It will look similar to the following:
+
+    ![Deployed Connect Widget](/docs/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp)
+
+## Configure Connect
+
+Open the `App.tsx` file in your code editor of choice. You will see code similar to the following:
+
+```typescript title="App.tsx"
+--8<-- 'code/products/connect/configuration/get-started/App.tsx'
+```
+
+The preceding sample code configures Connect by setting values inside `config` and `theme` as follows:
+
+- **Define the network** - options include `Mainnet`, `Testnet`, or `Devnet`
+- **Define chains to include** - this example uses Sui and Avalanche. See the complete list of [Connect-supported chain names](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts){target=\_blank} if you would like to use different chains
+- **Add a title to UI** - optional. If defined, it will render above the widget in the UI
+- **Define the theme** - this example sets mode to `dark` and adds a primary color
+
+For more `config` options, see the [Connect Data Configuration](/docs/products/connect/configuration/data/){target=\_blank} guide.
+
+For more `theme` options, see the [Connect Theme Configuration](/docs/products/connect/configuration/theme/){target=\_blank} guide.
+
+## Interact with Connect
+
+Congratulations! You've successfully used Connect to create a simple multichain token transfer application. You can now follow the prompts in the UI to connect your developer wallets and send a test transfer.
+
+## Next Steps
+
+<!--TODO: links to other guides and tutorials. Definitely want to feature using Connect to interact with your NTT deployment-->
+
+
+
+
+
path: products/connect/get-started.md
user: login: eshaben
body: ```suggestion
```
created_at: 2025-05-09T01:20:24Z
author_association: CONTRIBUTOR

PR comments:
user: login: dawnkelly09
created_at: 2025-04-29T15:27:57Z
body: Coverted to draft while I update to work with the [existing demo repo](https://github.com/wormhole-foundation/demo-basic-connect/blob/77cfc4f549170bbb891a2b766f87a1590fa7b9d0/src/App.tsx)
author_association: CONTRIBUTOR
user: login: dawnkelly09
created_at: 2025-04-29T18:27:21Z
body: Waiting on more info about a possible bug I found when trying to send a test transfer. Need to get a resolution on that before we ship this. 
author_association: CONTRIBUTOR
user: login: dawnkelly09
created_at: 2025-05-02T15:26:06Z
body: Was told there was some sort of fix and to try again but I'm still having issues. Reached back out to WH team. 
author_association: CONTRIBUTOR
user: login: dawnkelly09
created_at: 2025-05-06T13:47:15Z
body: Works now! The problem was something with Slush wallet. I used Suiet wallet and no issues. 
author_association: CONTRIBUTOR