@wormhole-foundation/wormhole-connect 0.0.1-beta.3 → 0.0.1-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +85 -46
  2. package/dist/main.css +0 -14
  3. package/dist/main.js +2 -2
  4. package/lib/index.js +2 -2
  5. package/lib/theme.d.ts +1 -132
  6. package/lib/theme.js +13 -13
  7. package/lib/types.d.ts +6 -0
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -8,22 +8,24 @@ Integration does not get easier than this. Wormhole Connect is an easy seamless
8
8
 
9
9
  ```ts
10
10
  {
11
- "environment": "testnet",
11
+ "env": "testnet",
12
12
  "networks": ["goerli", "mumbai"],
13
13
  "tokens": ["ETH", "WETH", "MATIC", "WMATIC"],
14
- "mode": "light"
14
+ "mode": "light",
15
15
  "customTheme": {} // see src/theme.ts
16
16
  }
17
17
  ```
18
18
 
19
19
  #### Accepted values
20
20
 
21
- Environment:
21
+ Environment (`env`):
22
22
  | Mainnet | Testnet |
23
23
  | ---------- | --------- |
24
24
  | mainnet | testnet |
25
25
 
26
- Chains:
26
+ <br>
27
+
28
+ Networks (`networks`):
27
29
  | Mainnet | Testnet |
28
30
  | ---------- | ------------- |
29
31
  | ethereum | goerli |
@@ -34,55 +36,85 @@ Chains:
34
36
  | moonbeam | moonbasealpha |
35
37
  | solana | solana |
36
38
 
37
- Tokens:
38
- | Mainnet | Testnet |
39
- | ------- | ------- |
40
- | ETH | ETH |
41
- | WETH | WETH |
42
- | USDC | USDC |
43
- | MATIC | MATIC |
44
- | WMATIC | WMATIC |
45
- | BNB | BNB |
46
- | WBNB | WBNB |
47
- | AVAX | AVAX |
48
- | WAVAX | WAVAX |
49
- | FTM | FTM |
50
- | WFTM | WFTM |
51
- | CELO | CELO |
52
- | GLMR | GLMR |
53
- | WGLMR | WGLMR |
54
- | SOL | WSOL |
55
-
56
- Mode:
39
+ <br>
40
+
41
+ Tokens (`tokens`):
42
+ | Mainnet | Testnet |
43
+ | ----------- | ------- |
44
+ | ETH | ETH |
45
+ | WETH | WETH |
46
+ | USDCeth | USDCeth |
47
+ | WBTC | |
48
+ | USDT | |
49
+ | DAI | |
50
+ | BUSD | |
51
+ | MATIC | MATIC |
52
+ | WMATIC | WMATIC |
53
+ | USDCpolygon | |
54
+ | BNB | BNB |
55
+ | WBNB | WBNB |
56
+ | USDCbnb | |
57
+ | AVAX | AVAX |
58
+ | WAVAX | WAVAX |
59
+ | USDCavax | |
60
+ | FTM | FTM |
61
+ | WFTM | WFTM |
62
+ | CELO | CELO |
63
+ | GLMR | GLMR |
64
+ | WGLMR | WGLMR |
65
+ | SOL | WSOL |
66
+ | USDCsol | |
67
+
68
+ <br>
69
+
70
+ Mode (`mode`):
57
71
  | | |
58
72
  | ---- | ----- |
59
73
  | dark | light |
60
74
 
61
- Custom theme:
75
+ <br>
62
76
 
63
- ```js
64
- import { dark, light, Theme } from '@wormhole-foundation/wormhole-connect';
77
+ Theme (`customTheme`)
78
+
79
+ See [theme.ts](https://github.com/wormhole-foundation/wormhole-connect/blob/development/wormhole-connect-loader/src/theme.ts) for examples
80
+
81
+ ### 2. Add your config
82
+
83
+ Add a div with the id `wormhole-connect`. This is where the bridge will be rendered.
84
+
85
+ ```html
86
+ <div id="wormhole-connect" />
87
+ ```
88
+
89
+ If you created a config from step 1, assign it to the `config` attribute and replace <replace-with-config> with your config.
90
+
91
+ ```html
92
+ <div id="wormhole-connect" config='<replace-with-config>' />
93
+ <div id="wormhole-connect" config={JSON.stringify(jsonConfig)} />
65
94
  ```
66
95
 
67
96
  ### 2. Add a script and link tag
68
97
 
69
98
  ```html
