feat: open qr code btn if wallet connect app selector reloads

src/example/components/AccountSelector.tsx

@@ -9,6 +9,7 @@ import {
 import MetaMaskIcon from "./MetaMaskIcon";
 import ReefIcon from "../../ui-kit/components/assets/ReefIcon";
 import ReefSign from "../../ui-kit/components/assets/ReefSign";
+import { WalletConnectLogo } from "../../ui-kit/components/assets/WalletConnect";
 
 const availableExtensions: Extension[] = [
   {
@@ -36,6 +37,14 @@ const availableExtensions: Extension[] = [
     installed: false,
     icon: <ReefSign />,
   },
+ {
+    name: "reef-wallet-connect",
+    displayName: "Mobile App",
+    link: "https://x.com/Reef_Chain/status/1775160377703064053",
+    selected: false,
+    installed: false,
+    icon: <WalletConnectLogo />
+},
 ];
 
 const accounts = [

src/ui-kit/components/assets/WalletConnect.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export interface PropsIcon {
+  className?: string;
+}
+
+export const WalletConnectLogo = ({ className }: PropsIcon): JSX.Element => (
+  <svg
+    className={`wc-icon ${className || ""}`}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    height="332"
+    viewBox="0 0 480 332"
+  >
+    <path
+      d="m126.613 93.9842c62.622-61.3123 164.152-61.3123 226.775 0l7.536 7.3788c3.131 3.066 3.131 8.036 0 11.102l-25.781 25.242c-1.566 1.533-4.104 1.533-5.67 0l-10.371-10.154c-43.687-42.7734-114.517-42.7734-158.204 0l-11.107 10.874c-1.565 1.533-4.103 1.533-5.669 0l-25.781-25.242c-3.132-3.066-3.132-8.036 0-11.102zm280.093 52.2038 22.946 22.465c3.131 3.066 3.131 8.036 0 11.102l-103.463 101.301c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896c-.783-.767-2.052-.767-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0l-103.4657-101.302c-3.1311-3.066-3.1311-8.036 0-11.102l22.9456-22.466c3.1311-3.065 8.2077-3.065 11.3388 0l73.4333 71.897c.782.767 2.051.767 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897c.783.767 2.052.767 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z"
+      fill="#3396ff"
+    />
+  </svg>
+);

src/ui-kit/components/organisms/AccountSelector/AccountSelector.tsx

@@ -7,6 +7,7 @@ import {
   faChevronUp,
   faCircleInfo,
   faGlobe,
+  faQrcode,
   faWarning,
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
@@ -82,6 +83,7 @@ export interface Props {
   onUpdateMetadata?: (network: Network) => any;
   onStartAccountCreation?: () => Promise<AccountCreationData>;
   onConfirmAccountCreation?: (seed: string, name: string) => any;
+  handleWalletConnect?:()=>Promise<void>;
   className?: string;
 }
 
@@ -106,6 +108,7 @@ function AccountSelector({
   onUpdateMetadata,
   onStartAccountCreation,
   onConfirmAccountCreation,
+  handleWalletConnect,
   className,
 }: Props): JSX.Element {
   const wrapper = useRef(null);
@@ -645,6 +648,10 @@ function AccountSelector({
                             className="uik-account-selector__wallet-link"
                           >{selectedExtension.displayName}</a>
                           <span>{strings.install_wallet.split("{LINK}")[1]}</span>
+                          {selectedExtension.name==="reef-wallet-connect" && handleWalletConnect?
+                          <div className="uik-account-selector__wallet-connect-btn">
+                            <Button text="Open QR Code" onClick={handleWalletConnect} icon={faQrcode} fill/>
+                            </div>:""}
                         </div>
                       )}
                     </>

src/ui-kit/styles/account-selector.scss

@@ -331,6 +331,13 @@
             color: var(--primary);
             text-decoration: none;          
           }
+          .uik-account-selector__wallet-connect-btn {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;   
+            margin-top: 1rem;      
+          }
         }
       }
     }