Wagmi Connector

위핀에서는 wagmi를 이용한 지갑 연결을 지원하고 있습니다. @wepin/wagmi-connector로 wagmi interface를 통한 위핀 지갑 연동을 손쉽게 할 수 있습니다. 이에 대한 자세한 내용은 아래 wagmi 공식 사이트에서 확인 가능합니다.

지원 네트워크

목록에 필요한 블록체인이 없나요? 위핀 팀에 요청하여 별도의 비용 없이 블록체인을 추가할 수 있습니다.

설치(Install)

npm install wagmi viem @wepin/wagmi-connector

yarn add wagmi viem @wepin/wagmi-connector

@wepin/wagmi-connector 는 wagmi viem 과 함께 설치해서 사용합니다.

@wepin/wagmi-connector는 @wepin/sdk-js 와 함께 사용하지 않습니다.

시작하기

패키지 import

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

연결 옵션 정의

WepinConnectorOptions는 wagmi와 위핀 지갑의 연동을 위해 필요한 속성 값입니다.

WepinConnectorOptions <object>

appId: <string> 앱 등록 시 할당 받은 ID
appKey: <string> 앱 등록 시 할당 받은 키 값
defaultChainId:<Number> optional
- 지갑을 연결하기 위한 기본 Chain ID.
- 값을 지정하지 않으면 앱에 등록된 첫 번째 네트워크로 자동 연결됩니다.
attributes: <IWepinSDKAttributes> optional @wepin/sdk-js 에 선언된 위핀 연결 속성 값
- type: <string> 위젯이 초기화될때의 Display 타입 설정, 현재 지원하는 타입은 hide 입니다.
- defaultLanguage: <string> 위젯 기본 언어 설정, 기본 값은 ko입니다. 현재 지원하는 언어는 en, ko 2가지 입니다.
- defaultCurrency: <string> 위젯 기본 통화 설정, 기본 값은 KRW입니다. 현재 지원하는 통화는 USD, KRW 2가지 입니다.
- loginProviders: <string[]> optional
  로그인 프로바이더 리스트 입니다. 현재 지원하는 프로바이더는 google, apple , naver, discord 이렇게 4가지 입니다. 필요한 로그인 프로바이더만 정의해서 사용하세요.
  - 이 값을 지정하지 않으면 제공하는 모든 프로바이더를 이용할 수 있습니다.
  - 빈 배열이 제공된 경우, 이메일 로그인 기능만 사용 가능합니다. (@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
  }
}

wagmi config에 WepinConnector 추가

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

`WagmiConfig`로 app 래핑

import { WagmiConfig } from 'wagmi'

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

확인하기

이후 wagmi와의 자세한 연동 방법은 아래 wagmi 가이드에서 확인하세요.

예제

wepin-wagmi-connector를 사용한 예제는 아래 깃허브에서 확인 가능합니다.

PreviousSolana Provider NextAndroid: Java & Kotlin SDK

Last updated 14 days ago

Chain ID

Network Name

Network Variable

시작하기

패키지 import

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

연결 옵션 정의

WepinConnectorOptions는 wagmi와 위핀 지갑의 연동을 위해 필요한 속성 값입니다.

WepinConnectorOptions <object>

appId: <string> 앱 등록 시 할당 받은 ID

appKey: <string> 앱 등록 시 할당 받은 키 값

defaultChainId:<Number> optional

지갑을 연결하기 위한 기본 Chain ID.
값을 지정하지 않으면 앱에 등록된 첫 번째 네트워크로 자동 연결됩니다.

attributes: <IWepinSDKAttributes> optional @wepin/sdk-js 에 선언된 위핀 연결 속성 값

type: <string> 위젯이 초기화될때의 Display 타입 설정, 현재 지원하는 타입은 hide 입니다.
defaultLanguage: <string> 위젯 기본 언어 설정, 기본 값은 ko입니다. 현재 지원하는 언어는 en, ko 2가지 입니다.
defaultCurrency: <string> 위젯 기본 통화 설정, 기본 값은 KRW입니다. 현재 지원하는 통화는 USD, KRW 2가지 입니다.
loginProviders: <string[]> optional
로그인 프로바이더 리스트 입니다. 현재 지원하는 프로바이더는 google, apple , naver, discord 이렇게 4가지 입니다. 필요한 로그인 프로바이더만 정의해서 사용하세요.
- 이 값을 지정하지 않으면 제공하는 모든 프로바이더를 이용할 수 있습니다.
- 빈 배열이 제공된 경우, 이메일 로그인 기능만 사용 가능합니다. (@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
  }
}

wagmi config에 WepinConnector 추가

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

`WagmiConfig`로 app 래핑

import { WagmiConfig } from 'wagmi'

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