Block explorer button

Author: skibitsky

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/AccountView/AccountView.uss

@@ -3,7 +3,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
     margin-top: -20px;
 }
 
@@ -40,4 +40,24 @@
     -unity-text-align: middle-center;
     color: var(--wui-color-fg-200);
     font-size: var(--wui-font-size-paragraph);
-}
+}
+
+#account-explorer-button-container {
+    margin-top: 12px;
+}
+
+#account-view__explorer-button-text {
+    margin: 0 6 0 6;
+    padding: 0;
+    -unity-text-align: middle-center;
+}
+
+#account-view__explorer-button-icon-left {
+    --unity-image: resource('WalletConnect/Web3Modal/Icons/icon_medium_compass');
+}
+
+#account-view__explorer-button-icon-right {
+    width: 8px;
+    height: 8px;
+    --unity-image: resource('WalletConnect/Web3Modal/Icons/icon_bold_externallink');
+}

Packages/com.walletconnect.web3modal/Resources/WalletConnect/Web3Modal/Views/AccountView/AccountView.uxml

@@ -9,6 +9,14 @@
             <ui:Label name="account-view__profile-balance-value"/>
             <ui:Label name="account-view__profile-balance-symbol"/>
         </ui:VisualElement>
+        <ui:VisualElement name="account-explorer-button-container">
+            <WalletConnect.UI.Button name="account-view__explorer-button" size="Small" variant="Shade">
+                <ui:Image name="account-view__explorer-button-icon-left"/>
+                <ui:Label name="account-view__explorer-button-text"
+                          text="&lt;font-weight=600&gt;Block Explorer&lt;/font-weight&gt;" class="text-small"/>
+                <ui:Image name="account-view__explorer-button-icon-right"/>
+            </WalletConnect.UI.Button>
+        </ui:VisualElement>
     </ui:VisualElement>
     <ui:VisualElement name="account-view__buttons"/>
 </ui:UXML>

Packages/com.walletconnect.web3modal/Runtime/Presenters/AccountPresenter.cs

@@ -1,3 +1,4 @@
+using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using UnityEngine;
@@ -33,6 +34,8 @@ public AccountPresenter(RouterController router, VisualElement parent) : base(ro
             };
             parent.Add(View);
 
+            View.ExplorerButton.Clicked += OnBlockExplorer;
+
             CreateButtons(View.Buttons);
 
             Web3Modal.AccountController.PropertyChanged += AccountPropertyChangedHandler;
@@ -160,6 +163,14 @@ private void OnNetwork()
             Router.OpenView(ViewType.NetworkSearch);
         }
 
+        private void OnBlockExplorer()
+        {
+            var chain = Web3Modal.NetworkController.ActiveChain;
+            var blockExplorerUrl = chain.BlockExplorer.url;
+            var address = Web3Modal.AccountController.Address;
+            Application.OpenURL($"{blockExplorerUrl}/address/{address}");
+        }
+
         private void ItemsSetEnabled(bool value)
         {
             foreach (var item in _items)

Packages/com.walletconnect.web3modal/Runtime/Views/AccountView/AccountView.cs

@@ -12,13 +12,15 @@ public class AccountView : VisualElement
         public static readonly string NameProfileAvatarImage = $"{Name}__profile-avatar-image";
         public static readonly string NameProfileBalanceValue = $"{Name}__profile-balance-value";
         public static readonly string NameProfileBalanceSymbol = $"{Name}__profile-balance-symbol";
+        public static readonly string NameExplorerButton = $"{Name}__explorer-button";
         public static readonly string NameButtons = $"{Name}__buttons";
 
         public VisualElement Profile { get; }
         public Label ProfileAddress { get; }
         public Image ProfileAvatarImage { get; }
         public Label ProfileBalanceValue { get; }
         public Label ProfileBalanceSymbol { get; }
+        public Button ExplorerButton { get; }
         public VisualElement Buttons { get; }
 
 
@@ -38,6 +40,7 @@ public AccountView()
             ProfileAvatarImage = Profile.Q<Image>(NameProfileAvatarImage);
             ProfileBalanceValue = Profile.Q<Label>(NameProfileBalanceValue);
             ProfileBalanceSymbol = Profile.Q<Label>(NameProfileBalanceSymbol);
+            ExplorerButton = this.Q<Button>(NameExplorerButton);
             Buttons = this.Q<VisualElement>(NameButtons);
         }