[feature] Example for sveltekit based projects

[souvikmishra]

What problem does this new feature solve?

There is no straightforward way to integrate appkit with sveltekit based projects.
I tried initializing the AppKit by following the HTML + ethers example and wrap the return object given by createAppKit() inside a svelte store but the reactivity that I expected wasn't there.
Eg.
In appKitController.ts

import { createAppKit } from '@reown/appkit';
import { EthersAdapter } from '@reown/appkit-adapter-ethers';
import { mainnet, arbitrum, arbitrumSepolia } from '@reown/appkit/networks';

// 1. Get projectId from https://cloud.reown.com
const projectId = '<my_project_id>';

// 2. Create your application's metadata object
const metadata = {
	name: 'AppKit',
	description: 'AppKit Example',
	url: 'https://reown.com/appkit', // origin must match your domain & subdomain
	icons: ['https://avatars.githubusercontent.com/u/179229932']
};

// 3. Create a AppKit instance
const modal = createAppKit({
	adapters: [new EthersAdapter()],
	networks: [mainnet, arbitrum, arbitrumSepolia],
	metadata,
	projectId,
	features: {
		analytics: true // Optional - defaults to your Cloud configuration
	},
	debug: true
});

// I export this and then use it inside a store file
export default modal;

Then in stores.ts

import modal from '$lib/controllers/appKitController.ts'
export const web3WalletStore = writable(modal);

Then in +page.svelte

<script lang="ts">
	import { web3WalletStore } from '$lib/data-stores/stores.ts';
</script>

<!-- This doesn't work -->
{$web3WalletStore.getIsConnectedState()}

Describe the solution you'd like

If there were an example that could guide us to use all the goodness that AppKit has to offer in sveltekit (the same way you guys have it for react and vue) that would be awesome.

[linear]

APKT-1780 [feature] Example for sveltekit based projects

[Sam-Newman]

Hey - thanks for this request 🙏
I will add it to the backlog to be prioritised. I believe this is the first request for SvelteKit support - but if we get more requests we will increase the priority. Please keep an eye on this ticket for updates.

[enesozturk]

@souvikmishra We don't have fully support for SvelteKit but plain JS approach is working perfect on SvelteKit. I've added an example app to our repo as you can check how to listen state changes: #3469

In the example you'll see all the state listeners printed to the screen and you can do conditional things as you wish.

[souvikmishra]

Hey @enesozturk, the example helped quite a bit. We're able to listen to state changes and update stuff based on conditionals. Apart from that we were looking to interact with smart contracts as well, so if there can be some guidance on how to achieve that i.e. get the wallet provider like we do in the react version (const { walletProvider } = useAppKitProvider()) that would be super helpful.

[SerhiiKirik]

@souvikmishra Hello,
You can use the Context API provided by Svelte.
Here’s the approach:

Initialize your modal in +layout.svelte.
Use setContext to store the modal, the config, and the wallet separately.
Then, access them anywhere in your application using the Context API.
This is the method I personally used. It’s a bit complex, but it allows you to build a clean and maintainable structure. I’ve even created a separate library for our Svelte-based frontends.

[souvikmishra]

@SerhiiKirik how do you get the provider object from it? Also if your library is open source it would be really helpful if you can share it here.

[enesozturk]

@souvikmishra You can use subscribeProvider since useAppKitProvider is available for Vue and React, not for Svelte.

Here is the example code piece that you can check:

let eip155Provider = null;
modal.subscribeProviders((state) => {
	eip155Provider = state["eip155"]
});

eip155Provider.request({
	method: 'personal_sign',
	params: ['Hello from AppKit!', accountState.address]
})