Built with svelte kit!
Had issues with solana/web3 in the browser, so made this to make life easier. What problems you ask? Buffer, global, and more buffer issues. Bundling them up here skips all that pain and uses the libraries in the browser with ease.
See src/routes/index.svelte for good ideas club, such as simple example below:
// somewhere.svelte
import Solana from 'sveltana'
let dapp
let config = {
network: 'devnet' || 'main'
}
<Solana {config} bind:dapp />
{#if dapp}
Now use dapp for Solana access
{dapp.network} // devnet
{/if}
To get Solana to work:
- In
svelte.config.js
, addvite
tokit
:
kit:{
... // previous boring config stuff
vite: {
ssr: {
external: [
/@babel\/runtime/,
'bn.js',
'borsh',
'bs58',
'buffer-layout',
'crypto-hash',
'jayson/lib/client/browser',
'js-sha3',
'node-fetch',
'rpc-websockets',
'secp256k1',
'superstruct',
'tweetnacl'
]
},
resolve: {
mainFields: ['browser', 'module', 'main', 'jsnext'],
dedupe: ['bn.js', 'buffer'],
extensions: ['.js', '.ts'],
preferBuiltins: false
}
}
}
- GlobalThis
In main component, add:
<svelte:head>
<script>
global = globalThis // for solana web3 repo
</script>
</svelte:head>
- Buffer issues
In main component, add:
onMount(async () => {
// setup some globals
import("buffer").then((Buffer) => {
global.Buffer = Buffer.Buffer
})
})
Follow this
Running svelte-kit package will take the contents of src/lib and generate a package directory