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.

wagmi: React Hooks for Ethereumwagmi.sh

Supported Networks

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

Chain ID	Network Name	Network Variable
1	Ethereum Mainnet	ethereum
5	Ethereum Goerli Testnet	evmeth-goerli
8217	Klaytn Mainnet	klaytn
1001	Kaia Kairos Testnet	klaytn-testnet
19	Songbird Canary Network	evmsongbird
137	Polygon Mainnet	evmpolygon
2731	TimeNetwork Testnet	evmtime-elizabeth
11155111	Ethereum Sepolia Testnet	evmeth-sepolia
80002	Polygon Amoy Testnet	evmpolygon-amoy

Installation

npm

npm install wagmi viem @wepin/wagmi-connector

yarn

yarn add 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.

Getting Startedwagmi.sh

Examples

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

wepin-wagmi-connector/example at main_v1 · WepinWallet/wepin-wagmi-connectorGitHub