multiversx · arhtudormorar · Jul 25, 2025 · Jul 23, 2025 · Jul 23, 2025 · Jul 23, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.0.20](https://github.com/multiversx/mx-sdk-dapp-ui/pull/175)] - 2025-07-25
+
+- [Added browser detection](https://github.com/multiversx/mx-sdk-dapp-ui/pull/174)
+
 ## [[0.0.19](https://github.com/multiversx/mx-sdk-dapp-ui/pull/173)] - 2025-07-23
 
 - [Added getElementByDataTestIdDeep utility function for tests](https://github.com/multiversx/mx-sdk-dapp-ui/pull/172)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

diff --git a/src/assets/icons/arc-extension-provider-icon/arc-extension-provider-icon.scss b/src/assets/icons/arc-extension-provider-icon/arc-extension-provider-icon.scss
@@ -0,0 +1,7 @@
+:host {
+  @apply mvx:flex;
+
+  .arc-extension-provider-icon {
+    fill: none;
+  }
+}
diff --git a/src/assets/icons/arc-extension-provider-icon/arc-extension-provider-icon.tsx b/src/assets/icons/arc-extension-provider-icon/arc-extension-provider-icon.tsx
@@ -0,0 +1,211 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'mvx-arc-extension-provider-icon',
+  styleUrl: 'arc-extension-provider-icon.scss',
+  shadow: true,
+})
+export class ArcExtensionProviderIcon {
+  @Prop() class?: string;
+  @Prop() width?: number;
+  @Prop() height?: number;
+
+  render() {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 46 44"
+        width={this.width ?? '46'}
+        height={this.height ?? '44'}
+        class={{ 'arc-extension-provider-icon': true, [this.class]: Boolean(this.class) }}
+      >
+        <mask
+          id="mask0_10402_51288"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="3"
+          width="40"
+          height="40"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M40 15.4576C40 14.9828 40.0002 14.5079 39.9973 14.033C39.9949 13.6329 39.9903 13.233 39.9794 12.8331C39.9559 11.9616 39.9045 11.0826 39.7495 10.2208C39.5923 9.34663 39.3356 8.53299 38.9311 7.73867C38.5335 6.95795 38.014 6.24353 37.3942 5.62417C36.7745 5.0048 36.0599 4.48567 35.2789 4.08825C34.4838 3.68364 33.6693 3.42704 32.7941 3.2699C31.9322 3.11515 31.053 3.06383 30.1815 3.04029C29.7813 3.02947 29.3812 3.0249 28.9809 3.02243C28.5058 3.01951 28.0307 3.01976 27.5555 3.01976L22.0387 3H17.9125L12.4933 3.01976C12.0172 3.01976 11.5411 3.01951 11.0651 3.02243C10.664 3.0249 10.2631 3.02947 9.86221 3.04029C8.98867 3.06383 8.10746 3.11519 7.24354 3.27014C6.36719 3.42723 5.55146 3.68374 4.75526 4.08805C3.97259 4.48553 3.25643 5.0047 2.63547 5.62417C2.0146 6.24348 1.49416 6.95775 1.09577 7.73833C0.69014 8.53304 0.432958 9.34716 0.275386 10.2219C0.120242 11.0833 0.0688344 11.962 0.0451938 12.8331C0.0344172 13.233 0.0297571 13.633 0.0273299 14.033C0.0244173 14.5079 0 15.0979 0 15.5728L0.00014563 20.9169L0 25.0873L0.02466 30.545C0.02466 31.0205 0.0244658 31.4961 0.0273299 31.9716C0.0297571 32.3722 0.0344172 32.7727 0.0452424 33.1731C0.0688344 34.0457 0.120339 34.926 0.275629 35.7889C0.433152 36.6643 0.690286 37.4791 1.09557 38.2744C1.49402 39.0563 2.01455 39.7716 2.63547 40.3919C3.25638 41.0121 3.97235 41.5319 4.75487 41.9299C5.55156 42.335 6.36767 42.592 7.24456 42.7493C8.1081 42.9043 8.98901 42.9557 9.86221 42.9793C10.2631 42.9901 10.664 42.9947 11.0651 42.9971C11.5412 43 12.0172 42.9999 12.4933 42.9999L17.9615 43H22.0979L27.5555 42.9998C28.0307 42.9998 28.5058 43 28.9809 42.9971C29.3812 42.9947 29.7813 42.9901 30.1815 42.9793C31.0533 42.9557 31.9328 42.9042 32.7951 42.7491C33.6698 42.5918 34.4839 42.335 35.2786 41.9301C36.0597 41.5321 36.7745 41.0122 37.3942 40.3919C38.0139 39.7717 38.5333 39.0565 38.931 38.2748C39.3357 37.479 39.5924 36.6639 39.7497 35.7879C39.9046 34.9253 39.9559 34.0454 39.9795 33.1731C39.9903 32.7726 39.9949 32.3721 39.9973 31.9716C40.0002 31.4961 40 31.0205 40 30.545C40 30.545 39.9997 25.1837 39.9997 25.0873V20.9126C39.9997 20.8414 40 15.4576 40 15.4576Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask0_10402_51288)">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M40 15.4576C40 14.9828 40.0002 14.5079 39.9973 14.033C39.9949 13.6329 39.9903 13.233 39.9794 12.8331C39.9559 11.9616 39.9045 11.0826 39.7495 10.2208C39.5923 9.34663 39.3356 8.53299 38.9311 7.73867C38.5335 6.95795 38.014 6.24353 37.3942 5.62417C36.7745 5.0048 36.0599 4.48567 35.2789 4.08825C34.4838 3.68364 33.6693 3.42704 32.7941 3.2699C31.9322 3.11515 31.053 3.06383 30.1815 3.04029C29.7813 3.02947 29.3812 3.0249 28.9809 3.02243C28.5058 3.01951 28.0307 3.01976 27.5555 3.01976L22.0387 3H17.9125L12.4933 3.01976C12.0172 3.01976 11.5411 3.01951 11.0651 3.02243C10.664 3.0249 10.2631 3.02947 9.86221 3.04029C8.98867 3.06383 8.10746 3.11519 7.24354 3.27014C6.36719 3.42723 5.55146 3.68374 4.75526 4.08805C3.97259 4.48553 3.25643 5.0047 2.63547 5.62417C2.0146 6.24348 1.49416 6.95775 1.09577 7.73833C0.69014 8.53304 0.432958 9.34716 0.275386 10.2219C0.120242 11.0833 0.0688344 11.962 0.0451938 12.8331C0.0344172 13.233 0.0297571 13.633 0.0273299 14.033C0.0244173 14.5079 0 15.0979 0 15.5728L0.00014563 20.9169L0 25.0873L0.02466 30.545C0.02466 31.0205 0.0244658 31.4961 0.0273299 31.9716C0.0297571 32.3722 0.0344172 32.7727 0.0452424 33.1731C0.0688344 34.0457 0.120339 34.926 0.275629 35.7889C0.433152 36.6643 0.690286 37.4791 1.09557 38.2744C1.49402 39.0563 2.01455 39.7716 2.63547 40.3919C3.25638 41.0121 3.97235 41.5319 4.75487 41.9299C5.55156 42.335 6.36767 42.592 7.24456 42.7493C8.1081 42.9043 8.98901 42.9557 9.86221 42.9793C10.2631 42.9901 10.664 42.9947 11.0651 42.9971C11.5412 43 12.0172 42.9999 12.4933 42.9999L17.9615 43H22.0979L27.5555 42.9998C28.0307 42.9998 28.5058 43 28.9809 42.9971C29.3812 42.9947 29.7813 42.9901 30.1815 42.9793C31.0533 42.9557 31.9328 42.9042 32.7951 42.7491C33.6698 42.5918 34.4839 42.335 35.2786 41.9301C36.0597 41.5321 36.7745 41.0122 37.3942 40.3919C38.0139 39.7717 38.5333 39.0565 38.931 38.2748C39.3357 37.479 39.5924 36.6639 39.7497 35.7879C39.9046 34.9253 39.9559 34.0454 39.9795 33.1731C39.9903 32.7726 39.9949 32.3721 39.9973 31.9716C40.0002 31.4961 40 31.0205 40 30.545C40 30.545 39.9997 25.1837 39.9997 25.0873V20.9126C39.9997 20.8414 40 15.4576 40 15.4576Z"
+            fill="#143736"
+          />
+          <rect
+            opacity="0.4"
+            x="0.169903"
+            y="9.33494"
+            width="39.6602"
+            height="39.6602"
+            rx="8.76214"
+            fill="url(#paint0_linear_10402_51288)"
+            stroke="url(#paint1_linear_10402_51288)"
+            stroke-width="0.339806"
+          />
+          <rect
+            x="0.169903"
+            y="15.5"
+            width="39.6602"
+            height="39.6602"
+            rx="8.76214"
+            fill="url(#paint2_linear_10402_51288)"
+            stroke="url(#paint3_linear_10402_51288)"
+            stroke-width="0.339806"
+          />
+          <g filter="url(#filter0_dddd_10402_51288)">
+            <path
+              d="M13.1387 25.2337L18.8354 22.1782L17.8776 20.3301L12.6614 22.4483C12.527 22.5029 12.3781 22.5029 12.2438 22.4483L7.02607 20.3301L6.06836 22.1782L11.765 25.2337L6.06836 28.2878L7.02607 30.1359L12.2423 28.0177C12.3767 27.9631 12.5256 27.9631 12.6599 28.0177L17.8762 30.1359L18.8339 28.2878L13.1373 25.2323L13.1387 25.2337Z"
+              fill="#000F0E"
+            />
+          </g>
+        </g>
+        <g clip-path="url(#clip0_10402_51288)">
+          <path
+            d="M37.9035 0.000767123C38.788 0.02621 39.5868 0.545425 39.9696 1.34892L41.4886 4.54425L41.513 4.48249C41.5733 4.32323 41.6228 4.16005 41.661 3.99409L41.6822 3.89513C41.9382 2.61532 43.1821 1.78701 44.4643 2.04023C44.7688 2.10106 45.0584 2.2213 45.3165 2.39407C45.5745 2.56684 45.796 2.78877 45.9683 3.04716C46.1405 3.30555 46.2602 3.59536 46.3204 3.90001C46.3807 4.20467 46.3803 4.5182 46.3193 4.82271C45.9781 6.52649 45.0986 8.10773 43.8371 9.36044L43.7972 9.39924L44.3297 10.5189C44.9477 11.8185 44.3074 13.3894 42.9616 13.8302L42.9009 13.8492L42.8546 13.8632C42.6486 13.9212 42.4358 13.9507 42.2219 13.951C41.7747 13.951 41.3366 13.8243 40.9585 13.5855C40.5804 13.3468 40.2777 13.0058 40.0854 12.602L39.6744 11.7378L39.5707 11.7635C39.015 11.8948 38.4515 11.9676 37.8876 11.9788L37.7339 11.9803C37.1913 11.9803 36.6397 11.9172 36.0886 11.7949L35.98 11.7696L35.5851 12.5998C35.3188 13.1596 34.8433 13.5924 34.261 13.805L34.1907 13.8294C33.8874 13.9294 33.5669 13.9669 33.2487 13.9396C32.9305 13.9123 32.6212 13.8208 32.3393 13.6706C31.2168 13.0739 30.7887 11.677 31.3364 10.5231L31.8268 9.49206L31.7839 9.45051C31.1117 8.7874 30.5788 8.0337 30.2253 7.22349L30.1782 7.1127L30.1714 7.09474C29.6849 5.88499 30.2692 4.50794 31.4782 4.01845C32.4265 3.63457 33.4777 3.91022 34.1241 4.63074L34.1363 4.64468L35.699 1.35742C35.8843 0.961468 36.1761 0.62486 36.5417 0.385248C36.9073 0.145635 37.3324 0.0124679 37.7694 0.000639269L37.8356 0L37.9035 0.000767123Z"
+            fill="white"
+          />
+          <path
+            d="M35.5691 10.8703L36.9688 7.92534C35.8997 7.69827 34.824 7.03694 34.2156 6.23242L32.752 9.30955C33.5653 9.99951 34.5418 10.5419 35.5691 10.8703Z"
+            fill="#1A007F"
+          />
+          <path
+            d="M41.4101 6.14453C40.7069 7.00646 39.7304 7.64573 38.6855 7.89479L40.0809 10.831C41.0993 10.487 42.0516 9.93156 42.8738 9.21961L41.4101 6.14453Z"
+            fill="#4E000A"
+          />
+          <path
+            d="M32.7509 9.30963L32.0191 10.8483C31.6465 11.6308 31.9265 12.5941 32.6936 13.0019C33.507 13.4339 34.5078 13.0967 34.9001 12.2744L35.5681 10.8703C34.5366 10.5378 33.5798 10.0078 32.7509 9.30963Z"
+            fill="#1A007F"
+          />
+          <path
+            d="M44.3154 2.78518C44.1085 2.74374 43.8954 2.74348 43.6883 2.78442C43.4812 2.82536 43.2842 2.9067 43.1086 3.02378C42.933 3.14087 42.7821 3.29141 42.6647 3.46681C42.5473 3.6422 42.4655 3.83902 42.4242 4.04601C42.2698 4.81761 41.9083 5.53615 41.4102 6.14678L42.8717 9.22403C44.2207 8.05353 45.217 6.45983 45.5742 4.67646C45.7483 3.80354 45.184 2.95708 44.3154 2.78518Z"
+            fill="#FF9396"
+          />
+          <path
+            d="M38.6845 7.89477C38.3715 7.9697 38.0519 8.00939 37.7322 8.00939C37.4832 8.00939 37.2253 7.98075 36.9674 7.92565C35.8982 7.69858 34.8225 7.03726 34.2142 6.23274C34.062 6.03213 33.9386 5.82271 33.8526 5.60887C33.5198 4.78664 32.5829 4.38991 31.7607 4.72054C30.9385 5.05341 30.5418 5.99026 30.8724 6.81243C31.2493 7.74704 31.915 8.60455 32.7505 9.30992C33.5786 10.008 34.5347 10.5381 35.5654 10.8706C36.273 11.0976 37.007 11.2233 37.7301 11.2233C38.5324 11.2233 39.3238 11.0844 40.0777 10.8309L38.6845 7.89477Z"
+            fill="#002DC8"
+          />
+          <path
+            d="M43.6425 10.8416L42.871 9.21929L41.4095 6.14421L41.4074 6.14645C41.4074 6.14645 41.4074 6.14421 41.4095 6.14421L39.2846 1.6738C39.1542 1.39954 38.9487 1.16784 38.692 1.00556C38.4352 0.843271 38.1378 0.757034 37.8341 0.756836C37.2147 0.756836 36.6504 1.11393 36.3837 1.67387L34.2168 6.23243C34.8252 7.03695 35.9009 7.69828 36.97 7.92535L37.671 6.45285C37.7371 6.31394 37.9355 6.31394 38.0017 6.45285L38.6872 7.89447H38.6916H38.6871L40.0825 10.8306L40.7681 12.2723C40.8984 12.547 41.1042 12.7791 41.3614 12.9415C41.6185 13.1039 41.9166 13.1898 42.2207 13.1893C42.364 13.1893 42.5073 13.1695 42.6484 13.1298C43.6161 12.863 44.0746 11.7498 43.6425 10.8416Z"
+            fill="#FF536A"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_dddd_10402_51288"
+            x="-4.9996"
+            y="11.398"
+            width="34.9035"
+            height="31.9416"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="0.970874" />
+            <feGaussianBlur stdDeviation="1.26214" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.137255 0 0 0 0 0.968627 0 0 0 0 0.866667 0 0 0 0.1 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10402_51288" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="2.13592" />
+            <feGaussianBlur stdDeviation="5.53398" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.137255 0 0 0 0 0.968627 0 0 0 0 0.866667 0 0 0 0.3 0" />
+            <feBlend mode="normal" in2="effect1_dropShadow_10402_51288" result="effect2_dropShadow_10402_51288" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="0.291262" />
+            <feGaussianBlur stdDeviation="0.533981" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
+            <feBlend mode="normal" in2="effect2_dropShadow_10402_51288" result="effect3_dropShadow_10402_51288" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="0.194175" />
+            <feGaussianBlur stdDeviation="0.0970874" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend mode="normal" in2="effect3_dropShadow_10402_51288" result="effect4_dropShadow_10402_51288" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_10402_51288" result="shape" />
+          </filter>
+          <linearGradient
+            id="paint0_linear_10402_51288"
+            x1="20.2306"
+            y1="18.1846"
+            x2="20.2306"
+            y2="38.6748"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#00FFE0" />
+            <stop offset="1" stop-color="#00FFE0" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_10402_51288"
+            x1="6.49826"
+            y1="29.7502"
+            x2="42.1154"
+            y2="26.4436"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#00FFE0" />
+            <stop offset="1" stop-color="#4CFFE9" />
+          </linearGradient>
+          <linearGradient
+            id="paint2_linear_10402_51288"
+            x1="20.2306"
+            y1="24.3497"
+            x2="20.2306"
+            y2="44.8399"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#00FFE0" />
+            <stop offset="1" stop-color="#00FFE0" />
+          </linearGradient>
+          <linearGradient
+            id="paint3_linear_10402_51288"
+            x1="6.49826"
+            y1="35.9152"
+            x2="42.1154"
+            y2="32.6087"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#00FFE0" />
+            <stop offset="1" stop-color="#4CFFE9" />
+          </linearGradient>
+          <clipPath id="clip0_10402_51288">
+            <rect width="16.3653" height="14" fill="white" transform="translate(30)" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+}
diff --git a/src/assets/icons/brave-extension-provider-icon/brave-extension-provider-icon.scss b/src/assets/icons/brave-extension-provider-icon/brave-extension-provider-icon.scss
@@ -0,0 +1,7 @@
+:host {
+  @apply mvx:flex;
+
+  .brave-extension-provider-icon {
+    fill: none;
+  }
+}