mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-25 02:46:39 +07:00
7635e7e9c4
Author: Fedor Katurov <gotham48@gmail.com>
Date: Thu Nov 10 16:57:58 2022 +0600
fixed UIButtons
6 lines
No EOL
52 KiB
HTML
6 lines
No EOL
52 KiB
HTML
<!DOCTYPE html>
|
|
<html data-head-attrs="">
|
|
<head><title>Common Typescript Examples • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/blockchain/common-typescript-examples/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.3f7b35f7.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.3efe0e50.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.5273d5e9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.ab60ac3f.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.5944fda9.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.a85363a3.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.6069b66d.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.5fd37643.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.8dc0391c.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.e250aab4.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.807194e1.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.d35fcc47.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.f02112c6.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.0ad2746e.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.7b20310c.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.88b49963.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.ea13e808.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.2fa928c9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.9ecb8376.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b3f809f0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.20d882b9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.34fc7c96.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.faba73a0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.e3d36be5.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.1da53aea.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.6c21f409.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.793f9b4a.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.0c694d46.js"><link rel="prefetch" as="style" href="/nuxt/entry.cf2e2da6.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.5944fda9.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_1km9a_1{display:flex;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_1km9a_1{padding-top:10px}}._content_1km9a_13{flex:1}._footer_1km9a_17{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_1km9a_23{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_1km9a_23{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.cf2e2da6.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
|
|
</script></head>
|
|
<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_fvpir_8"><a href="/" class=""><div class="_title_fvpir_29">Obsidian Garden</div><div class="_subtitle_fvpir_35">by muerwre</div></a></div><div class="_section_title_fvpir_1">Cheatsheet</div><!--[--><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/blockchain/common-typescript-examples" class="router-link-active _active_192pu_81 _link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_fvpir_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_1km9a_1" hastransition="true"><div class="_content_1km9a_13"><button class="_theme_toggle_1km9a_23 _button_jz7in_1 _theme_toggle_1km9a_23"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Common Typescript Examples</h1><article><div><ul><!--[--><li><!--[-->Simple #dapp example for tests: <a href="https://metamask.github.io/test-dapp/" rel="nofollow" target="_blank"><!--[-->https://metamask.github.io/test-dapp/<!--]--></a><!--]--></li><li><!--[-->Interaction with smart contracts described in <a href="/blockchain/smart-contracts" class=""><!--[-->Smart contracts<!--]--></a><!--]--></li><!--]--></ul><h2 id="connecting-to-node"><a href="#connecting-to-node"><!--[-->Connecting to node<!--]--></a></h2><p><!--[-->If #Metamask extension installed, <code><!--[-->Web3.givenProvider<!--]--></code> is available in global window. You can use <a href="https://infura.io" rel="nofollow" target="_blank"><!--[-->Infura<!--]--></a> or your node instead:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-6c8cac">import</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">Web3</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">from</span><span class="ct-aa5cfd"> </span><span class="ct-fcaef6">'web3'</span><span class="ct-aa5cfd">;</span></span><span class="line"></span><span class="line"><span class="ct-0dc8e9">// URL of your node</span></span><span class="line"><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">PROVIDER_URL</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-fcaef6">'https://...'</span><span class="ct-aa5cfd">;</span></span><span class="line"></span><span class="line"><span class="ct-6c8cac">export</span><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">web3</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">new</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">Web3</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">Web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">givenProvider</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">||</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">PROVIDER_URL</span><span class="ct-aa5cfd">);</span></span></code></pre><!--]--></div><h2 id="getting-wallet-balance"><a href="#getting-wallet-balance"><!--[-->Getting wallet balance<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-a7a143">const</span><span class="ct-242e65"> </span><span class="ct-1c69f5">getBalance</span><span class="ct-242e65"> </span><span class="ct-cbdf8d">=</span><span class="ct-242e65"> </span><span class="ct-a7a143">async</span><span class="ct-242e65"> (</span><span class="ct-192f7d">address</span><span class="ct-cbdf8d">:</span><span class="ct-242e65"> </span><span class="ct-b4a018">string</span><span class="ct-242e65">) </span><span class="ct-a7a143">=></span><span class="ct-242e65"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">return</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">eth</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">getBalance</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">address</span><span class="ct-aa5cfd">);</span></span><span class="line"><span class="ct-aa5cfd">}</span></span></code></pre><!--]--></div><h2 id="getting-wallet-address"><a href="#getting-wallet-address"><!--[-->Getting wallet address<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-0dc8e9">// first we need to authorize</span></span><span class="line"><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">authorize</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-b421ba">async</span><span class="ct-aa5cfd"> () </span><span class="ct-b421ba">=></span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">currentProvider</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">request</span><span class="ct-aa5cfd">({ method: </span><span class="ct-fcaef6">'eth_requestAccounts'</span><span class="ct-aa5cfd"> });</span></span><span class="line"><span class="ct-aa5cfd">}</span></span><span class="line"></span><span class="line"><span class="ct-0dc8e9">// then we can get wallet address</span></span><span class="line"><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">getCurrentAddressUser</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> () </span><span class="ct-b421ba">=></span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">return</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">currentProvider</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">selectedAddress</span><span class="ct-aa5cfd">;</span></span><span class="line"><span class="ct-aa5cfd">}</span></span></code></pre><!--]--></div><h2 id="sending-transaction"><a href="#sending-transaction"><!--[-->Sending transaction<!--]--></a></h2><p><!--[-->Sending <code><!--[-->value<!--]--></code> tokens with <code><!--[-->memo<!--]--></code> as value:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"></span><span class="line"><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">transfer</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-b421ba">async</span><span class="ct-aa5cfd"> ({ </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">from</span><span class="ct-aa5cfd">, </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">to</span><span class="ct-aa5cfd">, </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">value</span><span class="ct-aa5cfd">, </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">memo</span><span class="ct-aa5cfd">, </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">privateKey</span><span class="ct-aa5cfd">, </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">gasLimit</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd">}) </span><span class="ct-b421ba">=></span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">nonce</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">eth</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">getTransactionCount</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">from</span><span class="ct-aa5cfd">);</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">gasPrice</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">eth</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">getGasPrice</span><span class="ct-aa5cfd">();</span></span><span class="line"><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">rawTx</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">from</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">to</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> value: </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toHex</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">Web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toWei</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">value</span><span class="ct-aa5cfd">, </span><span class="ct-fcaef6">'ether'</span><span class="ct-aa5cfd">)),</span></span><span class="line"><span class="ct-aa5cfd"> gasLimit: </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toHex</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">gasLimit</span><span class="ct-aa5cfd">),</span></span><span class="line"><span class="ct-aa5cfd"> gasPrice: </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toHex</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">gasPrice</span><span class="ct-aa5cfd">),</span></span><span class="line"><span class="ct-aa5cfd"> nonce: </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toHex</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">nonce</span><span class="ct-aa5cfd">),</span></span><span class="line"><span class="ct-aa5cfd"> data: </span><span class="ct-1d02a1">memo</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> };</span></span><span class="line"><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">privateKeyBuffer</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">EthUtil</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toBuffer</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">privateKey</span><span class="ct-aa5cfd">);</span></span><span class="line"><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">tx</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">new</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">Transaction</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">rawTx</span><span class="ct-aa5cfd">);</span></span><span class="line"><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">tx</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">sign</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">privateKeyBuffer</span><span class="ct-aa5cfd">);</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">serializedTx</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">tx</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">serialize</span><span class="ct-aa5cfd">();</span></span><span class="line"><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">return</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">this</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">eth</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">sendSignedTransaction</span><span class="ct-aa5cfd">(</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-fcaef6">`0x${</span><span class="ct-1d02a1">serializedTx</span><span class="ct-2ade31">.</span><span class="ct-16b61f">toString</span><span class="ct-2ade31">(</span><span class="ct-fcaef6">'hex'</span><span class="ct-2ade31">)</span><span class="ct-fcaef6">}`</span></span><span class="line"><span class="ct-aa5cfd"> );</span></span><span class="line"><span class="ct-aa5cfd">}</span></span></code></pre><!--]--></div><h2 id="estimating-transaction-fee"><a href="#estimating-transaction-fee"><!--[-->Estimating transaction FEE<!--]--></a></h2><p><!--[-->Useful to get fixed amount of tokens from user with pre-estimated fee.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-6c8cac">import</span><span class="ct-aa5cfd"> { </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd"> } </span><span class="ct-6c8cac">from</span><span class="ct-aa5cfd"> </span><span class="ct-fcaef6">'.'</span><span class="ct-aa5cfd">;</span></span><span class="line"></span><span class="line"><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">estimateFee</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-b421ba">async</span><span class="ct-aa5cfd"> ({</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">from</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">to</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">value</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">memo</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd">}) </span><span class="ct-b421ba">=></span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">gasPrice</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">eth</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">getGasPrice</span><span class="ct-aa5cfd">();</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-1fbd09">gasLimit</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">eth</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">estimateGas</span><span class="ct-aa5cfd">({</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">from</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">to</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> value: </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toHex</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toWei</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">value</span><span class="ct-aa5cfd">, </span><span class="ct-fcaef6">'ether'</span><span class="ct-aa5cfd">)),</span></span><span class="line"><span class="ct-aa5cfd"> data: </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">asciiToHex</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">memo</span><span class="ct-aa5cfd">),</span></span><span class="line"><span class="ct-aa5cfd"> }).</span><span class="ct-16b61f">call</span><span class="ct-aa5cfd">();</span></span><span class="line"><span class="ct-aa5cfd"> </span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">return</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">utils</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">fromWei</span><span class="ct-aa5cfd">(</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-bb3bde">BigInt</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">gasPrice</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toString</span><span class="ct-aa5cfd">())</span></span><span class="line"><span class="ct-aa5cfd"> .</span><span class="ct-16b61f">multiply</span><span class="ct-aa5cfd">(</span><span class="ct-bb3bde">BigInt</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">gasLimit</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">toString</span><span class="ct-aa5cfd">()))</span></span><span class="line"><span class="ct-aa5cfd"> .</span><span class="ct-16b61f">toString</span><span class="ct-aa5cfd">()</span></span><span class="line"><span class="ct-aa5cfd"> );</span></span><span class="line"><span class="ct-aa5cfd">}</span></span></code></pre><!--]--></div><h2 id="subscribing-to-wallet-address-change"><a href="#subscribing-to-wallet-address-change"><!--[-->Subscribing to wallet address change<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-6c8cac">import</span><span class="ct-aa5cfd"> { </span><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd"> } </span><span class="ct-6c8cac">from</span><span class="ct-aa5cfd"> </span><span class="ct-fcaef6">'.'</span><span class="ct-aa5cfd">;</span></span><span class="line"></span><span class="line"><span class="ct-1d02a1">web3</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">currentProvider</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">on</span><span class="ct-aa5cfd">(</span><span class="ct-fcaef6">'accountsChanged'</span><span class="ct-aa5cfd">, </span><span class="ct-1d02a1">callback</span><span class="ct-aa5cfd">);</span></span></code></pre><!--]--></div><h2 id="watching-network-change"><a href="#watching-network-change"><!--[-->Watching network change<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1d02a1">ethereum</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">on</span><span class="ct-aa5cfd">(</span><span class="ct-fcaef6">'chainChanged'</span><span class="ct-aa5cfd">, </span><span class="ct-1d02a1">handler</span><span class="ct-bb9880">:</span><span class="ct-aa5cfd"> </span></span></code></pre><!--]--></div><h2 id="adding-custom-token-to-wallet"><a href="#adding-custom-token-to-wallet"><!--[-->Adding custom token to wallet<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1d02a1">window</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">ethereum</span></span><span class="line"><span class="ct-aa5cfd"> .</span><span class="ct-16b61f">request</span><span class="ct-aa5cfd">({</span></span><span class="line"><span class="ct-aa5cfd"> method: </span><span class="ct-fcaef6">'wallet_watchAsset'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> params: {</span></span><span class="line"><span class="ct-aa5cfd"> type: </span><span class="ct-fcaef6">'ERC20'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> options: {</span></span><span class="line"><span class="ct-aa5cfd"> address: </span><span class="ct-fcaef6">'0xb60e8dd61c5d32be8058bb8eb970870f07233155'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> symbol: </span><span class="ct-fcaef6">'FOO'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> decimals: </span><span class="ct-aa9449">18</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> image: </span><span class="ct-fcaef6">'https://foo.io/token-image.svg'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> },</span></span><span class="line"><span class="ct-aa5cfd"> },</span></span><span class="line"><span class="ct-aa5cfd"> })</span></span><span class="line"><span class="ct-242e65"> .</span><span class="ct-1c69f5">then</span><span class="ct-242e65">((</span><span class="ct-192f7d">success</span><span class="ct-242e65">) </span><span class="ct-a7a143">=></span><span class="ct-242e65"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">if</span><span class="ct-aa5cfd"> (</span><span class="ct-1d02a1">success</span><span class="ct-aa5cfd">) {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">console</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">log</span><span class="ct-aa5cfd">(</span><span class="ct-fcaef6">'FOO successfully added to wallet!'</span><span class="ct-aa5cfd">)</span></span><span class="line"><span class="ct-aa5cfd"> } </span><span class="ct-6c8cac">else</span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">throw</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">new</span><span class="ct-aa5cfd"> </span><span class="ct-bb3bde">Error</span><span class="ct-aa5cfd">(</span><span class="ct-fcaef6">'Something went wrong.'</span><span class="ct-aa5cfd">)</span></span><span class="line"><span class="ct-aa5cfd"> }</span></span><span class="line"><span class="ct-aa5cfd"> })</span></span><span class="line"><span class="ct-aa5cfd"> .</span><span class="ct-16b61f">catch</span><span class="ct-aa5cfd">(</span><span class="ct-1d02a1">console</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">error</span><span class="ct-aa5cfd">)</span></span></code></pre><!--]--></div><h2 id="changing-network-to-custom"><a href="#changing-network-to-custom"><!--[-->Changing network to custom<!--]--></a></h2><p><!--[-->Checking current chainId:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b421ba">const</span><span class="ct-aa5cfd"> </span><span class="ct-16b61f">getChainID</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">=</span><span class="ct-aa5cfd"> </span><span class="ct-b421ba">async</span><span class="ct-aa5cfd"> () </span><span class="ct-b421ba">=></span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">return</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">ethereum</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">request</span><span class="ct-aa5cfd">({ method: </span><span class="ct-fcaef6">'eth_chainId'</span><span class="ct-aa5cfd"> })</span></span><span class="line"><span class="ct-aa5cfd">}</span></span></code></pre><!--]--></div><p><!--[-->Asking wallet to change current network:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-6c8cac">try</span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">window</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">ethereum</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">request</span><span class="ct-aa5cfd">({</span></span><span class="line"><span class="ct-aa5cfd"> method: </span><span class="ct-fcaef6">'wallet_switchEthereumChain'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> params: [{ chainId: </span><span class="ct-fcaef6">'0x03'</span><span class="ct-aa5cfd"> }], </span><span class="ct-0dc8e9">// ropsten chainID (3) in hex</span></span><span class="line"><span class="ct-aa5cfd"> });</span></span><span class="line"><span class="ct-aa5cfd">} </span><span class="ct-6c8cac">catch</span><span class="ct-aa5cfd"> (</span><span class="ct-1d02a1">switchError</span><span class="ct-aa5cfd">) {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-0dc8e9">// This error code indicates that the chain has not been added to MetaMask.</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">if</span><span class="ct-aa5cfd"> (</span><span class="ct-1d02a1">error</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">code</span><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">===</span><span class="ct-aa5cfd"> </span><span class="ct-aa9449">4902</span><span class="ct-aa5cfd">) {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">try</span><span class="ct-aa5cfd"> {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-6c8cac">await</span><span class="ct-aa5cfd"> </span><span class="ct-1d02a1">window</span><span class="ct-aa5cfd">.</span><span class="ct-1d02a1">ethereum</span><span class="ct-aa5cfd">.</span><span class="ct-16b61f">request</span><span class="ct-aa5cfd">({</span></span><span class="line"><span class="ct-aa5cfd"> method: </span><span class="ct-fcaef6">'wallet_addEthereumChain'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> params: [{ </span></span><span class="line"><span class="ct-aa5cfd"> chainId: </span><span class="ct-fcaef6">'0x03'</span><span class="ct-aa5cfd">, </span><span class="ct-0dc8e9">// ropsten chainID (3) in hex</span></span><span class="line"><span class="ct-aa5cfd"> chainName: </span><span class="ct-fcaef6">'Ropsten Test Network'</span><span class="ct-aa5cfd">, </span></span><span class="line"><span class="ct-aa5cfd"> nativeCurrency: { </span></span><span class="line"><span class="ct-aa5cfd"> name: </span><span class="ct-fcaef6">'ETH'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> symbol: </span><span class="ct-fcaef6">'ETH'</span><span class="ct-aa5cfd">,</span></span><span class="line"><span class="ct-aa5cfd"> decimals: </span><span class="ct-aa9449">18</span></span><span class="line"><span class="ct-aa5cfd"> }, </span></span><span class="line"><span class="ct-aa5cfd"> rpcUrls: [</span><span class="ct-fcaef6">'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'</span><span class="ct-aa5cfd">], </span></span><span class="line"><span class="ct-aa5cfd"> blockExplorerUrls: [</span><span class="ct-fcaef6">'https://ropsten.etherscan.io'</span><span class="ct-aa5cfd">] </span></span><span class="line"><span class="ct-aa5cfd"> }] ,</span></span><span class="line"><span class="ct-aa5cfd"> });</span></span><span class="line"><span class="ct-aa5cfd"> } </span><span class="ct-6c8cac">catch</span><span class="ct-aa5cfd"> (</span><span class="ct-1d02a1">addError</span><span class="ct-aa5cfd">) {</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-0dc8e9">// handle "add" error</span></span><span class="line"><span class="ct-aa5cfd"> }</span></span><span class="line"><span class="ct-aa5cfd"> }</span></span><span class="line"><span class="ct-aa5cfd"> </span><span class="ct-0dc8e9">// handle other "switch" errors</span></span><span class="line"><span class="ct-aa5cfd">}</span></span></code></pre><!--]--></div><style>.ct-aa9449{color:#79C0FF}.ct-bb9880{color:#C9D1D9}.ct-bb3bde{color:#79C0FF}.ct-2ade31{color:#A5D6FF}.ct-b4a018{color:#79C0FF}.ct-192f7d{color:#FFA657}.ct-cbdf8d{color:#FF7B72}.ct-1c69f5{color:#D2A8FF}.ct-242e65{color:#C9D1D9}.ct-a7a143{color:#FF7B72}.ct-16b61f{color:#D2A8FF}.ct-1fbd09{color:#79C0FF}.ct-b421ba{color:#FF7B72}.ct-0dc8e9{color:#8B949E}.ct-fcaef6{color:#A5D6FF}.ct-1d02a1{color:#C9D1D9}.ct-aa5cfd{color:#C9D1D9}.ct-6c8cac{color:#FF7B72}.light .ct-6c8cac{color:#859900}.light .ct-aa5cfd{color:#657B83}.light .ct-1d02a1{color:#268BD2}.light .ct-fcaef6{color:#2AA198}.light .ct-0dc8e9{color:#93A1A1}.light .ct-b421ba{color:#073642}.light .ct-1fbd09{color:#268BD2}.light .ct-16b61f{color:#268BD2}.light .ct-a7a143{color:#073642}.light .ct-242e65{color:#657B83}.light .ct-1c69f5{color:#268BD2}.light .ct-cbdf8d{color:#859900}.light .ct-192f7d{color:#657B83}.light .ct-b4a018{color:#859900}.light .ct-2ade31{color:#657B83}.light .ct-bb3bde{color:#859900}.light .ct-bb9880{color:#859900}.light .ct-aa9449{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_1km9a_17 _footer_1km9a_17"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2022) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/blockchain/common-typescript-examples/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1668077933858},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1668077965476}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.3f7b35f7.js" crossorigin></script><script type="module" src="/nuxt/default.3efe0e50.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.5273d5e9.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.a85363a3.js" crossorigin></script><script type="module" src="/nuxt/content.5fd37643.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.8dc0391c.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.d35fcc47.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.807194e1.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.0ad2746e.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.7b20310c.js" crossorigin></script><script type="module" src="/nuxt/ProseA.88b49963.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.ea13e808.js" crossorigin></script><script type="module" src="/nuxt/ProseP.2fa928c9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.9ecb8376.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b3f809f0.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.20d882b9.js" crossorigin></script></body>
|
|
</html> |