# 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>" %}