{"id":2539,"date":"2022-12-19T12:38:33","date_gmt":"2022-12-19T11:38:33","guid":{"rendered":"https:\/\/clone.nextrope.com\/?p=2539"},"modified":"2024-04-09T10:50:49","modified_gmt":"2024-04-09T08:50:49","slug":"integracja-portfela-metamask-w-aplikacji-react","status":"publish","type":"post","link":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/","title":{"rendered":"Integracja portfela MetaMask w aplikacji React"},"content":{"rendered":"<h3 class=\"wp-block-heading\" id=\"htoc-wprowadzenie\">Wprowadzenie<\/h3>\n\n\n\n<p>W wi\u0119kszo\u015bci zdecentralizowanych aplikacji portfele kryptograficzne s\u0105 wymagane aby u\u017cytkownicy mogli dokonywa\u0107 w nich interakcji z blockchain. Aby to by\u0142o mo\u017cliwe developerzy zajmuj\u0105cy si\u0119 implementacj\u0105 warstwy frontend musz\u0105 dokona\u0107 integracji z aplikacjami portfelowymi u\u017cytkownik\u00f3w. Poni\u017cszy artyku\u0142 po\u015bwi\u0119cony jest developerem zajmuj\u0105cym si\u0119 tworzeniem interfejs\u00f3w u\u017cytkownika z pomoc\u0105 <a href=\"https:\/\/reactjs.org\/\">biblioteki React<\/a>. Jest to poradnik krok po kroku jak dokona\u0107 integracji aplikacji reactowej z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych porteli jakim jest <a href=\"https:\/\/metamask.io\/\">MetaMask<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-ht-block-toc  is-style-outline htoc htoc--position-wide toc-list-style-plain\" data-htoc-state=\"expanded\"><span class=\"htoc__title\"><span class=\"ht_toc_title\">Spis tre\u015bci:<\/span><span class=\"htoc__toggle\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\"><g fill=\"#444\"><path d=\"M15 7H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1z\"><\/path><path d=\"M15 1H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1zM15 13H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1z\"><\/path><\/g><\/svg><\/span><\/span><div class=\"htoc__itemswrap\"><ul class=\"ht_toc_list\"><li class=\"\"><a href=\"#htoc-wprowadzenie\">Wprowadzenie<\/a><\/li><li class=\"\"><a href=\"#htoc-podstawowa-aplikacja-w-react\">Podstawowa aplikacja w React<\/a><\/li><li class=\"\"><a href=\"#htoc-biblioteka-wagmi\">Biblioteka Wagmi<\/a><\/li><li class=\"\"><a href=\"#htoc-pod-czenie-portfela-metamask\">Pod\u0142\u0105czenie portfela MetaMask<\/a><\/li><li class=\"\"><a href=\"#htoc-wy-wietlanie-informacji-o-pod-czonym-portfelu\">Wy\u015bwietlanie informacji o pod\u0142\u0105czonym portfelu<\/a><\/li><li class=\"\"><a href=\"#htoc-podsumowanie\">Podsumowanie<\/a><\/li><\/ul><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-podstawowa-aplikacja-w-react\">Podstawowa aplikacja w React<\/h3>\n\n\n\n<p>Kod \u017ar\u00f3d\u0142owy aplikacji napisanej na potrzeby tego tutariala znajduje si\u0119 <a href=\"https:\/\/codesandbox.io\/s\/react-wagmi-metamask-rq4gjs\">pod tym linkiem<\/a>. Do stworzenia aplikacji wykorzysta\u0142em nast\u0119puj\u0105ce biblioteki:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/reactjs.org\/\">React<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mui.com\/\">Material-ui<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wagmi.sh\/\">Wagmi<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.ethers.io\/v5\/\">Ethers<\/a><\/li>\n<\/ul>\n\n\n\n<p>Do pracy z tym poradnikiem mo\u017cna wykorzysta\u0107 aplikacj\u0119 zamieszczon\u0105 pod linkiem wy\u017cej, b\u0105d\u017a samodzielnie skonfigurowa\u0107 aplikacj\u0119 w React z pomoc\u0105 np. <a href=\"https:\/\/create-react-app.dev\/\">create-react-app<\/a> lub <a href=\"https:\/\/vitejs.dev\/guide\/\">vite<\/a>.<\/p>\n\n\n\n<p>Gdy nasza aplikacja jest ju\u017c skonfigurowana, nale\u017cy upewni\u0107 si\u0119 \u017ce mamy zainstalowane wszystkie niezb\u0119dne zale\u017cno\u015bci, aby tego dokona\u0107 nale\u017cy wykona\u0107 komend\u0119<\/p>\n\n\n\n<p><strong>npm install wagmi ethers<\/strong><\/p>\n\n\n\n<p>Do przygotowania aplikacji skorzysta\u0142em r\u00f3wniez bliblioteki komponent\u00f3w o nazwie Material-ui, je\u015bli r\u00f3wnie\u017c chcesz z niej skorzysta\u0107 zainstaluj nast\u0119puj\u0105ce paczki komend\u0105:<\/p>\n\n\n\n<p><strong>npm install @mui\/material @emotion\/react @emotion\/styled<\/strong><\/p>\n\n\n\n<p>Po uko\u0144czonej konfiguracji i zainstalowaniu wszystkich niezb\u0119dnych zale\u017cno\u015bci mo\u017cemy przej\u015b\u0107 do kolejnego punktu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-biblioteka-wagmi\">Biblioteka Wagmi<\/h3>\n\n\n\n<p>Do integracji z aplikacj\u0105 portfelow\u0105 MetaMask wykorzystamy dedykowan\u0105 bibliotek\u0119 do React o nazwie <a href=\"https:\/\/wagmi.sh\/\">wagmi<\/a> zawieraj\u0105c\u0105 poka\u017an\u0105 liczb\u0119 hook\u00f3w oraz funkcji potrzebnych w codziennej pracy przy interakcjach z blockchain w aplikacjach frontendowych.<\/p>\n\n\n\n<p>Pierwszym krokiem b\u0119dzie konfiguracja biblioteki, aby tego dokona\u0107 nale\u017cy opakowa\u0107 nasz\u0105 aplikacj\u0119 w komponent <strong>WagmiConfig <\/strong>przekazuj\u0105c zmienn\u0105 <strong>client <\/strong>z nasz\u0105 konfiguracj\u0105:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { WagmiConfig, createClient } from \"wagmi\";\nimport { getDefaultProvider } from \"ethers\";\n \nimport { Home } from \".\/pages\";\nimport \".\/styles.css\";\n \nconst client = createClient({\n autoConnect: true,\n provider: getDefaultProvider()\n});\n \nexport default function App() {\n return (\n   &lt;WagmiConfig client={client}&gt;\n     &lt;Home \/&gt;\n   &lt;\/WagmiConfig&gt;\n );\n}<\/code><\/pre>\n\n\n\n<p>Wszystkie dost\u0119pne opcje konfiguracyjne znajdziejsz pod tym linkiem w <a href=\"https:\/\/wagmi.sh\/react\/clien\">oficjalnej dokumentacji wagmi<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-1024x576.jpg\" alt=\"\" class=\"wp-image-2545\" srcset=\"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-1024x576.jpg 1024w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-300x169.jpg 300w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-768x432.jpg 768w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-1536x864.jpg 1536w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-18x10.jpg 18w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-450x253.jpg 450w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-600x338.jpg 600w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand-900x506.jpg 900w, https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-pod-czenie-portfela-metamask\">Pod\u0142\u0105czenie portfela MetaMask<\/h3>\n\n\n\n<p>Po uko\u0144czonej konfiguracji bliblioteki <strong>wagmi <\/strong>mo\u017cemy przej\u015b\u0107 do tworzenia komponentu odpowiedzialnego za po\u0142\u0105czenie z naszym portfelem. W implementacji pomocne b\u0119d\u0105 hooki dost\u0119pne w blibliotece.<\/p>\n\n\n\n<p>Aby uzyska\u0107 dost\u0119p do funkcji, kt\u00f3ra umo\u017cliwi nam wykonanie requestu o pod\u0142\u0105czenie portfela nale\u017cy skorzysta\u0107 z hooka <strong>useConnect()<\/strong>. Aby wskaza\u0107, \u017ce portfelem, z kt\u00f3rym chcemy si\u0119 po\u0142\u0105czoy\u0107 jest MetaMask, w obiekcie konfiguracyjnym do hooka pod kluczem <strong>connecter<\/strong> nale\u017cy przekaza\u0107 utworzon\u0105 instancj\u0119 klasy <strong>InjectedConnector<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useConnect } from \"wagmi\";\nimport { InjectedConnector } from \"wagmi\/dist\/connectors\/injected\";\n \n ...\n \n const { connect } = useConnect({\n   connector: new InjectedConnector()\n });\n \n ...<\/code><\/pre>\n\n\n\n<p>Hook zwraca nam funkcj\u0119 <strong>connect, <\/strong>kt\u00f3r\u0105 mo\u017cemy wywo\u0142a\u0107 np. po klikni\u0119ciu przycisku.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> ...\n \n&lt;Button onClick={() =&gt; connect()}&gt;Connect&lt;\/Button&gt;\n \n ...<\/code><\/pre>\n\n\n\n<p>Aby otrzyma\u0107 informacje o pod\u0142\u0105czonym portfelu b\u0105d\u017a stanie jego pod\u0142\u0105czenia, mo\u017cna skorzysta\u0107 z hooka <strong>useAccount()<\/strong>, kt\u00f3ry zwraca nam m.in. takie informacje jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>adres pod\u0142\u0105czonego portfela<\/li>\n\n\n\n<li>to czy akcj\u0105 pod\u0142\u0105czania portfela jest w trakcie<\/li>\n\n\n\n<li>Czy aktualnie w aplikacji portfel u\u017cytkownika jest pod\u0142\u0105czony<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>...\n \n const { address, isConnected, isConnecting } = useAccount();\n \n ...<\/code><\/pre>\n\n\n\n<p>Je\u015bli u\u017cytkownikowi naszej aplikacji uda\u0142o si\u0119 pod\u0142\u0105czy\u0107 portfel nale\u017cy umo\u017cliwi\u0107 mu r\u00f3wnie\u017c jego od\u0142\u0105czenie, do tego nale\u017cy skorzysta\u0107 z funkcji <strong>disconnect <\/strong>do kt\u00f3rej mo\u017cemy si\u0119 dosta\u0107 z pomoc\u0105 hooka <strong>useDisconnect()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> ...\n \n const { disconnect } = useDisconnect();\n \n ...<\/code><\/pre>\n\n\n\n<p>Z pomoc\u0105 tych trzech prostych hook\u00f3w jeste\u015bmy w stanie obs\u0142u\u017cy\u0107 pod\u0142\u0105cznie portfela. Pe\u0142ny kod \u017ar\u00f3d\u0142owy komponentu obs\u0142uguj\u0105cego pod\u0142\u0105czanie <a href=\"https:\/\/codesandbox.io\/s\/react-wagmi-metamask-rq4gjs\">z przyk\u0142adowej aplikacji<\/a>j:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useConnect, useDisconnect, useAccount } from \"wagmi\";\nimport { InjectedConnector } from \"wagmi\/dist\/connectors\/injected\";\nimport { Card, Button, Heading } from \"..\/..\/components\";\nimport Typography from \"@mui\/material\/Typography\";\nimport { WalletInfo } from \".\/WalletInfo\";\n \nexport const WalletConnect = () =&gt; {\n const { isConnected, isConnecting } = useAccount();\n \n const { connect } = useConnect({\n   connector: new InjectedConnector()\n });\n \n const { disconnect } = useDisconnect();\n \n return (\n   &lt;Card&gt;\n     &lt;Heading sx={{ mb: 2 }}&gt;\n       {isConnected ? \"Your connected wallet:\" : \"Connect your MetaMask\"}\n     &lt;\/Heading&gt;\n \n     {isConnecting &amp;&amp; &lt;Typography&gt;Connecting...&lt;\/Typography&gt;}\n \n     {isConnected ? (\n       &lt;&gt;\n         &lt;WalletInfo \/&gt;\n         &lt;Button sx={{ mt: 2 }} onClick={() =&gt; disconnect()}&gt;\n           Disconnect\n         &lt;\/Button&gt;\n       &lt;\/&gt;\n     ) : (\n       &lt;Button\n         disabled={isConnecting}\n         sx={{ mt: 2 }}\n         onClick={() =&gt; connect()}\n       &gt;\n         Connect\n       &lt;\/Button&gt;\n     )}\n   &lt;\/Card&gt;\n );\n};<\/code><\/pre>\n\n\n\n<p>Na powy\u017cszym przyk\u0142adzie znajduje si\u0119 komponent <strong>&lt;WalletInfo \/&gt;, <\/strong>kt\u00f3ry pos\u0142u\u017cy nam do wy\u015bwietlenia informacji o pod\u0142\u0105czonym portfelu, jego utworzeniem zajmiemy si\u0119 w kolejnym kroku<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-wy-wietlanie-informacji-o-pod-czonym-portfelu\">Wy\u015bwietlanie informacji o pod\u0142\u0105czonym portfelu<\/h3>\n\n\n\n<p>Kolejnym krokiem b\u0119dzie wy\u015bwietlenie u\u017cytkownikowi informacji o pod\u0142\u0105czonym portfelu takich jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adres portfela<\/li>\n\n\n\n<li>Aktualny balans ETH na portfelu<\/li>\n<\/ul>\n\n\n\n<p>W tym celu przygotujemy dwa proste komponenty <strong>&lt;WalletAddress\/&gt; <\/strong>oraz <strong>&lt;WalletBalance\/&gt;, <\/strong>kt\u00f3re nast\u0119pnie umie\u015bcimy w komponencie <strong>&lt;WalletInfo\/&gt;:<\/strong><\/p>\n\n\n\n<p><strong>Adres aktualnie pod\u0142\u0105czonego portfela<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { WalletAddress } from &quot;.\/WalletAddress&quot;;\nimport { WalletBalance } from &quot;.\/WalletBalance&quot;;\n \nexport const WalletInfo = () =&gt; {\n return (\n   &lt;div&gt;\n     &lt;walletaddress \/&gt;\n     &lt;walletbalance \/&gt;\n   &lt;\/div&gt;\n );\n};<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useAccount } from &quot;wagmi&quot;;\nimport Typography from &quot;@mui\/material\/Typography&quot;;\n \nexport const WalletAddress = () =&gt; {\n const { address } = useAccount();\n return (\n   &lt;typography&gt;\n     &lt;strong&gt;Address: &lt;\/strong&gt;\n     {address}\n   &lt;\/typography&gt;\n );\n};<\/code><\/pre>\n\n\n\n<p>W celu wy\u015bwietlenia pod\u0142\u0105czonego portfela skorzystamy z wcze\u015bniej wspomnianego hooka <strong>useAccount()<\/strong>, kt\u00f3ry zwraca nam zmienn\u0105 <strong>address. <\/strong>Implementacja prostego komponentu do wy\u015bwietlenia adresu wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useAccount } from &quot;wagmi&quot;;\nimport Typography from &quot;@mui\/material\/Typography&quot;;\n \nexport const WalletAddress = () =&gt; {\n const { address } = useAccount();\n return (\n   &lt;typography&gt;\n     &lt;strong&gt;Address: &lt;\/strong&gt;\n     {address}\n   &lt;\/typography&gt;\n );\n};<\/code><\/pre>\n\n\n\n<p><strong>Balans aktualnie pod\u0142\u0105czonego portfela<\/strong><\/p>\n\n\n\n<p>Biblioteka <strong>wagmi <\/strong>posiada r\u00f3wnie\u017c hooka <strong>useBalance()<\/strong>, kt\u00f3ry znacznie u\u0142atwi nam proces pobierania aktualnego balansu portfela. Proces pobierania tej warto\u015bci z blockchain jest asynchroniczny, wi\u0119c hook ten zwraca na m.in. takie informacje w zmiennych jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>isLoading &#8211; czy pobieranie balansu jest w trakcie<\/li>\n\n\n\n<li>isFetched &#8211; czy balans portfela zosta\u0142 pobrany<\/li>\n\n\n\n<li>isError &#8211; czy podczas pobierania danych wyst\u0105pi\u0142 b\u0142\u0105d<\/li>\n\n\n\n<li>data &#8211; obiekt zawieraj\u0105cy takie pola jak:\n<ul class=\"wp-block-list\">\n<li>value &#8211; balans u\u017cytkownika w jednostach WEI<\/li>\n\n\n\n<li>formatted &#8211; balans u\u017cytkownika sformatowany do jednostek ETH<\/li>\n\n\n\n<li>symbol &#8211; Symbol aktywa dla kt\u00f3rego zosta\u0142 pobrany balans<\/li>\n\n\n\n<li>decimals &#8211; Liczba miejsc po przecinku jakie mo\u017ce posiada\u0107 liczba opisuj\u0105ca ilo\u015b\u0107 danego aktywa<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>W celu lepszego zrozumienia czym jest jednostka <strong>WEI, ETH <\/strong>b\u0105d\u017a parametr <strong>decimals <\/strong>zach\u0119cam do zapoznania si\u0119 z tymi artyku\u0142ami:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.gemini.com\/cryptopedia\/satoshi-value-gwei-to-ether-to-wei-converter-eth-gwei\">Crypto Denominations Explained: BTC &amp; Satoshis; ETH &amp; Gwei<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/@nuuneoi\/knows-token-decimals-when-1-million-tokens-does-not-always-mean-there-is-only-1-million-tokens-d89c1a8c27ee\">Knows \u201cToken Decimals\u201d: When 1 million tokens does not always mean there is only 1 million tokens in total.<\/a><\/li>\n<\/ul>\n\n\n\n<p>Aby wskaza\u0107, dla jakiego portfela chcemy pobra\u0107 balans \u015brodk\u00f3w, przy wywo\u0142aniu hooka musimy przekaza\u0107 adres tego portfela jako parametr w nast\u0119puj\u0105cy spos\u00f3b, aby to zrobi\u0107 mo\u017cemy skorzysta\u0107 ponownie z hooka <strong>useAccount() <\/strong>z poprzedniego kroku:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> ...\n \n const { address } = useAccount();\n const { isLoading, isFetched, isError, data } = useBalance({ address });\n \n ...<\/code><\/pre>\n\n\n\n<p>Dzi\u0119ki tym informacjom jeste\u015bmy w stanie zaimplementowa\u0107 ca\u0142y komponent z obs\u0142ug\u0105 procesu \u0142adowania danych:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useAccount, useBalance } from &quot;wagmi&quot;;\nimport Typography from &quot;@mui\/material\/Typography&quot;;\nimport Skeleton from &quot;@mui\/material\/Skeleton&quot;;\n \nexport const WalletBalance = () =&gt; {\n const { address } = useAccount();\n const { isLoading, isFetched, isError, data } = useBalance({ address });\n \n return (\n   &lt;typography&gt;\n     {isLoading &amp;&amp; &lt;skeleton width=&quot;{200}&quot; \/&gt;}\n     {isFetched &amp;&amp; (\n       &lt;&gt;\n         &lt;strong&gt;Balance: &lt;\/strong&gt;\n         {data?.formatted} {data?.symbol}\n       &lt;\/&gt;\n     )}\n     {isError &amp;&amp; &quot;Fetching balance failed!&quot;}\n   &lt;\/typography&gt;\n );\n};<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-podsumowanie\">Podsumowanie<\/h3>\n\n\n\n<p>Przedstawiona aplikacja to tylko przyk\u0142ad, w produkcyjnych aplikacjach developerzy cz\u0119sto musz\u0105 si\u0119 mierzy\u0107 z integracj\u0105 wielu aplikacji portfelowych, wspieraniem po\u0142\u0105czenia na wielu <a href=\"https:\/\/clone.nextrope.com\/pl\/rozwoj-blockchain\/\">sieciach blockchain<\/a> oraz interakcjami pod\u0142\u0105czonych portfeli z smart kontraktami. Wszystkie te funkcjonalno\u015bci oraz znacznie wi\u0119cej wspiera biblioteka <strong>wagmi <\/strong>zaprezentowana w tym turorialu. Dlatego te\u017c zach\u0119cam do przestudiowania <a href=\"https:\/\/wagmi.sh\/\">dokumentacji tej biblioteki<\/a> w celu zapoznania si\u0119, jakie mo\u017cliwo\u015bci oferuje.<\/p>","protected":false},"excerpt":{"rendered":"<p>Wprowadzenie W wi\u0119kszo\u015bci zdecentralizowanych aplikacji portfele kryptograficzne s\u0105 wymagane aby u\u017cytkownicy mogli dokonywa\u0107 w nich interakcji z blockchain. Aby to by\u0142o mo\u017cliwe developerzy zajmuj\u0105cy si\u0119 implementacj\u0105 warstwy frontend musz\u0105 dokona\u0107 integracji z aplikacjami portfelowymi u\u017cytkownik\u00f3w. Poni\u017cszy artyku\u0142 po\u015bwi\u0119cony jest developerem zajmuj\u0105cym si\u0119 tworzeniem interfejs\u00f3w u\u017cytkownika z pomoc\u0105 biblioteki React. Jest to poradnik krok po kroku [&hellip;]<\/p>","protected":false},"author":16,"featured_media":2545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"iawp_total_views":0,"footnotes":""},"categories":[1353],"tags":[],"class_list":["post-2539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriale"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Integracja portfela MetaMask w aplikacji React - Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services<\/title>\n<meta name=\"description\" content=\"Integracja portfela MetaMask w aplikacji React: poradnik krok po kroku jak dokona\u0107 integracji w aplikacji React z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych portfeli jakim jest MetaMask.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integracja portfela MetaMask w aplikacji React - Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services\" \/>\n<meta property=\"og:description\" content=\"Integracja portfela MetaMask w aplikacji React: poradnik krok po kroku jak dokona\u0107 integracji w aplikacji React z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych portfeli jakim jest MetaMask.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/weknowtheropes\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-19T11:38:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-09T08:50:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paulina Lewandowska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paulina Lewandowska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/\"},\"author\":{\"name\":\"Paulina Lewandowska\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#\\\/schema\\\/person\\\/9e092eb5882f3c64bff1c90187bc7edd\"},\"headline\":\"Integracja portfela MetaMask w aplikacji React\",\"datePublished\":\"2022-12-19T11:38:33+00:00\",\"dateModified\":\"2024-04-09T08:50:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/\"},\"wordCount\":975,\"publisher\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/clone.nextrope.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg\",\"articleSection\":[\"Tutoriale\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/\",\"url\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/\",\"name\":\"Integracja portfela MetaMask w aplikacji React - Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/clone.nextrope.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg\",\"datePublished\":\"2022-12-19T11:38:33+00:00\",\"dateModified\":\"2024-04-09T08:50:49+00:00\",\"description\":\"Integracja portfela MetaMask w aplikacji React: poradnik krok po kroku jak dokona\u0107 integracji w aplikacji React z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych portfeli jakim jest MetaMask.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/clone.nextrope.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg\",\"contentUrl\":\"https:\\\/\\\/clone.nextrope.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/integracja-portfela-metamask-w-aplikacji-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/wsparcie-konsultacje-technologie-web3-blockchain-nextrope\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integracja portfela MetaMask w aplikacji React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/\",\"name\":\"Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services\",\"description\":\"Fintech Software House\",\"publisher\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#organization\",\"name\":\"Nextrope\",\"url\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/clone.nextrope.com\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/logo-dark.png\",\"contentUrl\":\"https:\\\/\\\/clone.nextrope.com\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/logo-dark.png\",\"width\":180,\"height\":40,\"caption\":\"Nextrope\"},\"image\":{\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/weknowtheropes\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/nextrope\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/#\\\/schema\\\/person\\\/9e092eb5882f3c64bff1c90187bc7edd\",\"name\":\"Paulina Lewandowska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/36a25208a624321c409516a1c2dc6a3e6501f015e1360e7769e49b6a87d5617e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/36a25208a624321c409516a1c2dc6a3e6501f015e1360e7769e49b6a87d5617e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/36a25208a624321c409516a1c2dc6a3e6501f015e1360e7769e49b6a87d5617e?s=96&d=mm&r=g\",\"caption\":\"Paulina Lewandowska\"},\"url\":\"https:\\\/\\\/clone.nextrope.com\\\/pl\\\/author\\\/p-lewandowska\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integracja portfela MetaMask w aplikacji React - Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services","description":"Integracja portfela MetaMask w aplikacji React: poradnik krok po kroku jak dokona\u0107 integracji w aplikacji React z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych portfeli jakim jest MetaMask.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/","og_locale":"pl_PL","og_type":"article","og_title":"Integracja portfela MetaMask w aplikacji React - Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services","og_description":"Integracja portfela MetaMask w aplikacji React: poradnik krok po kroku jak dokona\u0107 integracji w aplikacji React z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych portfeli jakim jest MetaMask.","og_url":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/","og_site_name":"Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services","article_publisher":"https:\/\/www.facebook.com\/weknowtheropes\/","article_published_time":"2022-12-19T11:38:33+00:00","article_modified_time":"2024-04-09T08:50:49+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg","type":"image\/jpeg"}],"author":"Paulina Lewandowska","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Paulina Lewandowska","Szacowany czas czytania":"6 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#article","isPartOf":{"@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/"},"author":{"name":"Paulina Lewandowska","@id":"https:\/\/clone.nextrope.com\/pl\/#\/schema\/person\/9e092eb5882f3c64bff1c90187bc7edd"},"headline":"Integracja portfela MetaMask w aplikacji React","datePublished":"2022-12-19T11:38:33+00:00","dateModified":"2024-04-09T08:50:49+00:00","mainEntityOfPage":{"@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/"},"wordCount":975,"publisher":{"@id":"https:\/\/clone.nextrope.com\/pl\/#organization"},"image":{"@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#primaryimage"},"thumbnailUrl":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg","articleSection":["Tutoriale"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/","url":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/","name":"Integracja portfela MetaMask w aplikacji React - Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services","isPartOf":{"@id":"https:\/\/clone.nextrope.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#primaryimage"},"image":{"@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#primaryimage"},"thumbnailUrl":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg","datePublished":"2022-12-19T11:38:33+00:00","dateModified":"2024-04-09T08:50:49+00:00","description":"Integracja portfela MetaMask w aplikacji React: poradnik krok po kroku jak dokona\u0107 integracji w aplikacji React z wtyczk\u0105 do przegl\u0105darki obecnie jednego z najbardziej popularnych portfeli jakim jest MetaMask.","breadcrumb":{"@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#primaryimage","url":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg","contentUrl":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2022\/12\/Kopia-How-to-set-up-a-development-environment-for-Algorand.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/clone.nextrope.com\/pl\/integracja-portfela-metamask-w-aplikacji-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/clone.nextrope.com\/pl\/wsparcie-konsultacje-technologie-web3-blockchain-nextrope\/"},{"@type":"ListItem","position":2,"name":"Integracja portfela MetaMask w aplikacji React"}]},{"@type":"WebSite","@id":"https:\/\/clone.nextrope.com\/pl\/#website","url":"https:\/\/clone.nextrope.com\/pl\/","name":"Nextrope - Your Trusted Partner for Blockchain Development and Advisory Services","description":"Fintech Software House","publisher":{"@id":"https:\/\/clone.nextrope.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/clone.nextrope.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/clone.nextrope.com\/pl\/#organization","name":"Nextrope","url":"https:\/\/clone.nextrope.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/clone.nextrope.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2020\/07\/logo-dark.png","contentUrl":"https:\/\/clone.nextrope.com\/wp-content\/uploads\/2020\/07\/logo-dark.png","width":180,"height":40,"caption":"Nextrope"},"image":{"@id":"https:\/\/clone.nextrope.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/weknowtheropes\/","https:\/\/www.linkedin.com\/company\/nextrope"]},{"@type":"Person","@id":"https:\/\/clone.nextrope.com\/pl\/#\/schema\/person\/9e092eb5882f3c64bff1c90187bc7edd","name":"Paulina Lewandowska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/secure.gravatar.com\/avatar\/36a25208a624321c409516a1c2dc6a3e6501f015e1360e7769e49b6a87d5617e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/36a25208a624321c409516a1c2dc6a3e6501f015e1360e7769e49b6a87d5617e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/36a25208a624321c409516a1c2dc6a3e6501f015e1360e7769e49b6a87d5617e?s=96&d=mm&r=g","caption":"Paulina Lewandowska"},"url":"https:\/\/clone.nextrope.com\/pl\/author\/p-lewandowska\/"}]}},"_links":{"self":[{"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/posts\/2539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/comments?post=2539"}],"version-history":[{"count":7,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/posts\/2539\/revisions"}],"predecessor-version":[{"id":2553,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/posts\/2539\/revisions\/2553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/media\/2545"}],"wp:attachment":[{"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/media?parent=2539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/categories?post=2539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clone.nextrope.com\/pl\/wp-json\/wp\/v2\/tags?post=2539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}