index.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <!doctype html>
  2. <html class="default no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>@solana/wallet-adapter</title>
  7. <meta name="description" content="Documentation for @solana/wallet-adapter">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="stylesheet" href="assets/css/main.css">
  10. <script async src="assets/js/search.js" id="search-script"></script>
  11. </head>
  12. <body>
  13. <header>
  14. <div class="tsd-page-toolbar">
  15. <div class="container">
  16. <div class="table-wrap">
  17. <div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
  18. <div class="field">
  19. <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
  20. <input id="tsd-search-field" type="text" />
  21. </div>
  22. <ul class="results">
  23. <li class="state loading">Preparing search index...</li>
  24. <li class="state failure">The search index is not available</li>
  25. </ul>
  26. <a href="index.html" class="title">@solana/wallet-adapter</a>
  27. </div>
  28. <div class="table-cell" id="tsd-widgets">
  29. <div id="tsd-filter">
  30. <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
  31. <div class="tsd-filter-group">
  32. <div class="tsd-select" id="tsd-filter-visibility">
  33. <span class="tsd-select-label">All</span>
  34. <ul class="tsd-select-list">
  35. <li data-value="public">Public</li>
  36. <li data-value="protected">Public/Protected</li>
  37. <li data-value="private" class="selected">All</li>
  38. </ul>
  39. </div>
  40. <input type="checkbox" id="tsd-filter-inherited" checked />
  41. <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
  42. <input type="checkbox" id="tsd-filter-externals" checked />
  43. <label class="tsd-widget" for="tsd-filter-externals">Externals</label>
  44. </div>
  45. </div>
  46. <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="tsd-page-title">
  52. <div class="container">
  53. <h1>@solana/wallet-adapter</h1>
  54. </div>
  55. </div>
  56. </header>
  57. <div class="container container-main">
  58. <div class="row">
  59. <div class="col-8 col-content">
  60. <div class="tsd-panel tsd-typography">
  61. <a href="#solanawallet-adapter" id="solanawallet-adapter" style="color: inherit; text-decoration: none;">
  62. <h1><code>@solana/wallet-adapter</code></h1>
  63. </a>
  64. <p>Modular TypeScript wallet adapters and components for Solana applications.</p>
  65. <!-- @TODO -->
  66. <a href="#quick-links" id="quick-links" style="color: inherit; text-decoration: none;">
  67. <h2>Quick Links</h2>
  68. </a>
  69. <ul>
  70. <li><a href="https://solana-labs.github.io/wallet-adapter/">Docs</a></li>
  71. <li><a href="https://solana-labs.github.io/wallet-adapter/example/">Example</a></li>
  72. </ul>
  73. <a href="#packages" id="packages" style="color: inherit; text-decoration: none;">
  74. <h2>Packages</h2>
  75. </a>
  76. <table>
  77. <thead>
  78. <tr>
  79. <th>package</th>
  80. <th>description</th>
  81. <th>npm</th>
  82. <th>version</th>
  83. </tr>
  84. </thead>
  85. <tbody><tr>
  86. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/wallets">wallets</a></td>
  87. <td>All wallets with icons</td>
  88. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-wallets"><code>@solana/wallet-adapter-wallets</code></a></td>
  89. <td><code>0.4.0</code></td>
  90. </tr>
  91. <tr>
  92. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/react">react</a></td>
  93. <td>React hooks and context for dApps</td>
  94. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-react"><code>@solana/wallet-adapter-react</code></a></td>
  95. <td><code>0.4.0</code></td>
  96. </tr>
  97. <tr>
  98. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/base">base</a></td>
  99. <td>Adapter interface, errors, and utilities</td>
  100. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-base"><code>@solana/wallet-adapter-base</code></a></td>
  101. <td><code>0.4.0</code></td>
  102. </tr>
  103. <tr>
  104. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/phantom">phantom</a></td>
  105. <td>Adapter for <a href="https://www.phantom.app">Phantom</a></td>
  106. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-phantom"><code>@solana/wallet-adapter-phantom</code></a></td>
  107. <td><code>0.4.0</code></td>
  108. </tr>
  109. <tr>
  110. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/torus">torus</a></td>
  111. <td>Adapter for <a href="https://tor.us">Torus</a></td>
  112. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-torus"><code>@solana/wallet-adapter-torus</code></a></td>
  113. <td><code>0.4.0</code></td>
  114. </tr>
  115. <tr>
  116. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/ledger">ledger</a></td>
  117. <td>Adapter for <a href="https://www.ledger.com">Ledger</a></td>
  118. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-ledger"><code>@solana/wallet-adapter-ledger</code></a></td>
  119. <td><code>0.4.0</code></td>
  120. </tr>
  121. <tr>
  122. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/solong">solong</a></td>
  123. <td>Adapter for <a href="https://solongwallet.com">Solong</a></td>
  124. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-solong"><code>@solana/wallet-adapter-solong</code></a></td>
  125. <td><code>0.4.0</code></td>
  126. </tr>
  127. <tr>
  128. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/mathwallet">mathwallet</a></td>
  129. <td>Adapter for <a href="https://mathwallet.org">MathWallet</a></td>
  130. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-mathwallet"><code>@solana/wallet-adapter-mathwallet</code></a></td>
  131. <td><code>0.4.0</code></td>
  132. </tr>
  133. <tr>
  134. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/sollet">sollet</a></td>
  135. <td>Adapter for <a href="https://www.sollet.io">Sollet</a></td>
  136. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-sollet"><code>@solana/wallet-adapter-sollet</code></a></td>
  137. <td><code>0.4.0</code></td>
  138. </tr>
  139. <tr>
  140. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/material-ui">material-ui</a></td>
  141. <td>Components for <a href="https://material-ui.com">Material UI</a></td>
  142. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-material-ui"><code>@solana/wallet-adapter-material-ui</code></a></td>
  143. <td><code>0.4.0</code></td>
  144. </tr>
  145. <tr>
  146. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/material-ui-starter">material-ui-starter</a></td>
  147. <td><a href="https://create-react-app.dev/">Create React App</a> project using Material UI</td>
  148. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-material-ui-starter"><code>@solana/wallet-adapter-material-ui-starter</code></a></td>
  149. <td><code>0.1.0</code></td>
  150. </tr>
  151. <tr>
  152. <td><a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/example">example</a></td>
  153. <td>Demo of components</td>
  154. <td><a href="https://www.npmjs.com/package/@solana/wallet-adapter-example"><code>@solana/wallet-adapter-example</code></a></td>
  155. <td><code>0.4.0</code></td>
  156. </tr>
  157. </tbody></table>
  158. <a href="#quick-setup-using-react-with-material-ui" id="quick-setup-using-react-with-material-ui" style="color: inherit; text-decoration: none;">
  159. <h2>Quick Setup (using React with Material UI)</h2>
  160. </a>
  161. <p>See the <a href="https://github.com/solana-labs/wallet-adapter/tree/master/packages/material-ui-starter">material-ui-starter</a> package for a more complete example.</p>
  162. <a href="#install" id="install" style="color: inherit; text-decoration: none;">
  163. <h3>Install</h3>
  164. </a>
  165. <p>Install these peer dependencies (or skip this if you have them already):</p>
  166. <pre><code class="language-shell"><span style="color: #000000">yarn add @material-ui/core \</span>
  167. <span style="color: #000000"> @material-ui/icons \</span>
  168. <span style="color: #000000"> @solana/web3.js \</span>
  169. <span style="color: #000000"> react</span>
  170. </code></pre>
  171. <p>Install these dependencies:</p>
  172. <pre><code class="language-shell"><span style="color: #000000">yarn add @solana/wallet-adapter-wallets \</span>
  173. <span style="color: #000000"> @solana/wallet-adapter-react \</span>
  174. <span style="color: #000000"> @solana/wallet-adapter-material-ui \</span>
  175. <span style="color: #000000"> @solana/wallet-adapter-base</span>
  176. </code></pre>
  177. <a href="#code" id="code" style="color: inherit; text-decoration: none;">
  178. <h3>Code</h3>
  179. </a>
  180. <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000">, { </span><span style="color: #001080">FC</span><span style="color: #000000">, </span><span style="color: #001080">useMemo</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react&#039;</span><span style="color: #000000">;</span>
  181. <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">WalletProvider</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@solana/wallet-adapter-react&#039;</span><span style="color: #000000">;</span>
  182. <span style="color: #AF00DB">import</span><span style="color: #000000"> {</span>
  183. <span style="color: #000000"> </span><span style="color: #001080">getLedgerWallet</span><span style="color: #000000">,</span>
  184. <span style="color: #000000"> </span><span style="color: #001080">getMathWallet</span><span style="color: #000000">,</span>
  185. <span style="color: #000000"> </span><span style="color: #001080">getPhantomWallet</span><span style="color: #000000">,</span>
  186. <span style="color: #000000"> </span><span style="color: #001080">getSolletWallet</span><span style="color: #000000">,</span>
  187. <span style="color: #000000"> </span><span style="color: #001080">getSolongWallet</span><span style="color: #000000">,</span>
  188. <span style="color: #000000"> </span><span style="color: #001080">getTorusWallet</span><span style="color: #000000">,</span>
  189. <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@solana/wallet-adapter-wallets&#039;</span><span style="color: #000000">;</span>
  190. <span style="color: #AF00DB">import</span><span style="color: #000000"> {</span>
  191. <span style="color: #000000"> </span><span style="color: #001080">WalletDialogProvider</span><span style="color: #000000">,</span>
  192. <span style="color: #000000"> </span><span style="color: #001080">WalletDisconnectButton</span><span style="color: #000000">,</span>
  193. <span style="color: #000000"> </span><span style="color: #001080">WalletMultiButton</span><span style="color: #000000">,</span>
  194. <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@solana/wallet-adapter-material-ui&#039;</span><span style="color: #000000">;</span>
  195. <span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">Wallet</span><span style="color: #000000">: </span><span style="color: #267F99">FC</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
  196. <span style="color: #000000"> </span><span style="color: #008000">// @solana/wallet-adapter-wallets imports all the adapters but supports tree shaking --</span>
  197. <span style="color: #000000"> </span><span style="color: #008000">// Only the wallets you want to support will be compiled into your application</span>
  198. <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">wallets</span><span style="color: #000000"> = </span><span style="color: #795E26">useMemo</span><span style="color: #000000">(() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> [</span>
  199. <span style="color: #000000"> </span><span style="color: #795E26">getPhantomWallet</span><span style="color: #000000">(),</span>
  200. <span style="color: #000000"> </span><span style="color: #795E26">getTorusWallet</span><span style="color: #000000">({ </span><span style="color: #001080">clientId:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;Go to https://developer.tor.us and create a client ID&#039;</span><span style="color: #000000"> }),</span>
  201. <span style="color: #000000"> </span><span style="color: #795E26">getLedgerWallet</span><span style="color: #000000">(),</span>
  202. <span style="color: #000000"> </span><span style="color: #795E26">getSolongWallet</span><span style="color: #000000">(),</span>
  203. <span style="color: #000000"> </span><span style="color: #795E26">getMathWallet</span><span style="color: #000000">(),</span>
  204. <span style="color: #000000"> </span><span style="color: #795E26">getSolletWallet</span><span style="color: #000000">(),</span>
  205. <span style="color: #000000"> ], []);</span>
  206. <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
  207. <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">WalletProvider</span><span style="color: #000000"> </span><span style="color: #FF0000">wallets</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">wallets</span><span style="color: #0000FF">}</span><span style="color: #000000"> </span><span style="color: #FF0000">autoConnect</span><span style="color: #800000">&gt;</span>
  208. <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">WalletDialogProvider</span><span style="color: #800000">&gt;</span>
  209. <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">WalletMultiButton</span><span style="color: #800000">/&gt;</span>
  210. <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">WalletDisconnectButton</span><span style="color: #800000">/&gt;</span>
  211. <span style="color: #000000"> </span><span style="color: #800000">&lt;/</span><span style="color: #267F99">WalletDialogProvider</span><span style="color: #800000">&gt;</span>
  212. <span style="color: #000000"> </span><span style="color: #800000">&lt;/</span><span style="color: #267F99">WalletProvider</span><span style="color: #800000">&gt;</span>
  213. <span style="color: #000000"> );</span>
  214. <span style="color: #000000">};</span>
  215. </code></pre>
  216. </div>
  217. </div>
  218. <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
  219. <nav class="tsd-navigation primary">
  220. <ul>
  221. <li class=" ">
  222. <a href="modules.html">Modules</a>
  223. </li>
  224. <li class=" tsd-kind-module">
  225. <a href="modules/_solana_wallet_adapter_base.html">@solana/wallet-<wbr>adapter-<wbr>base</a>
  226. </li>
  227. <li class=" tsd-kind-module">
  228. <a href="modules/_solana_wallet_adapter_ledger.html">@solana/wallet-<wbr>adapter-<wbr>ledger</a>
  229. </li>
  230. <li class=" tsd-kind-module">
  231. <a href="modules/_solana_wallet_adapter_material_ui.html">@solana/wallet-<wbr>adapter-<wbr>material-<wbr>ui</a>
  232. </li>
  233. <li class=" tsd-kind-module">
  234. <a href="modules/_solana_wallet_adapter_mathwallet.html">@solana/wallet-<wbr>adapter-<wbr>mathwallet</a>
  235. </li>
  236. <li class=" tsd-kind-module">
  237. <a href="modules/_solana_wallet_adapter_phantom.html">@solana/wallet-<wbr>adapter-<wbr>phantom</a>
  238. </li>
  239. <li class=" tsd-kind-module">
  240. <a href="modules/_solana_wallet_adapter_react.html">@solana/wallet-<wbr>adapter-<wbr>react</a>
  241. </li>
  242. <li class=" tsd-kind-module">
  243. <a href="modules/_solana_wallet_adapter_sollet.html">@solana/wallet-<wbr>adapter-<wbr>sollet</a>
  244. </li>
  245. <li class=" tsd-kind-module">
  246. <a href="modules/_solana_wallet_adapter_solong.html">@solana/wallet-<wbr>adapter-<wbr>solong</a>
  247. </li>
  248. <li class=" tsd-kind-module">
  249. <a href="modules/_solana_wallet_adapter_torus.html">@solana/wallet-<wbr>adapter-<wbr>torus</a>
  250. </li>
  251. <li class=" tsd-kind-module">
  252. <a href="modules/_solana_wallet_adapter_wallets.html">@solana/wallet-<wbr>adapter-<wbr>wallets</a>
  253. </li>
  254. </ul>
  255. </nav>
  256. <nav class="tsd-navigation secondary menu-sticky">
  257. <ul class="before-current">
  258. </ul>
  259. </nav>
  260. </div>
  261. </div>
  262. </div>
  263. <footer class="with-border-bottom">
  264. <div class="container">
  265. <h2>Legend</h2>
  266. <div class="tsd-legend-group">
  267. <ul class="tsd-legend">
  268. <li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
  269. <li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
  270. <li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
  271. </ul>
  272. <ul class="tsd-legend">
  273. <li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
  274. </ul>
  275. <ul class="tsd-legend">
  276. <li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
  277. </ul>
  278. <ul class="tsd-legend">
  279. <li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
  280. </ul>
  281. </div>
  282. </div>
  283. </footer>
  284. <div class="container tsd-generator">
  285. <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
  286. </div>
  287. <div class="overlay"></div>
  288. <script src="assets/js/main.js"></script>
  289. </body>
  290. </html>