UI#

npm install @okxconnect/ui
npm install @okxconnect/sui-provider

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

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"
    },
    language: "en_US",
    uiPreferences: {
        theme: THEME.LIGHT
    },
});

okxUniversalConnectUI.connect(connectParams: ConnectParams);

var session = await okxUniversalConnectUI.openModal({
  namespaces: {
        sui: {
            chains: ["sui:mainnet"]
        }
    }
})


## Connect to wallet and sign

Connect to the wallet to get the wallet address and sign the data; the result will be called back in the event ‘connect_signResponse’;

**Request parameters**

- connectParams - ConnectParams
    - namespaces - [namespace: string]: ConnectNamespace ; information necessary to request a connection, the key for Sui is ‘sui’.
      If any of the requested chains are not supported by the wallet, the wallet will reject the connection;
        - chains: string[]; information about the chain ids, the name of the chain, the name of the wallet, and the name of the wallet.
    - optionalNamespaces - [namespace: string]: ConnectNamespace; optional information of the requested connection, the key of Sui is ‘sui’.
      If the corresponding chain information is not supported by the wallet, the connection can still be made;
        - chains: string[]; Chain id information, if the corresponding chain is not supported by the wallet, it can still be connected.
    - sessionConfig: object
        - redirect: string Jump parameter after successful connection, if it is a Mini App in Telegram, here you can set it to Telegram's deeplink: ‘tg://resolve’.
- signRequest - RequestParams[]; the method to request the connection and sign the request, at most one method can be supported at the same time;
    - method: string; the name of the requested method, Sui supports methods such as ‘sui_signMessage’ and ‘sui_signPersonalMessage’;
    - chainId: string; the ID of the chain where the method is executed, the chainId must be included in the namespaces above;
    - params: unknown[] | Record`<string, unknown>` | object | undefined; Parameters corresponding to the requested method;


**Return Value**

- Promise `<SessionTypes.Struct | undefined>`
    - topic: string; the session identifier;
    - namespaces: `Record<string, Namespace>`; namespace information for a successful connection;
        - chains: string[]; Chain information for the connection;
        - accounts: string[]; accounts information for the connection;
        - methods: string[]; Methods supported by the wallet in the current namespace;
        - defaultChain?: string; The default chain for the current session.
    - sessionConfig?: SessionConfig
        - dappInfo: object DApp information;
            - name: string
            - icon:string


**Example**

```typescript
// Add the signature result monitor first
okxUniversalConnectUI.on("connect_signResponse", (signResponse) => {
  console.log(signResponse);
});
let suiData = [
    76, 111, 103, 105, 110, 32, 119, 105, 116, 104, 32, 66, 108, 117, 101,
    109, 111, 118, 101,
];
let uint8Array = new Uint8Array(suiData);
var session = await okxUniversalConnectUI.openModalAndSign({
     namespaces: {
            sui: {
                chains: ["sui:mainnet"]
            }
    },
    sessionConfig: {
        redirect: "tg://resolve"
    }
},
    [
        {
        chainId: "sui:mainnet",
        method: "sui_signMessage",
        params: {
            message: uint8Array,
            }
        }
    ]
)

okxUniversalConnectUI.connected();

import { OKXSuiProvider } from "@okxconnect/sui-provider"
let suiProvider = new OKXSuiProvider(okxUniversalConnectUI)

suiProvider.getAccount();

let result = suiProvider.getAccount()

// Return structure
{
'address": “0x7995ca23961fe06d8cea7da58ca751567ce820d7cba77b4a373249034eecca4a”,
    'publicKey": “tUvCYrG22rHKR0c306MxgnhXOSf16Ot6H3GMO7btwDI=”,
}

suiProvider.signMessage(input: SuiSignMessageInput);

suiProvider.signPersonalMessage(input: SuiSignMessageInput);

const data = [76, 111, 103, 105, 110, 32, 119, 105, 116, 104, 32, 66, 108, 117, 101, 109, 111, 118, 101];
const uint8Array = new Uint8Array(data);
let input = {
    message: uint8Array
}
let signResult1 = await suiProvider.signMessage(input)
let signResult2 = await suiProvider.signPersonalMessage(input)

suiProvider.signTransaction(input);

// txBytes and txSerialize are the serialization of the transactionBlock.
// and transactionBlock can be passed in one way or the other, but not both.
interface SuiSignTransactionBlockInput {
    transactionBlock: TransactionBlock;
    chain: IdentifierString;
    txBytes: string?;
    txSerialize: string?
}

suiProvider.signAndExecuteTransaction(input);

// txBytes and txSerialize is Serialized from transactionBlock,
// if you pass transactionBlock, then no need to pass txBytes and txSerialize
interface SuiSignTransactionBlockInput {
    transactionBlock: TransactionBlock;
    chain: IdentifierString;
    txBytes: string?;
    txSerialize: string?;
}

// Define the amount to be transferred and the destination address
const amount = 109; // Amount to be transferred
const recipientAddress = '0x'; // destination address

/// Construct a transfer transaction
const tx = new Transaction();
const [coin] = tx.splitCoins(tx.gas, [amount]);
tx.transferObjects([coin], recipientAddress)
const input = {
    transactionBlock: tx,
    chain: 'sui:mainnet',
    options: {
        showEffects: true,
    }
}

let signResult1 = await suiProvider.signTransaction(input)
let signResult2 = await suiProvider.signAndExecuteTransaction(input)