Package Exports

@subwallet-connect/solid
@subwallet-connect/solid/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@subwallet-connect/solid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@subwallet-connect/solid

A collection of composable functions for implementing web3-onboard in to a Solid project;

Install Modules

NPM npm i @subwallet-connect/solid @subwallet-connect/injected-wallets ethers

PNPM pnpm i @subwallet-connect/solid @subwallet-connect/injected-wallets ethers

Quickstart

import { init } from '@subwallet-connect/solid'
import injectedModule from '@subwallet-connect/injected-wallets'

const injected = injectedModule()

// Only one RPC endpoint required per chain
const rpcAPIKey = '<INFURA_KEY>' || '<ALCHEMY_KEY>'
const rpcUrl =
  `https://eth-mainnet.g.alchemy.com/v2/${rpcAPIKey}` ||
  `https://mainnet.infura.io/v3/${rpcAPIKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
  useOnboard()

if (connectedWallet) {
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
  const ethersProvider = new ethers.providers.Web3Provider(
    connectedWallet.provider,
    'any'
  )
  // ..... do stuff with the provider
}

Functions

`init`

The init function initializes web3-onboard and makes it available to the useOnboard() composable. For references check out the initialization docs for @subwallet-connect/core

Example usage

import { init } from '@subwallet-connect/solid'
import injectedModule from '@subwallet-connect/injected-wallets'

const injected = injectedModule()
const infuraKey = '<INFURA_KEY>'
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`

const web3Onboard = init({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl
    }
  ]
})

`useOnboard`

useOnboard must be used after the init function has been called - it will return an object that can be destructured to obtain the following reactive variables and functions:

Example usage

import { useOnboard } from '@subwallet-connect/solid'
// Use the composable
const onboard = useOnboard()
// Or destructure it
const {
  wallets,
  connectedWallet,
  connectedChain,
  connectWallet,
  disconnectConnectedWallet
} = useOnboard()
// do stuff

`connectWallet`

Function to open the onboard modal and connect to a wallet provider. For reference check out the connecting a wallet for @subwallet-connect/core

Example usage

function SampleConnect() {
  const { connectWallet } = useOnboard()

  return <button onClick={() => connectWallet()}> connect wallet</button>
}

`connectedChain`

Property that contains the current chain to which connectedChain is connected

Example usage

function SampleConnect() {
    const { connectedChain } = useOnboard()

  return <span>Connected Chain: { connectedChain() }</span>

`connectedWallet`

Property that contains the latest connected wallet

Example usage

function SampleConnect() {
  const { connectedWallet } = useOnboard()
  return <span>Connected Wallet: {connectedWallet()?.label}</span>
}

`disconnectConnectedWallet`

Function to disconnect the connectedWallet

Example usage

import { useOnboard } from '@subwallet-connect/solid'
function SampleConnect() {
  const { disconnectConnectedWallet } = useOnboard()
  return (
    <button onClick={() => disconnectConnectedWallet()}>
      {' '}
      disconnect wallet
    </button>
  )
}

`getChain`

Function that returns the current chain a wallet is connected to

Example usage

import { useOnboard } from '@subwallet-connect/solid'
function SampleConnect() {
  const { getChain } = useOnboard()
  return <span>MetaMask is connected to: {getChain('MetaMask')}</span>
}

`setChain`

Function to set the chain of a wallet

Example usage

import { useOnboard } from '@subwallet-connect/solid'
function SampleConnect() {
  const { setChain } = useOnboard()
  const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
  return (
    <button type="button" onClick={set}>
      Set MetaMask chain to mainnet
    </button>
  )
}

`settingChain`

Readonly boolean ref that tracks the status of setting the chain

Example usage

import { useOnboard } from '@subwallet-connect/solid'
function SampleConnect() {
  const { settingChain } = useOnboard()
  return { settingChain }
}

`wallets`

Readonly ref that contains every wallet that has been connected

Example usage

import { useOnboard } from '@subwallet-connect/solid'
function SampleConnect() {
    const { wallets } = useOnboard()
   return(
    <ul>
    <For each={wallets()}>{wallet=>{
      return <li>
        {wallet.label}
      </li>
      }}
    </For>
    </ul>
   )
  }
}

`lastConnectedTimestamp`

Readonly ref that contains the last time that the user connected a wallet in milliseconds

Example usage

import { useOnboard } from '@subwallet-connect/solid'
function SampleConnect() {
  const { lastConnectedTimestamp } = useOnboard()
  return (
    <span>Your last connection timestamp was: {lastConnectedTimestamp}</span>
  )
}