WEPIN Developer Documentation
WepinBlogContact
English
English
  • Get Started
    • Introduction
  • Wepin
    • Features
    • Architecture
      • Key Generation
      • Signing
      • Key Backup
    • Workspace
      • App Registration and Key Issuance
      • Networks and Assets Addition
      • Widget Design
    • Supported blockchains
    • Account Abstraction
  • login
    • Overview
    • Social Login Auth Providers
      • Email/Password
      • Google
      • Apple
      • Discord
      • Naver
      • Facebook
      • Line
      • Kakao
    • User Interface
    • Simplified Login
    • Resource
  • Widget Integration
    • Prerequisites
    • Web: JavaScript SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
      • Widget
        • Installation
        • Initialization
        • Methods
        • Final Review
      • Provider
        • Ethereum Provider
        • Kaia Provider
        • Solana Provider
        • Wagmi Connector
      • Wallet Adapter
        • Solana Wallet Adapter
    • Android: Java & Kotlin SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
      • Widget Library
        • Installation
        • Initialization
        • Methods
    • iOS: Swift SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
      • Widget Library
        • installation
        • initialization
        • Methods
    • Flutter SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • Widget
        • Installation
        • Initialization
        • Methods
        • Final Review
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
    • React Native SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
    • Unity SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • Compose Multiplatform SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • Widget
        • Installation
        • Initialization
        • Methods
        • Final Review
  • API
    • Overview
    • Registration
    • Login
    • Wallet
    • Token and NFT
    • Transaction
  • Deprecated
    • Web: JavaScript SDK
      • SDK
        • Installation
        • Initialization
        • Methods
        • Final Review
      • Provider
        • EVM-Compatible Networks
      • Wagmi Connector
    • Android: Java & Kotlin SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • iOS: Swift SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • Flutter SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • React Native SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
      • Providers
        • Ethereum Providers
  • MISC
    • Logo & Brand
Powered by GitBook
On this page
  • Supported Networks
  • Installation
  • Getting Started
  • Import Packages
  • Define Connection Options
  • Add WepinConnector to wagmi config
  • Wrap App with WagmiConfig
  • Verification
  • Examples

Was this helpful?

  1. Widget Integration
  2. Web: JavaScript SDK
  3. Provider

Wagmi Connector

PreviousSolana ProviderNextWallet Adapter

Last updated 5 months ago

Was this helpful?

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

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 install wagmi viem @wepin/wagmi-connector
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.

    • 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.

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

attributes: <IWepinSDKAttributes> optionalWepin connection attribute values declared in

contact the Wepin
@wepin/sdk-js
wagmi: React Hooks for Ethereumwagmi.sh
Logo
Getting Startedwagmi.sh
Logo
wepin-wagmi-connector/example at main_v1 · WepinWallet/wepin-wagmi-connectorGitHub
Logo