@skip-go/widget 0.0.1-alpha.0 → 0.0.1-alpha.10
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 +78 -53
- package/build/chains/types.d.ts +2 -2
- package/build/hooks/use-skip-client.d.ts +0 -2
- package/build/index.d.ts +3 -1
- package/build/index.es.js +128 -68
- package/build/index.es.js.map +1 -1
- package/build/provider/index.d.ts +3 -3
- package/build/provider/skip-provider.d.ts +2 -2
- package/build/store/swap-widget.d.ts +24 -1
- package/build/ui/CraftedBySkip.d.ts +1 -0
- package/build/ui/index.d.ts +2 -6
- package/package.json +13 -14
package/README.md
CHANGED
|
@@ -1,62 +1,71 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Skip Go Widget
|
|
2
2
|
|
|
3
|
-
The `@skip-go/widget` package is an npm package
|
|
3
|
+
The `@skip-go/widget` package is an npm package providing a React component for a full swap interface using the [Skip API](https://skip.money/).
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
+
To install the package, run the following command:
|
|
8
|
+
|
|
7
9
|
```bash
|
|
8
10
|
npm install @skip-go/widget
|
|
9
11
|
```
|
|
10
12
|
|
|
11
13
|
## Quick Start Guide
|
|
12
14
|
|
|
13
|
-
1. Wrap
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
15
|
+
### 1. Wrap Your App with `SwapWidgetProvider`
|
|
16
|
+
|
|
17
|
+
First, wrap your application or the relevant page with the `SwapWidgetProvider` component:
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { SwapWidgetProvider } from '@skip-go/widget';
|
|
21
|
+
|
|
22
|
+
function App() {
|
|
23
|
+
return (
|
|
24
|
+
<SwapWidgetProvider>
|
|
25
|
+
<YourApp />
|
|
26
|
+
</SwapWidgetProvider>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 2. Use the `SwapWidget` Component
|
|
32
|
+
|
|
33
|
+
Next, use the `SwapWidget` component to render the swap interface:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { SwapWidget } from '@skip-go/widget';
|
|
37
|
+
|
|
38
|
+
const SwapPage = () => {
|
|
39
|
+
return (
|
|
40
|
+
<div
|
|
41
|
+
style={{
|
|
42
|
+
width: '450px',
|
|
43
|
+
height: '820px',
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
46
|
+
<SwapWidget
|
|
47
|
+
colors={{
|
|
48
|
+
primary: '#FF4FFF',
|
|
49
|
+
}}
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Component Props
|
|
51
57
|
|
|
52
58
|
### SwapWidget
|
|
53
59
|
|
|
60
|
+
The `SwapWidget` component accepts the following props:
|
|
61
|
+
|
|
54
62
|
```tsx
|
|
55
63
|
interface SwapWidgetProps {
|
|
56
|
-
colors?:{
|
|
57
|
-
primary?: string; // Custom
|
|
58
|
-
}
|
|
59
|
-
defaultRoute?: {
|
|
64
|
+
colors?: {
|
|
65
|
+
primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
|
|
66
|
+
};
|
|
67
|
+
defaultRoute?: {
|
|
68
|
+
// Default route for the widget.
|
|
60
69
|
amountIn?: number;
|
|
61
70
|
amountOut?: number;
|
|
62
71
|
srcChainID?: string;
|
|
@@ -64,26 +73,42 @@ interface SwapWidgetProps {
|
|
|
64
73
|
destChainID?: string;
|
|
65
74
|
destAssetDenom?: string;
|
|
66
75
|
};
|
|
67
|
-
endpointOptions?: { // Endpoint options to override rpc/rest endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
68
|
-
endpoints?: Record<string, EndpointOptions>;
|
|
69
|
-
getRpcEndpointForChain?: (chainID: string) => Promise<string>;
|
|
70
|
-
getRestEndpointForChain?: (chainID: string) => Promise<string>;
|
|
71
|
-
};
|
|
72
|
-
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.
|
|
73
76
|
routeConfig?: {
|
|
74
|
-
experimentalFeatures?: [
|
|
77
|
+
experimentalFeatures?: ['hyperlane'];
|
|
75
78
|
allowMultiTx?: boolean;
|
|
76
79
|
allowUnsafe?: boolean;
|
|
77
|
-
bridges?: (
|
|
80
|
+
bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
|
|
78
81
|
swapVenues?: {
|
|
79
82
|
name: string;
|
|
80
83
|
chainID: string;
|
|
81
84
|
}[];
|
|
85
|
+
};
|
|
82
86
|
className?: string;
|
|
83
87
|
style?: React.CSSProperties;
|
|
88
|
+
settings?: {
|
|
89
|
+
customGasAmount?: number; // custom gas amount for validation defaults to 200_000
|
|
90
|
+
slippage?: number; //percentage of slippage 0-100. defaults to 3
|
|
91
|
+
};
|
|
92
|
+
onlyTestnet?: boolean; // Only show testnet chains
|
|
84
93
|
}
|
|
85
94
|
```
|
|
86
95
|
|
|
87
96
|
### SwapWidgetProvider
|
|
88
97
|
|
|
89
|
-
|
|
98
|
+
The `SwapWidgetProvider` component accepts the following prop:
|
|
99
|
+
|
|
100
|
+
- `toasterProps` (Optional): Props for the toaster component. Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }`.
|
|
101
|
+
- `endpointOptions` (Optional): Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
endpointOptions?: {
|
|
105
|
+
// Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
|
|
106
|
+
endpoints?: Record<string, EndpointOptions>;
|
|
107
|
+
getRpcEndpointForChain?: (chainID: string) => Promise<string>;
|
|
108
|
+
getRestEndpointForChain?: (chainID: string) => Promise<string>;
|
|
109
|
+
};
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
- `apiURL` (Optional): 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.
|
|
113
|
+
|
|
114
|
+
By following these steps, you can easily integrate the Skip Go Widget into your React application and customize it to meet your specific needs.
|
package/build/chains/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export declare const chainIds: readonly ["eightball-1", "
|
|
1
|
+
export declare const chainIds: readonly ["acre_9052-1", "eightball-1", "aioz_168-1", "agoric-3", "althea_258432-1", "akashnet-2", "akiro-1", "andromeda-1", "andromeda-1", "arkh", "archway-1", "mantle-1", "aura_6322-2", "xstaxy-1", "laozi-mainnet", "axelar-dojo-1", "beezee-1", "bitcanna-1", "bitsong-2b", "bostrom", "bluzelle-9", "canto_7700-1", "celestia", "cerberus-chain-1", "carbon-1", "perun-1", "chihuahua-1", "cheqd-mainnet-1", "chimba", "morocco-1", "cifer-2", "cifer-1", "comdex-1", "commercio-3", "cvn_2032-1", "coreum-mainnet-1", "centauri-1", "coss-1", "cosmoshub-4", "cronosmainnet_25-1", "crescent-1", "crypto-org-chain-mainnet-1", "cudos-1", "mainnet-3", "dhealth", "dig-1", "desmos-mainnet", "vota-ash", "dydx-mainnet-1", "dyson-mainnet-01", "dymension_1100-1", "echelon_3000-3", "emoney-3", "empowerchain-1", "ethos_7003-1", "evmos_9001-2", "finschia-2", "fetchhub-4", "colosseum-1", "galaxy-1", "genesis_29-2", "furya-1", "wormchain", "fxcore", "gitopia", "govgen-1", "gravity-bridge-3", "highbury_710-1", "haqq_11235-1", "Antora", "imversed_5555555-1", "humans_1089-1", "ixo-5", "injective-1", "irishub-1", "jackal-1", "joltify_1729-1", "juno-1", "kava_2222-10", "kichain-2", "darchub", "lambda_92000-1", "lava-mainnet-1", "kaiyo-1", "kyve-1", "logos_7002-1", "likecoin-mainnet-2", "loop-1", "loyal-main-02", "LumenX", "mayachain-mainnet-v1", "medasdigital-1", "lum-network-1", "mars-1", "microtick-1", "meme-1", "migaloo-1", "mainnet", "mun-1", "mythos_7001-1", "neura_266-1", "Neutaro-1", "neutron-1", "nim_1122-1", "cataclysm-1", "noble-1", "nois-1", "nomic-stakenet-3", "pirin-1", "nyx", "octa", "odin-mainnet-freya", "odin-mainnet-freya", "exchain-66", "omniflixhub-1", "onex-mainnet-1", "onomy-mainnet-1", "Oraichain", "panacea-3", "passage-2", "passage-1", "osmosis-1", "core-1", "point_10687-1", "planq_7070-2", "pryzm-1", "pio-mainnet-1", "pylons-mainnet-1", "PUNDIX", "quasar-1", "quicksilver-2", "qwoyn-1", "realionetwork_3301-1", "reb_1111-1", "regen-1", "titan-1", "ssc-1", "scorum-1", "seda-1", "secret-4", "pacific-1", "ShareRing-VoyagerNet", "sgenet-1", "sentinelhub-2", "shentu-2.2", "shido_9008-1", "sifchain-1", "sixnet", "sommelier-3", "source-1", "stafihub-1", "stargaze-1", "iov-mainnet-ibc", "stratos-1", "stride-1", "sunrise-1", "tenet_1559-1", "teritori-1", "morocco-1", "columbus-5", "phoenix-1", "tgrade-mainnet-1", "thorchain-mainnet-v1", "titan_18888-1", "umee-1", "ununifi-beta-v1", "FUND-MainNet-2", "uptick_117-1", "vidulum-1", "dimension_37-1", "zetachain_7000-1", "sandbox-01", "artela_11820-1", "arkeo", "constantine-3", "aura_6321-3", "bbn-test3", "axelar-testnet-lisbon-3", "bbn-test1", "bitcanna-dev-1", "bitcanna-dev-6", "blockx_190-1", "cascadia_6102-1", "blockspacerace-0", "arabica-11", "mocha-4", "babajaga-1", "cheqd-testnet-6", "chimba-testnet", "banksy-testnet-3", "kitten-04", "coreum-testnet-1", "malaga-420", "theta-testnet-001", "coss-testnet-1", "cudos-testnet-public-3", "deardoge-testnet", "morpheus-apollo-3", "vota-testnet", "vota-vk", "elystestnet-1", "dydx-testnet-4", "circulus-1", "entrypoint-pubtest-2", "evmos_9000-4", "dorado-1", "ebony-2", "galactica_9302-1", "gitopia-janus-testnet-2", "berberis-1", "testnet-1", "prajna-1", "devnet-1", "pandora-8", "imversed-test-1", "injective-888", "canine-1", "uni-6", "kichain-t-4", "mesomelas-1", "harpoon-4", "korellia-2", "kaon-1", "lava-testnet-2", "lava-testnet-1", "likecoin-public-testnet-5", "lumenx-test", "mantra-hongbai-1", "ares-1", "narwhal-2", "neura_268-1", "neura_267-1", "pion-1", "nibiru-devnet-1", "nibiru-devnet-2", "nibiru-testnet-1", "nibiru-testnet-2", "rila-1", "grand-1", "nois-testnet-005", "sandbox", "okp4-nemeton-1", "osmo-test-5", "osmo-test-4", "test-core-1", "INVALID-ID-permtestnet-testnet-1", "test-core-2", "planq_7077-1", "indigo-1", "quasar-test-1", "rhye-2", "earendel-1", "provider", "ssc-testnet-1", "pulsar-3", "pulsar-2", "sei-devnet-3", "atlantic-1", "atlantic-2", "self-dev-1", "sge-network-3", "sge-network-4", "fivenet", "soarchaintestnet", "elgafar-1", "stateset-1-testnet", "stride-testnet-1", "sourcetest-1", "temporal-test-2", "90u-2", "swisstronik_1291-1", "90u-4", "pisco-1", "titan_18889-1", "ulas", "union-testnet-8", "uptick_7000-2", "vince_1903-1", "buenavista-1", "INVALID-ID-wavehashtestnet-testnet-1", "xion-testnet-1", "athens_7001-1", "landlord-1", "tomcat-1", "init-ai-1", "minimove-1", "initiation-1", "miniwasm-1", "birdee-1", "burrito-1"];
|
|
2
2
|
export type ChainId = (typeof chainIds)[number] | (string & {});
|
|
3
|
-
export declare const chainNames: readonly ["8ball", "
|
|
3
|
+
export declare const chainNames: readonly ["acrechain", "8ball", "aioz", "agoric", "althea", "akash", "akiro", "andromeda", "andromeda1", "arkh", "archway", "assetmantle", "aura", "aura1", "bandchain", "axelar", "beezee", "bitcanna", "bitsong", "bostrom", "bluzelle", "canto", "celestia", "cerberus", "carbon", "chain4energy", "chihuahua", "cheqd", "chimba", "chronicnetwork", "cifer", "cifer1", "comdex", "commercionetwork", "conscious", "coreum", "composable", "coss", "cosmoshub", "cronos", "crescent", "cryptoorgchain", "cudos", "decentr", "dhealth", "dig", "desmos", "doravota", "dydx", "dyson", "dymension", "echelon", "emoney", "empowerchain", "ethos", "evmos", "finschia", "fetchhub", "firmachain", "galaxy", "genesisl1", "furya", "gateway", "fxcore", "gitopia", "govgen", "gravitybridge", "highbury", "haqq", "idep", "imversed", "humans", "impacthub", "injective", "irisnet", "jackal", "joltify", "juno", "kava", "kichain", "konstellation", "lambda", "lava", "kujira", "kyve", "logos", "likecoin", "loop", "loyal", "lumenx", "mayachain", "medasdigital", "lumnetwork", "mars", "microtick", "meme", "migaloo", "mises", "mun", "mythos", "neura", "neutaro", "neutron", "nim", "nibiru", "noble", "nois", "nomic", "nolus", "nyx", "octa", "odin", "odin", "okexchain", "omniflixhub", "onex", "onomy", "oraichain", "panacea", "passage", "passage1", "osmosis", "persistence", "point", "planq", "pryzm", "provenance", "pylons", "pundix", "quasar", "quicksilver", "qwoyn", "realio", "rebus", "regen", "rizon", "saga", "scorum", "seda", "secretnetwork", "sei", "shareledger", "sge", "sentinel", "shentu", "shido", "sifchain", "six", "sommelier", "source", "stafihub", "stargaze", "starname", "stratos", "stride", "sunrise", "tenet", "teritori", "terpnetwork", "terra", "terra2", "tgrade", "thorchain", "titan", "umee", "ununifi", "unification", "uptick", "vidulum", "xpla", "zetachain", "akashtestnet", "artelatestnet", "arkeonetworktestnet", "archwaytestnet", "auratestnet", "babylontestnet", "axelartestnet", "babylontestnet1", "bitcannadevnet", "bitcannadevnet2", "blockxtestnet", "cascadiatestnet", "celestiatestnet", "celestiatestnet2", "celestiatestnet3", "chain4energytestnet", "cheqdtestnet", "chimbatestnet", "composabletestnet", "coolcattestnet", "coreumtestnet", "cosmwasmtestnet", "cosmoshubtestnet", "cosstestnet", "cudostestnet", "deardogetestnet", "desmostestnet", "doravotatestnet", "doravotatestnet2", "elystestnet", "dydxtestnet", "empowertestnet", "entrypointtestnet", "evmostestnet", "fetchhubtestnet", "finschiatestnet", "galacticatestnet", "gitopiatestnet", "hedgetestnet", "humanstestnet", "hypersigntestnet", "impacthubdevnet", "impacthubtestnet", "imversedtestnet", "injectivetestnet", "jackaltestnet", "junotestnet", "kichaintestnet", "jackaltestnet2", "kujiratestnet", "kyvedevnet", "kyvetestnet", "lavatestnet", "lavatestnet1", "likecointestnet", "lumenxtestnet", "mantrachaintestnet", "marstestnet", "migalootestnet", "neuradevnet", "neuratestnet", "neutrontestnet", "nibirudevnet", "nibirudevnet2", "nibirutestnet", "nibirutestnet2", "nolustestnet", "nobletestnet", "noistestnet", "nyxtestnet", "okp4testnet", "osmosistestnet", "osmosistestnet4", "persistencetestnet", "permtestnet", "persistencetestnet2", "planqtestnet", "pryzmtestnet", "quasartestnet", "quicksilvertestnet", "qwoyntestnet", "rsprovidertestnet", "sagatestnet", "secretnetworktestnet", "secretnetworktestnet2", "seidevnet3", "seitestnet", "seitestnet2", "selfchaindevnet", "sgetestnet", "sgetestnet4", "sixtestnet", "soarchaintestnet", "stargazetestnet", "statesettestnet", "stridetestnet", "sourcetestnet", "temporaltestnet", "terpnettestnet2", "swisstroniktestnet", "terpnettestnet", "terra2testnet", "titantestnet", "ulastestnet", "uniontestnet", "upticktestnet", "vincechaintestnet", "wardenprotocoltestnet", "wavehashtestnet", "xiontestnet", "zetachaintestnet", "civitia", "blackwing", "init_ai", "minimove", "initia", "miniwasm", "tucana", "noon"];
|
|
4
4
|
export type ChainName = (typeof chainNames)[number] | (string & {});
|
|
5
5
|
export declare const chainIdToName: Record<ChainId, ChainName>;
|
|
6
6
|
export declare const chainNameToId: Record<ChainName, ChainId>;
|
|
@@ -6,6 +6,4 @@ export declare function useSkipConfig(): {
|
|
|
6
6
|
getRpcEndpointForChain?: ((chainID: string) => Promise<string>) | undefined;
|
|
7
7
|
getRestEndpointForChain?: ((chainID: string) => Promise<string>) | undefined;
|
|
8
8
|
} | undefined;
|
|
9
|
-
defaultRoute: import("./use-swap-widget").DefaultRouteConfig | undefined;
|
|
10
|
-
routeConfig: import("./use-route").RouteConfig | undefined;
|
|
11
9
|
};
|
package/build/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import './styles/global.css';
|
|
2
2
|
export { SwapWidgetProvider } from './provider';
|
|
3
|
-
export { SwapWidget } from './ui';
|
|
3
|
+
export { SwapWidget, SwapWidgetProps } from './ui';
|
|
4
|
+
export { useAssets } from './provider/assets';
|
|
5
|
+
export { useChains, useChainByID } from './hooks/use-chains';
|