Skip to content

feat(appkit): how to swap #1903

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.

Sign up for GitHub

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

Open
novusnota wants to merge 1 commit into
base: main
Choose a base branch
from
+442 −17
Open

feat(appkit): how to swap #1903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,8 @@
"ecosystem/appkit/init",
"ecosystem/appkit/toncoin",
"ecosystem/appkit/jettons",
"ecosystem/appkit/nfts"
"ecosystem/appkit/nfts",
"ecosystem/appkit/swap"
]
},
{
Expand Down
65 changes: 50 additions & 15 deletions ecosystem/appkit/init.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,32 +180,51 @@ For local development and testing, use the [manifest file from this demo dApp](h

The [setup with connectors](#connectors) connects to TON wallets via services such as [Tonkeeper](/ecosystem/wallet-apps/tonkeeper). To enable advanced DeFi operations like asset swaps, configure DeFi providers.

[Omniston](https://ston.fi/omniston) is the primary swap provider. To set it up:
Supported swap providers:

- [Omniston](https://ston.fi/omniston). Requires the `@ston-fi/omniston-sdk` package.
- [DeDust](https://dedust.io). Has no additional dependencies.

AppKit uses the first registered swap provider by default. Pass `providerId` when requesting a quote to target a specific provider.

<Steps>
<Step
title="Install the SDK"
title="Install the SDK for Omniston"
noAnchor="true"
>
Swaps with Omniston require its SDK to be installed:

```shell
npm i @ston-fi/omniston-sdk
```
</Step>

<Step
title="Set up the swap provider"
title="Set up one or more DeFi providers"
noAnchor="true"
>
```ts
// Or @ton/appkit-react for React
import { AppKit, Network } from '@ton/appkit';
import { AppKit } from '@ton/appkit';

// Omniston as a swap provider
// Swap providers
import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';
import { DeDustSwapProvider } from '@ton/appkit/swap/dedust';

// Tonstakers as a staking provider
import { createTonstakersProvider } from '@ton/appkit/staking/tonstakers';

const kit = new AppKit({
// Set up a swap provider
providers: [new OmnistonSwapProvider({
/* custom configuration options */
})],
// DeFi providers setup
providers: [
// AppKit uses the first registered swap provider by default.
new OmnistonSwapProvider({
/* custom configuration options, none are required */
}),
new DeDustSwapProvider({
/* custom configuration options, none are required */
}),
],
});
```
</Step>
Expand Down Expand Up @@ -263,8 +282,9 @@ The following initialization example sets up everything at once:
// Styles
import '@ton/appkit-react/styles.css';

// DeFi provider
import { OmnistonSwapProvider } from '@ston-fi/omniston-sdk';
// DeFi providers
import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';
import { DeDustSwapProvider } from '@ton/appkit/swap/dedust';

// TanStack Query
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
Expand Down Expand Up @@ -307,7 +327,11 @@ The following initialization example sets up everything at once:
}),
],
// 3. Configure DeFi providers.
providers: [new OmnistonSwapProvider()],
providers: [
// AppKit uses the first registered swap provider by default.
new OmnistonSwapProvider(),
new DeDustSwapProvider(),
],
});

// 4. Wrap the rest of the app in a QueryClientProvider and an AppKitProvider.
Expand All @@ -331,8 +355,9 @@ The following initialization example sets up everything at once:
TonConnectConnector,
} from '@ton/appkit';

// DeFi provider
import { OmnistonSwapProvider } from '@ston-fi/omniston-sdk';
// DeFi providers
import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';
import { DeDustSwapProvider } from '@ton/appkit/swap/dedust';

// Initialization
const kit = new AppKit({
Expand Down Expand Up @@ -362,7 +387,11 @@ The following initialization example sets up everything at once:
}),
],
// 3. Configure DeFi providers.
providers: [new OmnistonSwapProvider()],
providers: [
// AppKit uses the first registered swap provider by default.
new OmnistonSwapProvider(),
new DeDustSwapProvider(),
],
});
```
</CodeGroup>
Expand Down Expand Up @@ -503,6 +532,7 @@ Before migrating, [install AppKit and peer packages](#installation) and add nece
<Steps>
<Step
title="Ensure the TON Connect UI package is of the latest version"
noAnchor="true"
>
Ensure that TON Connect packages are of the latest version:

Expand All @@ -513,6 +543,7 @@ Before migrating, [install AppKit and peer packages](#installation) and add nece

<Step
title="Initialize AppKit and replace TonConnectUIProvider"
noAnchor="true"
>
Use `AppKitProvider` in place of the `TonConnectUIProvider`:

Expand Down Expand Up @@ -554,6 +585,7 @@ Before migrating, [install AppKit and peer packages](#installation) and add nece

<Step
title="Keep existing hooks as is"
noAnchor="true"
>
The `AppKitProvider` bridges to TON Connect under the hood. Existing few `@tonconnect/ui-react` hooks, such as `useTonAddress()`, `useTonWallet()`, and others, will continue to work inside the `AppKitProvider` automatically.
</Step>
Expand All @@ -566,6 +598,7 @@ Before migrating, [install AppKit and peer packages](#installation) and add nece
<Steps>
<Step
title="Ensure the TON Connect UI package is of the latest version"
noAnchor="true"
>
```shell
npm up @tonconnect/ui --save
Expand All @@ -574,6 +607,7 @@ Before migrating, [install AppKit and peer packages](#installation) and add nece

<Step
title="Initialize AppKit and reuse TonConnectUI object"
noAnchor="true"
>
It is possible to reuse the existing `TonConnectUI` object when configuring AppKit [connectors](#connectors):

Expand Down Expand Up @@ -605,6 +639,7 @@ Before migrating, [install AppKit and peer packages](#installation) and add nece

<Step
title="Replace method calls with exported functions"
noAnchor="true"
>
Instead of consolidating everything within the instantiated `TonConnectUI` object, AppKit offers several tree-shakable functions that enhance and expand the capabilities of the existing `TonConnectUI` functionality. Refer to [relevant how-to pages](/ecosystem/appkit/overview#quick-start) for concrete examples.
</Step>
Expand Down
7 changes: 7 additions & 0 deletions ecosystem/appkit/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,13 @@ TON Connect's **AppKit** is an open-source SDK that integrates web2 and web3 app
horizontal="true"
href="/ecosystem/appkit/nfts"
/>

<Card
title="Swap tokens"
icon="rotate"
horizontal="true"
href="/ecosystem/appkit/swap"
/>
</Columns>

## See also
Expand Down
Loading
Loading