@roninnetwork/walletgo v0.5.10

Ronin Walletgo

Walletgo is the simplest way to integrate Ronin into your web application by connecting a user's wallet to your DApp.

Features

• 💡 Any Wallet — Connect any wallet (Ronin, Ronin Mobile, Metamask, Gnosis, ...) to your app.
• 🌱 Simple, seamless UI/UX — simple UX with attractive UI.
• 🎨 Theme — Predesigned theme or full customization.

Before you start

Before you install the SDK, make sure you have the following:

• Node.js version 16.17.0 or later.
• npm or yarn for package installation.
• A JavaScript project. To create a new project, you can use create-react-app or create-next-app. This guide uses a Next.js application.

Install

From you project directory, install the SDK using yarn or npm:

$ npm install @roninnetwork/walletgo

$ yarn add @roninnetwork/walletgo

API Key

Ronin Wallet uses WalletConnect's SDK for connecting wallets. Head over WalletConnect Cloud to obtain your projectID.

Basic usage

1. Wrap your App with WalletgoProvider.

// App.jsx
import { WalletgoProvider } from "@roninnetwork/walletgo"
import App, { AppContext, AppProps } from "next/app"

const App = (props: AppProps) => {
  const { Component, pageProps } = props

  return (
    <WalletgoProvider defaultChainId={2020}>
      <Component {...pageProps} />
    </WalletgoProvider>
  )
}

2. Create needed wallet connectors - Ronin, Ronin Mobile, Metamask, Gnosis.

// connectors.js
import { createDefaultWallets } from "@roninnetwork/walletgo"
const WC_PROJECT_ID = "YOUR_WALLETCONNECT_PROJECT_ID"

const connectors = createDefaultWallets({
  projectId: WC_PROJECT_ID,
  clientMeta: {
    name: "App Name",
    description: "App description",
    icons: ["https://cdn.skymavis.com/explorer-cdn/asset/favicon/apple-touch-icon.png"],
    url: "https://app.roninchain.com",
  },
})

3. Include Connect Wallet dialog in your App

// MyComponent.tsx
import { createDefaultWallets, WalletWidget } from "@roninnetwork/walletgo"

const WC_PROJECT_ID = "YOUR_WALLETCONNECT_PROJECT_ID"

const connectors = createDefaultWallets({
  projectId: WC_PROJECT_ID,
  clientMeta: {
    name: "App Name",
    description: "App description",
    icons: ["https://cdn.skymavis.com/explorer-cdn/asset/favicon/apple-touch-icon.png"],
    url: "https://app.roninchain.com",
  },
})

export const MyComponent = () => {
  const [showWidget, setShowWidget] = useState(false)

  return (
    <div>
      <WalletWidget
        isOpen={showWidget}
        handleClose={() => setShowWidget(false)}
        wallets={connectors}
      />
      <button onClick={() => setShowWidget(true)}>Open Widget</button>
    </div>
  )
}

4. Get wallet infomation in your App

// Address.tsx
import { useWalletgo } from "@roninnetwork/walletgo"

export const Address = () => {
  const { account, walletChainId, walletProvider, deactivate } = useWalletgo()

  return <div>{account}</div>
}

And that's it — just simple as that! Now, you have your app ready to connect to Ronin!

Example

Source: github.com/8ailurus/walletgo-demo-nextjs Live demo : walletgo-demo-nextjs.vercel.app

Customization

Theme

Walletgo exposes a few basic CSS variables to help quickly restyle the default UI.

UI

Comming soon!

Connectors

Comming soon!

Multi Context

Comming soon!

Props Table & Type

WalletgoProvider

interface IChainInfo {
  chainId: number
  blockExplorerUrl?: string
  chainName?: string
  iconUrl?: string
  nativeCurrency?: {
    name: string
    symbol: string
    decimals: number
  }
  rpcUrl?: string
}

const DEFAULT_CHAINS_CONFIG: IChainsConfig = {
  [SupportedChainIds.RoninMainet]: {
    chainId: SupportedChainIds.RoninMainet,
    blockExplorerUrl: "https://app.roninchain.com",
    chainName: "Ronin Mainnet",
    iconUrl: "https://cdn.skymavis.com/explorer-cdn/asset/favicon/apple-touch-icon.png",
    nativeCurrency: {
      name: "Ronin",
      symbol: "RON",
      decimals: 18,
    },
    rpcUrl: DEFAULT_RPC_CONFIG[SupportedChainIds.RoninMainet],
  },
  [SupportedChainIds.RoninTestnet]: {
    chainId: SupportedChainIds.RoninTestnet,
    blockExplorerUrl: "https://saigon-app.roninchain.com",
    chainName: "Saigon Testnet",
    iconUrl: "https://cdn.skymavis.com/explorer-cdn/asset/favicon/apple-touch-icon.png",
    nativeCurrency: {
      name: "tRonin",
      symbol: "tRON",
      decimals: 18,
    },
    rpcUrl: DEFAULT_RPC_CONFIG[SupportedChainIds.RoninTestnet],
  },
  [SupportedChainIds.Ethereum]: {
    chainId: SupportedChainIds.Ethereum,
    blockExplorerUrl: "https://etherscan.io",
    chainName: "Ethereum",
    nativeCurrency: {
      name: "Ethereum",
      symbol: "ETH",
      decimals: 18,
    },
  },
  [SupportedChainIds.Goerli]: {
    chainId: SupportedChainIds.Goerli,
    blockExplorerUrl: "https://goerli.etherscan.io/",
    chainName: "Goerli",
    nativeCurrency: {
      name: "GoerliETH",
      symbol: "GTH",
      decimals: 18,
    },
  },
}

WalletWidget

useWalletgo

Connector

interface IConnector<ProviderType = ExternalProvider> {
  readonly id: string
  readonly switchable: boolean
  readonly scannable: boolean

  readonly provider?: ProviderType
  readonly events: IConnectorEventEmitter

  readonly autoPriority: number
  shouldAutoConnect(): Promise<boolean>

  connect(chainId: number): Promise<IConnectResult<ProviderType>>
  disconnect(): Promise<boolean>

  switchChain(chain: IAddEthereumChainParameter): Promise<boolean>

  // NOTE: only use for UI Widget
  readonly name: ReactNode
  readonly logo: ReactNode
  readonly downloadUrls: { [key: string]: string }
  readonly hidden: boolean
}