@skip-go/widget 1.2.1-alpha.6 → 1.2.1
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 +159 -167
- package/build/index.es.js +4987 -121371
- package/build/index.es.js.map +1 -1
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -1,167 +1,159 @@
|
|
|
1
|
-
# Skip Go Widget
|
|
2
|
-
|
|
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
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
To install the package, run the following command:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install @skip-go/widget
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## React Component usage
|
|
14
|
-
|
|
15
|
-
import the `SwapWidget` from `'@skip-go/widget'` to render the swap interface:
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
import { SwapWidget } from '@skip-go/widget';
|
|
19
|
-
|
|
20
|
-
const SwapPage = () => {
|
|
21
|
-
return (
|
|
22
|
-
<div
|
|
23
|
-
style={{
|
|
24
|
-
width: '450px',
|
|
25
|
-
height: '820px',
|
|
26
|
-
}}
|
|
27
|
-
>
|
|
28
|
-
<SwapWidget
|
|
29
|
-
colors={{
|
|
30
|
-
primary: '#FF4FFF',
|
|
31
|
-
}}
|
|
32
|
-
/>
|
|
33
|
-
</div>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
### SwapWidget props
|
|
39
|
-
|
|
40
|
-
The `SwapWidget` component accepts the following props:
|
|
41
|
-
|
|
42
|
-
````tsx
|
|
43
|
-
interface SwapWidgetProps {
|
|
44
|
-
colors?: {
|
|
45
|
-
primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
|
|
46
|
-
};
|
|
47
|
-
defaultRoute?: {
|
|
48
|
-
// Default route for the widget.
|
|
49
|
-
amountIn?: number;
|
|
50
|
-
amountOut?: number;
|
|
51
|
-
srcChainID?: string;
|
|
52
|
-
srcAssetDenom?: string;
|
|
53
|
-
destChainID?: string;
|
|
54
|
-
destAssetDenom?: string;
|
|
55
|
-
};
|
|
56
|
-
routeConfig?: {
|
|
57
|
-
experimentalFeatures?: ['hyperlane'];
|
|
58
|
-
allowMultiTx?: boolean;
|
|
59
|
-
allowUnsafe?: boolean;
|
|
60
|
-
bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
|
|
61
|
-
swapVenues?: {
|
|
62
|
-
name: string;
|
|
63
|
-
chainID: string;
|
|
64
|
-
}[];
|
|
65
|
-
};
|
|
66
|
-
/**
|
|
67
|
-
* Filter chains and assets in selection
|
|
68
|
-
*
|
|
69
|
-
* Record<chainID, assetDenoms>
|
|
70
|
-
* if assetDenoms is undefined, all assets are allowed
|
|
71
|
-
* @example
|
|
72
|
-
* ```ts
|
|
73
|
-
* {
|
|
74
|
-
* source: {
|
|
75
|
-
* 'noble-1': undefined,
|
|
76
|
-
* },
|
|
77
|
-
* destination: {
|
|
78
|
-
* 'cosmoshub-4': [
|
|
79
|
-
* 'uatom',
|
|
80
|
-
* 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86',
|
|
81
|
-
* ],
|
|
82
|
-
* 'agoric-3': [
|
|
83
|
-
* 'ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9',
|
|
84
|
-
* ],
|
|
85
|
-
* 'osmosis-1': undefined,
|
|
86
|
-
* }
|
|
87
|
-
* ```
|
|
88
|
-
*/
|
|
89
|
-
filter?: {
|
|
90
|
-
source?: Record<string, string[] | undefined>;
|
|
91
|
-
destination?: Record<string, string[] | undefined>;
|
|
92
|
-
};
|
|
93
|
-
className?: string;
|
|
94
|
-
style?: React.CSSProperties;
|
|
95
|
-
settings?: {
|
|
96
|
-
customGasAmount?: number; // custom gas amount for validation defaults to 200_000
|
|
97
|
-
slippage?: number; //percentage of slippage 0-100. defaults to 3
|
|
98
|
-
};
|
|
99
|
-
onlyTestnet?: boolean; // Only show testnet chains
|
|
100
|
-
toasterProps?: {
|
|
101
|
-
// Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }`
|
|
102
|
-
position?: ToastPosition;
|
|
103
|
-
toastOptions?: DefaultToastOptions;
|
|
104
|
-
reverseOrder?: boolean;
|
|
105
|
-
gutter?: number;
|
|
106
|
-
containerStyle?: React.CSSProperties;
|
|
107
|
-
containerClassName?: string;
|
|
108
|
-
children?: (toast: Toast) => JSX.Element;
|
|
109
|
-
};
|
|
110
|
-
endpointOptions?: {
|
|
111
|
-
// Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
112
|
-
endpoints?: Record<string, EndpointOptions>;
|
|
113
|
-
getRpcEndpointForChain?: (chainID: string) => Promise<string>;
|
|
114
|
-
getRestEndpointForChain?: (chainID: string) => Promise<string>;
|
|
115
|
-
};
|
|
116
|
-
apiURL?: string; // Custom API URL to override Skip API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
117
|
-
}
|
|
118
|
-
````
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
colors='{"primary":"#FF4FFF"}'
|
|
161
|
-
default-route={JSON.stringify({
|
|
162
|
-
srcChainID: 'osmosis-1',
|
|
163
|
-
srcAssetDenom:
|
|
164
|
-
'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
|
|
165
|
-
})}
|
|
166
|
-
></swap-widget>
|
|
167
|
-
```
|
|
1
|
+
# Skip Go Widget
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To install the package, run the following command:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @skip-go/widget
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## React Component usage
|
|
14
|
+
|
|
15
|
+
import the `SwapWidget` from `'@skip-go/widget'` to render the swap interface:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { SwapWidget } from '@skip-go/widget';
|
|
19
|
+
|
|
20
|
+
const SwapPage = () => {
|
|
21
|
+
return (
|
|
22
|
+
<div
|
|
23
|
+
style={{
|
|
24
|
+
width: '450px',
|
|
25
|
+
height: '820px',
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<SwapWidget
|
|
29
|
+
colors={{
|
|
30
|
+
primary: '#FF4FFF',
|
|
31
|
+
}}
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### SwapWidget props
|
|
39
|
+
|
|
40
|
+
The `SwapWidget` component accepts the following props:
|
|
41
|
+
|
|
42
|
+
````tsx
|
|
43
|
+
interface SwapWidgetProps {
|
|
44
|
+
colors?: {
|
|
45
|
+
primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
|
|
46
|
+
};
|
|
47
|
+
defaultRoute?: {
|
|
48
|
+
// Default route for the widget.
|
|
49
|
+
amountIn?: number;
|
|
50
|
+
amountOut?: number;
|
|
51
|
+
srcChainID?: string;
|
|
52
|
+
srcAssetDenom?: string;
|
|
53
|
+
destChainID?: string;
|
|
54
|
+
destAssetDenom?: string;
|
|
55
|
+
};
|
|
56
|
+
routeConfig?: {
|
|
57
|
+
experimentalFeatures?: ['hyperlane'];
|
|
58
|
+
allowMultiTx?: boolean;
|
|
59
|
+
allowUnsafe?: boolean;
|
|
60
|
+
bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
|
|
61
|
+
swapVenues?: {
|
|
62
|
+
name: string;
|
|
63
|
+
chainID: string;
|
|
64
|
+
}[];
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Filter chains and assets in selection
|
|
68
|
+
*
|
|
69
|
+
* Record<chainID, assetDenoms>
|
|
70
|
+
* if assetDenoms is undefined, all assets are allowed
|
|
71
|
+
* @example
|
|
72
|
+
* ```ts
|
|
73
|
+
* {
|
|
74
|
+
* source: {
|
|
75
|
+
* 'noble-1': undefined,
|
|
76
|
+
* },
|
|
77
|
+
* destination: {
|
|
78
|
+
* 'cosmoshub-4': [
|
|
79
|
+
* 'uatom',
|
|
80
|
+
* 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86',
|
|
81
|
+
* ],
|
|
82
|
+
* 'agoric-3': [
|
|
83
|
+
* 'ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9',
|
|
84
|
+
* ],
|
|
85
|
+
* 'osmosis-1': undefined,
|
|
86
|
+
* }
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
filter?: {
|
|
90
|
+
source?: Record<string, string[] | undefined>;
|
|
91
|
+
destination?: Record<string, string[] | undefined>;
|
|
92
|
+
};
|
|
93
|
+
className?: string;
|
|
94
|
+
style?: React.CSSProperties;
|
|
95
|
+
settings?: {
|
|
96
|
+
customGasAmount?: number; // custom gas amount for validation defaults to 200_000
|
|
97
|
+
slippage?: number; //percentage of slippage 0-100. defaults to 3
|
|
98
|
+
};
|
|
99
|
+
onlyTestnet?: boolean; // Only show testnet chains
|
|
100
|
+
toasterProps?: {
|
|
101
|
+
// Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }`
|
|
102
|
+
position?: ToastPosition;
|
|
103
|
+
toastOptions?: DefaultToastOptions;
|
|
104
|
+
reverseOrder?: boolean;
|
|
105
|
+
gutter?: number;
|
|
106
|
+
containerStyle?: React.CSSProperties;
|
|
107
|
+
containerClassName?: string;
|
|
108
|
+
children?: (toast: Toast) => JSX.Element;
|
|
109
|
+
};
|
|
110
|
+
endpointOptions?: {
|
|
111
|
+
// Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
112
|
+
endpoints?: Record<string, EndpointOptions>;
|
|
113
|
+
getRpcEndpointForChain?: (chainID: string) => Promise<string>;
|
|
114
|
+
getRestEndpointForChain?: (chainID: string) => Promise<string>;
|
|
115
|
+
};
|
|
116
|
+
apiURL?: string; // Custom API URL to override Skip API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
117
|
+
}
|
|
118
|
+
````
|
|
119
|
+
|
|
120
|
+
## Web Component usage
|
|
121
|
+
|
|
122
|
+
The web component is created with the `@r2wc/react-to-web-component` library.
|
|
123
|
+
|
|
124
|
+
In order to register the web-component, you must first call the `initializeSwapWidget` function:
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
import { initializeSwapWidget } from '@skip-go/widget';
|
|
128
|
+
|
|
129
|
+
initializeSwapWidget();
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
et voilà! you can now use the `swap-widget` web-component as `<swap-widget></swap-widget>`
|
|
133
|
+
|
|
134
|
+
The props for the web component are the same as `SwapWidgetProps` except that
|
|
135
|
+
they are sent to the web-component as attributes in kebab-case as strings or stringified objects ie.
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
interface SwapWidgetProps {
|
|
139
|
+
colors
|
|
140
|
+
defaultRoute
|
|
141
|
+
routeConfig
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
becomes
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
<swap-widget
|
|
148
|
+
class-name="classname"
|
|
149
|
+
colors='{"primary":"#FF4FFF"}'
|
|
150
|
+
default-route={JSON.stringify({
|
|
151
|
+
srcChainID: 'osmosis-1',
|
|
152
|
+
srcAssetDenom:
|
|
153
|
+
'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
|
|
154
|
+
})}
|
|
155
|
+
toaster-props=""
|
|
156
|
+
endpoint-options=""
|
|
157
|
+
api-url=""
|
|
158
|
+
></swap-widget>
|
|
159
|
+
```
|