@skip-go/widget 1.2.3 → 1.2.4
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.
- package/README.md +45 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
The `@skip-go/widget` package is an npm package providing a React component for a full swap interface using the [Skip Go API](https://skip.build/).
|
|
4
4
|
|
|
5
|
+
### Polyfilling Node core modules
|
|
6
|
+
|
|
7
|
+
If you encounter an error like "Buffer is not defined" when importing and using @skip-go/widget, it may be necessary to polyfill Node.js modules because Skip Go Widget relies on them.
|
|
8
|
+
|
|
9
|
+
Here are some polyfill plugins for common environments:
|
|
10
|
+
|
|
11
|
+
- [Webpack](https://www.npmjs.com/package/node-polyfill-webpack-plugin),
|
|
12
|
+
- [Rollup](https://www.npmjs.com/package/rollup-plugin-polyfill-node),
|
|
13
|
+
- [Vite](https://www.npmjs.com/package/vite-plugin-node-polyfills),
|
|
14
|
+
- [ESBuild](https://www.npmjs.com/package/esbuild-plugins-node-modules-polyfill)
|
|
15
|
+
|
|
16
|
+
### Wrap the widget with a fixed container
|
|
17
|
+
|
|
18
|
+
It is recommended to wrap the widget with a container element that has a fixed size. This helps to prevent layout shifting as the widget uses shadow-dom (which currently needs to be rendered client-side)
|
|
19
|
+
|
|
5
20
|
## Installation
|
|
6
21
|
|
|
7
22
|
To install the package, run the following command:
|
|
@@ -137,31 +152,40 @@ The props for the web component are the same as `SwapWidgetProps` except that al
|
|
|
137
152
|
are passed to the web-component via attributes in kebab-case as strings or stringified objects ie.
|
|
138
153
|
|
|
139
154
|
```tsx
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
primary: '#FF4FFF',
|
|
145
|
-
}}
|
|
146
|
-
defaultRoute={{
|
|
147
|
-
srcChainID: 'osmosis-1',
|
|
148
|
-
srcAssetDenom:
|
|
149
|
-
'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
|
|
155
|
+
<div
|
|
156
|
+
style={{
|
|
157
|
+
width: '450px',
|
|
158
|
+
height: '820px',
|
|
150
159
|
}}
|
|
151
|
-
|
|
160
|
+
>
|
|
161
|
+
<SwapWidget
|
|
162
|
+
className="test-class"
|
|
163
|
+
onlyTestnet={true}
|
|
164
|
+
colors={{
|
|
165
|
+
primary: '#FF4FFF',
|
|
166
|
+
}}
|
|
167
|
+
defaultRoute={{
|
|
168
|
+
srcChainID: 'osmosis-1',
|
|
169
|
+
srcAssetDenom:
|
|
170
|
+
'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
|
|
171
|
+
}}
|
|
172
|
+
/>
|
|
173
|
+
</div>
|
|
152
174
|
```
|
|
153
175
|
|
|
154
176
|
becomes
|
|
155
177
|
|
|
156
178
|
```tsx
|
|
157
|
-
<
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
179
|
+
<div style="width:450px;height:820px;">
|
|
180
|
+
<swap-widget
|
|
181
|
+
class-name="test-class"
|
|
182
|
+
onlyTestnet="true"
|
|
183
|
+
colors='{"primary":"#FF4FFF"}'
|
|
184
|
+
default-route={JSON.stringify({
|
|
185
|
+
srcChainID: 'osmosis-1',
|
|
186
|
+
srcAssetDenom:
|
|
187
|
+
'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
|
|
188
|
+
})}
|
|
189
|
+
></swap-widget>
|
|
190
|
+
</div>
|
|
167
191
|
```
|