Svelte library using @wagmi/core

[sprice]

Based on this comment it looks like it should be not too tricky to put a Svelte library together.

I've started using Svelte for the first time this week and it's clear I'll be using it more and more for web3 work. But now I've lost my wagmi fun times 😿

I can help support this effort with my own 💰, I can try and convince others to support it with 💰, and with a bit of guidance of how it would work and where to start I can contribute some of my time to help coding.

[jxom]

Don't think it would be that tricky given we have a vanilla, framework-agnostic @wagmi/core package. You can also check out the old using-core example we had to provide more guidance on how the @wagmi/core stuff works.

[tmm]

++ to what @jxom said.

Supporting Svelte (and other frameworks) one day would be great! Definitely where things are headed long term. In the meantime, there's still some roadmap to execute on for React and Vanilla JS. Community efforts have started springing up for other frameworks:

• https://github.com/wobsoriano/vagmi
• https://github.com/vethers/vethers
• Usage without React (Vanilla JS client) #361

[sprice]

It looks like vethers is the Vue equivalent of wagmi (ie wagmi for React which depends on @wagmi/core).

Does anyone know if there is has been effort put towards a Svelte equivalent? I don't want to duplicate any effort.

If not I'll look at kickstarting this 😊

[wobsoriano]

I recommend using svelte stores when doing this. Here's how I would do it:

import { getAccount, watchAccount } from '@wagmi/core'
import { readable } from 'svelte/store'

export function account() {
  const { subscribe } = readable(getAccount(), (set) => {
    return watchAccount(set)
  })

  return {
    subscribe,
  }
}

<script>
  import { account } from './store/account'
</script>

{#if $account.isConnecting}
  <div>Connecting…</div>
{:else if $account.isDisconnected}
  <div>Disconnected</div>
{:else}
  <div>{$account.address}</div>
{/if}

[ghost]

I am working on a Tauri/Vite/Svelte dapp. As I integrate wagmi/core, I'll start contributing in the examples section.

@tmm

Okay to create a core folder in examples (and then nested [framework] folders,
or,
just core-[framework] folders?

[tmm]

Feel free to create your own repo and link in awesome-wagmi. Trying to limit the official examples for now so the core team doesn't need to spend too much time maintaining them.

[hardyjosh]

FYI I created this package for my own purposes

https://www.npmjs.com/package/svelte-wagmi-stores

Tried to keep it light as possible, would love input!