Skip to main content

Installation and Setup

Installation​

Install the SDK using npm or yarn:

npm install @stakewise/v3-sdk
# or
yarn add @stakewise/v3-sdk

GraphQL Loader Setup​

The SDK includes .graphql queries. If your build tool does not natively support importing .graphql files, you’ll need to install and configure a corresponding plugin.

Webpack Configuration​

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }
    ]
  }
}

Next.js Configuration​

// next.config.js
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      loader: 'graphql-tag/loader',
      exclude: /node_modules/,
    })
    return config
  }
}

Vite Configuration​

// vite.config.js
import graphql from '@rollup/plugin-graphql'

export default {
  plugins: [graphql()]
}

💡 If you are using another bundler, search for “GraphQL loader” or “GraphQL plugin” for your specific build system.

Creating an SDK Instance​

1. Without a Provider (read-only mode + encoding)​

Perfect for:

  • Frontend read-only operations
  • Custodial wallet backends (using encoded transactions)
  • Data dashboards without transaction capabilities

However, you cannot send transactions (e.g., sdk.vault.deposit), but you can get transaction calldata (sdk.vault.deposit.encode)

import { StakeWiseSDK, Network } from '@stakewise/v3-sdk'

const sdk = new StakeWiseSDK({
  network: Network.Mainnet,
  endpoints: {
    web3: 'https://mainnet.infura.io/v3/...',
  },
})

2. With a Provider (read + write mode)​

Perfect for:

  • Browser wallet integrations (MetaMask, WalletConnect, etc.)
  • Direct transaction execution

An SDK instance created with a provider allows both data fetching and transaction execution.

import { BrowserProvider } from 'ethers'
import { StakeWiseSDK, Network } from '@stakewise/v3-sdk'

const eip1193Provider = window.ethereum

const browserProvider = new BrowserProvider(eip1193Provider, {
  chainId: Network.Mainnet,
  name: 'mainnet',
})

const sdk = new StakeWiseSDK({
  network: Network.Mainnet,
  provider: browserProvider,
})

3. With Wagmi Connector and React​

If you’re using wagmi for wallet connections, you can initialize the SDK with an existing wagmi connector.

🔗 A full working example can be found on
Example of connecting the SDK with the Wagmi library

import React, { useCallback } from 'react'
import { BrowserProvider, Eip1193Provider } from 'ethers'
import { StakeWiseSDK, Network } from '@stakewise/v3-sdk'
import { useAccount } from 'wagmi'

const useStakeWiseSDK = async () => {
  const { address, connector } = useAccount()

  const createSDK = useCallback(async () => {
    if (!address || typeof connector?.getProvider !== 'function') {
      return new StakeWiseSDK({ network: Network.Mainnet })
    }

    const library = await connector.getProvider() as Eip1193Provider

    return new StakeWiseSDK({
      network: Network.Mainnet,
      provider: new BrowserProvider(library, {
        chainId: Network.Mainnet,
        name: 'mainnet',
      }),
    })
  }, [])

  return createSDK
}

SDK Constructor Options​

NameTypeRequiredDescription
networkNetwork✅ YesChain ID to connect the SDK instance to.
providerBrowserProvider or JsonRpcProviderNoCustom ethers provider instance. Required to send transactions.
endpoints.web3string or Array<string> or Array<{ url: string, headers: Headers }>NoCustom RPC endpoints for blockchain access. Required if provider is not provided. Multiple URLs are used as fallbacks.
endpoints.subgraphstringNoOptional custom URL for the StakeWise subgraph.
endpoints.apistringNoOptional custom URL for the StakeWise backend API.

✅ Tip: For production environments, we recommend passing your own RPC endpoints instead of public ones to ensure reliability and rate-limit control.

Last updated on