Wagmi Connector

Wepin supports wallet connection using Wagmi. You can easily integrate the Wepin wallet through the Wagmi interface using @wepin/wagmi-connector. For more details, please refer to the official Wagmi website below.

Supported Networks

Is the blockchain you need not listed? Please contact the Wepin team for blockchain support.

Installation

npm install wagmi viem @wepin/wagmi-connector

@wepin/wagmi-connector should be installed and used together with wagmi viem.

@wepin/wagmi-connector is not used with @wepin/sdk-js.

Getting Started

Import Packages

import { WepinConnector } from '@wepin/wagmi-connector'
import type { WepinConnectorOptions } from '@wepin/wagmi-connector' 

Define Connection Options

WepinConnectorOptions are the property values required for the integration of wagmi and Wepin wallet.

WepinConnectorOptions <object>

  • appId: <string> The ID assigned upon app registration

  • appKey: <string> The key value assigned upon app registration

  • defaultChainId:<Number> optional

    • Default Chain ID for wallet connection.

    • If not specified, it will automatically connect to the first network registered in the app.

  • attributes: <IWepinSDKAttributes> optional Wepin connection attribute values declared in @wepin/sdk-js

    • type: <string> Display type setting when the widget is initialized. Currently, only hide is supported.

    • defaultLanguage: <string> Default language setting for the widget. The default value is ko. Currently, supported languages are en and ko.

    • defaultCurrency: <string> Default currency setting for the widget. The default value is KRW. Currently, supported currencies are USD and KRW.

    • loginProviders: <string[]> optional List of login providers. Currently supported providers are google, apple, naver, and discord. Define only the necessary login providers.

      • If not specified, all provided providers can be used.

      • If an empty array is provided, only email login functionality is available (supported from @wepin/sdk-js v0.0.3).

const connectorOptions: WepinConnectorOptions = {
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY',
  defaultChainId: 1, // optional
  attributes: {  // optional
    type: 'hide',
    defaultLanguage: 'ko',
    defaultCurrency: 'krw',
    loginProviders: ['google', 'apple'] //optional
  }
}

Add WepinConnector to wagmi config

const config = createConfig({
  connectors: [
    // ... Other connectors,
    new WepinConnector({
      chains,
      options: connectorOptions,
    }),
  ],
  publicClient,
})

Wrap App with WagmiConfig

import { WagmiConfig } from 'wagmi'

function App() {
  return (
    <WagmiConfig config={config}>
      <YourRoutes />
    </WagmiConfig>
  )
}

Verification

For more detailed integration methods with wagmi, please refer to the wagmi guide below.

Examples

Examples using wepin-wagmi-connector can be found on GitHub below.

Last updated