{"_id":"@daodiseomoney/wallet-provider","name":"@daodiseomoney/wallet-provider","dist-tags":{"latest":"3.8.1"},"versions":{"3.8.1":{"private":false,"license":"MIT","repository":{"type":"git","url":"git+https://github.com/daodiseomoney/wallet-provider.git"},"workspaces":["packages","templates/*"],"scripts":{"format":"prettier --write \"**/*.{js,jsx,ts,tsx}\"","lint":"eslint \"**/*.{js,jsx,ts,tsx}\"","prepare":"husky install"},"lint-staged":{"**/src/{**/*,*}.{ts,tsx}":["prettier --write","eslint --max-warnings 0 --no-ignore"]},"devDependencies":{"@handbook/markdown-source-import":"^1.1.0","@ssen/prettier-config":"^2.0.1","eslint":"^8.6.0","eslint-config-prettier":"^8.3.0","eslint-config-react-app":"^7.0.0","husky":"^7.0.4","jest":"^27.4.7","lint-staged":"^12.1.5","prettier":"^2.5.1"},"resolutions":{"@daodiseomoney/daodiseo.js":"3.0.7"},"name":"@daodiseomoney/wallet-provider","description":"Library to make React dApps easier using Daodiseo Station Extension or Daodiseo Station Mobile.","bugs":{"url":"https://github.com/daodiseomoney/wallet-provider/issues"},"homepage":"https://github.com/daodiseomoney/wallet-provider#readme","version":"3.8.1","main":".eslintrc.js","dependencies":{},"author":"","gitHead":"395ee9779db212b7b324604373b0d768d744f685","_id":"@daodiseomoney/wallet-provider@3.8.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-NsmWkR5rsw5J4sdKPVy8nEnaTuNlYyXTtFXUeVyD5VXHIe1tDdo0g+kp4BF3/LcoNjelSrrouIgXUW8R/1i4DA==","shasum":"7cd2d08e0ed857a298e810ae2f72e3ca74e02d35","tarball":"https://registry.npmjs.org/@daodiseomoney/wallet-provider/-/wallet-provider-3.8.1.tgz","fileCount":239,"unpackedSize":4992166,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYA7ZLjEqXW1nXsOMOIW97mALaQ0u8Hi76cgjCBD8oTAiEAlcKxwgRknkhUaXWDRnzGtaPjsgeleJpYZgBXR/5B3G8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3WbNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU0RAAkj2pjT6Rl2kuqyMngD8mMuZKbVEKGhNgElc/62rEaC6axTuk\r\nUzqoWOlhK4XAK/MwTdj1wxntySVmfiXxPA7tIKWmYdmJiCj3L9YREbR2CHbt\r\n/Vq498kMAKI1d9bLBwtIgNslPb/aOlGs7zoAOcQC8RTMT4ABXIR8S7WQfQzn\r\nkKnUyBsOPjAzt/K8L/o3TRpJm4CXsdwby4vHkZez46hQFMivk8LePDMDcgoK\r\n75Ky16C1CsdvOuAgu212rdlPNfzXNbJEw40dokMQMZoAyMCorwR/I9ogktqk\r\nIAA2QTk6U8ihKikSLMrv/ug8kwH45Oe2tRKC7q9wH9Pki3V3cDyrv6O9vMGa\r\nqoTkx8ZQhO9tauaksxH/RlmToNRljbXZARgAS3ct6LzFWJAHRzIXLZoO79Ip\r\nM7Rr7sp6f/NaP46GJ5NnmxU8mOFW9cZNfBvHfq83b0/4I7fNPqdML86iFj6l\r\nQ6CBWmrFWroBw1VobYfrAkh5XtgFdd40Wt9U3iaeMGQtBwyLZVLOPJRf48i2\r\nPkFG4glEzYgXG+iK3h7b/qC0yUZY3zMXXmyG1phwPjUBnl/Yuet7+W3vD9K0\r\nhwcMIukHBV56GeMm6zVmAf/m6dKa6S/ehX4brFa7gsPTaxeHR8d4dwpkTW2U\r\nNPdEdr4PRAV4sC5tAWV8dZrh84IPE1OXnl4=\r\n=3esd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"swarych","email":"stanislaw.warych@gmail.com"},"directories":{},"maintainers":[{"name":"swarych","email":"stanislaw.warych@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wallet-provider_3.8.1_1658676941632_0.06444724671094826"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-24T15:35:41.506Z","3.8.1":"2022-07-24T15:35:41.881Z","modified":"2022-07-24T15:35:42.040Z"},"maintainers":[{"name":"swarych","email":"stanislaw.warych@gmail.com"}],"description":"Library to make React dApps easier using Daodiseo Station Extension or Daodiseo Station Mobile.","homepage":"https://github.com/daodiseomoney/wallet-provider#readme","repository":{"type":"git","url":"git+https://github.com/daodiseomoney/wallet-provider.git"},"bugs":{"url":"https://github.com/daodiseomoney/wallet-provider/issues"},"license":"MIT","readme":"# Daodiseo Wallet Provider\n\nLibrary to make React dApps easier using Daodiseo Station Extension or Daodiseo Station Mobile.\n\n# Quick Start\n\nUse templates to get your projects started quickly\n\n### Code Sandbox\n\nIf you want to test features quickly, you can simply run them on CodeSandbox without having to download Templates.\n\n- [Wallet Provider + Create-React-App](https://githubbox.com/daodiseomoney/wallet-provider/tree/main/templates/create-react-app)\n- [Wallet Provider + Next.js](https://githubbox.com/daodiseomoney/wallet-provider/tree/main/templates/next)\n- [Wallet Provider + Vite.js](https://githubbox.com/daodiseomoney/wallet-provider/tree/main/templates/vite)\n- [Wallet Controller + Lit](https://githubbox.com/daodiseomoney/wallet-provider/tree/main/templates/lit)\n- [Wallet Controller + Vue.js](https://githubbox.com/daodiseomoney/wallet-provider/tree/main/templates/vue)\n- [Wallet Controller + Svelte](https://githubbox.com/daodiseomoney/wallet-provider/tree/main/templates/svelte)\n\nAnd if you need to start your project from local computer, use the templates below. 👇\n\n### Create React App\n\n```sh\nnpx daodiseo-templates get wallet-provider:create-react-app your-app-name\ncd your-app-name\nyarn install\nyarn start\n```\n\n<https://github.com/terra-money/wallet-provider/tree/main/templates/create-react-app>\n\n### Next.js\n\n```sh\nnpx daodiseo-templates get wallet-provider:next your-app-name\ncd your-app-name\nyarn install\nyarn run dev\n```\n\n<https://github.com/terra-money/wallet-provider/tree/main/templates/next>\n\n### Other templates\n\n- [Wallet Provider + Vite.js](https://github.com/daodiseomoney/wallet-provider/tree/main/templates/vite)\n- [Wallet Controller + Lit](https://github.com/daodiseomoney/wallet-provider/tree/main/templates/lit)\n- [Wallet Controller + Vue.js](https://github.com/daodiseomoney/wallet-provider/tree/main/templates/vue)\n- [Wallet Controller + Svelte](https://github.com/daodiseomoney/wallet-provider/tree/main/templates/svelte)\n\n### Community templates (experimental)\n\nYou can find more templates in <https://templates.daodiseo.money>. (This is the beginning stage, so it may not be enough yet)\n\nIf you make a different type of template, you can register [here](https://github.com/daodiseomoney/templates).\n\n# Basic Usage\n\nFirst, please add `<meta name=\"daodiseo-wallet\" />` on your html page.\n\nSince then, browser extensions (e.g. Daodiseo Station chrome extension) will not attempt to connect in a Web app where this `<meta name=\"daodiseo-wallet\">` tag is not found.\n\n```html\n<html lang=\"en\">\n  <head>\n    <meta name=\"daodiseo-wallet\" />\n  </head>\n</html>\n```\n\nIf you have used `react-router-dom`'s `<BrowserRouter>`, `useLocation()`, you can easily understand it.\n\n```jsx\nimport {\n  NetworkInfo,\n  WalletProvider,\n  WalletStatus,\n  getChainOptions,\n} from '@daodiseomoney/wallet-provider';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n// getChainOptions(): Promise<{ defaultNetwork, walletConnectChainIds }>\ngetChainOptions().then((chainOptions) => {\n  ReactDOM.render(\n    <WalletProvider {...chainOptions}>\n      <YOUR_APP />\n    </WalletProvider>,\n    document.getElementById('root'),\n  );\n});\n```\n\nFirst, you need to wrap your React App with the `<WalletProvider>` component.\n\n```jsx\nimport { useWallet } from '@daodiseomoney/wallet-provider';\nimport React from 'react';\n\nfunction Component() {\n  const { status, network, wallets } = useWallet();\n\n  return (\n    <div>\n      <section>\n        <pre>\n          {JSON.stringify(\n            {\n              status,\n              network,\n              wallets,\n            },\n            null,\n            2,\n          )}\n        </pre>\n      </section>\n    </div>\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<details>\n\n<summary><code>&lt;WalletProvider&gt;</code></summary>\n\n```jsx\nimport {\n  WalletProvider,\n  NetworkInfo,\n  ReadonlyWalletSession,\n} from '@daodiseomoney/wallet-provider';\n\n// network information\nconst mainnet: NetworkInfo = {\n  name: 'mainnet',\n  chainID: 'columbus-5',\n  lcd: 'https://lcd.daodiseo.dev',\n};\n\nconst testnet: NetworkInfo = {\n  name: 'testnet',\n  chainID: 'bombay-12',\n  lcd: 'https://bombay-lcd.daodiseo.dev',\n};\n\n// WalletConnect separates chainId by number.\n// Currently DaodiseoStation Mobile uses 0 as Testnet, 1 as Mainnet.\nconst walletConnectChainIds: Record<number, NetworkInfo> = {\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<ReadonlyWalletSession> {\n  const daodiseoAddress = prompt('YOUR DAODISEO ADDRESS');\n  return {\n    network: mainnet,\n    daodiseoAddress,\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.isDaodiseoExtensionAvailable.\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  <WalletProvider\n    defaultNetwork={mainnet}\n    walletConnectChainIds={walletConnectChainIds}\n    createReadonlyWalletSession={createReadonlyWalletSession}\n    connectorOpts={connectorOpts}\n    pushServerOpts={pushServerOpts}\n    waitingChromeExtensionInstallCheck={waitingChromeExtensionInstallCheck}\n  >\n    <YOUR_APP />\n  </WalletProvider>,\n  document.getElementById('root'),\n);\n```\n\n</details>\n\n<details>\n\n<summary><code>useWallet()</code></summary>\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<!-- source packages/src/@daodiseomoney/use-wallet/useWallet.ts --pick \"Wallet\" -->\n\n[packages/src/@terra-money/use-wallet/useWallet.ts](packages/src/@terra-money/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   *  <div>\n   *    {\n   *      availableConnections.map(({type, identifier, name, icon}) => (\n   *        <butotn key={`${type}:${identifier}`} onClick={() => connect(type, identifier)}>\n   *          <img src={icon} /> {name}\n   *        </button>\n   *      ))\n   *    }\n   *  </div>\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   *  <button onClick={() => connect(ConnectType.EXTENSION)}>\n   *    Connct Chrome Extension\n   *  </button>\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: (daodiseoAddress: 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   *  <div>\n   *    {\n   *      availableInstallations.map(({type, identifier, name, icon, url}) => (\n   *        <a key={`${type}:${identifier}`} href={url}>\n   *          <img src={icon} /> {name}\n   *        </a>\n   *      ))\n   *    }\n   *  </div>\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   *  <button onClick={() => install(ConnectType.EXTENSION)}>\n   *    Install Extension\n   *  </button>\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, daodiseoAddress: '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   *  <button onClick={() => disconnect()}>\n   *    Disconnect\n   *  </button>\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   *  <div>\n   *    {\n   *      supportFeatures.has('post') &&\n   *      <button onClick={post}>post</button>\n   *    }\n   *    {\n   *      supportFeatures.has('cw20-token') &&\n   *      <button onClick={addCW20Token}>add cw20 token</button>\n   *    }\n   *  </div>\n   * )\n   * ```\n   *\n   * This type is same as `import type { DaodiseoWebExtensionFeatures } from '@daodiseomoney/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 daodiseoAddress - does not work at this time. for the future extension\n   *\n   * @return { Promise<TxResult> }\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, daodiseoAddress?: string) => Promise<TxResult>;\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 daodiseoAddress - does not work at this time. for the future extension\n   *\n   * @return { Promise<SignResult> }\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, daodiseoAddress?: string) => Promise<SignResult>;\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, daodiseoAddress?: string) => Promise<SignBytesResult>;\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<NetworkInfo, 'name'>) => Promise<boolean>;\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<boolean>;\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<!-- /source -->\n\n</details>\n\n<details>\n\n<summary><code>useConnectedWallet()</code></summary>\n\n```jsx\nimport { useConnectedWallet } from '@daodiseomoney/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    <button disabled={!connectedWallet || !connectedWallet.availablePost} onClick={() => postTx}>\n      Post Tx\n    </button>\n  )\n}\n```\n\n</details>\n\n<details>\n\n<summary><code>useLCDClient()</code></summary>\n\n```jsx\nimport { useLCDClient } from '@daodiseomoney/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 <div>Result: {result}</div>;\n}\n```\n\n</details>\n\n# Projects for reference\n\n- [Anchor Web App](https://github.com/Anchor-Protocol/anchor-web-app/blob/master/base/src/base/AppProviders.tsx#L154)\n- [Mirror Web App](https://github.com/daodiseomirror/daodiseo-web-app/blob/master/src/layouts/WalletConnectProvider.tsx#L12)\n\n# Links\n\n- [Releases (Changelog)](https://github.com/daodiseomoney/wallet-provider/releases)\n\n# Trouble-shooting guide\n\nwallet-provider contains the original source codes in sourcemaps.\n\n<img src=\"https://raw.githubusercontent.com/daodiseomoney/wallet-provider/main/readme-assets/trouble-shooting-guide.png\" width=\"700\" style=\"max-width: 100%\" alt=\"Trouble-Shooting Guide\" />\n\nYou can check `src/@daodiseomoney/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\n<details>\n\n<summary><code>Chrome Extension compatible wallet development guide</code></summary>\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<WalletProvider\n  dangerously__chromeExtensionCompatibleBrowserCheck={(userAgent) =>\n    /YourWallet/.test(userAgent)\n  }\n>\n  ...\n</WalletProvider>\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/@daodiseomoney/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</details>\n","readmeFilename":"README.md"}