[bug] Impossible to use solana connection in vanilla JS

[beeb]

Link to minimal reproducible example

https://stackblitz.com/edit/vitejs-vite-i19qspur?file=src%2Fmain.js

Summary

In vanilla JS, it is currently impossible to retrieve the solana Connection object from @reown/appkit-adapter-solana.

The vue and react exports specify a useAppKitConnection hook to retrieve that connection, but it's unavailable in vanilla JS.

Even the SolStoreUtil cannot be imported from @reown/appkit-adapter-solana because it's only exported as a type here:

appkit/packages/adapters/solana/src/index.ts

Line 8 in 4d3dd28

export type * from './utils/SolanaStoreUtil.js'

List of related npm package versions

@reown/appkit-adapter-solana v1.6.2

Node.js Version

v22

Package Manager

pnpm 9.15.1

[linear]

APKT-1845 [bug] Impossible to use solana connection in vanilla JS

[rtomas]

Thanks for reporting the issue ... we are working to solve it as soon as possible.

[arein]

Thx for reporting @beeb - curious - what are you building?

[beeb]

@arein just trying to find the best way to integrate with Svelte. No particular project in mind.

[ethan-tqa]

Yep, I have also filed a bug report for the doc here: reown-com/reown-docs#230

[souvikmishra]

@beeb hey! I had faced a similar issue but with ethers, maybe this would be of help #3468

[beeb]

@souvikmishra thanks for the link, but the proposed solution to subscribe doesn't work here, because there is no subscribe method for the solana connection.

[souvikmishra]

Ah... I thought it might be helpful 🙆‍♂️ anyways if I come across something else I'll be sure to drop it here.

[Sam-Newman]

Thank you for raising this - team will look into it!

[magiziz]

@beeb Why do you need solana connection directly from appkit ? Can you do something like this ?

const connection = new Connection('https://api.mainnet-beta.solana.com', 'confirmed')

[beeb]

@magiziz it's available to react and vue users, so why not vanilla (i.e. svelte and all the other frameworks)?

[beeb]

Can you do something like this ?

I would rather not. The advantage of using the same connection that the client is using is you are sure you get the same data because it uses the same RPC. Likewise, when the network changes, the client automatically updates the connection which would then make sure that the network/chain is the same for all of the application. Doing it otherwise is at best a hack, at worst error-prone.

[magiziz]

@beeb we're choosing the first available RPC provider that's available in the networks. Here is the code if you're curious.

For now i think the best solution is to do this.

import { Connection } from '@solana/web3.js'

import { SolHelpersUtil } from '@reown/appkit-adapter-solana'
import { solana } from '@reown/appkit/networks'

const rpcUrl = SolHelpersUtil.detectRpcUrl(solana, 'YOUR_PROJECT_ID') as string

if (!rpcUrl) {
  throw new Error('No RPC URL found')
}

const connection = new Connection(rpcUrl, 'confirmed')

If we were to expose this in vanilla js it would require some refactoring work and this hasn't been requested from a lot of people. Let me know if the solution above works for now.

[beeb]

@magiziz the easiest "fix" that would not require refactoring would be to export the SolStoreUtil singleton no? At the moment it's only exported as a type.

[magiziz]

@beeb I think if we were to expose SolStoreUtil it wouldn't be the nicest approach, instead i think we should expose this from createAppKit, but for that to happen we would need to do some refactoring. Can you use the approach i gave above and see if that works ? It should be the same

[beeb]

Well I would need to also watch for chain changes in your proposed approach. But yeah I guess it would be a kind of workaround. I strongly encourage you to fix this at some point if the ambition is to become the de facto standard for solana dApps.

[magiziz]

@beeb yes we'll take a look at this, but as a workaround you can use the approach above. Please re-open this issue if you're still stuck 🙏