@wormhole-foundation/wormhole-connect 0.0.1-beta.4 → 0.0.1-beta.6

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 (6) hide show
  1. package/README.md +76 -40
  2. package/dist/main.css +0 -14
  3. package/dist/main.js +2 -2
  4. package/lib/index.js +2 -2
  5. package/lib/types.d.ts +6 -0
  6. 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.6/dist/main.js"></script>
101
+ <link href="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.6/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:
105
+
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.6/dist/main.js";
110
+ script.async = true;
76
111
 
77
- This is where your widget will appear. Specify an id of `wormhole-connect` and pass it the stringified json config to customize.
112
+ const link = document.createElement("link");
113
+ link.href = "https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.0.1-beta.6/dist/main.css";
78
114
 
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)} />
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
133
  import WormholeBridge, { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';
102
134
  const config: WormholeConnectConfig = {
103
- environment: "mainnet",
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() {
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
  }