# Wagmi Connector

Wepin supports wallet connection using Wagmi. You can easily integrate the Wepin wallet through the Wagmi interface using <mark style="color:blue;">`@wepin/wagmi-connector`</mark>. For more details, please refer to the official Wagmi website below.

{% embed url="<https://wagmi.sh/>" %}

## Supported Networks

{% hint style="info" %}
Is the blockchain you need not listed? Please [contact the Wepin](https://wepinwallet.typeform.com/WEPIN-Wallet-EN) team for blockchain support.
{% endhint %}

<table><thead><tr><th width="172.33333333333331">Chain ID</th><th>Network Name</th><th>Network Variable</th></tr></thead><tbody><tr><td>1</td><td>Ethereum Mainnet</td><td>ethereum</td></tr><tr><td>5</td><td>Ethereum Goerli Testnet</td><td>evmeth-goerli</td></tr><tr><td>8217</td><td>Klaytn Mainnet</td><td>klaytn</td></tr><tr><td>1001</td><td>Kaia Kairos Testnet</td><td>klaytn-testnet</td></tr><tr><td>19</td><td>Songbird Canary Network</td><td>evmsongbird</td></tr><tr><td>137</td><td>Polygon Mainnet</td><td>evmpolygon</td></tr><tr><td>2731</td><td>TimeNetwork Testnet</td><td>evmtime-elizabeth</td></tr><tr><td>11155111</td><td>Ethereum Sepolia Testnet</td><td>evmeth-sepolia</td></tr><tr><td>80002</td><td>Polygon Amoy Testnet</td><td>evmpolygon-amoy</td></tr></tbody></table>

## Installation

{% tabs %}
{% tab title="npm" %}

```bash
npm install wagmi viem @wepin/wagmi-connector
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add wagmi viem @wepin/wagmi-connector
```

{% endtab %}
{% endtabs %}

<mark style="color:blue;">`@wepin/wagmi-connector`</mark> should be installed and used together with <mark style="color:blue;">`wagmi`</mark> <mark style="color:blue;">`viem`</mark>.

{% hint style="warning" %}
`@wepin/wagmi-connector` is not used with `@wepin/sdk-js`.
{% endhint %}

## Getting Started

### Import Packages

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

### Define Connection Options

<mark style="color:blue;">`WepinConnectorOptions`</mark> are the property values required for the integration of wagmi and Wepin wallet.

#### WepinConnectorOptions \<objec&#x74;*>*

* `appId`: \<strin&#x67;*>*\
  The ID assigned upon app registration
* `appKey`: \<strin&#x67;*>*\
  The key value assigned upon app registration
* `defaultChainId`**:<**&#x4E;umbe&#x72;*>* **optional**
  * Default Chain ID for wallet connection.&#x20;
  * If not specified, it will automatically connect to the first network registered in the app.
* **attributes**: *<*&#x49;WepinSDKAttributes> **optional**[<br>](https://github.com/WepinWallet/wepin-web-sdk-v1/tree/main/packages/sdk)Wepin connection attribute values declared in [@wepin/sdk-js](https://github.com/WepinWallet/wepin-web-sdk-v1/tree/main/packages/sdk)
  * type: \<strin&#x67;*>*\
    Display type setting when the widget is initialized. Currently, only `hide` is supported.
  * defaultLanguage: \<strin&#x67;*>*\
    Default language setting for the widget. The default value is `ko`. Currently, supported languages are `en` and `ko`.
  * defaultCurrenc&#x79;**:** \<strin&#x67;*>*\
    Default currency setting for the widget. The default value is `KRW`. Currently, supported currencies are `USD` and `KRW`.
  * loginProvider&#x73;**:** \<string\[]*>* **optional**  \
    List of login providers. Currently supported providers are `google`, `apple`, `naver`, and `discord`. Define only the necessary login providers.
    * If not specified, all provided providers can be used.
    * If an empty array is provided, only email login functionality is available (supported from <mark style="color:blue;">@wepin/sdk-js</mark> v0.0.3).

```javascript
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
  }
}
```

### Add WepinConnector to wagmi config

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

### Wrap App with WagmiConfig

```javascript
import { WagmiConfig } from 'wagmi'

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

## Verification&#x20;

For more detailed integration methods with `wagmi`, please refer to the wagmi guide below.

{% embed url="<https://wagmi.sh/react/getting-started>" %}

### Examples

Examples using <mark style="color:blue;">`wepin-wagmi-connector`</mark> can be found on GitHub below.

{% embed url="<https://github.com/WepinWallet/wepin-wagmi-connector/tree/main_v1/example>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wepin.io/en/widget-integration/web-javascript-sdk/provider/wagmi-connector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.