Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update readme and change pkg name #9

Merged
merged 1 commit into from
Jul 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 11 additions & 111 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,118 +1,18 @@
# Skip Go Widget
# skip-go

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/).
## Project Structure

## Installation

To install the package, run the following command:

```bash
npm install @skip-go/widget
```

## Quick Start Guide

### 1. Wrap Your App with `SwapWidgetProvider`

First, wrap your application or the relevant page with the `SwapWidgetProvider` component:

```tsx
import { SwapWidgetProvider } from '@skip-go/widget';

function App() {
return (
<SwapWidgetProvider>
<YourApp />
</SwapWidgetProvider>
);
}
```

### 2. Use the `SwapWidget` Component

Next, import the css and use the `SwapWidget` component to render the swap interface:

```tsx
import { SwapWidget } from '@skip-go/widget';
import '@skip-go/widget/style.css';

const SwapPage = () => {
return (
<div
style={{
width: '450px',
height: '820px',
}}
>
<SwapWidget
colors={{
primary: '#FF4FFF',
}}
/>
</div>
);
};
```

## Component Props

### SwapWidget

The `SwapWidget` component accepts the following props:

```tsx
interface SwapWidgetProps {
colors?: {
primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
};
defaultRoute?: {
// Default route for the widget.
amountIn?: number;
amountOut?: number;
srcChainID?: string;
srcAssetDenom?: string;
destChainID?: string;
destAssetDenom?: string;
};
routeConfig?: {
experimentalFeatures?: ['hyperlane'];
allowMultiTx?: boolean;
allowUnsafe?: boolean;
bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
swapVenues?: {
name: string;
chainID: string;
}[];
};
className?: string;
style?: React.CSSProperties;
settings?: {
customGasAmount?: number; // custom gas amount for validation defaults to 200_000
slippage?: number; //percentage of slippage 0-100. defaults to 3
};
onlyTestnet?: boolean; // Only show testnet chains
}
```sh
├── examples
│   └── nextjs
├── packages
│   ├── core
│   └── widget
```

### SwapWidgetProvider

The `SwapWidgetProvider` component accepts the following prop:

- `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' }`.
- `endpointOptions` (Optional): Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.

```ts
endpointOptions?: {
// Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
endpoints?: Record<string, EndpointOptions>;
getRpcEndpointForChain?: (chainID: string) => Promise<string>;
getRestEndpointForChain?: (chainID: string) => Promise<string>;
};
```

