Skip to content

Commit c77d413

Browse files
rohit-710rohit-710
authored
Merge pull request #460 from reown-com/devin/1748972854-add-svelte-appkit-docs
Add Svelte AppKit Documentation
2 parents 6aff4e3 + 3ed7614 commit c77d413

28 files changed

+1175
-0
lines changed

‎appkit/overview.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ Reown AppKit is open-source and free to use, which provides flexibility, transpa
3333
Get started with AppKit in Vue.
3434
</Card>
3535

36+
<Card title="Svelte" icon="svelte" href="./svelte/core/installation">
37+
Get started with AppKit in Svelte.
38+
</Card>
39+
3640
<Card title="JavaScript" icon="js" href="./javascript/core/installation">
3741
Get started with AppKit in JavaScript.
3842
</Card>

‎appkit/svelte/core/actions.mdx

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
---
2+
title: Actions
3+
---
4+
5+
import SvelteWagmiActions from "/snippets/appkit/svelte/wagmi/actions.mdx";
6+
import SvelteEthersActions from "/snippets/appkit/svelte/ethers/actions.mdx";
7+
import SvelteSolanaActions from "/snippets/appkit/svelte/solana/actions.mdx";
8+
9+
Actions are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.
10+
11+
## Open and close the modal
12+
13+
```ts
14+
import { createAppKit } from '@reown/appkit'
15+
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
16+
import { arbitrum, mainnet } from '@reown/appkit/networks'
17+
18+
const wagmiAdapter = new WagmiAdapter({
19+
networks: [mainnet, arbitrum],
20+
projectId
21+
})
22+
23+
const appKit = createAppKit({
24+
adapters: [wagmiAdapter],
25+
networks: [mainnet, arbitrum],
26+
projectId,
27+
});
28+
29+
appKit.open();
30+
31+
appKit.close();
32+
```
33+
34+
You can also select the modal's view when calling the `open` function
35+
36+
```ts
37+
appKit.open({ view: "Account" });
38+
39+
// to connect and show multi wallets view
40+
appKit.open({ view: "Connect" });
41+
42+
// to connect and show only solana wallets
43+
appKit.open({ view: "Connect", namespace: "solana" });
44+
45+
// to connect and show only bitcoin wallets
46+
appKit.open({ view: "Connect", namespace: "bip122" });
47+
48+
// to connect and show only ethereum wallets
49+
appKit.open({ view: "Connect", namespace: "eip155" });
50+
51+
// to open swap with arguments
52+
appKit.open({
53+
view: 'Swap',
54+
arguments: {
55+
amount: '321.123',
56+
fromToken: 'USDC',
57+
toToken: 'ETH'
58+
}
59+
})
60+
```
61+
62+
List of views you can select
63+
64+
| Variable | Description |
65+
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
66+
| `Connect` | Principal view of the modal - default view when disconnected. A `namespace` can be selected to connect to a specific network (solana, bip122, or eip155). |
67+
| `Account` | User profile - default view when connected. |
68+
| `AllWallets` | Shows the list of all available wallets. |
69+
| `Networks` | List of available networks - you can select and target a specific network before connecting. |
70+
| `WhatIsANetwork` | "What is a network" onboarding view. |
71+
| `WhatIsAWallet` | "What is a wallet" onboarding view. |
72+
| `OnRampProviders` | On-Ramp main view. |
73+
| `Swap` | Swap main view. |
74+
75+
## Disconnect
76+
77+
```ts
78+
appKit.adapter?.connectionControllerClient?.disconnect();
79+
```
80+
81+
## WalletInfo
82+
83+
Metadata information from the connected wallet
84+
85+
```ts
86+
function handler({ name, icon }) {
87+
console.log(name, icon);
88+
}
89+
90+
appKit.subscribeWalletInfo(handler);
91+
92+
//or
93+
94+
const { name, icon } = appKit.getWalletInfo();
95+
```
96+
97+
## Svelte Store Integration
98+
99+
You can use Svelte stores to manage AppKit state across your application:
100+
101+
```ts
102+
// lib/stores/appkit.ts
103+
import { writable } from 'svelte/store';
104+
import { browser } from '$app/environment';
105+
106+
let appKit: ReturnType<typeof createAppKit> | undefined = undefined;
107+
108+
if (browser) {
109+
// Initialize AppKit only in browser environment
110+
appKit = createAppKit({
111+
adapters: [wagmiAdapter],
112+
networks: [mainnet, arbitrum],
113+
projectId,
114+
});
115+
}
116+
117+
export const appKitStore = writable(appKit);
118+
```
119+
120+
## Ethereum Library
121+
122+
<Tabs>
123+
<Tab title="Wagmi">
124+
125+
<SvelteWagmiActions />
126+
127+
</Tab>
128+
<Tab title="Ethers">
129+
130+
<SvelteEthersActions />
131+
132+
</Tab>
133+
</Tabs>
134+
135+
## Modal State
136+
137+
Get the current value of the modal's state
138+
139+
```ts
140+
const appKit = createAppKit({
141+
adapters: [wagmiAdapter],
142+
networks: [mainnet, arbitrum],
143+
projectId,
144+
});
145+
146+
const { open, selectedNetworkId } = appKit.getState();
147+
```
148+
149+
The modal state is an object of two properties:
150+
151+
| Property | Description | Type |
152+
| ------------------- | --------------------------------------------------------------------- | --------- |
153+
| `open` | Open state will be true when the modal is open and false when closed. | `boolean` |
154+
| `selectedNetworkId` | The current chain id selected by the user. | `number` |
155+
156+
You can also subscribe to the modal's state changes.
157+
158+
```ts
159+
const appKit = createAppKit({ wagmiConfig, projectId });
160+
161+
appKit.subscribeState((newState) => console.log(newState));
162+
```
163+
164+
## ThemeMode
165+
166+
Set the `themeMode` after creating the modal
167+
168+
```ts
169+
const appKit = createAppKit({ wagmiConfig, projectId });
170+
171+
appKit.setThemeMode("dark");
172+
```
173+
174+
Get the current `themeMode` value by calling the `getThemeMode` function
175+
176+
```ts
177+
const appKit = createAppKit({ wagmiConfig, projectId });
178+
179+
const themeMode = appKit.getThemeMode();
180+
```
181+
182+
## themeVariables
183+
184+
Set the `themeVariables` after creating the modal
185+
186+
```ts
187+
const appKit = createAppKit({ wagmiConfig, projectId })
188+
189+
appKit.setThemeVariables({ ... })
190+
```
191+
192+
Get the current `themeVariables` value by calling the `getThemeVariables` function
193+
194+
```ts
195+
const appKit = createAppKit({ wagmiConfig, projectId });
196+
197+
const themeMode = appKit.getThemeVariables();
198+
```
199+
200+
## Subscribe to theme changes
201+
202+
```ts
203+
const unsubscribe = appKit.subscribeTheme((newTheme) => console.log(newTheme));
204+
```
205+
206+
## Track modal events
207+
208+
```ts
209+
appKit.getEvent(); // get last event
210+
appKit.subscribeEvents((event) => console.log(event)); // subscribe to events
211+
```

‎appkit/svelte/core/components.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Components
3+
---
4+
5+
import Components from "/snippets/appkit/shared/components.mdx";
6+
7+
<Components />

‎appkit/svelte/core/custom-connectors.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Custom Connectors
3+
---
4+
5+
import CustomConnectors from "/snippets/appkit/shared/custom-connectors.mdx";
6+
7+
<CustomConnectors />

‎appkit/svelte/core/custom-networks.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Custom Networks
3+
---
4+
5+
import CustomNetworks from "/snippets/appkit/shared/custom-networks.mdx";
6+
7+
<CustomNetworks />

0 commit comments

Comments
 (0)