# UI

## 安装及初始化

请确保更新OKX App到 6.94.0版本或以后版本，即可开始接入：

将 OKX Connect 集成到您的 DApp 中，可以使用 npm:

```
npm install @okxconnect/ui
npm install @okxconnect/universal-provider
```

连接钱包之前，需要先创建一个可以提供UI界面的对象，用于后续连接钱包、发送交易等操作。

```
OKXUniversalConnectUI.init(dappMetaData, actionsConfiguration, uiPreferences, language)
```

**请求参数**

- dappMetaData - object
    - name - string: 应用名称，不会作为唯一表示
    - icon - string: 应用图标的 URL。必须是 PNG、ICO 等格式，不支持 SVG 图标。最好传递指向 180x180px PNG 图标的 url。
- actionsConfiguration - object
    - modals - ('before' | 'success' | 'error')[] | 'all'  交易过程中的提醒界面展示模式，默认为'before'
    - returnStrategy -string 'none' | `${string}://${string}`; 针对app 钱包，指定当用户签署/拒绝请求时深层链接的返回策略，如果是在telegram中，可以配置tg://resolve
    - tmaReturnUrl -string 'back' | 'none' | `${string}://${string}`; Telegram Mini Wallet 钱包中，用户签署/拒绝请求时深层链接的返回策略，一般配置back,表示签名后关闭钱包，会自动展示出dapp；none 表示签名后不做处理；默认为back；
- uiPreferences -object
    - theme -  Theme 可以是：THEME.DARK, THEME.LIGHT, "SYSTEM"
- language - "en_US" | "ru_RU" | "zh_CN" | "ar_AE" | "cs_CZ" | "de_DE" | "es_ES" | "es_LAT" | "fr_FR" | "id_ID" | "it_IT" | "nl_NL" | "pl_PL" | "pt_BR" | "pt_PT" | "ro_RO" | "tr_TR" | "uk_UA" | "vi_VN";
  , 默认为en_US

**返回值**

- OKXUniversalConnectUI

**示例**

```typescript
import { OKXUniversalConnectUI } from "@okxconnect/ui";

const okxUniversalConnectUI = await OKXUniversalConnectUI.init({
    dappMetaData: {
        icon: "https://static.okx.com/cdn/assets/imgs/247/58E63FEA47A2B7D7.png",
        name: "OKX Connect Demo"
    },
    actionsConfiguration: {
        returnStrategy: 'tg://resolve',
        modals:"all",
        tmaReturnUrl:'back'
    },
    language: "en_US",
    uiPreferences: {
        theme: THEME.LIGHT
    },
});
```

## 连接钱包

连接钱包去获取钱包地址，作为标识符和用于签名交易的必要参数;

```
okxUniversalConnectUI.connect(connectParams: ConnectParams);
```

**请求参数**

- connectParams - ConnectParams
    - namespaces - [namespace: string]: ConnectNamespace ; 请求连接的可选信息， EVM系的key为"eip155"，COSMOS系的key为"cosmos"，如果请求的链中，有任何一个链钱包不支持的话，钱包会拒绝连接；
        - chains: string[]; 链id信息,
        - defaultChain?: string; 默认链
    - optionalNamespaces - [namespace: string]: ConnectNamespace; 请求连接的可选信息， EVM系的key为"eip155"，COSMOS系的key为"cosmos"，如果对应的链信息钱包不支持，依然可以连接；
        - chains: string[]; 链id信息,
            - defaultChain?: string; 默认链
    - sessionConfig: object
        - redirect: string 连接成功后的跳转参数，如果是Telegram中的Mini App，这里可以设置为Telegram的deeplink: "tg://resolve"

**返回值**

- Promise`<SessionTypes.Struct | undefined>`
    - topic: string; 会话标识；
    - namespaces: `Record<string, Namespace>`; 成功连接的namespace 信息；
        - chains: string[]; 连接的链信息；
        - accounts: string[]; 连接的账户信息；
        - methods: string[]; 当前namespace下，钱包支持的方法；
        - defaultChain?: string; 当前会话的默认链
    - sessionConfig?: SessionConfig
        - dappInfo: object DApp 信息；
            - name:string
            - icon:string
        - redirect?:string, 连接成功后的跳转参数；

**示例**

```typescript
var session = await okxUniversalConnectUI.connect({
    namespaces: {
        cosmos: {
            chains: [
                "cosmos:cosmoshub-4",
                  // "cosmos:osmosis-1"
            ],
        }
    },
    sessionConfig: {
        redirect: "tg://resolve"
    }
})
```

## 连接钱包并签名

连接钱包获取钱包地址，并对数据进行签名；签名结果会在"connect_signResponse"的event中回调；

```
await okxUniversalConnectUI.openModalAndSign(connectParams: ConnectParams,signRequest: RequestParams[]);
```

**请求参数**