- `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.

By following these steps, you can easily integrate the Skip Go Widget into your React application and customize it to meet your specific needs.
- `core` (@skip-go/core): The core package of the project. Contains the core logic, api fetch and types, helper functions, signing, etc.
- `widget` (@skip-go/widget): React library that contains the swap widget components.
- `examples`: The example app of the project

## Dev Setup

Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
"dev": "yarn run dev:widget & yarn run dev:nextjs & yarn run dev:core",
"dev:widget": "yarn workspace @skip-go/widget run dev",
"dev:nextjs": "yarn workspace nextjs run dev",
"dev:core": "yarn workspace @skip-router/core run watch",
"dev:core": "yarn workspace @skip-go/core run watch",
"build": "yarn run build:core && yarn run chains && yarn run build:widget && yarn run build:nextjs",
"build:widget": "yarn workspace @skip-go/widget run build",
"build:nextjs": "yarn workspace nextjs build",
"build:core": "yarn run codegen && yarn workspace @skip-router/core build",
"codegen": "yarn workspace @skip-router/core codegen",
"build:core": "yarn run codegen && yarn workspace @skip-go/core build",
"codegen": "yarn workspace @skip-go/core codegen",
"chains": "yarn workspace @skip-go/widget run chains:generate",
"test": "yarn workspace @skip-router/core run test",
"test": "yarn workspace @skip-go/core run test",
"submodule": "yarn run submodule:init && yarn run submodule:update",
"submodule:init": "git submodule init",
"submodule:update": "git submodule update"
Expand Down
4 changes: 2 additions & 2 deletions packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@skip-router/core",
"name": "@skip-go/core",
"description": "JavaScript SDK for Skip API",
"version": "5.1.1",
"version": "0.0.1",
"repository": "https://github.com/skip-mev/skip-router-sdk",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
2 changes: 1 addition & 1 deletion packages/widget/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.7",
"@skip-router/core": "workspace:packages/core",
"@skip-go/core": "workspace:packages/core",
"@solana/spl-token": "^0.4.6",
"@solana/wallet-adapter-react": "^0.15.35",
"@solana/wallet-adapter-wallets": "^0.19.32",
Expand Down
72 changes: 36 additions & 36 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7816,6 +7816,41 @@ __metadata:
languageName: node
linkType: hard

"@skip-go/core@workspace:packages/core":
version: 0.0.0-use.local
resolution: "@skip-go/core@workspace:packages/core"
dependencies:
"@cosmjs/amino": 0.32.4
"@cosmjs/cosmwasm-stargate": 0.32.4
"@cosmjs/encoding": 0.32.4
"@cosmjs/faucet": 0.32.3
"@cosmjs/faucet-client": 0.32.3
"@cosmjs/math": 0.32.4
"@cosmjs/proto-signing": 0.32.4
"@cosmjs/stargate": 0.32.4
"@cosmjs/tendermint-rpc": 0.32.4
"@cosmology/telescope": 1.8.3
"@initia/initia-registry": 0.1.9
"@injectivelabs/core-proto-ts": 0.0.21
"@injectivelabs/sdk-ts": 1.14.5
"@keplr-wallet/unit": ^0.12.67
"@protobufs/gogoproto": 0.0.10
"@protobufs/google": 0.0.10
"@solana/wallet-adapter-base": ^0.9.23
"@solana/web3.js": ^1.91.1
axios: 1.x
cosmjs-types: 0.8.0
keccak256: 1.x
kujira.js: 0.9.x
minimatch: ^9.0.3
proxy-from-env: ^1.1.0
viem: 2.x
vitest: ^1.2.2
peerDependencies:
chain-registry: ^1.33.11
languageName: unknown
linkType: soft

"@skip-go/widget@workspace:packages/widget":
version: 0.0.0-use.local
resolution: "@skip-go/widget@workspace:packages/widget"
Expand All @@ -7839,7 +7874,7 @@ __metadata:
"@radix-ui/react-scroll-area": ^1.0.5
"@radix-ui/react-switch": ^1.0.3
"@radix-ui/react-tooltip": ^1.0.7
"@skip-router/core": "workspace:packages/core"
"@skip-go/core": "workspace:packages/core"
"@solana/spl-token": ^0.4.6
"@solana/wallet-adapter-react": ^0.15.35
"@solana/wallet-adapter-wallets": ^0.19.32
Expand Down Expand Up @@ -7871,41 +7906,6 @@ __metadata:
languageName: unknown
linkType: soft

"@skip-router/core@workspace:packages/core":
version: 0.0.0-use.local
resolution: "@skip-router/core@workspace:packages/core"
dependencies:
"@cosmjs/amino": 0.32.4
"@cosmjs/cosmwasm-stargate": 0.32.4
"@cosmjs/encoding": 0.32.4
"@cosmjs/faucet": 0.32.3
"@cosmjs/faucet-client": 0.32.3
"@cosmjs/math": 0.32.4
"@cosmjs/proto-signing": 0.32.4
"@cosmjs/stargate": 0.32.4
"@cosmjs/tendermint-rpc": 0.32.4
"@cosmology/telescope": 1.8.3
"@initia/initia-registry": 0.1.9
"@injectivelabs/core-proto-ts": 0.0.21
"@injectivelabs/sdk-ts": 1.14.5
"@keplr-wallet/unit": ^0.12.67
"@protobufs/gogoproto": 0.0.10
"@protobufs/google": 0.0.10
"@solana/wallet-adapter-base": ^0.9.23
"@solana/web3.js": ^1.91.1
axios: 1.x
cosmjs-types: 0.8.0
keccak256: 1.x
kujira.js: 0.9.x
minimatch: ^9.0.3
proxy-from-env: ^1.1.0
viem: 2.x
vitest: ^1.2.2
peerDependencies:
chain-registry: ^1.33.11
languageName: unknown
linkType: soft

"@socket.io/component-emitter@npm:~3.1.0":
version: 3.1.2
resolution: "@socket.io/component-emitter@npm:3.1.2"
Expand Down
Loading