70
99
  <!-- paste below into index.html body -->
71
- <script src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.3/dist/main.js"></script>
72
- <link href="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.3/dist/main.css" />
100
+ <script src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.5/dist/main.js"></script>
101
+ <link href="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.5/dist/main.css" />
73
102
  ```
74
103
 
75
- ### 3. Embed it in your application
104
+ 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:
76
105
 
77
- This is where your widget will appear. Specify an id of `wormhole-connect` and pass it the stringified json config to customize.
106
+ ```js
107
+ function mount () {
108
+ const script = document.createElement("script");
109
+ script.src = "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.5/dist/main.js";
110
+ script.async = true;
78
111
 
79
- ```jsx
80
- // root element with id
81
- <div id="wormhole-connect"></div>
82
- // with customization
83
- <div id="wormhole-connect" config='{"networks": ["goerli", "mumbai"], "tokens": ["ETH", "WETH", "MATIC", "WMATIC"], "mode": "light"}'></div>
84
- // stringify JSON config
85
- <div id="wormhole-connect" config={JSON.stringify(jsonConfig)} />
112
+ const link = document.createElement("link");
113
+ link.href = "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.5/dist/main.css";
114
+
115
+ document.body.appendChild(script);
116
+ document.body.appendChild(link);
117
+ }
86
118
  ```
87
119
 
88
120
  ## Integrate with React
@@ -96,13 +128,17 @@ function App() {
96
128
  }
97
129
  ```
98
130
 
99
- Specify networks/tokens (optional)
131
+ Specify networks/tokens and rpc endpoints (optional)
100
132
  ```jsx
101
- import WormholeBridge from '@wormhole-foundation/wormhole-connect';
102
- const config = {
103
- environment: "mainnet",
133
+ import WormholeBridge, { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';
134
+ const config: WormholeConnectConfig = {
135
+ env: "mainnet",
104
136
  networks: ["ethereum", "polygon", "solana"],
105
137
  tokens: ["ETH", "WETH", "MATIC", "WMATIC"],
138
+ rpc: {
139
+ ethereum: "https://rpc.ankr.com/eth",
140
+ solana: "https://rpc.ankr.com/solana",
141
+ }
106
142
  }
107
143
 
108
144
  function App() {
@@ -114,14 +150,17 @@ function App() {
114
150
 
115
151
  Customize theme (optional)
116
152
  ```jsx
117
- import WormholeBridge, { light, Theme } from '@wormhole-foundation/wormhole-connect';
153
+ import WormholeBridge, { light, Theme, WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';
118
154
  import lightblue from '@mui/material/colors/lightBlue';
119
155
 
120
156
  // alters the `light` theme
121
157
  const customized: Theme = light;
122
158
  customized.success = lightblue;
123
159
  customized.background.default = 'transparent';
124
- const config = {
160
+ customized.button.action = '#81c784';
161
+ customized.button.actionText = '#000000';
162
+
163
+ const config: WormholeConnectConfig = {
125
164
  mode: 'light',
126
165
  customTheme: customized,
127
166
  }
@@ -135,7 +174,7 @@ function App() {
135
174
 
136
175
  Create fully customized theme (optional)
137
176
  ```jsx
138
- import WormholeBridge, { Theme, OPACITY } from '@wormhole-foundation/wormhole-connect';
177
+ import WormholeBridge, { Theme, OPACITY, WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';
139
178
  import lightblue from '@mui/material/colors/lightBlue';
140
179
  import grey from '@mui/material/colors/grey';
141
180
  import green from '@mui/material/colors/green';
@@ -183,7 +222,7 @@ const customized: Theme = {
183
222
  background: '#474747',
184
223
  },
185
224
  };
186
- const config = {
225
+ const config: WormholeConnectConfig = {
187
226
  mode: 'dark',
188
227
  customTheme: customized,
189
228
  }
package/dist/main.css CHANGED
@@ -1,19 +1,5 @@
1
1
  @import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap);
2
2
  @import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;500&display=swap);
3
- body {
4
- margin: 0;
5
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
6
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
7
- sans-serif;
8
- -webkit-font-smoothing: antialiased;
9
- -moz-osx-font-smoothing: grayscale;
10
- }
11
-
12
- code {
13
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
14
- monospace;
15
- }
16
-
17
3
  .walletconnect-modal__mobile__toggle {
18
4
  color: #000000;
19
5
  }