@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 1.x.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 1.x.x.

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

• 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')
    • Currently, only 'hide' is supported.
  • 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').
    • Currently, only 'KRW' and 'USD' are supported.
  • 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 @tanstack/react-query @wepin/wagmi-connector

or

yarn add wagmi viem @tanstack/react-query @wepin/wagmi-connector

⏩ Get Started

1. Import Connector

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

2. Setup Options

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

3. Add to Connectors

export const config = createConfig({
  chains: [mainnet, sepolia] // ...Other chains,
  connectors: [
    // ...Other Connectors,
    wepinWallet(connectorOptions),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    // ...Other transports
  }
})

import { http, createConfig } from 'wagmi'
import { mainnet, polygon } from 'wagmi/chains'
import { wepinWallet, type WepinConnectorOptions } from '@wepin/wagmi-connector'

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

export const config = createConfig({
  chains: [mainnet, polygon],
  connectors: [
    // ...Other connectors
    wepinWallet(connectorOptions),
  ],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
  },
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

// wagmi.ts

4. Wrap app with WagmiConfig

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './wagmi'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <YourRoutes />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

⏩ 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 type { WepinConnector, IWepinUser } from '@wepin/wagmi-connector'
import { useState, useEffect } from 'react'
import { useAccount, useDisconnect, useBalance } from 'wagmi'

export const Account = () => {
  const { status, address, chainId, connector } = useAccount()
  const { data } = useBalance({
    address,
  })
  const { disconnect } = useDisconnect()
  const [wepinUser, setWepinUser] = useState<IWepinUser | null>(null)

  useEffect(() => {
    ;(async () => {
      if (connector?.id === 'wepin') {
        try {
          const loginData = await (connector as WepinConnector).getLoginData()
          setWepinUser(loginData)
        } catch (error) {
          console.error('Failed to get Wepin login data:', error)
        }
      }
    })()
  }, [connector])

  return (
    <div>
      <h2>Account</h2>

      <div>
        status: {status}
        <br />
        address: {address}
        <br />
        chainId: {chainId}
        <br />
        balance: {data?.formatted ?? '0'}
        {wepinUser && (
          <>
            <br />
            {JSON.stringify(wepinUser)}
          </>
        )}
      </div>

      {status === 'connected' && (
        <>
          <button type="button" onClick={() => disconnect()}>
            Disconnect
          </button>
        </>
      )}
    </div>
  )
}

// Account.tsx