The latest articles on DEV Community by Mor GUEYE (@morgueye4). https://dev.to/morgueye4 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F681215%2F9edcda1b-110b-4522-be61-8e736136b078.png https://dev.to/morgueye4 en Mor GUEYE Mon, 09 Aug 2021 03:09:44 +0000 https://dev.to/morgueye4/how-to-use-polkadot-web-identicon-2344 https://dev.to/morgueye4/how-to-use-polkadot-web-identicon-2344 <p>This tutorial shows how to use the <code>polkadot-web-identicon</code>, a generic identity icon that renders Substrate based chains identicons for <code>html/javascript</code> frontend applications.</p> <p>The simplest way to use the component is to download it from <code>npm</code></p> <p>We assume you have <code>npm</code> and <code>node.js</code> installed in your environment.</p> <p>create a folder with a name of your choice for example : <code>pwi</code> (like <code>polkadot-web-identicon</code> 😎)<br> <code>cd</code> into the <code>pwi</code> (or the one you created) folder.</p> <p>Type <code>npm init</code> to create the <code>package.json</code> file that will allow us to download packages from <code>npm</code>.</p> <p>For simplicity sake, type enter for each question and at the end the <code>package.json</code> file should be created.</p> <p>Create an <code>index.html</code> file that will contain the <code>html</code> and javascript code and past the following <code>html</code> snippet.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Testing polkadot-web-identicon<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <p>Now we can install the <code>polkadot-web-identicon</code> package from <code>npm</code> with :</p> <p><code>npm i polkadot-web-identicon</code> After the installation completed we are ready to use the package we just need to do two things:</p> <ul> <li>import the component library code files</li> <li>call the component and use it with our parameters</li> </ul> <p>These are the attributes that we can pass to the <code>polkadot-web-identicon</code> tag</p> <p><code>address</code> : the Substrate blockhain based address to pass as parameter</p> <p><code>theme</code> : the theme we want to display ( polkadot, beachball, jdenticon)</p> <p><code>size</code> : the size we want our identicon to be.</p> <p>Our final structure in the index.html file will look like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Testing polkadot-web-identicon<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;h3&gt;</span>Polkadot icon theme with default size<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;polkadot-web-identicon</span> <span class="na">address=</span><span class="s">"5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"</span> <span class="na">theme=</span><span class="s">"polkadot"</span><span class="nt">&gt;&lt;/polkadot-web-identicon&gt;</span> <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;h3&gt;</span>beachball icon theme with size of 80 <span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;polkadot-web-identicon</span> <span class="na">address=</span><span class="s">"5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"</span> <span class="na">theme=</span><span class="s">"beachball"</span> <span class="na">size=</span><span class="s">"80"</span><span class="nt">&gt;&lt;/polkadot-web-identicon&gt;</span> <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;h3&gt;</span>jdenticon icon theme with size of 120<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;polkadot-web-identicon</span> <span class="na">address=</span><span class="s">"5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"</span> <span class="na">theme=</span><span class="s">"jdenticon"</span> <span class="na">size=</span><span class="s">"120"</span><span class="nt">&gt;&lt;/polkadot-web-identicon&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"node_modules/polkadot-web-identicon/main.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"node_modules/polkadot-web-identicon/polyfills.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"node_modules/polkadot-web-identicon/runtime.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"node_modules/polkadot-web-identicon-vendor/vendor.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <h3> Running the app </h3> <p>you can run <code>npx live-server</code> under the <code>pwi</code> or your project to see the rendered icons</p> polkadot substrate identicon webcomponents Mor GUEYE Mon, 09 Aug 2021 03:09:35 +0000 https://dev.to/morgueye4/how-to-use-polkadot-angular-identicon-4659 https://dev.to/morgueye4/how-to-use-polkadot-angular-identicon-4659 <p>This guides shows how to use the <code>polkadot-angular-identicon</code>, a generic identity icon that can render icons in Angular applications for Substrate based chains.</p> <p>We assume that you have the angular cli installed if not then inslall it by typing</p> <p><code>npm install -g @angular/cli</code>.</p> <p>After the cli installation is done just type <code>ng --version</code> and it will display the Angular cli version For more info please visit this link.</p> <h3> Create an Angular project </h3> <p>To create an angular project type: <code>ng new my-project</code> and the my-project will be created.</p> <p>In our case let's create a project called <code>pai</code> (like polkadot-angular-identicon 😎)</p> <p><code>ng new pai</code> and you will see something like this</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SBs6irYR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv8nvlcvyq25ae8oftoc.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SBs6irYR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv8nvlcvyq25ae8oftoc.png" alt="image"></a></p> <p>install <code>polkadot-angular-identicon</code> npm dependency<br> Open the pai project via your favorite IDE and from IDE's terminal install the component <code>npm i polkadot-angular-identicon</code>.</p> <p>After the package is installed open the <code>app.module.ts</code> file in the project under src and add the <code>PolkadotIdentIconModule</code> into the imports section (this is the section were we import an angular module).</p> <p>The <code>PolkadotIdentIconModule</code> can be also used in any other angular feature module in the imports or exports section.</p> <h3> Usage of the component </h3> <p>Now what we only have to do is to use the identicon in the template component of our linkings for instance in our <code>pai</code> project let's use it in the <code>app.component.html</code> file.</p> <p>Open the <code>app.component.html</code> file and remove it's content and past this line:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;h3&gt;</span>Polkadot icon theme with default size<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;polkadot-angular-identicon</span> <span class="na">address=</span><span class="s">"5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"</span> <span class="na">theme=</span><span class="s">"polkadot"</span><span class="nt">&gt;&lt;/polkadot-angular-identicon&gt;</span> <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;h3&gt;</span>beachball icon theme with size of 80 <span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;polkadot-angular-identicon</span> <span class="na">address=</span><span class="s">"5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"</span> <span class="na">theme=</span><span class="s">"beachball"</span> <span class="na">[size]=</span><span class="s">"80"</span><span class="nt">&gt;&lt;/polkadot-angular-identicon&gt;</span> <span class="nt">&lt;br&gt;</span> <span class="nt">&lt;h3&gt;</span>jdenticon icon theme with size of 120<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;polkadot-angular-identicon</span> <span class="na">address=</span><span class="s">"5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"</span> <span class="na">theme=</span><span class="s">"jdenticon"</span> <span class="na">[size]=</span><span class="s">"120"</span><span class="nt">&gt;&lt;/polkadot-angular-identicon&gt;</span> </code></pre> </div> <p>At this step we are almost done but we need some final touches</p> <p>open the package.json file and add at the following at the end before the closing bracket:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="dl">"</span><span class="s2">browser</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">crypto</span><span class="dl">"</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}</span> </code></pre> </div> <p>open the <code>tsconfig.app.json</code> and add <code>"node"</code> to the <code>types</code> property in <code>compilerOptions</code> section<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="err">...</span><span class="w"> </span><span class="nl">"compilerOptions"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="err">...</span><span class="w"> </span><span class="nl">"types"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"node"</span><span class="p">]</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="err">...</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <p>open <code>tsconfig.json</code> and add at the end of the <code>compilerOptions</code> add the following<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="w"> </span><span class="nl">"paths"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"crypto"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"./node_modules/crypto-browserify"</span><span class="p">],</span><span class="w"> </span><span class="nl">"stream"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"./node_modules/stream-browserify"</span><span class="p">]</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <p>And one last thing open the <code>polyfills.ts</code> file under <code>src</code> and add the snippet below line at the end<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="p">(</span><span class="nb">window</span> <span class="k">as</span> <span class="nx">any</span><span class="p">).</span><span class="nb">global</span> <span class="o">=</span> <span class="nb">window</span><span class="p">;</span> <span class="p">(</span><span class="nb">window</span> <span class="k">as</span> <span class="nx">any</span><span class="p">).</span><span class="nx">Buffer</span> <span class="o">=</span> <span class="p">(</span><span class="nb">window</span> <span class="k">as</span> <span class="nx">any</span><span class="p">).</span><span class="nx">Buffer</span> <span class="o">||</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">buffer</span><span class="dl">'</span><span class="p">).</span><span class="nx">Buffer</span><span class="p">;</span> </code></pre> </div> <p>Run the app<br> To test the app run the command <code>ng serve</code> and open your browser at <code>localhost:4200</code></p> <p>You can also type the command <code>ng serve -o</code> and it will automatically open the app in your default browser.</p> polkadot substrate identicon angular