\n \n \n
\n );\n}\n```\n\nAfterwards, you can use React Hooks such as `useWallet()`, `useConnectedWallet()` and `useLCDClient()` anywhere in your app.\n\n# API\n\n\n {JSON.stringify(\n {\n status,\n network,\n wallets,\n },\n null,\n 2,\n )}\n \n \n\n
\n\n```jsx\nimport {\n WalletProvider,\n NetworkInfo,\n ReadonlyWalletSession,\n} from '@c2x/wallet-provider';\n\n// network information\nconst mainnet: NetworkInfo = {\n name: 'mainnet',\n chainID: 'dimension-1',\n lcd: 'https://lcd.xpla.net',\n};\n\nconst testnet: NetworkInfo = {\n name: 'testnet',\n chainID: 'cube-1',\n lcd: 'https://lcd.xpla.net',\n};\n\n// WalletConnect separates chainId by number.\n// Currently TerraStation Mobile uses 0 as Testnet, 1 as Mainnet.\nconst walletConnectChainIds: Record = {\n 0: testnet,\n 1: mainnet,\n};\n\n// ⚠️ If there is no special reason, use `getChainOptions()` instead of `walletConnectChainIds` above.\n\n// Optional\n// If you need to modify the modal, such as changing the design, you can put it in,\n// and if you don't put the value in, there is a default modal.\nasync function createReadonlyWalletSession(): Promise {\n const terraAddress = prompt('YOUR XPLA ADDRESS');\n return {\n network: mainnet,\n terraAddress,\n };\n}\n\n// Optional\n// WalletConnect Client option.\nconst connectorOpts: IWalletConnectOptions | undefined = undefined;\nconst pushServerOpts: IPushServerOptions | undefined = undefined;\n\n// Optional\n// Time to wait for the Chrome Extension window.isTerraExtensionAvailable.\n// If not entered, wait for default 1000 * 3 miliseconds.\n// If you reduce excessively, Session recovery of Chrome Extension may fail.\nconst waitingChromeExtensionInstallCheck: number | undefined = undefined;\n\nReactDOM.render(\n \n
<WalletProvider>
\n\n```jsx\nimport {\n WalletProvider,\n NetworkInfo,\n ReadonlyWalletSession,\n} from '@c2x/wallet-provider';\n\n// network information\nconst mainnet: NetworkInfo = {\n name: 'mainnet',\n chainID: 'dimension-1',\n lcd: 'https://lcd.xpla.net',\n};\n\nconst testnet: NetworkInfo = {\n name: 'testnet',\n chainID: 'cube-1',\n lcd: 'https://lcd.xpla.net',\n};\n\n// WalletConnect separates chainId by number.\n// Currently TerraStation Mobile uses 0 as Testnet, 1 as Mainnet.\nconst walletConnectChainIds: Record\n\n
\n\nThis is a React Hook that can receive all the information. (Other hooks are functions for the convenience of Wrapping\nthis `useWallet()`)\n\n\n\n[packages/src/@c2x/use-wallet/useWallet.ts](packages/src/@c2x/use-wallet/useWallet.ts)\n\n````ts\nexport interface Wallet {\n /**\n * current client status\n *\n * this will be one of WalletStatus.INITIALIZING | WalletStatus.WALLET_NOT_CONNECTED | WalletStatus.WALLET_CONNECTED\n *\n * INITIALIZING = checking that the session and the chrome extension installation. (show the loading to users)\n * WALLET_NOT_CONNECTED = there is no connected wallet (show the connect and install options to users)\n * WALLET_CONNECTED = there is aconnected wallet (show the wallet info and disconnect button to users)\n *\n * @see Wallet#refetchStates\n * @see WalletController#status\n */\n status: WalletStatus;\n /**\n * current selected network\n *\n * - if status is INITIALIZING or WALLET_NOT_CONNECTED = this will be the defaultNetwork\n * - if status is WALLET_CONNECTED = this depends on the connected environment\n *\n * @see WalletProviderProps#defaultNetwork\n * @see WalletController#network\n */\n network: NetworkInfo;\n /**\n * available connect types on the browser\n *\n * @see Wallet#connect\n * @see WalletController#availableConnectTypes\n */\n availableConnectTypes: ConnectType[];\n /**\n * available connections includes identifier, name, icon\n *\n * @example\n * ```\n * const { availableConnections, connect } = useWallet()\n *\n * return (\n * }\n *\n * @throws { UserDenied } user denied the tx\n * @throws { CreateTxFailed } did not create txhash (error dose not broadcasted)\n * @throws { TxFailed } created txhash (error broadcated)\n * @throws { Timeout } user does not act anything in specific time\n * @throws { TxUnspecifiedError } unknown error\n *\n * @see WalletController#post\n */\n post: (tx: CreateTxOptions, xplaAddress?: string) => Promise;\n /**\n * sign transaction\n *\n * @example\n * ```\n * const { sign } = useWallet()\n *\n * const callback = useCallback(async () => {\n * try {\n * const result: SignResult = await sign({...CreateTxOptions})\n *\n * // Broadcast SignResult\n * const tx = result.result\n *\n * const lcd = new LCDClient({\n * chainID: connectedWallet.network.chainID,\n * URL: connectedWallet.network.lcd,\n * })\n *\n * const txResult = await lcd.tx.broadcastSync(tx)\n *\n * // DO SOMETHING...\n * } catch (error) {\n * if (error instanceof UserDenied) {\n * // DO SOMETHING...\n * } else {\n * // DO SOMETHING...\n * }\n * }\n * }, [])\n * ```\n *\n * @param { CreateTxOptions } tx transaction data\n * @param xplaAddress - does not work at this time. for the future extension\n *\n * @return { Promise }\n *\n * @throws { UserDenied } user denied the tx\n * @throws { CreateTxFailed } did not create txhash (error dose not broadcasted)\n * @throws { TxFailed } created txhash (error broadcated)\n * @throws { Timeout } user does not act anything in specific time\n * @throws { TxUnspecifiedError } unknown error\n *\n * @see WalletController#sign\n */\n sign: (tx: CreateTxOptions, xplaAddress?: string) => Promise;\n /**\n * sign any bytes\n *\n * @example\n * ```\n * const { signBytes } = useWallet()\n *\n * const BYTES = Buffer.from('hello world')\n *\n * const callback = useCallback(async () => {\n * try {\n * const { result }: SignBytesResult = await signBytes(BYTES)\n *\n * console.log(result.recid)\n * console.log(result.signature)\n * console.log(result.public_key)\n *\n * const verified: boolean = verifyBytes(BYTES, result)\n * } catch (error) {\n * if (error instanceof UserDenied) {\n * // DO SOMETHING...\n * } else {\n * // DO SOMETHING...\n * }\n * }\n * }, [])\n * ```\n *\n * @param bytes\n */\n signBytes: (bytes: Buffer, xplaAddress?: string) => Promise;\n /**\n * check if tokens are added on the extension\n *\n * @param chainID\n * @param tokenAddrs cw20 token addresses\n *\n * @return token exists\n *\n * @see WalletController#hasCW20Tokens\n */\n hasCW20Tokens: (\n chainID: string,\n ...tokenAddrs: string[]\n ) => Promise<{\n [tokenAddr: string]: boolean;\n }>;\n /**\n * request add token addresses to browser extension\n *\n * @param chainID\n * @param tokenAddrs cw20 token addresses\n *\n * @return token exists\n *\n * @see WalletController#addCW20Tokens\n */\n addCW20Tokens: (\n chainID: string,\n ...tokenAddrs: string[]\n ) => Promise<{\n [tokenAddr: string]: boolean;\n }>;\n /**\n * check if network is added on the extension\n *\n * @param network\n *\n * @return network exists\n *\n * @see WalletController#hasNetwork\n */\n hasNetwork: (network: Omit) => Promise;\n /**\n * request add network to browser extension\n *\n * @param network\n *\n * @return network exists\n *\n * @see WalletController#addNetwork\n */\n addNetwork: (network: NetworkInfo) => Promise;\n /**\n * Some mobile wallet emulates the behavior of chrome extension.\n * It confirms that the current connection environment is such a wallet.\n * (If you are running connect() by checking availableConnectType, you do not need to use this API.)\n *\n * @see WalletController#isChromeExtensionCompatibleBrowser\n */\n isChromeExtensionCompatibleBrowser: () => boolean;\n}\n````\n\n\n\n
\n\nuseWallet()
\n\nThis is a React Hook that can receive all the information. (Other hooks are functions for the convenience of Wrapping\nthis `useWallet()`)\n\n\n\n[packages/src/@c2x/use-wallet/useWallet.ts](packages/src/@c2x/use-wallet/useWallet.ts)\n\n````ts\nexport interface Wallet {\n /**\n * current client status\n *\n * this will be one of WalletStatus.INITIALIZING | WalletStatus.WALLET_NOT_CONNECTED | WalletStatus.WALLET_CONNECTED\n *\n * INITIALIZING = checking that the session and the chrome extension installation. (show the loading to users)\n * WALLET_NOT_CONNECTED = there is no connected wallet (show the connect and install options to users)\n * WALLET_CONNECTED = there is aconnected wallet (show the wallet info and disconnect button to users)\n *\n * @see Wallet#refetchStates\n * @see WalletController#status\n */\n status: WalletStatus;\n /**\n * current selected network\n *\n * - if status is INITIALIZING or WALLET_NOT_CONNECTED = this will be the defaultNetwork\n * - if status is WALLET_CONNECTED = this depends on the connected environment\n *\n * @see WalletProviderProps#defaultNetwork\n * @see WalletController#network\n */\n network: NetworkInfo;\n /**\n * available connect types on the browser\n *\n * @see Wallet#connect\n * @see WalletController#availableConnectTypes\n */\n availableConnectTypes: ConnectType[];\n /**\n * available connections includes identifier, name, icon\n *\n * @example\n * ```\n * const { availableConnections, connect } = useWallet()\n *\n * return (\n * \n * {\n * availableConnections.map(({type, identifier, name, icon}) => (\n * connect(type, identifier)}>\n * 
{name}\n * \n * ))\n * }\n *
\n * )\n * ```\n */\n availableConnections: Connection[];\n /**\n * current connected connection\n */\n connection: Connection | undefined;\n /**\n * connect to wallet\n *\n * @example\n * ```\n * const { status, availableConnectTypes, connect } = useWallet()\n *\n * return status === WalletStatus.WALLET_NOT_CONNECTED &&\n * availableConnectTypes.includs(ConnectType.EXTENSION) &&\n * \n * ```\n *\n * @see Wallet#availableConnectTypes\n * @see WalletController#connect\n */\n connect: (type?: ConnectType, identifier?: string) => void;\n /**\n * manual connect to read only session\n *\n * @see Wallet#connectReadonly\n */\n connectReadonly: (xplaAddress: string, network: NetworkInfo) => void;\n /**\n * available install types on the browser\n *\n * in this time, this only contains [ConnectType.EXTENSION]\n *\n * @see Wallet#install\n * @see WalletController#availableInstallTypes\n */\n availableInstallTypes: ConnectType[];\n /**\n * available installations includes identifier, name, icon, url\n *\n * @example\n * ```\n * const { availableInstallations } = useWallet()\n *\n * return (\n * \n * {\n * availableInstallations.map(({type, identifier, name, icon, url}) => (\n * \n * {name}\n * \n * ))\n * }\n *
\n * )\n * ```\n *\n * @see Wallet#install\n * @see WalletController#availableInstallations\n */\n availableInstallations: Installation[];\n /**\n * @deprecated Please use availableInstallations\n *\n * install for the connect type\n *\n * @example\n * ```\n * const { status, availableInstallTypes } = useWallet()\n *\n * return status === WalletStatus.WALLET_NOT_CONNECTED &&\n * availableInstallTypes.includes(ConnectType.EXTENSION) &&\n * \n * ```\n *\n * @see Wallet#availableInstallTypes\n * @see WalletController#install\n */\n install: (type: ConnectType) => void;\n /**\n * connected wallets\n *\n * this will be like\n * `[{ connectType: ConnectType.WALLETCONNECT, xplaAddress: 'XXXXXXXXX' }]`\n *\n * in this time, you can get only one wallet. `wallets[0]`\n *\n * @see WalletController#wallets\n */\n wallets: WalletInfo[];\n /**\n * disconnect\n *\n * @example\n * ```\n * const { status, disconnect } = useWallet()\n *\n * return status === WalletStatus.WALLET_CONNECTED &&\n * \n * ```\n */\n disconnect: () => void;\n /**\n * reload the connected wallet states\n *\n * in this time, this only work on the ConnectType.EXTENSION\n *\n * @see WalletController#refetchStates\n */\n refetchStates: () => void;\n /**\n * @deprecated please use refetchStates(). this function will remove on next major update\n */\n recheckStatus: () => void;\n /**\n * support features of this connection\n *\n * @example\n * ```\n * const { supportFeatures } = useWallet()\n *\n * return (\n * \n * {\n * supportFeatures.has('post') &&\n * \n * }\n * {\n * supportFeatures.has('cw20-token') &&\n * \n * }\n *
\n * )\n * ```\n *\n * This type is same as `import type { XplaWebExtensionFeatures } from '@xpla/web-extension-interface'`\n */\n supportFeatures: Set<\n 'post' | 'sign' | 'sign-bytes' | 'cw20-token' | 'network'\n >;\n /**\n * post transaction\n *\n * @example\n * ```\n * const { post } = useWallet()\n *\n * const callback = useCallback(async () => {\n * try {\n * const result: TxResult = await post({...CreateTxOptions})\n * // DO SOMETHING...\n * } catch (error) {\n * if (error instanceof UserDenied) {\n * // DO SOMETHING...\n * } else {\n * // DO SOMETHING...\n * }\n * }\n * }, [])\n * ```\n *\n * @param { CreateTxOptions } tx transaction data\n * @param xplaAddress - does not work at this time. for the future extension\n *\n * @return { Promise\n\n
\n\n```jsx\nimport { useConnectedWallet } from '@c2x/wallet-provider'\n\nfunction Component() {\n const connectedWallet = useConnectedWallet()\n\n const postTx = useCallback(async () => {\n if (!connectedWallet) return\n\n console.log('walletAddress is', connectedWallet.walletAddress)\n console.log('network is', connectedWallet.network)\n console.log('connectType is', connectedWallet.connectType)\n\n const result = await connectedWallet.post({...})\n }, [])\n\n return (\n \n )\n}\n```\n\n
\n\nuseConnectedWallet()
\n\n```jsx\nimport { useConnectedWallet } from '@c2x/wallet-provider'\n\nfunction Component() {\n const connectedWallet = useConnectedWallet()\n\n const postTx = useCallback(async () => {\n if (!connectedWallet) return\n\n console.log('walletAddress is', connectedWallet.walletAddress)\n console.log('network is', connectedWallet.network)\n console.log('connectType is', connectedWallet.connectType)\n\n const result = await connectedWallet.post({...})\n }, [])\n\n return (\n \n )\n}\n```\n\n\n\n
\n\n```jsx\nimport { useLCDClient } from '@c2x/wallet-provider';\n\nfunction Component() {\n const lcd = useLCDClient();\n\n const [result, setResult] = useState('');\n\n useEffect(() => {\n lcd.treasury.taxRate().then((taxRate) => {\n setResult(taxRate.toString());\n });\n }, []);\n\n return
\n\n# Trouble-shooting guide\n\nwallet-provider contains the original source codes in sourcemaps.\n\nYou can check `src/@c2x/wallet-provider/` in the Chrome Devtools / Sources Tab, and you can also use breakpoints\nhere for debug.\n\n(It may not be visible depending on your development settings such as Webpack.)\n\n# For Chrome Extension compatible wallet developers\n\nuseLCDClient()
\n\n```jsx\nimport { useLCDClient } from '@c2x/wallet-provider';\n\nfunction Component() {\n const lcd = useLCDClient();\n\n const [result, setResult] = useState('');\n\n useEffect(() => {\n lcd.treasury.taxRate().then((taxRate) => {\n setResult(taxRate.toString());\n });\n }, []);\n\n return Result: {result}
;\n}\n```\n\n\n\n
\n\n### 1. Create dApp for test\n\nThere is the `dangerously__chromeExtensionCompatibleBrowserCheck` option to allow you to create a test environment for\nwallet development.\n\nBy declaring the `dangerously__chromeExtensionCompatibleBrowserCheck`, you can make your wallet recognized as the chrome\nextension.\n\n```jsx\n\n /YourWallet/.test(userAgent)\n }\n>\n ...\n\n```\n\n### 2. Register your wallet as default allow\n\nIf your wallet has been developed,\n\nPlease send me your wallet App link (Testlight version is OK)\n\nAnd send me Pull Request by modifying `DEFAULT_CHROME_EXTENSION_COMPATIBLE_BROWSER_CHECK` in\nthe `packages/src/@c2x/wallet-provider/env.ts` file. (or just make an issue is OK)\n\n```diff\nexport const DEFAULT_CHROME_EXTENSION_COMPATIBLE_BROWSER_CHECK = (userAgent: string) => {\n- return /MathWallet\\//.test(userAgent);\n+ return /MathWallet\\//.test(userAgent) || /YourWallet/.test(userAgent);\n}\n```\n\n
\n","readmeFilename":"README.md"}