@wepin/wagmi-connector v0.1.8

@wepin/wagmi-connector

Wepin Wagmi Connector for React.

⏩ Get App ID and Key

Contact to wepin.contact@iotrust.kr

⏩ 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/wagmi-connector@0.0.2-alpha.

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

• WepinProvider Docs

Connector Options

• appId \
• appKey \
• defaultChainId \ 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 \ optional
  • The attributes type extends @wepin/types as IAttributes
  • type:
    • The type of display of widget as wepin is initiated (defalut: 'hide)
    • 'hide' | 'show'
  • 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:
    • An array of login providers to configure the widget. (If not provided, all available login providers will be displayed on the widget.)
    • The loginProviders parameter accepts values defined in the LoginProviders of @wepin/types , starting from version v0.0.11.

⚠️ Caution

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

⏩ 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 { useAccount, useConnect, useDisconnect } from 'wagmi'
import { WepinConnector } from '@wepin/wagmi-connector'
import { IWepinUser } from '@wepin/types'

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 = 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()],
)