@wepin/wagmi-connector

Wepin Wagmi Connector for React.

⏩ Get App ID and Key

Contact to [email protected]

⏩ Information

Support Version

• Note for Users Still on

If you are currently using wagmi version 0.12.x and want to continue doing so, you can find the corresponding version of the connector library at @wepin/[email protected].

Please be aware that this version is specifically designed to work with wagmi 0.12.x.

Refer to the documentation for version 0.0.2-alpha for guidance on usage and compatibility.

Support Networks

Please refer to the following link for detailed information on the supported network list: wepin provider - supported network list

Connector Options

• appId <string>
• appKey <string>
• defaultChainId <number> optional
  • defaultChainId:
    • Defines the default network that the provider connects to during initialization
    • It defaults to the network of the User's first account.
• attributes <IWepinSDKAttributes> optional
  • The attributes type extends @wepin/sdk-js as IWepinSDKAttributes
  • type:
    • The type of display of widget as wepin is initiated (default: 'hide')
    • 'hide' | 'float'
  • defaultLanguage:
    • Specifies the language displayed on the widget (default: 'ko')
    • Currently, only 'ko' and 'en' are supported.
  • defaultCurrency:
    • Sets the currency displayed on the widget (default: 'KRW').
  • loginProviders:
    • If not provided, all available login providers will be displayed on the widget.
    • If an empty array is provided, only the email login function is available. (@wepin/sdk-js from version v0.0.3)

⚠️ Caution

Do not use this library with @wepin/sdk-js. The state management of @wepin/wagmi-connector may not be compatible with any changes in @wepin/sdk-js.

⏩ Install

@wepin/wagmi-connector

npm install wagmi viem @wepin/wagmi-connector

or

yarn add wagmi viem @wepin/wagmi-connector

⏩ Get Started

1. Import Connector

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

2. Setup Options

const connectorOptions: WepinConnectorOptions = {
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY',
}

3. Add to Connectors

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

import { configureChains, createConfig } from 'wagmi'
import { mainnet, polygon } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
import { WepinConnector, WepinConnectorOptions } from '@wepin/wagmi-connector'

const { chains, publicClient } = configureChains(
  [
    mainnet, // 1, ethereum
    polygon, // 137, evmpolygon
  ],
  [publicProvider()],
)

const connectorOptions: WepinConnectorOptions = {
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY',
}

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

// wagmi.ts

4. Wrap app with WagmiConfig

import { WagmiConfig } from 'wagmi'
import { config } from './wagmi'

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

⏩ You're good to go!

Every component inside the WagmiConfig is now set up to use the wagmi hooks with Wepin

import { BaseError } from 'viem'
import { useAccount, useConnect, useDisconnect } from 'wagmi'

export const Connect = () => {
  const { connector, isConnected } = useAccount()
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect()
  const { disconnect } = useDisconnect()

  return (
    <div>
      <h2>useConnect</h2>
      <div>
        {isConnected && (
          <button onClick={() => disconnect()}>
            Disconnect from {connector?.name}
          </button>
        )}

        {connectors
          .filter((x) => x.ready && x.id !== connector?.id)
          .map((x) => (
            <button key={x.id} onClick={() => connect({ connector: x })}>
              {x.name}
              {isLoading && x.id === pendingConnector?.id && ' (connecting)'}
            </button>
          ))}
      </div>

      {error && <div>{(error as BaseError).shortMessage}</div>}
    </div>
  )
}

// Connector.tsx

Want to learn more? Check out other hooks to learn how to use wagmi in real-world scenarios or continue on reading the documentation.

⏩ Additional Features

getLoginData (Support from version 0.1.3)

If you need to retrieve loginData, follow these steps:

Example

import { useState } from 'react'
import { BaseError } from 'viem'
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { type IWepinUser, WepinConnector } from '@wepin/wagmi-connector'

export function Connect() {
  const [wepinUser, setWepinUser] = useState<IWepinUser | null>(null)
  const { connector, isConnected } = useAccount()
  const {
    connect,
    connectAsync,
    connectors,
    error,
    isLoading,
    pendingConnector,
  } = useConnect()
  const { disconnect } = useDisconnect()

  const handleConnect = async (connector: any) => {
    // if you want to get login data
    if (connector instanceof WepinConnector) {
      await connectAsync({ connector })
      const wepinUser = await connector.getLoginData()
      if (wepinUser) {
        setWepinUser(wepinUser)
      }
      return
    }
    // for other connectors
    connect({ connector })
  }

  return (
    <div>
      <div>
        {isConnected && (
          <button onClick={() => disconnect()}>
            Disconnect from {connector?.name}
          </button>
        )}

        {connectors
          .filter((x) => x.ready && x.id !== connector?.id)
          .map((x) => (
            <button key={x.id} onClick={() => handleConnect(x)}>
              {x.name}
              {isLoading && x.id === pendingConnector?.id && ' (connecting)'}
            </button>
          ))}
      </div>

      {isConnected && wepinUser?.status === 'success' && (
        <div>
          <div>userId: {wepinUser.userInfo?.userId}</div>
          <div>email: {wepinUser.userInfo?.email}</div>
          <div>provider: {wepinUser.userInfo?.provider}</div>
        </div>
      )}
      {error && <div>{(error as BaseError).shortMessage}</div>}
    </div>
  )
}

// Connector.tsx

Use Polygon Amoy Network (Support from version 0.1.6)

Although the Polygon Mumbai network has been discontinued, it has not been updated in the wagmi v1

If you need to use Polygon Amoy Network, follow these steps:

Example

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

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [
    mainnet,
    Chains.polygonAmoy, // this
  ],
  [publicProvider()],
)