# Wagmi Connector

Wepin supports wallet connections using wagmi. You can easily integrate Wepin wallet via the wagmi interface with <mark style="color:blue;">`@wepin/wagmi-connector`</mark>. Detailed information about this can be found on the official wagmi website below.

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

* **`appId`**: <*String>*\
  Your App Id assigned during registration
* **`appKey`**: <*String>*\
  Your App Key assigned during registration
* **`defaultChainId`:** *Number*
  * The default Chain ID for connecting the wallet
  * If no value is specified, it automatically connects to the first network registered in the app.
* **`attributes`**: *<*&#x49;Attributes> *(optional)*\
  Wepin connection attribute values declared in [@wepin/types](https://github.com/WepinWallet/wepin-js-sdk-types)
  * **`type`**: *String*\
    If you input the <mark style="color:blue;">`show`</mark> value, you can see the widget screen during the widget initialization process.
  * **`defaultLanguage`**: *String*\
    The default language for the widget. The default value is <mark style="color:blue;">`ko`</mark>. The currently supported languages are <mark style="color:blue;">`en`</mark> and <mark style="color:blue;">`ko`</mark>.
  * **`defaultCurrency`:** *String*\
    The default currency for the widget. The default value is <mark style="color:blue;">`KRW`</mark>. The currently supported currencies are <mark style="color:blue;">`USD`</mark> and <mark style="color:blue;">`KRW`</mark>.

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

### Add <mark style="color:blue;">`WepinConnector`</mark> to wagmi config

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

### Wrap app with <mark style="color:blue;">`WagmiConfig`</mark>

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

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

## Check Further

Afterwards, please refer to the wagmi guide below for detailed integration methods with <mark style="color:blue;">`wagmi`</mark>.&#x20;

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

### Example

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

{% embed url="<https://github.com/WepinWallet/wepin-wagmi-connector/tree/main/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/deprecated/web-javascript-sdk/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.