wormhole-foundation · ilariae · Feb 4, 2025 · Jan 24, 2025 · Jan 24, 2025 · Jan 24, 2025
@@ -0,0 +1,13 @@
+import WormholeConnect, {
+  WormholeConnectConfig,
+} from '@wormhole-foundation/wormhole-connect';
+
+const config: WormholeConnectConfig = {
+  ui: {
+    disableUserInputtedTokens: true
+  }
+};
+
+function App() {
+  return <WormholeConnect config={config} />;
+}
@@ -0,0 +1,18 @@
+import WormholeConnect, {
+  WormholeConnectConfig,
+} from '@wormhole-foundation/wormhole-connect';
+
+const config: WormholeConnectConfig = {
+  chains: ['Ethereum', 'Solana'],
+  tokens: [
+    // Whitelist BONK on every whitelisted chain
+    'BONK',
+    // Also whitelist USDC, specifically on Solana
+    ['Solana', 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v']
+  ],
+  ...
+};
+
+function App() {
+  return <WormholeConnect config={config} />;
+}
@@ -13,13 +13,11 @@ const config: WormholeConnectConfig = {
     BONK: {
       key: 'BONK',
       symbol: 'BONK',
-      nativeChain: 'Ethereum',
-      icon: Icon.ETH,
+      icon: 'https://assets.coingecko.com/coins/images/28600/large/bonk.jpg?1696527587',
       tokenId: {
         chain: 'Ethereum',
         address: '0x1151CB3d861920e07a38e03eEAd12C32178567F6',
       },
-      coinGeckoId: 'bonk',
       decimals: 18,
     },
   },

@@ -0,0 +1,34 @@
+import WormholeConnect, {
+  WormholeConnectConfig,
+} from '@wormhole-foundation/wormhole-connect';
+
+const config: WormholeConnectConfig = {
+  transactionSettings: {
+    Solana: {
+      priorityFee: {
+        // Number between 0-1, defaults to 0.9. Higher percentile yields higher fees.
+        // For example, you can set percentile to 0.95 to make Connect compute the
+        // 95th percentile priority fee amount based on recent transactions
+        percentile: 0.95,
+
+        // Any number, defaults to 1.0. The fee amount is multiplied by this number.
+        // This can be used to further raise or lower the fees Connect is using.
+        // For example, percentile=0.95 and percentileMultiple=1.1 would use
+        // the 95th percentile fee, with a 10% increase
+        percentileMultiple: 1.1,
+
+        // Minimum fee you want to use in microlamports, regardless of recent transactions
+        // Defaults to 1
+        min: 200_000,
+
+        // Maximum fee you want to use in microlamports, regardless of recent transactions
+        // Defaults to 100,000,000
+        max: 5_000_000,
+      }
+    }
+  }
+};
+
+function App() {
+  return <WormholeConnect config={config} />;
+}
@@ -175,7 +175,6 @@ The `WormholeConnectTheme` type supports the following properties:
 |            `textSecondary`             |                 Secondary color used for dimmer text                  |      `"#AABBCC"`      |
 |                `error`                 |         Color to display errors in, usually some shade of red         |      `"#AABBCC"`      |
 |               `success`                |                 Color to display success messages in                  |      `"#AABBCC"`      |
-|                `badge`                 |                 Background color used for chain logos                 |      `"#AABBCC"`      |
 |                 `font`                 | Font used in the UI, can be custom font available in your application | `"Arial; sans-serif"` |
 
 ## More Configuration Options {: #more-configuration-options }

@@ -118,6 +118,35 @@ You can customize the tokens shown in the UI using the' tokens' property. In the
 --8<-- 'code/build/applications/connect/configuration/custom-tokens-whitelist.jsx'
 ```
 
+You can whitelist tokens by symbol or by specifying tuples of [chain, address]. For example, this would show only BONK token (on all chains you've whitelisted) as well as [`EPjFW...TDt1v`](https://solscan.io/token/EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v){target=\_blank} on Solana, which is USDC.
+
+```jsx
+--8<-- 'code/build/applications/connect/configuration/custom-tokens-whitelist-advanced.jsx'
+```
+
+### User-Inputted Tokens {: #user-inputted-tokens }
+
+As of version 2.0, Connect allows users to paste token addresses to bridge any token they want. As an integrator, you may want to disable this feature if you are deploying Connect for use only with a specific token(s).
+
+If you provide a token whitelist (see above), this is turned off automatically. However, you can also disable it explicitly like this:
+
+```jsx
+--8<-- 'code/build/applications/connect/configuration/custom-disable-arbitrary-tokens.jsx'
+```
+
+Setting `ui.disableUserInputtedTokens` to `true` will disable the ability to paste in token addresses.
+
+### Transaction Settings {: #transaction-settings }
+
+Landing transactions on Solana can require finely tuned priority fees when there is congestion. You can tweak how Connect determines these with `transactionSettings`. All of the parameters in this configuration are optional; you can provide any combination of them.
+
+```jsx
+--8<-- 'code/build/applications/connect/configuration/custom-tx-settings-solana.jsx'
+```
+
+!!! note
+    Connect can calculate fees more accurately if you are using a [Triton](https://triton.one){target=\_blank} RPC endpoint.
+
 ### Wallet Set Up  {: #reown-cloud-project-id }
 
 Your selected blockchain network determines the available wallet options when using Wormhole Connect.

@@ -35,7 +35,6 @@ The `WormholeConnectTheme` type supports the following properties:
 |            `textSecondary`             |                 Secondary color used for dimmer text                  |      `"#AABBCC"`      |
 |                `error`                 |         Color to display errors in, usually some shade of red         |      `"#AABBCC"`      |
 |               `success`                |                 Color to display success messages in                  |      `"#AABBCC"`      |
-|                `badge`                 |                 Background color used for chain logos                 |      `"#AABBCC"`      |
 |                 `font`                 | Font used in the UI, can be custom font available in your application | `"Arial; sans-serif"` |
 
 ### Toggle Hamburger Menu {: #toggle-hamburger-menu }