@wormhole-foundation/wormhole-connect 0.0.1-beta.0

package/README.md

@@ -0,0 +1,196 @@
+# 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.
+
+## Integrate with script/link tags
+
+### 1. (optional) Create a JSON config with customized values:
+
+```ts
+{
+  "environment": "testnet",
+  "networks": ["goerli", "mumbai"],
+  "tokens": ["ETH", "WETH", "MATIC", "WMATIC"],
+  "mode": "light"
+  "customTheme": {} // see src/theme.ts
+}
+```
+
+#### Accepted values
+
+Environment:
+| Mainnet    | Testnet   |
+| ---------- | --------- |
+| mainnet    | testnet   |
+
+Chains:
+| Mainnet    | Testnet   |
+| ---------- | --------- |
+| ethereum   | goerli    |
+| polygon    | mumbai    |
+| bsc        | bsc       |
+| avalanche  | fuji      |
+| celo       | avalanche |
+| moonbeam   | moonbase  |
+| solana     | solana    |
+
+Tokens:
+| Mainnet | Testnet |
+| ------- | ------- |
+| ETH     | ETH     |
+| WETH    | WETH    |
+| USDC    | USDC    |
+| MATIC   | MATIC   |
+| WMATIC  | WMATIC  |
+| BNB     | BNB     |
+| WBNB    | WBNB    |
+| AVAX    | AVAX    |
+| WAVAX   | WAVAX   |
+| FTM     | FTM     |
+| WFTM    | WFTM    |
+| CELO    | CELO    |
+| GLMR    | GLMR    |
+| WGLMR   | WGLMR   |
+| SOL     | WSOL    |
+
+Mode:
+|      |       |
+| ---- | ----- |
+| dark | light |
+
+Custom theme:
+
+```js
+import { dark, light, Theme } from '@wormhole-foundation/wormhole-connect';
+```
+
+### 2. Add a script and link tag
+
+```html
+<!-- paste below into index.html body -->
+<script src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.0/dist/main.js"></script>
+<link rel="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.0/dist/main.css" />
+```
+
+### 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
+<div id="wormhole-connect"></div>
+// with customization
+<div id="wormhole-connect" config='{"networks": ["goerli", "mumbai"], "tokens": ["ETH", "WETH", "MATIC", "WMATIC"], "mode": "light"}'></div>
+// stringify JSON config
+<div id="wormhole-connect" config={JSON.stringify(jsonConfig)} />
+```
+
+## Integrate with React
+
+```jsx
+import WormholeBridge from '@wormhole-foundation/wormhole-connect';
+function App() {
+  return (
+    <WormholeBridge />
+  );
+}
+```
+
+Specify networks/tokens (optional)
+```jsx
+import WormholeBridge from '@wormhole-foundation/wormhole-connect';
+const config = {
+  environment: "mainnet",
+  networks: ["ethereum", "polygon", "solana"],
+  tokens: ["ETH", "WETH", "MATIC", "WMATIC"],
+}
+
+function App() {
+  return (
+    <WormholeBridge config={config} />
+  );
+}
+```
+
+Customize theme (optional)
+```jsx
+import WormholeBridge, { light, Theme } 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';
+const config = {
+  mode: 'light',
+  customTheme: customized,
+}
+
+function App() {
+  return (
+    <WormholeBridge config={config} />
+  );
+}
+```
+
+Create fully customized theme (optional)
+```jsx
+import WormholeBridge, { Theme, OPACITY } 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 = {
+  mode: 'dark',
+  customTheme: customized,
+}
+
+function App() {
+  return (
+    <WormholeBridge config={config} />
+  );
+}
+```

package/lib/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WormholeConnectConfig } from './types';
+declare class WormholeBridge extends React.Component<{
+    config?: WormholeConnectConfig;
+}> {
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export * from './theme';
+export * from './types';
+export default WormholeBridge;

package/lib/index.js

@@ -0,0 +1,41 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+var WormholeBridge = /** @class */ (function (_super) {
+    __extends(WormholeBridge, _super);
+    function WormholeBridge() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    WormholeBridge.prototype.componentDidMount = function () {
+        var script = document.createElement("script");
+        script.src = "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.0/dist/main.js";
+        script.async = true;
+        var link = document.createElement("link");
+        link.href = "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.0/dist/main.css";
+        document.body.appendChild(script);
+        document.body.appendChild(link);
+    };
+    WormholeBridge.prototype.render = function () {
+        return (
+        // @ts-ignore
+        _jsx("div", { id: "wormhole-connect", config: this.props.config ? JSON.stringify(this.props.config) : null }));
+    };
+    return WormholeBridge;
+}(React.Component));
+export * from './theme';
+export * from './types';
+export default WormholeBridge;

package/lib/theme.d.ts

@@ -0,0 +1,220 @@
+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 declare const OPACITY: {
+    0: string;
+    5: string;
+    7: string;
+    10: string;
+    15: string;
+    20: string;
+    25: string;
+    30: string;
+    35: string;
+    40: string;
+    45: string;
+    50: string;
+    55: string;
+    60: string;
+    65: string;
+    70: string;
+    75: string;
+    80: string;
+    85: string;
+    90: string;
+    95: string;
+    100: string;
+};
+export declare const light: Theme;
+export declare const dark: {
+    primary: {
+        50: "#fafafa";
+        100: "#f5f5f5";
+        200: "#eeeeee";
+        300: "#e0e0e0";
+        400: "#bdbdbd";
+        500: "#9e9e9e";
+        600: "#757575";
+        700: "#616161";
+        800: "#424242";
+        900: "#212121";
+        A100: "#f5f5f5";
+        A200: "#eeeeee";
+        A400: "#bdbdbd";
+        A700: "#616161";
+    };
+    secondary: {
+        50: "#fafafa";
+        100: "#f5f5f5";
+        200: "#eeeeee";
+        300: "#e0e0e0";
+        400: "#bdbdbd";
+        500: "#9e9e9e";
+        600: "#757575";
+        700: "#616161";
+        800: "#424242";
+        900: "#212121";
+        A100: "#f5f5f5";
+        A200: "#eeeeee";
+        A400: "#bdbdbd";
+        A700: "#616161";
+    };
+    divider: string;
+    background: {
+        default: string;
+    };
+    text: {
+        primary: string;
+        secondary: "#9e9e9e";
+    };
+    error: {
+        50: "#ffebee";
+        100: "#ffcdd2";
+        200: "#ef9a9a";
+        300: "#e57373";
+        400: "#ef5350";
+        500: "#f44336";
+        600: "#e53935";
+        700: "#d32f2f";
+        800: "#c62828";
+        900: "#b71c1c";
+        A100: "#ff8a80";
+        A200: "#ff5252";
+        A400: "#ff1744";
+        A700: "#d50000";
+    };
+    info: {
+        50: "#e1f5fe";
+        100: "#b3e5fc";
+        200: "#81d4fa";
+        300: "#4fc3f7";
+        400: "#29b6f6";
+        500: "#03a9f4";
+        600: "#039be5";
+        700: "#0288d1";
+        800: "#0277bd";
+        900: "#01579b";
+        A100: "#80d8ff";
+        A200: "#40c4ff";
+        A400: "#00b0ff";
+        A700: "#0091ea";
+    };
+    success: {
+        50: "#e8f5e9";
+        100: "#c8e6c9";
+        200: "#a5d6a7";
+        300: "#81c784";
+        400: "#66bb6a";
+        500: "#4caf50";
+        600: "#43a047";
+        700: "#388e3c";
+        800: "#2e7d32";
+        900: "#1b5e20";
+        A100: "#b9f6ca";
+        A200: "#69f0ae";
+        A400: "#00e676";
+        A700: "#00c853";
+    };
+    warning: {
+        50: "#fff3e0";
+        100: "#ffe0b2";
+        200: "#ffcc80";
+        300: "#ffb74d";
+        400: "#ffa726";
+        500: "#ff9800";
+        600: "#fb8c00";
+        700: "#f57c00";
+        800: "#ef6c00";
+        900: "#e65100";
+        A100: "#ffd180";
+        A200: "#ffab40";
+        A400: "#ff9100";
+        A700: "#ff6d00";
+    };
+    button: {
+        primary: string;
+        primaryText: string;
+        disabled: string;
+        disabledText: string;
+        action: "#ffb74d";
+        actionText: string;
+        hover: string;
+    };
+    options: {
+        hover: string;
+        select: string;
+    };
+    card: {
+        background: string;
+        secondary: string;
+        elevation: string;
+    };
+    popover: {
+        background: string;
+        secondary: string;
+        elevation: string;
+    };
+    modal: {
+        background: string;
+    };
+};
+export declare const defaultTheme: Theme;

package/lib/theme.js

@@ -0,0 +1,239 @@
+import grey from '@mui/material/colors/grey';
+import green from '@mui/material/colors/green';
+import orange from '@mui/material/colors/orange';
+import red from '@mui/material/colors/red';
+import lightblue from '@mui/material/colors/lightBlue';
+export var 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 var light = {
+    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 var dark = {
+    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',
+    },
+};
+export var defaultTheme = {
+    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' + OPACITY[20],
+        actionText: '#ffffff',
+        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',
+    },
+};

package/lib/types.d.ts

@@ -0,0 +1,37 @@
+export declare const MAINNET_CHAINS: {
+    readonly solana: 1;
+    readonly ethereum: 2;
+    readonly bsc: 4;
+    readonly polygon: 5;
+    readonly avalanche: 6;
+    readonly fantom: 10;
+    readonly celo: 14;
+    readonly moonbeam: 16;
+};
+export type MainnetChainName = keyof typeof MAINNET_CHAINS;
+export type MainnetChainId = (typeof MAINNET_CHAINS)[MainnetChainName];
+export declare const TESTNET_CHAINS: {
+    readonly solana: 1;
+    readonly goerli: 2;
+    readonly bsc: 4;
+    readonly mumbai: 5;
+    readonly fuji: 6;
+    readonly fantom: 10;
+    readonly alfajores: 14;
+    readonly moonbasealpha: 16;
+};
+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 WormholeConnectConfig {
+    env?: 'mainnet' | 'testnet';
+    rpcs?: Rpcs;
+    networks?: ChainName[];
+    tokens?: string[];
+    mode?: 'dark' | 'light';
+    customTheme?: any;
+}

package/lib/types.js

@@ -0,0 +1,20 @@
+export var MAINNET_CHAINS = {
+    solana: 1,
+    ethereum: 2,
+    bsc: 4,
+    polygon: 5,
+    avalanche: 6,
+    fantom: 10,
+    celo: 14,
+    moonbeam: 16,
+};
+export var TESTNET_CHAINS = {
+    solana: 1,
+    goerli: 2,
+    bsc: 4,
+    mumbai: 5,
+    fuji: 6,
+    fantom: 10,
+    alfajores: 14,
+    moonbasealpha: 16,
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@wormhole-foundation/wormhole-connect",
+  "version": "0.0.1-beta.0",
+  "dependencies": {
+    "@mui/material": "^5.12.1"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@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",
+    "babel-loader": "^9.1.2",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "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/index.js",
+  "types": "lib/index.d.ts",
+  "files": [ "lib" ],
+  "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"
+}