WEPIN Developer Documentation
WepinBlogContact
한국어
한국어
  • 시작하기
    • 소개
  • 위핀
    • 특징
    • 아키텍처
      • 키 생성
      • 서명
      • 키 백업
    • 워크스페이스
      • 앱 등록 및 키 발급
      • 네트워크 및 자산 추가
      • 위젯 디자인
    • 지원 블록체인
    • 계정 추상화
  • 로그인
    • 개요
    • 소셜 로그인 인증 프로바이더
      • Email/Password
      • Google
      • Apple
      • Discord
      • Naver
      • Facebook
      • Line
      • Kakao
    • 사용자 인터페이스
    • 로그인 일원화
    • 리소스
  • 위젯 연동
    • 사전 준비
    • Web: JavaScript SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 프로바이더
        • Ethereum Provider
        • Kaia Provider
        • Solana Provider
        • Wagmi Connector
      • 월렛 어댑터
        • Solana Wallet Adapter
    • Android: Java & Kotlin SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
    • iOS: Swift SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
    • Flutter SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
    • React Native SDK
      • 로그인
        • 설치
        • 초기화
        • 메서드
    • Unity SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • Compose Multiplatform SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
  • API
    • 개요
    • 등록 절차
    • 로그인
    • 지갑 생성 및 관리
    • 토큰 및 NFT 조회
    • 트랜잭션
  • Deprecated
    • Web: JavaScript SDK
      • SDK
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 프로바이더
        • Ethereum Provider
      • Wagmi Connector
    • Android: Java & Kotlin SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • iOS: Swift SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • Flutter SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • React Native SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
      • 프로바이더
        • EVM 호환
  • 기타
    • 로고 & 브랜드 가이드라인
Powered by GitBook
On this page
  • 연결 옵션 정의
  • wagmi config에 WepinConnector 추가
  • `WagmiConfig`로 app 래핑
  • 확인하기
  • 예제

Was this helpful?

  1. Deprecated
  2. Web: JavaScript SDK

Wagmi Connector

PreviousEthereum ProviderNextAndroid: Java & Kotlin SDK

Last updated 9 months ago

Was this helpful?

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

연결 옵션 정의

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

WepinConnectorOptions : Object

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

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

  • defaultChainId: Number

    • 지갑을 연결하기 위한 기본 Chain ID.

    • 값을 지정하지 않으면 앱에 등록된 첫 번째 네트워크로 자동 연결됩니다.

    • type: String show 값을 넣으면 위젯 initialize 과정에서 위젯 화면을 볼 수 있습니다.

    • defaultLanguage: String 위젯 기본 언어 설정, 기본 값은 ko입니다. 현재 지원하는 언어는 en, ko 2가지 입니다.

    • defaultCurrency: String 위젯 기본 통화 설정, 기본 값은 KRW입니다. 현재 지원하는 통화는 USD, KRW 2가지 입니다.

const connectorOptions: WepinConnectorOptions = {
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY',
  defaultChainId: 1, // optional
  attributes: {  // optional
    type: 'show',
    defaultLanguage: 'ko',
    defaultCurrency: 'krw'
  }
}

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를 사용한 예제는 아래 깃허브에서 확인 가능합니다.

attributes: <IAttributes> (optional) 에 선언된 위핀 연결 속성 값

@wepin/types
https://github.com/WepinWallet/wepin-wagmi-connector/tree/main/example
Logowagmi: React Hooks for Ethereumwagmi.sh
LogoGetting Startedwagmi.sh