2.0.0 • Published 8 months ago

@wepin/wagmi-connector v2.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

@wepin/wagmi-connector

Wepin Wagmi Connector for React.

⏩ Get App ID and Key

Contact to wepin.contact@iotrust.kr

⏩ Information

Support Version

wagmi version

  • Note for Users Still on wagmi 1.x.x

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

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 wagmi 0.12.x

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

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

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/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
2.0.0

8 months ago

0.2.0

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.0.3-alpha

2 years ago

0.0.2-alpha

2 years ago

0.0.1-alpha

2 years ago