- connectParams - ConnectParams
    - namespaces - [namespace: string]: ConnectNamespace ; 请求连接的可选信息，COSMOS系的key为"cosmos"，如果请求的链中，有任何一个链钱包不支持的话，钱包会拒绝连接；
        - chains: string[]; 链id信息,
        - defaultChain?: string; 默认链
    - optionalNamespaces - [namespace: string]: ConnectNamespace; 请求连接的可选信息，COSMOS系的key为"cosmos"，如果对应的链信息钱包不支持，依然可以连接；
        - chains: string[]; 链id信息,
            - defaultChain?: string; 默认链
    - sessionConfig: object
        - redirect: string 连接成功后的跳转参数，如果是Telegram中的Mini App，这里可以设置为Telegram的deeplink: "tg://resolve"
- signRequest - RequestParams[]; 请求连接并签名的方法, 同时最多只能支持一个方法；
    - method: string;  请求的方法名称, COSMOS系支持的方法有: "cosmos_signArbitrary"；
    - chainId: string; 执行方法所在的链的ID, 该chainId必须包含在上面的namespaces中；
    - params: unknown[] | Record`<string, unknown>` | object | undefined; 请求的方法对应的参数；
**返回值**

- Promise`<SessionTypes.Struct | undefined>`
    - topic: string; 会话标识；
    - namespaces: `Record<string, Namespace>`; 成功连接的namespace 信息；
        - chains: string[]; 连接的链信息；
        - accounts: string[]; 连接的账户信息；
        - methods: string[]; 当前namespace下，钱包支持的方法；
        - defaultChain?: string; 当前会话的默认链
    - sessionConfig?: SessionConfig
        - dappInfo: object DApp 信息；
            - name:string
            - icon:string
**示例**

```typescript
// 先添加签名结果监听
okxUniversalConnectUI.on("connect_signResponse", (signResponse) => {
  console.log(signResponse);
});
var session = await okxUniversalConnectUI.openModalAndSign({
        namespaces: {
            cosmos: {
                chains: [
                    "cosmos:cosmoshub-4",
                    // "cosmos:osmosis-1"
                ],
            }
        },
        sessionConfig: {
            redirect: "tg://resolve"
        }
    },
    [
        {
            chainId: "cosmos:cosmoshub-4",
            method: "cosmos_signArbitrary",
            params: {
                message: "Hello Cosmos"
            }
        }
])
```

## 判断钱包是否已连接

获取当前是否有连接钱包;

**返回值**
- boolean

**示例**
```typescript
okxUniversalConnectUI.connected();
```

## 准备交易

首先创建一个OKXCosmosProvider对象，构造函数传入okxUniversalConnectUI
```typescript
import { OKXCosmosProvider } from "@okxconnect/universal-provider";
let okxCosmosProvider = new OKXCosmosProvider(okxUniversalConnectUI)
```

## 获取账户信息

```
okxCosmosProvider.getAccount(chainId)
```

***请求参数***
- chainId: 请求的链，如cosmos:cosmoshub-4, cosmos:osmosis-1

***返回值***
- Object
    - algo: "secp256k1",
    - address: string 钱包地址,
    - bech32Address: string 钱包地址,
    - pubKey: Uint8Array 公钥,

***示例***
```typescript
let result = okxCosmosProvider.getAccount("cosmos:cosmoshub-4")
//返回结构
{
    "algo": "secp256k1",
    "address": "cosmos1u6lts9ng4etxj0zdaxsada6zgl8dudpg3ygvjw",
    "bech32Address": "cosmos1u6lts9ng4etxj0zdaxsada6zgl8dudpg3ygvjw",
    "pubKey": Unit8Aray,
}
```


## 签署消息

```
okxCosmosProvider.signArbitrary(chain, signerAddress, message)
```


***请求参数***

- chain - string, 请求执行方法的链
- signerAddress - string 签名钱包地址
- message - string 需要签名的消息。

***返回值***

- Promise - object
    - pub_key : object
        - type:string 公钥类型
        - value:string 公钥
    - signature: string 签名结果


***示例***
```ts
let chain = "cosmos:cosmoshub-4"
let signStr = "data need to sign ..."

let result = okxCosmosProvider.signArbitrary(chain, signStr)
//返回结构: {"pub_key":{"type":"tendermint/PubKeySecp256k1","value":"AkRuGelKwOg+qJbScSUHV36zn73S1q6fD8C5dZ8furqQ"},"signature":"YSyndEFlHYTWpSXsn28oolZpKim/BnmCVD0hZfvPQHQV3Bc0B0EU77CKE6LpV+PUJn19d1skAQy/bXyzppnuxw=="}
```

## 签署交易 signAmino

```
okxCosmosProvider.signAmino(chainId: string, signerAddress: string, signDoc: StdSignDoc, signOptions?: object)
```

***请求参数***

- chainId - string, 请求签名执行的链，必传参数
- signerAddress - string,钱包地址
- signDoc - object，交易信息 按照固定格式签名，类似 cosmjs 的 OfflineSigner 的 signAmino 方法 参数就是对象，signDoc 就是一个固定格式
  ***返回值***

- Promise - Object
    - signed - object,交易信息
    - signature -object,签名结果

