diff --git a/.github/workflows/lint.yml b/.github/workflows/build.yml similarity index 98% rename from .github/workflows/lint.yml rename to .github/workflows/build.yml index 9f3945e85..6db585b59 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/build.yml @@ -1,4 +1,4 @@ -name: Lint +name: Build on: pull_request: diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index e2df203fc..723a7bf56 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -25,9 +25,11 @@ jobs: - run: npm run lint:ci - run: | IFS='@' read -a strarr <<< $(git describe --tags) - sed -i "s/\"version\": .*/\"version\": \"${strarr[1]}$(echo $([ ${strarr[0]} == "production" ] && echo "" || echo "-${strarr[0]}"))\",/" wormhole-connect-loader/package.json + sed -i "s/\"version\": .*/\"version\": \"${strarr[1]}$(echo $([ ${strarr[0]} == "production" ] && echo "" || echo "-${strarr[0]}"))\",/" wormhole-connect/package.json npm run build - cd wormhole-connect-loader + cp README.md wormhole-connect/ + cp wormhole-connect.png wormhole-connect/ + cd wormhole-connect npm publish --tag $(echo $([ ${strarr[0]} == "production" ] && echo "latest" || echo ${strarr[0]})) --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bd33e4b64..2aa1432c7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,3 +1,31 @@ +## Contributing + +Contributions are welcome! To work on wormhole-connect locally you'll want to use `npm link` to make the changes to the SDK immediately available. + +### Setup + +1) Install + +Run `npm i` at the root of the repo + +2) Build + +Run `npm run build` at the root fo the repo + +3) Start + +Start wormhole-connect UI and view in browser at localhost:3000 +```bash +# in /wormhole-connect +npm run start # testnet +``` + +Start builder UI and view in browser at localhost:3000 +```bash +# in /builder +npm run start +``` + ## Add a token ### Fill out token config @@ -52,4 +80,4 @@ Copy the outputted list and paste it into `src/consts/wallet.ts` as the value of 1. Make a GitHub release 2. Tag it `production@0.1.3` -3. Trigger the 'publish' GitHub action and fill in the tag when prompted, which will publish to NPM \ No newline at end of file +3. Trigger the 'publish' GitHub action and fill in the tag when prompted, which will publish to NPM diff --git a/README.md b/README.md index 24b46abd9..874c741e0 100644 --- a/README.md +++ b/README.md @@ -1,87 +1,408 @@ # Wormhole Connect -Wormhole Connect is a project to facilitate integration with the Wormhole protocol. It is thus far comprised of 3 components: wormhole-connect, sdk and builder. Below is a brief introduction on each, see the corresponding READMEs for more information. +[![npm version](https://img.shields.io/npm/v/@wormhole-foundation/wormhole-connect.svg)](https://www.npmjs.com/package/@wormhole-foundation/wormhole-connect) ![CI build](https://github.com/wormhole-foundation/wormhole-connect/actions/workflows/lint.yml/badge.svg) -### Wormhole Connect +Wormhole Connect is a customizable React widget that can perform cross-chain bridging with Wormhole. -An app that brings all the functionality and utility of the Wormhole token bridge right into your application and removes all of the complexity. It is built to be embedded within any application, simply copy a script tag or install the [npm package](https://www.npmjs.com/package/@wormhole-foundation/wormhole-connect). +[![Wormhole Connect running on Portal Bridge](https://i.imgur.com/sZJKw8e.png)](https://portalbridge.com/) -Optionally, configure a number of parameters such as supported chains/tokens and theme. +## Demo -Read more [here](./wormhole-connect/README.md) +Wormhole Connect is deployed live in several production apps. Here are a few: -### Customizer +- [Portal Bridge](https://portalbridge.com/) +- [Jupiter](https://jup.ag/bridge/wormhole) +- [Pancake Swap](https://bridge.pancakeswap.finance/wormhole) -Customize and integrate via our no-code solution: https://connect-in-style.wormhole.com/ -### SDK - -The beginning of a refactor of the existing sdk. It is written in Typescript and is built with ease-of-use in mind. It is organized into different `context` classes (i.e. evm, solana, terra, etc) which each implement the same methods with standardized parameters. +## Integration -Read more [here](./sdk/README.md) +You can customize and integrate via our no-code solution: https://connect-in-style.wormhole.com/ -### Builder +### Via NPM (for React apps) -Initially this serves as a way to test integrating wormhole-connect. +If you're using React, you can import the `` component directly into your JSX: -In the future, this will become a playground where developers can come to customize their integration by selecting the chain and tokens they would like to support as well as edit theme variables to make it blend seamlessly within their application. +```bash +npm i @wormhole-foundation/wormhole-connect +``` -Read more [here](./builder/README.md) +```javascript +import WormholeConnect from '@wormhole-foundation/wormhole-connect'; +function App() { + return ( + + ); +} +``` -## Integration +### Alternative: hosted version via CDN (for any website) -Include the wormhole connect +If you're not using React, you can still embed Connect on your website by using the hosted version. Simply copy and paste the following code into your HTML: ```html - - - + + + - +
``` -OR +Note that the `wormhole-connect` div with your config has to be present _before_ the scripts are loaded. + +## Configuration + +Wormhole Connect is highly customizable via a simple `config` object passed in as a React prop: + +```jsx + +``` + +See `WormholeConnectConfig` in [src/config/index.ts](../wormhole-connect/src/config/index.ts) +for a full view of the supported config parameters. + +See [src/config/examples.md](../wormhole-connect/src/config/examples.md) +for working examples of different config values. + +### Environment (`env`): +| Mainnet | Testnet | +| ---------- | --------- | +| mainnet | testnet | + +
+ +### Networks (`networks`): +| Mainnet | Testnet | +| ---------- | ------------- | +| ethereum | goerli, sepolia | +| polygon | mumbai | +| bsc | bsc | +| avalanche | fuji | +| celo | avalanche | +| moonbeam | moonbasealpha | +| solana | solana | +| sui | sui | +| aptos | aptos | +| base | basegoerli, base_sepolia | +| osmosis | osmosis | +| evmos | evmos | +| kujira | kujira | +| injective | injective | +| klaytn | klaytn | +| arbitrum | arbitrumgoerli, arbitrum_sepolia | +| optimism | optimismgoerli, optimism_sepolia | + +> Osmosis support is in beta, reach out to a Wormhole contributor for early access. + +
+ +### RPCs (`rpcs`): + +We recommend that you configure your own custom RPC endpoints for each used network for the best performance. The default public RPCs may be throttled or rate limited. +See [src/config/examples.md](../wormhole-connect/src/config/examples.md). + +
+ +### Tokens (`tokens`): +| Mainnet | Testnet | +| ----------- | -------- | +| ETH | ETH, ETHsepolia | +| WETH | WETH, WETHsepolia | +| USDCeth | USDCeth | +| WBTC | | +| USDT | | +| DAI | | +| BUSD | | +| MATIC | MATIC | +| WMATIC | WMATIC | +| USDCpolygon | | +| BNB | BNB | +| WBNB | WBNB | +| USDCbnb | | +| AVAX | AVAX | +| WAVAX | WAVAX | +| USDCavax | USDCavax | +| FTM | FTM | +| WFTM | WFTM | +| CELO | CELO | +| GLMR | GLMR | +| WGLMR | WGLMR | +| SOL | WSOL | +| PYTH | | +| SUI | SUI | +| USDCsol | | +| APT | APT | +| ETHarbitrum | ETHarbitrum, ETHarbitrum_sepolia | +| WETHarbitrum | WETHarbitrum, WETHarbitrum_sepolia | +| USDCarbitrum | USDCarbitrum| +| ETHoptimism | ETHoptimism, ETHoptimism_sepolia | +| WETHoptimism | WETHoptimism, WETHoptimism_sepolia | +| USDCoptimism | USDCoptimism| +| ETHbase | ETHbase, ETHbase_sepolia | +| WETHbase | WETHbase, WETHbase_sepolia | +| tBTC | tBTC | +| tBTCpolygon | tBTCpolygon | +| tBTCoptimism | tBTCoptimism | +| tBTCarbitrum | tBTCarbitrum | +| tBTCbase | tBTCbase | +| tBTCsol | tBTCsol | +| WETHpolygon | | +| WETHbsc | | +| wstETH | wstETH | +| wstETHarbitrum | | +| wstETHoptimism | | +| wstETHpolygon | | +| wstETHbase | | + +
+ +### Adding Tokens (`tokensConfig`) + +You can add arbitrary tokens to the Connect tokens menu by providing a `tokensConfig` key. +See the "Arbitrary Token" example in [src/config/examples.md](../wormhole-connect/src/config/examples.md). + + +
+ +### Routes (`routes`) +| Mainnet | Testnet | +| -------- | ---------| +| bridge | bridge | +| relay | relay | +| cctpManual | cctpManual | +| cctpRelay | cctpRelay | +| cosmosGateway | cosmosGateway | +| tbtc | tbtc | +| ethBridge | | +| wstETHBridge | | + +
+ +### Theme (`customTheme`) + +See [theme.ts](../wormhole-connect/src/theme.ts) for examples + + +### Examples + +(Optional) Specify supported networks/tokens and custom RPC endpoints. Your users may encounter rate limits using public RPC endpoints if you do not provide your own + +```jsx +import WormholeBridge, { + WormholeConnectConfig, +} from "@wormhole-foundation/wormhole-connect"; +const config: WormholeConnectConfig = { + env: "mainnet", + networks: ["ethereum", "polygon", "solana"], + tokens: ["ETH", "WETH", "MATIC", "WMATIC"], + rpcs: { + ethereum: "https://rpc.ankr.com/eth", + solana: "https://rpc.ankr.com/solana", + }, +}; -```javascript -import WormholeBridge from '@wormhole-foundation/wormhole-connect'; function App() { - return ( - - ); + return ; } ``` +(Optional) Customize theme -## Contributing +```jsx +import WormholeBridge, { + light, + Theme, + WormholeConnectConfig, +} from "@wormhole-foundation/wormhole-connect"; +import lightblue from "@mui/material/colors/lightBlue"; -Contributions are welcome! To work on wormhole-connect locally you'll want to use `npm link` to make the changes to the SDK immediately available. +// alters the `light` theme +const customized: Theme = light; +customized.success = lightblue; +customized.background.default = "transparent"; +customized.button.action = "#81c784"; +customized.button.actionText = "#000000"; -### Setup +const config: WormholeConnectConfig = { + mode: "light", + customTheme: customized, +}; -1) Install +function App() { + return ; +} +``` -Run `npm i` at the root of the repo +(Optional) Create fully customized theme + +```jsx +import WormholeBridge, { + Theme, + OPACITY, + WormholeConnectConfig, +} from "@wormhole-foundation/wormhole-connect"; +import lightblue from "@mui/material/colors/lightBlue"; +import grey from "@mui/material/colors/grey"; +import green from "@mui/material/colors/green"; +import orange from "@mui/material/colors/orange"; + +const customized: Theme = { + primary: grey, + secondary: grey, + divider: "#ffffff" + OPACITY[20], + background: { + default: "#232323", + }, + text: { + primary: "#ffffff", + secondary: grey[500], + }, + error: red, + info: lightblue, + success: green, + warning: orange, + button: { + primary: "#ffffff" + OPACITY[20], + primaryText: "#ffffff", + disabled: "#ffffff" + OPACITY[10], + disabledText: "#ffffff" + OPACITY[40], + action: orange[300], + actionText: "#000000", + hover: "#ffffff" + OPACITY[7], + }, + options: { + hover: "#474747", + select: "#5b5b5b", + }, + card: { + background: "#333333", + secondary: "#474747", + elevation: "none", + }, + popover: { + background: "#1b2033", + secondary: "#ffffff" + OPACITY[5], + elevation: "none", + }, + modal: { + background: "#474747", + }, +}; +const config: WormholeConnectConfig = { + mode: "dark", + customTheme: customized, +}; -2) Build +function App() { + return ; +} +``` -Run `npm run build` at the root fo the repo +## Configuration Options -3) Start +### Wallet Connect Project ID -Start wormhole-connect UI and view in browser at localhost:3000 -```bash -# in /wormhole-connect -npm run start # testnet +Required in order to display Wallet Connect as a wallet option. You can get a project ID on https://cloud.walletconnect.com/. Refer to the wallet connect [documentation](https://docs.walletconnect.com/advanced/migration-from-v1.x/overview) for more information on v2. + +### Toggle Hamburguer Menu + +By setting the `showHamburgerMenu` option to **false**, you can deactivate the hamburger menu, causing the links to be positioned at the bottom. + +#### Add extra menu entry + +By setting the `showHamburgerMenu` option to **false**, you can use the `menu` array to add extra links. + +|property|description| +|--|--| +|`menu[].label`|link name to show up| +|`menu[].href`|target url or urn| +|`menu[].target`|anchor standard target, by default `_blank`| +|`menu[].order`|order where the new item should be injected| + +#### Sample configuration + +```json +{ + "showHamburgerMenu": false, + "menu": [ + { + "label": "Advance Tools", + "href": "https://portalbridge.com", + "target": "_self", + "order": 1 + } + ] +} ``` -Start builder UI and view in browser at localhost:3000 -```bash -# in /builder -npm run start +### CoinGecko API Key + +If you have a CoinGecko API Plan, you can include the API key in the configuration. In case you do not have the API key, [follow this steps](https://apiguide.coingecko.com/getting-started/getting-started). + +### More Networks + +Specify a set of extra networks to be displayed on the network selection modal, each of them linking to a different page/dApp/mobile app the user will be redirected to. + +|Property|description|| +|:--|:--|:--:| +|`moreNetworks.href`| Default value for missing network hrefs | mandatory| +|`moreNetworks.target`| Default value for missing network link targets | optional, defaults to `_self` +|`moreNetworks.description` | Brief description that should be displayed as tooltip when the user hover an more network icon. Used as default for missing network descriptions | optional | +|`moreNetworks.networks[].icon` | URL data encoded icon to display | mandatory| +|`moreNetworks.networks[].href` | Network href to redirect to. If present, the values `{:sourceChain}` and `{:targetChain}` are replaced with the selected currently selected chains before redirecting | optional | +|`moreNetworks.networks[].label` | Display text | mandatory | +|`moreNetworks.networks[].name` | Unique network key | optional, defaults to a snake_case version of the label | +|`moreNetworks.networks[].description` | Description value | optional, defaults to `moreNetworks.description`| +|`moreNetworks.networks[].target` | href target value | optional, defaults to `moreNetworks.target`| +| `moreNetworks.networks[].showOpenInNewIcon` | Disable top right open in new icon | optional, defaults to **true** if target is `_blank` or **false** if target is `_self`| + +```json +{ + ... + "moreNetworks": { + "href": "https://example.com", + "target": "_blank", + "description": "brief description that should be displayed as tooltip when the user over an more network icon", + "networks": [ + { + "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='91' height='91' viewBox='0 0 91 91' fill='none'%3E%3Ccircle cx='45.5' cy='45.5' r='45.5' fill='%23E8E8EC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.833 25.8333C26.2807 25.8333 25.833 26.281 25.833 26.8333V63.1666C25.833 63.7189 26.2807 64.1666 26.833 64.1666H63.1663C63.7186 64.1666 64.1663 63.7189 64.1663 63.1666V48.7333C64.1663 48.4571 63.9425 48.2333 63.6663 48.2333C63.3902 48.2333 63.1663 48.4571 63.1663 48.7333V63.1666H26.833V26.8333L41.2663 26.8333C41.5425 26.8333 41.7663 26.6094 41.7663 26.3333C41.7663 26.0571 41.5425 25.8333 41.2663 25.8333H26.833ZM64.0199 25.9797C64.0321 25.9919 64.0435 26.0046 64.0542 26.0177L64.1663 26.324L64.1663 26.3342V37.5333C64.1663 37.8094 63.9425 38.0333 63.6663 38.0333C63.3902 38.0333 63.1663 37.8094 63.1663 37.5333V27.5404L41.6199 49.0868C41.4246 49.2821 41.1081 49.2821 40.9128 49.0868C40.7175 48.8915 40.7175 48.575 40.9128 48.3797L62.4592 26.8333H52.4663C52.1902 26.8333 51.9663 26.6094 51.9663 26.3333C51.9663 26.0571 52.1902 25.8333 52.4663 25.8333H63.666H63.6663C63.6823 25.8333 63.6983 25.834 63.7143 25.8355C63.7632 25.8402 63.8116 25.8521 63.8577 25.8712C63.9167 25.8956 63.972 25.9318 64.0199 25.9797Z' fill='%230F1022'/%3E%3Cpath d='M63.1663 63.1666V64.1666H64.1663V63.1666H63.1663ZM26.833 63.1666H25.833V64.1666H26.833V63.1666ZM26.833 26.8333L26.833 25.8333L25.833 25.8333V26.8333H26.833ZM41.2663 26.8333L41.2663 25.8333H41.2663L41.2663 26.8333ZM64.0542 26.0177L64.9934 25.6742L64.9356 25.5161L64.8292 25.3857L64.0542 26.0177ZM64.0199 25.9797L64.727 25.2726L64.727 25.2726L64.0199 25.9797ZM64.1663 26.324L65.1662 26.3158L65.1648 26.1429L65.1054 25.9806L64.1663 26.324ZM64.1663 26.3342L65.1664 26.3342L65.1663 26.326L64.1663 26.3342ZM63.1663 27.5404H64.1663V25.1261L62.4592 26.8333L63.1663 27.5404ZM40.9128 49.0868L40.2057 49.7939L40.2057 49.7939L40.9128 49.0868ZM40.9128 48.3797L40.2057 47.6726L40.2057 47.6726L40.9128 48.3797ZM62.4592 26.8333L63.1663 27.5404L64.8734 25.8333H62.4592V26.8333ZM63.7143 25.8355L63.8096 24.8401L63.8095 24.8401L63.7143 25.8355ZM63.8577 25.8712L64.2401 24.9472L64.24 24.9472L63.8577 25.8712ZM26.833 26.8333V26.8333V24.8333C25.7284 24.8333 24.833 25.7287 24.833 26.8333H26.833ZM26.833 63.1666V26.8333H24.833V63.1666H26.833ZM26.833 63.1666H26.833H24.833C24.833 64.2712 25.7284 65.1666 26.833 65.1666V63.1666ZM63.1663 63.1666H26.833V65.1666H63.1663V63.1666ZM63.1663 63.1666V65.1666C64.2709 65.1666 65.1663 64.2712 65.1663 63.1666H63.1663ZM63.1663 48.7333V63.1666H65.1663V48.7333H63.1663ZM63.6663 49.2333C63.3902 49.2333 63.1663 49.0094 63.1663 48.7333H65.1663C65.1663 47.9048 64.4948 47.2333 63.6663 47.2333V49.2333ZM64.1663 48.7333C64.1663 49.0094 63.9425 49.2333 63.6663 49.2333V47.2333C62.8379 47.2333 62.1663 47.9048 62.1663 48.7333H64.1663ZM64.1663 63.1666V48.7333H62.1663V63.1666H64.1663ZM26.833 64.1666H63.1663V62.1666H26.833V64.1666ZM25.833 26.8333V63.1666H27.833V26.8333H25.833ZM41.2663 25.8333L26.833 25.8333L26.833 27.8333L41.2663 27.8333L41.2663 25.8333ZM40.7663 26.3333C40.7663 26.0571 40.9902 25.8333 41.2663 25.8333V27.8333C42.0948 27.8333 42.7663 27.1617 42.7663 26.3333H40.7663ZM41.2663 26.8333C40.9902 26.8333 40.7663 26.6094 40.7663 26.3333H42.7663C42.7663 25.5048 42.0948 24.8333 41.2663 24.8333V26.8333ZM26.833 26.8333H41.2663V24.8333H26.833V26.8333ZM64.8292 25.3857C64.7971 25.3464 64.763 25.3086 64.727 25.2726L63.3128 26.6868C63.3012 26.6752 63.2899 26.6628 63.2793 26.6497L64.8292 25.3857ZM65.1054 25.9806L64.9934 25.6742L63.1151 26.3611L63.2271 26.6675L65.1054 25.9806ZM65.1663 26.326L65.1662 26.3158L63.1663 26.3322L63.1664 26.3425L65.1663 26.326ZM65.1663 37.5333V26.3342H63.1663V37.5333H65.1663ZM63.6663 39.0333C64.4948 39.0333 65.1663 38.3617 65.1663 37.5333H63.1663C63.1663 37.2571 63.3902 37.0333 63.6663 37.0333V39.0333ZM62.1663 37.5333C62.1663 38.3617 62.8379 39.0333 63.6663 39.0333V37.0333C63.9425 37.0333 64.1663 37.2571 64.1663 37.5333H62.1663ZM62.1663 27.5404V37.5333H64.1663V27.5404H62.1663ZM42.327 49.7939L63.8734 28.2475L62.4592 26.8333L40.9128 48.3797L42.327 49.7939ZM40.2057 49.7939C40.7915 50.3797 41.7412 50.3797 42.327 49.7939L40.9128 48.3797C41.108 48.1844 41.4246 48.1844 41.6199 48.3797L40.2057 49.7939ZM40.2057 47.6726C39.6199 48.2584 39.6199 49.2081 40.2057 49.7939L41.6199 48.3797C41.8152 48.575 41.8152 48.8915 41.6199 49.0868L40.2057 47.6726ZM61.7521 26.1261L40.2057 47.6726L41.6199 49.0868L63.1663 27.5404L61.7521 26.1261ZM52.4663 27.8333H62.4592V25.8333H52.4663V27.8333ZM50.9663 26.3333C50.9663 27.1617 51.6379 27.8333 52.4663 27.8333V25.8333C52.7425 25.8333 52.9663 26.0571 52.9663 26.3333H50.9663ZM52.4663 24.8333C51.6379 24.8333 50.9663 25.5048 50.9663 26.3333H52.9663C52.9663 26.6094 52.7425 26.8333 52.4663 26.8333V24.8333ZM63.666 24.8333H52.4663V26.8333H63.666V24.8333ZM63.6663 24.8333H63.666V26.8333H63.6663V24.8333ZM63.8095 24.8401C63.7619 24.8355 63.7141 24.8333 63.6663 24.8333V26.8333C63.6505 26.8333 63.6347 26.8325 63.619 26.831L63.8095 24.8401ZM64.24 24.9472C64.1011 24.8897 63.9559 24.8541 63.8096 24.8401L63.619 26.831C63.5706 26.8264 63.5221 26.8146 63.4754 26.7952L64.24 24.9472ZM64.727 25.2726C64.5845 25.1301 64.4184 25.0209 64.2401 24.9472L63.4754 26.7952C63.4151 26.7702 63.3594 26.7334 63.3128 26.6868L64.727 25.2726Z' fill='%230F1022'/%3E%3C/svg%3E", + "name": "more", + "label": "More networks", + "href": "https://portalbridge.com/#/transfer", + "showOpenInNewIcon": false, + } + ] + } + ... +} ``` +### More Tokens + +Show a special entry on the select tokens modal which redirects the user to a different page/dApp/mobile app. + +|Property|description|| +|:--|:--|:--:| +|`moreTokens.label`| Display text | mandatory| +|`moreTokens.href`| URL to redirect to. If present, the values `{:sourceChain}` and `{:targetChain}` are replaced with the selected currently selected chains before redirecting | mandatory| +|`moreTokens.target`| href target | optional, defaults to `_self` + + +### Explorer + +Enable explorer button to allow users to search for his transactions on a given explorer filtering by his wallet address + +|Property|description|| +|:--|:--|:--:| +|`explorer.label`| Display text | optional, defaults to `Transactions`| +|`explorer.href`| URL of the explorer, for instance https://wormholescan.com/. If present, the values `{:address}` is replaced with the connected wallet address| mandatory| +|`explorer.target`| href target | optional, defaults to `_blank` + ## Disclaimer diff --git a/package-lock.json b/package-lock.json index 9144eaba7..c17f4c88f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "workspaces": [ "sdk", "wormhole-connect", - "wormhole-connect-loader", "builder" ], "dependencies": { @@ -60,9 +59,9 @@ "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==" }, "builder/node_modules/@wormhole-foundation/wormhole-connect": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@wormhole-foundation/wormhole-connect/-/wormhole-connect-0.1.4.tgz", - "integrity": "sha512-SHoQxgTxinZUJ01mDijB/G66UzUksTNMLrGLU+2z/XFtddYBl74ppfkhdCSQb4ID1aqt6eipFcqYySgvxdaZOg==", + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@wormhole-foundation/wormhole-connect/-/wormhole-connect-0.1.7.tgz", + "integrity": "sha512-f3iyNi85X4VH2f2aNUNJbULsk3e/qOuvUSqUtndZfLIbfK1eznHfSZiGZgfDry8xqVay4p1G+Fy1LgjSP/RG/Q==", "dependencies": { "@mui/material": "^5.12.1" }, @@ -588,8 +587,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.22.14", - "license": "MIT", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", + "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==", "bin": { "parser": "bin/babel-parser.js" }, @@ -6274,6 +6274,113 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/@microsoft/api-extractor": { + "version": "7.39.0", + "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.39.0.tgz", + "integrity": "sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg==", + "dev": true, + "dependencies": { + "@microsoft/api-extractor-model": "7.28.3", + "@microsoft/tsdoc": "0.14.2", + "@microsoft/tsdoc-config": "~0.16.1", + "@rushstack/node-core-library": "3.62.0", + "@rushstack/rig-package": "0.5.1", + "@rushstack/ts-command-line": "4.17.1", + "colors": "~1.2.1", + "lodash": "~4.17.15", + "resolve": "~1.22.1", + "semver": "~7.5.4", + "source-map": "~0.6.1", + "typescript": "5.3.3" + }, + "bin": { + "api-extractor": "bin/api-extractor" + } + }, + "node_modules/@microsoft/api-extractor-model": { + "version": "7.28.3", + "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.28.3.tgz", + "integrity": "sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==", + "dev": true, + "dependencies": { + "@microsoft/tsdoc": "0.14.2", + "@microsoft/tsdoc-config": "~0.16.1", + "@rushstack/node-core-library": "3.62.0" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@microsoft/api-extractor/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, + "node_modules/@microsoft/tsdoc": { + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz", + "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==", + "dev": true + }, + "node_modules/@microsoft/tsdoc-config": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz", + "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==", + "dev": true, + "dependencies": { + "@microsoft/tsdoc": "0.14.2", + "ajv": "~6.12.6", + "jju": "~1.4.0", + "resolve": "~1.19.0" + } + }, + "node_modules/@microsoft/tsdoc-config/node_modules/resolve": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz", + "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==", + "dev": true, + "dependencies": { + "is-core-module": "^2.1.0", + "path-parse": "^1.0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/@mobily/ts-belt": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@mobily/ts-belt/-/ts-belt-3.13.1.tgz", @@ -8023,6 +8130,116 @@ "version": "1.3.3", "license": "MIT" }, + "node_modules/@rushstack/node-core-library": { + "version": "3.62.0", + "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.62.0.tgz", + "integrity": "sha512-88aJn2h8UpSvdwuDXBv1/v1heM6GnBf3RjEy6ZPP7UnzHNCqOHA2Ut+ScYUbXcqIdfew9JlTAe3g+cnX9xQ/Aw==", + "dev": true, + "dependencies": { + "colors": "~1.2.1", + "fs-extra": "~7.0.1", + "import-lazy": "~4.0.0", + "jju": "~1.4.0", + "resolve": "~1.22.1", + "semver": "~7.5.4", + "z-schema": "~5.0.2" + }, + "peerDependencies": { + "@types/node": "*" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@rushstack/node-core-library/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@rushstack/node-core-library/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, + "node_modules/@rushstack/rig-package": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.5.1.tgz", + "integrity": "sha512-pXRYSe29TjRw7rqxD4WS3HN/sRSbfr+tJs4a9uuaSIBAITbUggygdhuG0VrO0EO+QqH91GhYMN4S6KRtOEmGVA==", + "dev": true, + "dependencies": { + "resolve": "~1.22.1", + "strip-json-comments": "~3.1.1" + } + }, + "node_modules/@rushstack/ts-command-line": { + "version": "4.17.1", + "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.17.1.tgz", + "integrity": "sha512-2jweO1O57BYP5qdBGl6apJLB+aRIn5ccIRTPDyULh0KMwVzFqWtw6IZWt1qtUoZD/pD2RNkIOosH6Cq45rIYeg==", + "dev": true, + "dependencies": { + "@types/argparse": "1.0.38", + "argparse": "~1.0.9", + "colors": "~1.2.1", + "string-argv": "~0.3.1" + } + }, "node_modules/@safe-global/safe-apps-provider": { "version": "0.18.1", "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.1.tgz", @@ -10902,6 +11119,12 @@ "optional": true, "peer": true }, + "node_modules/@types/argparse": { + "version": "1.0.38", + "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", + "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==", + "dev": true + }, "node_modules/@types/aria-query": { "version": "5.0.1", "license": "MIT" @@ -11150,9 +11373,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "20.10.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", - "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", + "version": "20.11.19", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz", + "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==", "dependencies": { "undici-types": "~5.26.4" } @@ -11657,6 +11880,130 @@ "vite": "^4 || ^5" } }, + "node_modules/@volar/language-core": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz", + "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==", + "dev": true, + "dependencies": { + "@volar/source-map": "1.11.1" + } + }, + "node_modules/@volar/source-map": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz", + "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==", + "dev": true, + "dependencies": { + "muggle-string": "^0.3.1" + } + }, + "node_modules/@volar/typescript": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz", + "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==", + "dev": true, + "dependencies": { + "@volar/language-core": "1.11.1", + "path-browserify": "^1.0.1" + } + }, + "node_modules/@vue/compiler-core": { + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz", + "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.23.9", + "@vue/shared": "3.4.21", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@vue/compiler-core/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/@vue/compiler-core/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "node_modules/@vue/compiler-dom": { + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz", + "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==", + "dev": true, + "dependencies": { + "@vue/compiler-core": "3.4.21", + "@vue/shared": "3.4.21" + } + }, + "node_modules/@vue/language-core": { + "version": "1.8.27", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz", + "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==", + "dev": true, + "dependencies": { + "@volar/language-core": "~1.11.1", + "@volar/source-map": "~1.11.1", + "@vue/compiler-dom": "^3.3.0", + "@vue/shared": "^3.3.0", + "computeds": "^0.0.1", + "minimatch": "^9.0.3", + "muggle-string": "^0.3.1", + "path-browserify": "^1.0.1", + "vue-template-compiler": "^2.7.14" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@vue/language-core/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@vue/language-core/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@vue/shared": { + "version": "3.4.21", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz", + "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==", + "dev": true + }, "node_modules/@wallet-standard/app": { "version": "1.0.1", "license": "Apache-2.0", @@ -13100,10 +13447,6 @@ } }, "node_modules/@wormhole-foundation/wormhole-connect": { - "resolved": "wormhole-connect-loader", - "link": true - }, - "node_modules/@wormhole-foundation/wormhole-connect-app": { "resolved": "wormhole-connect", "link": true }, @@ -16030,6 +16373,15 @@ "version": "2.0.20", "license": "MIT" }, + "node_modules/colors": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.2.5.tgz", + "integrity": "sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==", + "dev": true, + "engines": { + "node": ">=0.1.90" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "license": "MIT", @@ -16111,6 +16463,12 @@ "version": "5.1.2", "license": "MIT" }, + "node_modules/computeds": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz", + "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==", + "dev": true + }, "node_modules/concat-map": { "version": "0.0.1", "license": "MIT" @@ -16922,6 +17280,12 @@ "node": ">=10" } }, + "node_modules/de-indent": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", + "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==", + "devOptional": true + }, "node_modules/debug": { "version": "4.3.4", "license": "MIT", @@ -21324,6 +21688,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/import-lazy": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", + "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/import-local": { "version": "3.1.0", "license": "MIT", @@ -24892,6 +25265,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/jju": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz", + "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==", + "dev": true + }, "node_modules/js-base64": { "version": "3.7.5", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz", @@ -25314,6 +25693,12 @@ "node": ">= 8" } }, + "node_modules/kolorist": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz", + "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==", + "dev": true + }, "node_modules/language-subtag-registry": { "version": "0.3.22", "license": "CC0-1.0" @@ -25700,6 +26085,12 @@ "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==", "dev": true }, + "node_modules/lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==", + "dev": true + }, "node_modules/lodash.invokemap": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz", @@ -26364,6 +26755,12 @@ "json-rpc-protocol": "^0.13.2" } }, + "node_modules/muggle-string": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz", + "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==", + "dev": true + }, "node_modules/multibase": { "version": "0.6.1", "license": "MIT", @@ -35103,6 +35500,60 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vite-plugin-dts": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.7.3.tgz", + "integrity": "sha512-26eTlBYdpjRLWCsTJebM8vkCieE+p9gP3raf+ecDnzzK5E3FG6VE1wcy55OkRpfWWVlVvKkYFe6uvRHYWx7Nog==", + "dev": true, + "dependencies": { + "@microsoft/api-extractor": "7.39.0", + "@rollup/pluginutils": "^5.1.0", + "@vue/language-core": "^1.8.26", + "debug": "^4.3.4", + "kolorist": "^1.8.0", + "vue-tsc": "^1.8.26" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "typescript": "*", + "vite": "*" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, + "node_modules/vite-plugin-dts/node_modules/@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/vite-plugin-dts/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/vite-plugin-node-polyfills": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.17.0.tgz", @@ -35266,6 +35717,66 @@ "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==", "dev": true }, + "node_modules/vue-template-compiler": { + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz", + "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==", + "devOptional": true, + "dependencies": { + "de-indent": "^1.0.2", + "he": "^1.2.0" + } + }, + "node_modules/vue-tsc": { + "version": "1.8.27", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz", + "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==", + "dev": true, + "dependencies": { + "@volar/typescript": "~1.11.1", + "@vue/language-core": "1.8.27", + "semver": "^7.5.4" + }, + "bin": { + "vue-tsc": "bin/vue-tsc.js" + }, + "peerDependencies": { + "typescript": "*" + } + }, + "node_modules/vue-tsc/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/vue-tsc/node_modules/semver": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/vue-tsc/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "license": "MIT", @@ -36888,6 +37399,36 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/z-schema": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz", + "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==", + "dev": true, + "dependencies": { + "lodash.get": "^4.4.2", + "lodash.isequal": "^4.5.0", + "validator": "^13.7.0" + }, + "bin": { + "z-schema": "bin/z-schema" + }, + "engines": { + "node": ">=8.0.0" + }, + "optionalDependencies": { + "commander": "^9.4.1" + } + }, + "node_modules/z-schema/node_modules/commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "dev": true, + "optional": true, + "engines": { + "node": "^12.20.0 || >=14" + } + }, "node_modules/zen-observable": { "version": "0.8.15", "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz", @@ -36994,7 +37535,7 @@ } }, "wormhole-connect": { - "name": "@wormhole-foundation/wormhole-connect-app", + "name": "@wormhole-foundation/wormhole-connect", "version": "0.0.1-beta.0", "dependencies": { "@certusone/wormhole-sdk": "^0.10.10", @@ -37012,7 +37553,6 @@ "@solana/wallet-adapter-wallets": "^0.19.25", "@solana/web3.js": "^1.73.0", "@wormhole-foundation/connect-sdk": "^0.3.3", - "@wormhole-foundation/wormhole-connect-sdk": "0.1.0-beta.0", "@xlabs-libs/wallet-aggregator-aptos": "^0.0.1-alpha.14", "@xlabs-libs/wallet-aggregator-core": "^0.0.1-alpha.18", "@xlabs-libs/wallet-aggregator-cosmos": "^0.0.1-alpha.14", @@ -37030,6 +37570,8 @@ "material-ui-popup-state": "^5.0.4", "os-browserify": "^0.3.0", "postcss": "^8.4.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-redux": "^8.0.5", "tss-react": "^4.5.2", "use-debounce": "^9.0.4", @@ -37039,7 +37581,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-env": "^7.20.2", "@types/jest": "^27.5.2", - "@types/node": "^16.18.11", + "@types/node": "^20", "@types/node-fetch": "^2.6.3", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", @@ -37052,13 +37594,12 @@ "eslint": "^8.31.0", "eslint-config-prettier": "^8.6.0", "jest": "^29.5.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", "ts-jest": "^29.1.1", "typescript": "^5.3.3", "vite": "^5.0.8", "vite-bundle-visualizer": "^0.11.0", "vite-plugin-checker": "^0.6.2", + "vite-plugin-dts": "^3.7.3", "vite-plugin-node-polyfills": "^0.17.0" }, "peerDependencies": { @@ -37069,6 +37610,7 @@ "wormhole-connect-loader": { "name": "@wormhole-foundation/wormhole-connect", "version": "0.0.12", + "extraneous": true, "license": "ISC", "dependencies": { "@mui/material": "^5.12.1" @@ -37084,25 +37626,6 @@ "typescript": "^4.9.5" } }, - "wormhole-connect-loader/node_modules/@types/node": { - "version": "16.18.68", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", - "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", - "dev": true - }, - "wormhole-connect-loader/node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "wormhole-connect/.yalc/@xlabs-libs/wallet-aggregator-cosmos": { "version": "0.0.1-alpha.2+65f2679f", "extraneous": true, @@ -37129,12 +37652,6 @@ "peerDependencies": { "@babel/core": "^7.0.0-0" } - }, - "wormhole-connect/node_modules/@types/node": { - "version": "16.18.68", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.68.tgz", - "integrity": "sha512-sG3hPIQwJLoewrN7cr0dwEy+yF5nD4D/4FxtQpFciRD/xwUzgD+G05uxZHv5mhfXo4F9Jkp13jjn0CC2q325sg==", - "dev": true } } } diff --git a/package.json b/package.json index 9005da084..98639b31c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "workspaces": [ "sdk", "wormhole-connect", - "wormhole-connect-loader", "builder" ], "scripts": { diff --git a/sdk/src/index.ts b/sdk/src/index.ts index c10614dc7..879e49eee 100644 --- a/sdk/src/index.ts +++ b/sdk/src/index.ts @@ -2,6 +2,10 @@ import TESTNET_CONFIG from './config/TESTNET'; import MAINNET_CONFIG from './config/MAINNET'; import DEVNET_CONFIG from './config/DEVNET'; +export { TESTNET_CHAINS } from './config/TESTNET'; +export { MAINNET_CHAINS } from './config/MAINNET'; +export { DEVNET_CHAINS } from './config/DEVNET'; + export type { TestnetChainId, TestnetChainName, diff --git a/wormhole-connect-loader/.gitignore b/wormhole-connect-loader/.gitignore deleted file mode 100644 index 504e18739..000000000 --- a/wormhole-connect-loader/.gitignore +++ /dev/null @@ -1,26 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/lib - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# connect sources -dist diff --git a/wormhole-connect-loader/README.md b/wormhole-connect-loader/README.md deleted file mode 100644 index 09952b2c2..000000000 --- a/wormhole-connect-loader/README.md +++ /dev/null @@ -1,410 +0,0 @@ -# Wormhole Connect - -Integration does not get easier than this. Wormhole Connect is an easy seamless experience that will help to bring all the functionality of the Wormhole Token Bridge right into your application. - -## Customizer - -Customize and integrate via our no-code solution: https://connect-in-style.wormhole.com/ - -## Integrate with script/link tags - -### 1. (Optional) Create a JSON config with customized values: - -See `WormholeConnectConfig` in [src/config/index.ts](../wormhole-connect/src/config/index.ts) -for a full view of the supported config parameters. - -See [src/config/examples.md](../wormhole-connect/src/config/examples.md) -for working examples of different config values. - -**Environment** (`env`): -| Mainnet | Testnet | -| ---------- | --------- | -| mainnet | testnet | - -
- -**Networks** (`networks`): -| Mainnet | Testnet | -| ---------- | ------------- | -| ethereum | goerli, sepolia | -| polygon | mumbai | -| bsc | bsc | -| avalanche | fuji | -| celo | avalanche | -| moonbeam | moonbasealpha | -| solana | solana | -| sui | sui | -| aptos | aptos | -| base | basegoerli, base_sepolia | -| osmosis | osmosis | -| evmos | evmos | -| kujira | kujira | -| injective | injective | -| klaytn | klaytn | -| arbitrum | arbitrumgoerli, arbitrum_sepolia | -| optimism | optimismgoerli, optimism_sepolia | - -> Osmosis support is in beta, reach out to a Wormhole contributor for early access. - -
- -**RPCs** (`rpcs`): - -We recommend that you configure your own custom RPC endpoints for each used network for the best performance. The default public RPCs may be throttled or rate limited. -See [src/config/examples.md](../wormhole-connect/src/config/examples.md). - -
- -**Tokens** (`tokens`): -| Mainnet | Testnet | -| ----------- | -------- | -| ETH | ETH, ETHsepolia | -| WETH | WETH, WETHsepolia | -| USDCeth | USDCeth | -| WBTC | | -| USDT | | -| DAI | | -| BUSD | | -| MATIC | MATIC | -| WMATIC | WMATIC | -| USDCpolygon | | -| BNB | BNB | -| WBNB | WBNB | -| USDCbnb | | -| AVAX | AVAX | -| WAVAX | WAVAX | -| USDCavax | USDCavax | -| FTM | FTM | -| WFTM | WFTM | -| CELO | CELO | -| GLMR | GLMR | -| WGLMR | WGLMR | -| SOL | WSOL | -| PYTH | | -| SUI | SUI | -| USDCsol | | -| APT | APT | -| ETHarbitrum | ETHarbitrum, ETHarbitrum_sepolia | -| WETHarbitrum | WETHarbitrum, WETHarbitrum_sepolia | -| USDCarbitrum | USDCarbitrum| -| ETHoptimism | ETHoptimism, ETHoptimism_sepolia | -| WETHoptimism | WETHoptimism, WETHoptimism_sepolia | -| USDCoptimism | USDCoptimism| -| ETHbase | ETHbase, ETHbase_sepolia | -| WETHbase | WETHbase, WETHbase_sepolia | -| tBTC | tBTC | -| tBTCpolygon | tBTCpolygon | -| tBTCoptimism | tBTCoptimism | -| tBTCarbitrum | tBTCarbitrum | -| tBTCbase | tBTCbase | -| tBTCsol | tBTCsol | -| WETHpolygon | | -| WETHbsc | | -| wstETH | wstETH | -| wstETHarbitrum | | -| wstETHoptimism | | -| wstETHpolygon | | -| wstETHbase | | - -
- -**Adding Tokens** (`tokensConfig`) - -You can add arbitrary tokens to the Connect tokens menu by providing a `tokensConfig` key. -See the "Arbitrary Token" example in [src/config/examples.md](../wormhole-connect/src/config/examples.md). - - -
- -**Routes** (`routes`) -| Mainnet | Testnet | -| -------- | ---------| -| bridge | bridge | -| relay | relay | -| cctpManual | cctpManual | -| cctpRelay | cctpRelay | -| cosmosGateway | cosmosGateway | -| tbtc | tbtc | -| ethBridge | | -| wstETHBridge | | - -
- -**Mode** (`mode`): -| | | -| ---- | ----- | -| dark | light | - -
- -**Theme** (`customTheme`) - -See [theme.ts](../wormhole-connect/src/theme.ts) for examples - -### 2. Add your config - -Add a container div with the id `wormhole-connect`. This is where the bridge will be rendered. - -```html -
-``` - -If you created a config from step 1, [stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) it and assign to the `config` attribute on the container element. - -```html -
-``` - -### 2. Add a script and link tag - -```html - - - -``` - -Note that the `wormhole-connect` div with your config has to be present _before_ the scripts are loaded. If your application loads it after, you may need to add the scripts like this: - -```js -function mount() { - const script = document.createElement("script"); - script.src = - "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.2.0/dist/main.js"; - script.async = true; - script.type = "module"; - - const link = document.createElement("link"); - link.href = - "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.2.0/dist/main.css"; - - document.body.appendChild(script); - document.body.appendChild(link); -} -``` - -## Integrate with React - -```jsx -import WormholeBridge from "@wormhole-foundation/wormhole-connect"; -function App() { - return ; -} -``` - -(Optional) Specify supported networks/tokens and custom RPC endpoints. Your users may encounter rate limits using public RPC endpoints if you do not provide your own - -```jsx -import WormholeBridge, { - WormholeConnectConfig, -} from "@wormhole-foundation/wormhole-connect"; -const config: WormholeConnectConfig = { - env: "mainnet", - networks: ["ethereum", "polygon", "solana"], - tokens: ["ETH", "WETH", "MATIC", "WMATIC"], - rpcs: { - ethereum: "https://rpc.ankr.com/eth", - solana: "https://rpc.ankr.com/solana", - }, -}; - -function App() { - return ; -} -``` - -(Optional) Customize theme - -```jsx -import WormholeBridge, { - light, - Theme, - WormholeConnectConfig, -} from "@wormhole-foundation/wormhole-connect"; -import lightblue from "@mui/material/colors/lightBlue"; - -// alters the `light` theme -const customized: Theme = light; -customized.success = lightblue; -customized.background.default = "transparent"; -customized.button.action = "#81c784"; -customized.button.actionText = "#000000"; - -const config: WormholeConnectConfig = { - mode: "light", - customTheme: customized, -}; - -function App() { - return ; -} -``` - -(Optional) Create fully customized theme - -```jsx -import WormholeBridge, { - Theme, - OPACITY, - WormholeConnectConfig, -} from "@wormhole-foundation/wormhole-connect"; -import lightblue from "@mui/material/colors/lightBlue"; -import grey from "@mui/material/colors/grey"; -import green from "@mui/material/colors/green"; -import orange from "@mui/material/colors/orange"; - -const customized: Theme = { - primary: grey, - secondary: grey, - divider: "#ffffff" + OPACITY[20], - background: { - default: "#232323", - }, - text: { - primary: "#ffffff", - secondary: grey[500], - }, - error: red, - info: lightblue, - success: green, - warning: orange, - button: { - primary: "#ffffff" + OPACITY[20], - primaryText: "#ffffff", - disabled: "#ffffff" + OPACITY[10], - disabledText: "#ffffff" + OPACITY[40], - action: orange[300], - actionText: "#000000", - hover: "#ffffff" + OPACITY[7], - }, - options: { - hover: "#474747", - select: "#5b5b5b", - }, - card: { - background: "#333333", - secondary: "#474747", - elevation: "none", - }, - popover: { - background: "#1b2033", - secondary: "#ffffff" + OPACITY[5], - elevation: "none", - }, - modal: { - background: "#474747", - }, -}; -const config: WormholeConnectConfig = { - mode: "dark", - customTheme: customized, -}; - -function App() { - return ; -} -``` - -## Configuration Options - -### Wallet Connect Project ID - -Required in order to display Wallet Connect as a wallet option. You can get a project ID on https://cloud.walletconnect.com/. Refer to the wallet connect [documentation](https://docs.walletconnect.com/advanced/migration-from-v1.x/overview) for more information on v2. - -### Toggle Hamburguer Menu - -By setting the `showHamburgerMenu` option to **false**, you can deactivate the hamburger menu, causing the links to be positioned at the bottom. - -#### Add extra menu entry - -By setting the `showHamburgerMenu` option to **false**, you can use the `menu` array to add extra links. - -|property|description| -|--|--| -|`menu[].label`|link name to show up| -|`menu[].href`|target url or urn| -|`menu[].target`|anchor standard target, by default `_blank`| -|`menu[].order`|order where the new item should be injected| - -#### Sample configuration - -```json -{ - "showHamburgerMenu": false, - "menu": [ - { - "label": "Advance Tools", - "href": "https://portalbridge.com", - "target": "_self", - "order": 1 - } - ] -} -``` - -### CoinGecko API Key - -If you have a CoinGecko API Plan, you can include the API key in the configuration. In case you do not have the API key, [follow this steps](https://apiguide.coingecko.com/getting-started/getting-started). - -### More Networks - -Specify a set of extra networks to be displayed on the network selection modal, each of them linking to a different page/dApp/mobile app the user will be redirected to. - -|Property|description|| -|:--|:--|:--:| -|`moreNetworks.href`| Default value for missing network hrefs | mandatory| -|`moreNetworks.target`| Default value for missing network link targets | optional, defaults to `_self` -|`moreNetworks.description` | Brief description that should be displayed as tooltip when the user hover an more network icon. Used as default for missing network descriptions | optional | -|`moreNetworks.networks[].icon` | URL data encoded icon to display | mandatory| -|`moreNetworks.networks[].href` | Network href to redirect to. If present, the values `{:sourceChain}` and `{:targetChain}` are replaced with the selected currently selected chains before redirecting | optional | -|`moreNetworks.networks[].label` | Display text | mandatory | -|`moreNetworks.networks[].name` | Unique network key | optional, defaults to a snake_case version of the label | -|`moreNetworks.networks[].description` | Description value | optional, defaults to `moreNetworks.description`| -|`moreNetworks.networks[].target` | href target value | optional, defaults to `moreNetworks.target`| -| `moreNetworks.networks[].showOpenInNewIcon` | Disable top right open in new icon | optional, defaults to **true** if target is `_blank` or **false** if target is `_self`| - -```json -{ - ... - "moreNetworks": { - "href": "https://example.com", - "target": "_blank", - "description": "brief description that should be displayed as tooltip when the user over an more network icon", - "networks": [ - { - "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='91' height='91' viewBox='0 0 91 91' fill='none'%3E%3Ccircle cx='45.5' cy='45.5' r='45.5' fill='%23E8E8EC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.833 25.8333C26.2807 25.8333 25.833 26.281 25.833 26.8333V63.1666C25.833 63.7189 26.2807 64.1666 26.833 64.1666H63.1663C63.7186 64.1666 64.1663 63.7189 64.1663 63.1666V48.7333C64.1663 48.4571 63.9425 48.2333 63.6663 48.2333C63.3902 48.2333 63.1663 48.4571 63.1663 48.7333V63.1666H26.833V26.8333L41.2663 26.8333C41.5425 26.8333 41.7663 26.6094 41.7663 26.3333C41.7663 26.0571 41.5425 25.8333 41.2663 25.8333H26.833ZM64.0199 25.9797C64.0321 25.9919 64.0435 26.0046 64.0542 26.0177L64.1663 26.324L64.1663 26.3342V37.5333C64.1663 37.8094 63.9425 38.0333 63.6663 38.0333C63.3902 38.0333 63.1663 37.8094 63.1663 37.5333V27.5404L41.6199 49.0868C41.4246 49.2821 41.1081 49.2821 40.9128 49.0868C40.7175 48.8915 40.7175 48.575 40.9128 48.3797L62.4592 26.8333H52.4663C52.1902 26.8333 51.9663 26.6094 51.9663 26.3333C51.9663 26.0571 52.1902 25.8333 52.4663 25.8333H63.666H63.6663C63.6823 25.8333 63.6983 25.834 63.7143 25.8355C63.7632 25.8402 63.8116 25.8521 63.8577 25.8712C63.9167 25.8956 63.972 25.9318 64.0199 25.9797Z' fill='%230F1022'/%3E%3Cpath d='M63.1663 63.1666V64.1666H64.1663V63.1666H63.1663ZM26.833 63.1666H25.833V64.1666H26.833V63.1666ZM26.833 26.8333L26.833 25.8333L25.833 25.8333V26.8333H26.833ZM41.2663 26.8333L41.2663 25.8333H41.2663L41.2663 26.8333ZM64.0542 26.0177L64.9934 25.6742L64.9356 25.5161L64.8292 25.3857L64.0542 26.0177ZM64.0199 25.9797L64.727 25.2726L64.727 25.2726L64.0199 25.9797ZM64.1663 26.324L65.1662 26.3158L65.1648 26.1429L65.1054 25.9806L64.1663 26.324ZM64.1663 26.3342L65.1664 26.3342L65.1663 26.326L64.1663 26.3342ZM63.1663 27.5404H64.1663V25.1261L62.4592 26.8333L63.1663 27.5404ZM40.9128 49.0868L40.2057 49.7939L40.2057 49.7939L40.9128 49.0868ZM40.9128 48.3797L40.2057 47.6726L40.2057 47.6726L40.9128 48.3797ZM62.4592 26.8333L63.1663 27.5404L64.8734 25.8333H62.4592V26.8333ZM63.7143 25.8355L63.8096 24.8401L63.8095 24.8401L63.7143 25.8355ZM63.8577 25.8712L64.2401 24.9472L64.24 24.9472L63.8577 25.8712ZM26.833 26.8333V26.8333V24.8333C25.7284 24.8333 24.833 25.7287 24.833 26.8333H26.833ZM26.833 63.1666V26.8333H24.833V63.1666H26.833ZM26.833 63.1666H26.833H24.833C24.833 64.2712 25.7284 65.1666 26.833 65.1666V63.1666ZM63.1663 63.1666H26.833V65.1666H63.1663V63.1666ZM63.1663 63.1666V65.1666C64.2709 65.1666 65.1663 64.2712 65.1663 63.1666H63.1663ZM63.1663 48.7333V63.1666H65.1663V48.7333H63.1663ZM63.6663 49.2333C63.3902 49.2333 63.1663 49.0094 63.1663 48.7333H65.1663C65.1663 47.9048 64.4948 47.2333 63.6663 47.2333V49.2333ZM64.1663 48.7333C64.1663 49.0094 63.9425 49.2333 63.6663 49.2333V47.2333C62.8379 47.2333 62.1663 47.9048 62.1663 48.7333H64.1663ZM64.1663 63.1666V48.7333H62.1663V63.1666H64.1663ZM26.833 64.1666H63.1663V62.1666H26.833V64.1666ZM25.833 26.8333V63.1666H27.833V26.8333H25.833ZM41.2663 25.8333L26.833 25.8333L26.833 27.8333L41.2663 27.8333L41.2663 25.8333ZM40.7663 26.3333C40.7663 26.0571 40.9902 25.8333 41.2663 25.8333V27.8333C42.0948 27.8333 42.7663 27.1617 42.7663 26.3333H40.7663ZM41.2663 26.8333C40.9902 26.8333 40.7663 26.6094 40.7663 26.3333H42.7663C42.7663 25.5048 42.0948 24.8333 41.2663 24.8333V26.8333ZM26.833 26.8333H41.2663V24.8333H26.833V26.8333ZM64.8292 25.3857C64.7971 25.3464 64.763 25.3086 64.727 25.2726L63.3128 26.6868C63.3012 26.6752 63.2899 26.6628 63.2793 26.6497L64.8292 25.3857ZM65.1054 25.9806L64.9934 25.6742L63.1151 26.3611L63.2271 26.6675L65.1054 25.9806ZM65.1663 26.326L65.1662 26.3158L63.1663 26.3322L63.1664 26.3425L65.1663 26.326ZM65.1663 37.5333V26.3342H63.1663V37.5333H65.1663ZM63.6663 39.0333C64.4948 39.0333 65.1663 38.3617 65.1663 37.5333H63.1663C63.1663 37.2571 63.3902 37.0333 63.6663 37.0333V39.0333ZM62.1663 37.5333C62.1663 38.3617 62.8379 39.0333 63.6663 39.0333V37.0333C63.9425 37.0333 64.1663 37.2571 64.1663 37.5333H62.1663ZM62.1663 27.5404V37.5333H64.1663V27.5404H62.1663ZM42.327 49.7939L63.8734 28.2475L62.4592 26.8333L40.9128 48.3797L42.327 49.7939ZM40.2057 49.7939C40.7915 50.3797 41.7412 50.3797 42.327 49.7939L40.9128 48.3797C41.108 48.1844 41.4246 48.1844 41.6199 48.3797L40.2057 49.7939ZM40.2057 47.6726C39.6199 48.2584 39.6199 49.2081 40.2057 49.7939L41.6199 48.3797C41.8152 48.575 41.8152 48.8915 41.6199 49.0868L40.2057 47.6726ZM61.7521 26.1261L40.2057 47.6726L41.6199 49.0868L63.1663 27.5404L61.7521 26.1261ZM52.4663 27.8333H62.4592V25.8333H52.4663V27.8333ZM50.9663 26.3333C50.9663 27.1617 51.6379 27.8333 52.4663 27.8333V25.8333C52.7425 25.8333 52.9663 26.0571 52.9663 26.3333H50.9663ZM52.4663 24.8333C51.6379 24.8333 50.9663 25.5048 50.9663 26.3333H52.9663C52.9663 26.6094 52.7425 26.8333 52.4663 26.8333V24.8333ZM63.666 24.8333H52.4663V26.8333H63.666V24.8333ZM63.6663 24.8333H63.666V26.8333H63.6663V24.8333ZM63.8095 24.8401C63.7619 24.8355 63.7141 24.8333 63.6663 24.8333V26.8333C63.6505 26.8333 63.6347 26.8325 63.619 26.831L63.8095 24.8401ZM64.24 24.9472C64.1011 24.8897 63.9559 24.8541 63.8096 24.8401L63.619 26.831C63.5706 26.8264 63.5221 26.8146 63.4754 26.7952L64.24 24.9472ZM64.727 25.2726C64.5845 25.1301 64.4184 25.0209 64.2401 24.9472L63.4754 26.7952C63.4151 26.7702 63.3594 26.7334 63.3128 26.6868L64.727 25.2726Z' fill='%230F1022'/%3E%3C/svg%3E", - "name": "more", - "label": "More networks", - "href": "https://portalbridge.com/#/transfer", - "showOpenInNewIcon": false, - } - ] - } - ... -} -``` - -### More Tokens - -Show a special entry on the select tokens modal which redirects the user to a different page/dApp/mobile app. - -|Property|description|| -|:--|:--|:--:| -|`moreTokens.label`| Display text | mandatory| -|`moreTokens.href`| URL to redirect to. If present, the values `{:sourceChain}` and `{:targetChain}` are replaced with the selected currently selected chains before redirecting | mandatory| -|`moreTokens.target`| href target | optional, defaults to `_self` - - -### Explorer - -Enable explorer button to allow users to search for his transactions on a given explorer filtering by his wallet address - -|Property|description|| -|:--|:--|:--:| -|`explorer.label`| Display text | optional, defaults to `Transactions`| -|`explorer.href`| URL of the explorer, for instance https://wormholescan.com/. If present, the values `{:address}` is replaced with the connected wallet address| mandatory| -|`explorer.target`| href target | optional, defaults to `_blank` diff --git a/wormhole-connect-loader/package.json b/wormhole-connect-loader/package.json deleted file mode 100644 index 2d025698f..000000000 --- a/wormhole-connect-loader/package.json +++ /dev/null @@ -1,67 +0,0 @@ -{ - "name": "@wormhole-foundation/wormhole-connect", - "version": "0.0.12", - "dependencies": { - "@mui/material": "^5.12.1" - }, - "devDependencies": { - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^13.5.0", - "@types/jest": "^27.5.2", - "@types/node": "^16.18.23", - "@types/react": "^18.0.37", - "@types/react-dom": "^18.0.11", - "typescript": "^4.9.5" - }, - "scripts": { - "lint:ci": "prettier -c ./src && eslint --max-warnings=0 ./src", - "build:deps": "rm -rf dist && mkdir dist && cp -r ../wormhole-connect/build/* dist/ && cp dist/main-*.css dist/main.css", - "build:cjs": "tsc -p tsconfig.cjs.json", - "build:esm": "tsc -p tsconfig.esm.json", - "build": "npm run build:deps && rm -rf lib && npm run build:cjs && npm run build:esm && node scripts/replaceEnvWithCurrentVersion" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).", - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/types/index.d.ts", - "exports": { - ".": { - "require": "./lib/cjs/index.js", - "import": "./lib/esm/index.js", - "types": "./lib/types/index.d.ts" - } - }, - "files": [ - "lib", - "dist" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/wormhole-foundation/wormhole-connect.git" - }, - "author": "", - "license": "ISC", - "bugs": { - "url": "https://github.com/wormhole-foundation/wormhole-connect/issues" - }, - "homepage": "https://github.com/wormhole-foundation/wormhole-connect#readme" -} diff --git a/wormhole-connect-loader/scripts/replaceEnvWithCurrentVersion.js b/wormhole-connect-loader/scripts/replaceEnvWithCurrentVersion.js deleted file mode 100644 index 844bf5abf..000000000 --- a/wormhole-connect-loader/scripts/replaceEnvWithCurrentVersion.js +++ /dev/null @@ -1,22 +0,0 @@ -// Writing this as a helper to avoid having to touch code with every version change -// This simple file avoids introducing babel, webpack, or others into the build pipeline -// That said, there may be better alternatives to this, a hack to get the job done -const fs = require("fs"); -const fileNames = ["./lib/cjs/index.js", "./lib/esm/index.js"]; -const package = require("../package.json"); -for (const fileName of fileNames) { - fs.readFile(fileName, "utf8", (err, data) => { - if (err) throw err; - fs.writeFile( - fileName, - data.replace( - "process.env.REACT_APP_CONNECT_CURRENT_VERSION", - `"${package.version}"` - ), - "utf8", - function (err) { - if (err) throw err; - } - ); - }); -} diff --git a/wormhole-connect-loader/src/index.tsx b/wormhole-connect-loader/src/index.tsx deleted file mode 100644 index 3226a553e..000000000 --- a/wormhole-connect-loader/src/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { useEffect } from "react"; -import { WormholeConnectConfig } from "./types"; - -const PACKAGE_NAME = "@wormhole-foundation/wormhole-connect"; -const DEFAULT_VERSION = - process.env.REACT_APP_CONNECT_CURRENT_VERSION || "latest"; - -function WormholeBridge({ - config, - versionOrTag = DEFAULT_VERSION, -}: { - config?: WormholeConnectConfig; - versionOrTag?: string; -}) { - useEffect(() => { - const script = document.createElement("script"); - script.src = `https://www.unpkg.com/${PACKAGE_NAME}@${versionOrTag}/dist/main.js`; - script.type = "module"; - script.async = true; - - const link = document.createElement("link"); - link.href = `https://www.unpkg.com/${PACKAGE_NAME}@${versionOrTag}/dist/main.css`; - - document.body.appendChild(script); - document.body.appendChild(link); - return () => { - script.remove(); - link.remove(); - }; - }, [versionOrTag]); - - return ( -
- ); -} - -export * from "./theme"; -export * from "./types"; -export default WormholeBridge; diff --git a/wormhole-connect-loader/src/theme.ts b/wormhole-connect-loader/src/theme.ts deleted file mode 100644 index 0edddc6a1..000000000 --- a/wormhole-connect-loader/src/theme.ts +++ /dev/null @@ -1,307 +0,0 @@ -import { grey, green, orange, red, cyan, purple } from "@mui/material/colors"; - -export type PaletteColor = { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - A100: string; - A200: string; - A400: string; - A700: string; -}; - -export type Theme = { - primary: PaletteColor; - secondary: PaletteColor; - divider: string; - background: { - default: string; - }; - text: { - primary: string; - secondary: string; - }; - error: PaletteColor; - info: PaletteColor; - success: PaletteColor; - warning: PaletteColor; - button: { - primary: string; - primaryText: string; - disabled: string; - disabledText: string; - action: string; - actionText: string; - hover: string; - }; - options: { - hover: string; - select: string; - }; - card: { - background: string; - elevation: string; - secondary: string; - }; - popover: { - background: string; - elevation: string; - secondary: string; - }; - modal: { - background: string; - }; - font: { - primary: string; - header: string; - }; -}; - -export const OPACITY = { - 0: "00", - 5: "0C", - 7: "0F", - 10: "19", - 15: "26", - 20: "33", - 25: "3F", - 30: "4C", - 35: "59", - 40: "66", - 45: "72", - 50: "7F", - 55: "8C", - 60: "99", - 65: "A5", - 70: "B2", - 75: "BF", - 80: "CC", - 85: "D8", - 90: "E5", - 95: "F2", - 100: "FF", -}; - -export const light: Theme = { - primary: { - 50: "#161718", - 100: "#2d2e30", - 200: "#444548", - 300: "#5b5c60", - 400: "#727479", - 500: "#898b91", - 600: "#a0a2a9", - 700: "#b7b9c1", - 800: "#ced0d9", - 900: "#E5E8F2", - A100: "#ceced1", - A200: "#9d9ea4", - A400: "#535660", - A700: "#0a0e1c", - }, - secondary: grey, - divider: "#a0a2a9", - background: { - default: "#E5E8F2", - }, - text: { - primary: grey[900], - secondary: grey[800], - }, - error: red, - info: { - 50: "#d1e3f9", - 100: "#c8def7", - 200: "#bfd8f6", - 300: "#b6d3f5", - 400: "#adcdf4", - 500: "#A4C8F3", - 600: "#93b4da", - 700: "#83a0c2", - 800: "#728caa", - 900: "#627891", - A100: "#A4C8F3", - A200: "#A4C8F3", - A400: "#A4C8F3", - A700: "#A4C8F3", - }, - success: green, - warning: orange, - button: { - primary: "#ffffff", - primaryText: grey[900], - disabled: "#c8cad1", - disabledText: grey[800], - action: "#F3A01E", - actionText: "#000000", - hover: "#b7b9c1", - }, - options: { - hover: "#f9f9fb", - select: "#F0F0F5", - }, - card: { - background: "#ffffff", - elevation: "10px 10px 30px 15px #CCD2E7", - secondary: "#F0F0F5", - }, - popover: { - background: "#ffffff", - elevation: "10px 10px 30px 15px #CCD2E7", - secondary: "#F0F0F5", - }, - modal: { - background: "#ffffff", - }, - font: { - primary: '"Inter", sans-serif', - header: '"IBM Plex Mono", monospace', - }, -}; - -export const dark: Theme = { - primary: grey, - secondary: grey, - divider: "#ffffff" + OPACITY[20], - background: { - default: "#212121", - }, - text: { - primary: "#ffffff", - secondary: grey[500], - }, - error: red, - info: cyan, - success: green, - warning: orange, - button: { - primary: "#ffffff" + OPACITY[20], - primaryText: "#ffffff", - disabled: "#ffffff" + OPACITY[10], - disabledText: "#ffffff" + OPACITY[40], - action: purple[400], - actionText: "#000000", - hover: "#ffffff" + OPACITY[7], - }, - options: { - hover: "#373737", - select: "#3F3F3F", - }, - card: { - background: "#2F2F2F", - secondary: "#474747", - elevation: "none", - }, - popover: { - background: "#111111", - secondary: "#ffffff" + OPACITY[5], - elevation: "none", - }, - modal: { - background: "#2d2d2d", - }, - font: { - primary: '"Inter", sans-serif', - header: '"IBM Plex Mono", monospace', - }, -}; - -export const defaultTheme: Theme = { - primary: grey, - secondary: grey, - divider: "#ffffff" + OPACITY[20], - background: { - default: "wormhole", - }, - text: { - primary: "#ffffff", - secondary: grey[500], - }, - error: red, - info: { - 50: "#97a5b7", - 100: "#8293a9", - 200: "#6e819a", - 300: "#596f8c", - 400: "#445d7e", - 500: "#304C70", - 600: "#2b4464", - 700: "#263c59", - 800: "#21354e", - 900: "#1c2d43", - A100: "#304C70", - A200: "#304C70", - A400: "#304C70", - A700: "#304C70", - }, - // success: green, - success: { - 50: "#66d6cd", - 100: "#4dcfc4", - 200: "#33c8bc", - 300: "#1ac1b4", - 400: "#01BBAC", - 500: "#00a89a", - 600: "#009589", - 700: "#008278", - 800: "#007067", - 900: "#005d56", - A100: "#00a89a", - A200: "#00a89a", - A400: "#00a89a", - A700: "#00a89a", - }, - warning: { - 50: "#ffe3a4", - 100: "#ffdd91", - 200: "#ffd77f", - 300: "#ffd26d", - 400: "#ffcc5b", - 500: "#FFC749", - 600: "#e5b341", - 700: "#cc9f3a", - 800: "#b28b33", - 900: "#99772b", - A100: "#FFC749", - A200: "#FFC749", - A400: "#FFC749", - A700: "#FFC749", - }, - button: { - primary: "#ffffff" + OPACITY[10], - primaryText: "#ffffff", - disabled: "#ffffff" + OPACITY[7], - disabledText: "#ffffff" + OPACITY[40], - action: "#ffffff", - actionText: "#000000", - hover: "#ffffff" + OPACITY[7], - }, - options: { - hover: "#ffffff" + OPACITY[7], - select: "#ffffff" + OPACITY[10], - }, - card: { - background: "#ffffff" + OPACITY[5], - secondary: "#ffffff" + OPACITY[5], - elevation: "none", - }, - popover: { - background: "#1b2033", - secondary: "#ffffff" + OPACITY[5], - elevation: "none", - }, - modal: { - background: "#0F1024", - }, - font: { - primary: '"Inter", sans-serif', - header: '"IBM Plex Mono", monospace', - }, -}; diff --git a/wormhole-connect-loader/src/types.ts b/wormhole-connect-loader/src/types.ts deleted file mode 100644 index fdb494a70..000000000 --- a/wormhole-connect-loader/src/types.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { Theme } from "./theme"; -export const MAINNET_CHAINS = { - solana: 1, - ethereum: 2, - bsc: 4, - polygon: 5, - avalanche: 6, - fantom: 10, - klaytn: 13, - celo: 14, - moonbeam: 16, - injective: 19, - osmosis: 20, - sui: 21, - aptos: 22, - arbitrum: 23, - optimism: 24, - base: 30, - wormchain: 3104, - evmos: 4001, - kujira: 4002, -} as const; -export type MainnetChainName = keyof typeof MAINNET_CHAINS; -export type MainnetChainId = (typeof MAINNET_CHAINS)[MainnetChainName]; - -export const TESTNET_CHAINS = { - solana: 1, - goerli: 2, - bsc: 4, - mumbai: 5, - fuji: 6, - fantom: 10, - klaytn: 13, - alfajores: 14, - moonbasealpha: 16, - injective: 19, - osmosis: 20, - sui: 21, - aptos: 22, - arbitrumgoerli: 23, - optimismgoerli: 24, - basegoerli: 30, - wormchain: 3104, - evmos: 4001, - kujira: 4002, - sepolia: 10002, - arbitrum_sepolia: 10003, - base_sepolia: 10004, - optimism_sepolia: 10005, -} as const; -export type TestnetChainName = keyof typeof TESTNET_CHAINS; -export type TestnetChainId = (typeof TESTNET_CHAINS)[TestnetChainName]; - -export type ChainName = MainnetChainName | TestnetChainName; -export type ChainId = MainnetChainId | TestnetChainId; - -export type Rpcs = { - [chain in ChainName]?: string; -}; - -export interface BridgeDefaults { - fromNetwork?: ChainName; - toNetwork?: ChainName; - token?: string; - requiredNetwork?: ChainName; -} - -// Keep this in sync with wormhole-connect/src/config/types.ts! -// TODO: move to a shared package -export interface WormholeConnectConfig { - showHamburgerMenu?: boolean; - env?: "mainnet" | "testnet" | "devnet"; - rpcs?: Rpcs; - rest?: Rpcs; - networks?: ChainName[]; - tokens?: string[]; - mode?: "dark" | "light"; - customTheme?: Theme; - cta?: { - text: string; - link: string; - }; - explorer?: ExplorerConfig; - menu?: MenuEntry[]; - bridgeDefaults?: BridgeDefaults; - routes?: string[]; - pageHeader?: string; - cctpWarning?: { - href: string; - }; - pageSubHeader?: string; - searchTx?: SearchTxConfig; - moreTokens?: MoreTokenConfig; - moreNetworks?: MoreChainConfig; - partnerLogo?: string; - walletConnectProjectId?: string; - ethBridgeMaxAmount?: number; - wstETHBridgeMaxAmount?: number; - coinGeckoApiKey?: string; -} - -export type ExplorerConfig = { - href: string; - label?: string; - target?: "_blank" | "_self"; -}; - -export type SearchTxConfig = { - txHash?: string; - chainName?: ChainName; -}; - -export type MoreTokenConfig = { - label: string; - href: string; - target?: "_blank" | "_self"; -}; - -export type MoreChainConfig = { - href: string; - target?: "_blank" | "_self"; - description: string; - networks: MoreChainDefinition[]; -}; - -export type MoreChainDefinition = { - icon: string; - href?: string; - label: string; - name?: string; - description?: string; - target?: "_blank" | "_self"; - showOpenInNewIcon?: boolean; -}; - -export interface MenuEntry { - label: string; - href: string; - target?: string; - order?: number; -} diff --git a/wormhole-connect-loader/tsconfig.cjs.json b/wormhole-connect-loader/tsconfig.cjs.json deleted file mode 100644 index 5dd146c2d..000000000 --- a/wormhole-connect-loader/tsconfig.cjs.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "target": "es5", - "module": "CommonJS", - "outDir": "./lib/cjs", - }, - "include": [ - "src" - ] -} diff --git a/wormhole-connect-loader/tsconfig.esm.json b/wormhole-connect-loader/tsconfig.esm.json deleted file mode 100644 index d04d4ecc5..000000000 --- a/wormhole-connect-loader/tsconfig.esm.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "target": "es5", - "module": "esnext", - "outDir": "./lib/esm", - "declarationDir": "./lib/types", - "declaration": true - }, - "include": [ - "src" - ] -} diff --git a/wormhole-connect-loader/tsconfig.json b/wormhole-connect-loader/tsconfig.json deleted file mode 100644 index a4e39ef08..000000000 --- a/wormhole-connect-loader/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "outDir": "lib", - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "react-jsx" - }, - "include": [ - "src" - ] -} diff --git a/wormhole-connect.png b/wormhole-connect.png new file mode 100644 index 000000000..af0142244 Binary files /dev/null and b/wormhole-connect.png differ diff --git a/wormhole-connect/.gitignore b/wormhole-connect/.gitignore index 5dfdc7e37..460bf706f 100644 --- a/wormhole-connect/.gitignore +++ b/wormhole-connect/.gitignore @@ -14,6 +14,7 @@ # production /build dist +lib # misc .DS_Store diff --git a/wormhole-connect/README.md b/wormhole-connect/README.md deleted file mode 100644 index 2cbdfad3b..000000000 --- a/wormhole-connect/README.md +++ /dev/null @@ -1,84 +0,0 @@ -# Wormhole Connect - -Integration does not get easier than this. Wormhole Connect is an easy seamless experience that will help to bring all the functionality of the Wormhole Token Bridge right into your application. - -## Customizer - -Customize and integrate via our no-code solution: https://connect-in-style.wormhole.com/ - -## Integration instructions - -1. (optional) Create a JSON config with customized values: - -```ts -{ - // accepted values for testnet: - // ["goerli", "mumbai", "bsc", "fuji", "fantom", "alfajores", "moonbasealpha", "solana", "sui", "aptos", "sei", "arbitrumgoerli", "optimismgoerli", "basegoerli"] - // accepted values for mainnet: - // ["ethereum", "bsc", "polygon", "avalanche", "fantom", "celo", "moonbeam", "solana", "sui", "aptos", "arbitrum", "optimism", "base"] - "networks": ["goerli", "mumbai"], - // accepted values: "ETH", "WETH", "USDC", "MATIC", "WMATIC", "BNB", "WBNB", "AVAX", "WAVAX", "FTM", "WFTM", "CELO - "tokens": ["ETH", "WETH", "MATIC", "WMATIC"], - // accepted values: "light", "dark" or custom (future) - "theme": "light" -} -``` - -> See the full config for supported chains [here](https://github.com/wormhole-foundation/wormhole-connect/tree/development/wormhole-connect/src/config) - -2. Add a script and link tag - -```html - - - - -``` - -3. Embed it in your application - -This is where your widget will appear. Specify an id of `wormhole-connect` and pass it the stringified json config to customize. - -```jsx -// root element with id -
-// with customization -
-// stringify JSON config -
-``` - -### React Applications - -For React applications, you must add the script tags after the dom has been rendered: - -```ts -class WormholeConnect extends React.Component { - componentDidMount() { - const link = document.createElement('link'); - link.src = - 'https://wormhole-foundation.github.io/wormhole-connect/main.ba17183d.css'; - link.async = true; - - const script1 = document.createElement('script'); - script1.src = - 'https://wormhole-foundation.github.io/wormhole-connect/718.06852233.chunk.js'; - script1.async = true; - - const script2 = document.createElement('script'); - script2.src = - 'https://wormhole-foundation.github.io/wormhole-connect/main.js'; - script2.async = true; - - document.body.appendChild(link); - document.body.appendChild(script1); - document.body.appendChild(script2); - } - - render() { - return
; - } -} -``` diff --git a/wormhole-connect/index.html b/wormhole-connect/index.html index 7b5b28dad..07a0c896e 100644 --- a/wormhole-connect/index.html +++ b/wormhole-connect/index.html @@ -22,11 +22,11 @@ font-family: Arial, Helvetica, sans-serif; } - +

Demo App

-
+
diff --git a/wormhole-connect/package.json b/wormhole-connect/package.json index 59c57c22f..48083d6ab 100644 --- a/wormhole-connect/package.json +++ b/wormhole-connect/package.json @@ -1,11 +1,20 @@ { - "name": "@wormhole-foundation/wormhole-connect-app", + "name": "@wormhole-foundation/wormhole-connect", "version": "0.0.1-beta.0", - "private": true, - "main": "dist/main.js", - "publishConfig": { - "access": "restricted" + "main": "./lib/index.js", + "module": "./lib/index.mjs", + "types": "./lib/index.d.ts", + "exports": { + ".": { + "require": "./lib/index.js", + "import": "./lib/index.mjs", + "types": "./lib/index.d.ts" + } }, + "files": [ + "lib", + "dist" + ], "dependencies": { "@certusone/wormhole-sdk": "^0.10.10", "@cosmjs/cosmwasm-stargate": "^0.31.3", @@ -39,18 +48,22 @@ "material-ui-popup-state": "^5.0.4", "os-browserify": "^0.3.0", "postcss": "^8.4.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-redux": "^8.0.5", "tss-react": "^4.5.2", "use-debounce": "^9.0.4", - "web-vitals": "^2.1.4", - "@wormhole-foundation/wormhole-connect-sdk": "0.1.0-beta.0" + "web-vitals": "^2.1.4" }, "scripts": { + "start": "vite", + "build": "npm run build:lib; npm run build:hosted; npm run build:netlify", + "build:lib": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build", + "build:hosted": "VITE_BUILD_HOSTED=1 NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build", + "build:netlify": "VITE_BUILD_NETLIFY=1 NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build", "lint": "scripts/lint.sh", "lint:ci": "scripts/lint_ci.sh", "prettier": "prettier --write ./src", - "start": "vite", - "build": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=6144 vite build", "analyze": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=6144 vite-bundle-visualizer", "test": "jest ./tests/*.test.ts --detectOpenHandles", "checksdn": "npx tsx scripts/ofac/checkSdnListForUpdates.ts" @@ -79,7 +92,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-env": "^7.20.2", "@types/jest": "^27.5.2", - "@types/node": "^16.18.11", + "@types/node": "^20", "@types/node-fetch": "^2.6.3", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", @@ -92,13 +105,12 @@ "eslint": "^8.31.0", "eslint-config-prettier": "^8.6.0", "jest": "^29.5.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", "ts-jest": "^29.1.1", "typescript": "^5.3.3", "vite": "^5.0.8", "vite-bundle-visualizer": "^0.11.0", "vite-plugin-checker": "^0.6.2", + "vite-plugin-dts": "^3.7.3", "vite-plugin-node-polyfills": "^0.17.0" }, "peerDependencies": { diff --git a/wormhole-connect/src/App.test.tsx b/wormhole-connect/src/App.test.tsx deleted file mode 100644 index 2a68616d9..000000000 --- a/wormhole-connect/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/wormhole-connect/src/App.tsx b/wormhole-connect/src/App.tsx deleted file mode 100644 index 4b7123b6e..000000000 --- a/wormhole-connect/src/App.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import { Provider } from 'react-redux'; -import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -// import Box from '@mui/material/Box'; -import { PaletteMode } from '@mui/material'; -// import IconButton from '@mui/material/IconButton'; -// import Brightness4Icon from '@mui/icons-material/Brightness4'; -// import Brightness7Icon from '@mui/icons-material/Brightness7'; -import './App.css'; -import { store } from './store'; -import AppRouter from './AppRouter'; -import { getDesignTokens } from './theme'; -import { THEME_MODE } from './config'; -import BackgroundImage from './components/Background/BackgroundImage'; -import ErrorBoundary from './components/ErrorBoundary'; - -const ColorModeContext = React.createContext({ - toggleColorMode: () => { - /* noop TODO ??? what is this for */ - }, -}); - -function App() { - const [mode, setMode] = React.useState(THEME_MODE); - const colorMode = React.useMemo( - () => ({ - // The dark mode switch would invoke this method - toggleColorMode: () => { - setMode((prevMode: PaletteMode) => - prevMode === 'light' ? 'dark' : 'light', - ); - }, - }), - [], - ); - // Update the theme only if the mode changes - const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]); - - return ( - - - - - - - - - - - - - - ); -} - -export default function ToggleColorMode() { - const [mode, setMode] = React.useState<'light' | 'dark'>('light'); - const colorMode = React.useMemo( - () => ({ - toggleColorMode: () => { - setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); - }, - }), - [], - ); - - const theme = React.useMemo( - () => - createTheme({ - palette: { - mode, - }, - }), - [mode], - ); - - return ( - - - - - - ); -} diff --git a/wormhole-connect/src/AppRouter.tsx b/wormhole-connect/src/AppRouter.tsx index 0496b73f6..700f84ddf 100644 --- a/wormhole-connect/src/AppRouter.tsx +++ b/wormhole-connect/src/AppRouter.tsx @@ -6,6 +6,8 @@ import { RootState } from './store'; import { clearRedeem } from './store/redeem'; import { clearTransfer } from './store/transferInput'; import { usePrevious } from './utils'; +import { WormholeConnectConfig } from './config/types'; +import { setConfig } from './config'; import Bridge from './views/Bridge/Bridge'; import FAQ from './views/FAQ'; @@ -34,11 +36,27 @@ const useStyles = makeStyles()((theme: any) => ({ }, })); +interface Props { + config?: WormholeConnectConfig; +} + // since this will be embedded, we'll have to use pseudo routes instead of relying on the url -function AppRouter() { +function AppRouter({ config }: Props) { const { classes } = useStyles(); const dispatch = useDispatch(); + // We update the global config once when WormholeConnect is first mounted, if a custom + // config was provided. + // + // We don't allow config changes afterwards because they could lead to lots of + // broken and undesired behavior. + React.useEffect(() => { + if (config) { + setConfig(config); + dispatch(clearTransfer()); + } + }, []); + const showWalletModal = useSelector( (state: RootState) => state.router.showWalletModal, ); diff --git a/wormhole-connect/src/WormholeConnect.tsx b/wormhole-connect/src/WormholeConnect.tsx new file mode 100644 index 000000000..d79fb0279 --- /dev/null +++ b/wormhole-connect/src/WormholeConnect.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { Provider } from 'react-redux'; +import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import './App.css'; +import { store } from './store'; +import AppRouter from './AppRouter'; +import { getDesignTokens, dark } from './theme'; +import ErrorBoundary from './components/ErrorBoundary'; +import { WormholeConnectConfig } from './config/types'; +import { CustomTheme } from 'theme'; + +export interface WormholeConnectProps { + // theme can be updated at any time to change the colors of Connect + theme?: CustomTheme; + // config is only used once, when Connect first mounts, to initialize the global config + config?: WormholeConnectConfig; +} + +export default function WormholeConnect({ + config, + theme, +}: WormholeConnectProps) { + // Handle theme changes at any time + const muiTheme = React.useMemo( + () => createTheme(getDesignTokens(theme ?? dark)), + [theme], + ); + + return ( + + + + + + + + + + ); +} diff --git a/wormhole-connect/src/components/Background/BackgroundImage.tsx b/wormhole-connect/src/components/Background/BackgroundImage.tsx deleted file mode 100644 index bd3d38c6d..000000000 --- a/wormhole-connect/src/components/Background/BackgroundImage.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from 'react'; -import { makeStyles } from 'tss-react/mui'; - -import { OPACITY } from '../../utils/style'; -import { THEME } from 'config'; - -const colors = { - bg: '#030712', - purple: '#3B234E', - blue: '#302A60', - pink: '#5A1E46', -}; - -const useStyles = makeStyles()(() => ({ - container: { - backgroundColor: `${colors.bg} !important`, - width: '100%', - minHeight: '100vh', - height: '100%', - zIndex: '-2', - }, - bg: { - position: 'relative', - overflow: 'hidden', - width: '100%', - height: '100%', - }, - circles: { - position: 'absolute', - display: 'flex', - flexDirection: 'column', - width: '100%', - minWidth: '600px', - height: '100%', - top: 0, - bottom: 0, - left: 0, - right: 0, - overscrollBehaviorY: 'none', - backgroundImage: `url(circles.svg)`, - backgroundPosition: 'top center', - backgroundRepeat: 'repeat-y', - backgroundSize: '120%', - zIndex: '-1', - pointerEvent: 'none', - }, - background: { - position: 'absolute', - width: '100%', - minWidth: '600px', - height: '100%', - top: 0, - bottom: 0, - left: 0, - right: 0, - backgroundColor: colors.bg, - zIndex: '-2', - pointerEvent: 'none', - }, - gradientRight: { - position: 'absolute', - top: '72px', - right: '-1000px', - width: '1757px', - minWidth: '600px', - height: '1506px', - background: `radial-gradient(closest-side at 50% 50%, ${colors.blue} 0%, ${colors.blue}00 100%)`, - opacity: '0.5', - transform: 'matrix(0.87, 0.48, -0.48, 0.87, 0, 0)', - zIndex: '-1', - pointerEvent: 'none', - }, - gradientLeft: { - top: '-530px', - left: '-350px', - width: '1379px', - minWidth: '600px', - height: '1378px', - position: 'absolute', - background: `radial-gradient(closest-side at 50% 50%, ${colors.pink}${OPACITY[60]} 0%, ${colors.pink}00 100%)`, - opacity: '0.5', - zIndex: '-1', - pointerEvent: 'none', - }, - gradientLeft2: { - bottom: '-330px', - left: '-350px', - width: '1379px', - height: '1378px', - position: 'absolute', - background: `radial-gradient(closest-side at 50% 50%, ${colors.purple} 0%, ${colors.purple}00 100%)`, - opacity: '0.5', - zIndex: '-1', - pointerEvent: 'none', - }, - gradientRight2: { - position: 'absolute', - bottom: '-900px', - right: '-1000px', - width: '1757px', - minWidth: '600px', - height: '1506px', - background: `radial-gradient(closest-side at 50% 50%, ${colors.purple} 0%, ${colors.purple}00 100%)`, - opacity: '0.5', - transform: 'matrix(0.87, 0.48, -0.48, 0.87, 0, 0);', - zIndex: '-1', - pointerEvent: 'none', - }, - children: { - width: '100%', - }, -})); - -type Props = { - children: JSX.Element | JSX.Element[]; -}; - -function Background({ children }: Props) { - const { classes } = useStyles(); - - return THEME.background.default === 'wormhole' ? ( -
-
- {children} -
-
-
-
-
-
-
-
- ) : ( -
{children}
- ); -} - -export default Background; diff --git a/wormhole-connect/src/components/ChainsModal.tsx b/wormhole-connect/src/components/ChainsModal.tsx index 6934e6142..fcc69bb07 100644 --- a/wormhole-connect/src/components/ChainsModal.tsx +++ b/wormhole-connect/src/components/ChainsModal.tsx @@ -5,7 +5,7 @@ import { ChainConfig, ChainName, } from '@wormhole-foundation/wormhole-connect-sdk'; -import { CHAINS_ARR, CHAINS, MORE_NETWORKS } from 'config'; +import config from 'config'; import { CENTER, joinClass } from 'utils/style'; import Header from './Header'; @@ -87,7 +87,7 @@ function ChainsModal(props: Props) { const { classes } = useStyles(); const theme: any = useTheme(); - const chains = props.chains || CHAINS_ARR; + const chains = props.chains || config.chainsArr; const [search, setSearch] = useState(); const handleExtraNetwork = ( href: string, @@ -97,7 +97,7 @@ function ChainsModal(props: Props) { if (href) { props.onMoreNetworkSelect?.(href, chainName, target); } else { - props.onMoreNetworkSelect?.(MORE_NETWORKS!.href, chainName, target); + props.onMoreNetworkSelect?.(config.moreNetworks!.href, chainName, target); } }; const supportedChains = useMemo(() => { @@ -119,7 +119,7 @@ function ChainsModal(props: Props) { const showChain = (chain: ChainName) => { if (chain === 'wormchain') return false; if (!search) return true; - const chainConfig = CHAINS[chain]!; + const chainConfig = config.chains[chain]!; const name = chainConfig.displayName.toLowerCase(); return name.includes(search); }; @@ -138,7 +138,7 @@ function ChainsModal(props: Props) { 6 ? 650 : 500} + width={config.chainsArr.length > 6 ? 650 : 500} onClose={handleClose} >
@@ -172,7 +172,7 @@ function ChainsModal(props: Props) { ) ); })} - {MORE_NETWORKS?.networks.map((chain, i) => { + {config.moreNetworks?.networks.map((chain, i) => { return (
handleExtraNetwork( - chain.href || MORE_NETWORKS!.href, + chain.href || config.moreNetworks!.href, chain.name || chain.label.toLocaleLowerCase().split(' ').join('_'), - chain.target || MORE_NETWORKS?.target, + chain.target || config.moreNetworks?.target, ) } > @@ -195,7 +195,7 @@ function ChainsModal(props: Props) { height={48} showOpenInNewIcon={chain.showOpenInNewIcon} description={ - chain.description || MORE_NETWORKS?.description + chain.description || config.moreNetworks?.description } />
{chain.label}
diff --git a/wormhole-connect/src/components/ConnectWallet.tsx b/wormhole-connect/src/components/ConnectWallet.tsx index ac1e7b31e..0931fdf71 100644 --- a/wormhole-connect/src/components/ConnectWallet.tsx +++ b/wormhole-connect/src/components/ConnectWallet.tsx @@ -15,7 +15,7 @@ import WalletIcon from 'icons/Wallet'; import WalletIcons from 'icons/WalletIcons'; import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; import Popover from '@mui/material/Popover'; -import { EXPLORER } from 'config'; +import config from 'config'; import { ExplorerConfig } from 'config/types'; type StyleProps = { disabled?: boolean }; @@ -151,12 +151,12 @@ function ConnectWallet(props: Props) { > Copy address
- {EXPLORER ? ( + {config.explorer ? ( ) : null}
); } else { - let button = ( + const button = (
connect()}>
{mobile ? 'Connect' : 'Connect wallet'}
diff --git a/wormhole-connect/src/components/FooterNavBar.tsx b/wormhole-connect/src/components/FooterNavBar.tsx index f3eb260bc..a30b367a6 100644 --- a/wormhole-connect/src/components/FooterNavBar.tsx +++ b/wormhole-connect/src/components/FooterNavBar.tsx @@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'; import { makeStyles } from 'tss-react/mui'; import { ICON } from 'utils/style'; import { Route, setRoute } from 'store/router'; -import { MENU_ENTRIES } from 'config'; +import config from 'config'; import { MenuEntry } from 'config/types'; const useStyles = makeStyles()((theme) => ({ @@ -61,7 +61,7 @@ export default function FooterNavBar() { ); const entries = useMemo( - () => MENU_ENTRIES.reduce(itemAppender, defaultMenuItems(navigate)), + () => config.menu.reduce(itemAppender, defaultMenuItems(navigate)), [navigate], ); diff --git a/wormhole-connect/src/components/TokensModal.tsx b/wormhole-connect/src/components/TokensModal.tsx index 976ad91db..ca9febfed 100644 --- a/wormhole-connect/src/components/TokensModal.tsx +++ b/wormhole-connect/src/components/TokensModal.tsx @@ -5,7 +5,8 @@ import IconButton from '@mui/material/IconButton'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { useTheme } from '@mui/material/styles'; import { ChainName, TokenId } from '@wormhole-foundation/wormhole-connect-sdk'; -import { AVAILABLE_MARKETS_URL, CHAINS, MORE_TOKENS } from 'config'; +import { AVAILABLE_MARKETS_URL } from 'config/constants'; +import config from 'config'; import { TokenConfig } from 'config/types'; import { BigNumber } from 'ethers'; import TokenIcon from 'icons/TokenIcons'; @@ -28,7 +29,6 @@ import { import { makeStyles } from 'tss-react/mui'; import { displayAddress, sortTokens } from 'utils'; import { isGatewayChain } from 'utils/cosmos'; -import { wh } from 'utils/sdk'; import { CENTER, NO_INPUT } from 'utils/style'; import Header from './Header'; import Modal from './Modal'; @@ -142,7 +142,7 @@ const useStyles = makeStyles()((theme: any) => ({ })); const displayNativeChain = (token: TokenConfig): string => { - const chainConfig = CHAINS[token.nativeChain]; + const chainConfig = config.chains[token.nativeChain]; if (!chainConfig) return ''; return chainConfig.displayName; }; @@ -239,19 +239,22 @@ function DisplayTokens(props: DisplayTokensProps) {
))} - {MORE_TOKENS ? ( + {config.moreTokens ? ( <>