***示例***
```ts
let signDoc = {
    "chain_id": "osmosis-1",
    "account_number": "630104",
    "sequence": "480",
    "fee": {"gas": "683300", "amount": [{"denom": "uosmo", "amount": "2818"}]},
    "msgs": [{
        "type": "osmosis/poolmanager/swap-exact-amount-in",
        "value": {
            "sender": "osmo1u6lts9ng4etxj0zdaxsada6zgl8dudpgelmuyu",
            "routes": [{
                "pool_id": "1096",
                "token_out_denom": "ibc/987C17B11ABC2B20019178ACE62929FE9840202CE79498E29FE8E5CB02B7C0A4"
            }, {
                "pool_id": "611",
                "token_out_denom": "ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2"
            }],
            "token_in": {"denom": "uosmo", "amount": "100"},
            "token_out_min_amount": "8"
        }
    }],
    "memo": "FE",
    "timeout_height": "23603788",
    "signOptions": {
        "useOneClickTrading": false,
        "preferNoSetFee": true,
        "fee": {"gas": "683300", "amount": [{"denom": "uosmo", "amount": "2818"}]}
    }
}
let res = await provider.signAmino("cosmos:osmosis-1", provider.getAccount("cosmos:osmosis-1").address, signDoc)


/**
    返回结构:
    {
    "signed": {
    "chain_id": "osmosis-1",
    "account_number": "630104",
    "sequence": "480",
    "fee": {
    "amount": [
    {
    "amount": "12500",
    "denom": "uosmo"
    }
    ],
    "gas": "500000"
    },
    "msgs": [
    {
    "type": "osmosis/poolmanager/swap-exact-amount-in",
    "value": {
    "sender": "osmo1u6lts9ng4etxj0zdaxsada6zgl8dudpgelmuyu",
    "routes": [
    {
    "pool_id": "1096",
    "token_out_denom": "ibc/987C17B11ABC2B20019178ACE62929FE9840202CE79498E29FE8E5CB02B7C0A4"
    },
    {
    "pool_id": "611",
    "token_out_denom": "ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2"
    }
    ],
    "token_in": {
    "denom": "uosmo",
    "amount": "100"
    },
    "token_out_min_amount": "8"
    }
    }
    ],
    "memo": "FE",
    "timeout_height": "23603788",
    "signOptions": {
    "useOneClickTrading": false,
    "preferNoSetFee": true,
    "fee": {
    "gas": "683300",
    "amount": [
    {
    "denom": "uosmo",
    "amount": "2818"
    }
    ]
    }
    }
    },
    "signature": {
    "pub_key": {
    "type": "tendermint/PubKeySecp256k1",
    "value": "AkRuGelKwOg+qJbScSUHV36zn73S1q6fD8C5dZ8furqQ"
    },
    "signature": "2Brt/w+1U3C+tIbsI//pv9zTYca9WlBd1eKm/Gde5MFaRagmxtsn6h2beP7+4R4MDav7r1G+0Nxd5arB0qVfUw=="
    }
    }
 */
```

## 签署交易 signDirect

```
okxCosmosProvider.signDirect(chainId, signerAddress, signDoc, signOptions?)
```

***请求参数***

- chainId - string, 请求签名执行的链，必传参数，
- signerAddress - string, 钱包地址
- signDoc - object 交易数据
    - bodyBytes ,Uint8Array
    - authInfoBytes, Uint8Array
    - chainId, string
    - accountNumber, string


***返回值***

- Promise - Object
    - signed - object,交易信息
    - signature -object,签名结果

***示例***
```ts
 let signDoc = {
    "bodyBytes": Uint8Array,
    "authInfoBytes": Uint8Array,
    "chainId": "osmosis-1",
    "accountNumber": "630104",
}
let res = await provider.signDirect("cosmos:osmosis-1", provider.getAccount("cosmos:osmosis-1").address, signDoc)


/**
    {
    "signed": {
    "bodyBytes": Uint8Array,
    "authInfoBytes":Uint8Array ,
    "chainId": "osmosis-1",
    "accountNumber": "630104"
    },
    "signature": {
    "pub_key": {
    "type": "tendermint/PubKeySecp256k1",
    "value": "AkRuGelKwOg+qJbScSUHV36zn73S1q6fD8C5dZ8furqQ"
    },
    "signature": "YpX2kGmbZYVxUqK8y9OCweJNgZkS4WaS79nBDfOJaTgowPfY0gSbXSQeRLlif2SIkBqcwTNSItBqb5M7a6K30g=="
    }
    }
 */
```

## 断开钱包连接

断开已连接钱包,并删除当前会话,如果要切换连接钱包,请先断开当前钱包。

```typescript
okxUniversalConnectUI.disconnect();
```
## Event事件

[详情同EVM兼容链](https://www.okx.com/zh-hans/web3/build/docs/sdks/app-connect-evm-ui#event%E4%BA%8B%E4%BB%B6)

## 错误码

[详情同EVM兼容链](https://www.okx.com/zh-hans/web3/build/docs/sdks/app-connect-evm-sdk#%E9%94%99%E8%AF%AF%E7%A0%81)