fix: add qr button

airgap-it · Jan 18, 2024 · 14b5f84 · 14b5f84
1 parent 1c1dad0
commit 14b5f84
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/packages/beacon-ui/src/components/icons/index.tsx b/packages/beacon-ui/src/components/icons/index.tsx
@@ -75,3 +75,11 @@ export function LogoIcon(props: IconProps) {
     </svg>
   )
 }
+
+export function QRCodeIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z" />
+    </svg>
+  )
+}
diff --git a/packages/beacon-ui/src/components/info/index.tsx b/packages/beacon-ui/src/components/info/index.tsx
@@ -1,5 +1,6 @@
 import { Component, For } from 'solid-js'
 import styles from './styles.css'
+import { QRCodeIcon } from '../icons'
 
 interface InfoProps {
   title: string
@@ -11,6 +12,7 @@ interface InfoProps {
   bigIcon?: boolean
   buttons?: { label: string; type: 'primary' | 'secondary'; onClick: () => void }[]
   downloadLink?: { url: string; label: string }
+  onShowQRCodeClick?: (() => void) | (() => Promise<void>)
 }
 
 const Info: Component<InfoProps> = (props: InfoProps) => {
@@ -44,6 +46,14 @@ const Info: Component<InfoProps> = (props: InfoProps) => {
           {props.downloadLink.label}
         </a>
       )}
+      {props.onShowQRCodeClick && (
+        <button
+          id="qr-code-icon"
+          onClick={() => props.onShowQRCodeClick && props.onShowQRCodeClick()}
+        >
+          <QRCodeIcon />
+        </button>
+      )}
     </div>
   )
 }

diff --git a/packages/beacon-ui/src/components/info/styles.css b/packages/beacon-ui/src/components/info/styles.css
@@ -113,6 +113,14 @@
   font-size: smaller
 }
 
+button#qr-code-icon {
+  background-color: transparent;
+  border: none;
+  width: 10%;
+  display: flex;
+  align-self: self-end;
+}
+
 @media only screen and (max-width: 800px) {
   .info-title {
     font-size: 0.9em;

diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -760,8 +760,8 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
                       {isOnline && currentWallet()?.types.includes('web') && (
                         <Info
                           border
-                          title={'Open wallet in a new tab'}
-                          description={`Please connect below to use ${currentWallet()?.name}`}
+                          title={`Connect with ${currentWallet()?.name} Web`}
+                          description={`(It will open the wallet in a new tab)`}
                           buttons={[
                             {
                               label: 'Use Browser',
@@ -776,7 +776,7 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
                           border
                           title={
                             hasExtension()
-                              ? `Use Browser Extension`
+                              ? `Connect with ${currentWallet()?.name} Browser Extension`
                               : `Install ${currentWallet()?.name} Wallet`
                           }
                           description={
@@ -808,7 +808,7 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
                       {!isMobile() && currentWallet()?.types.includes('desktop') && (
                         <Info
                           border
-                          title={`Open Desktop App`}
+                          title={`Connect with ${currentWallet()?.name} Desktop App`}
                           description={`If you don't have the desktop app installed, click below to download it.`}
                           buttons={[
                             {
@@ -839,8 +839,8 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
                       {isMobile() && currentWallet()?.types.includes('ios') && (
                         <Info
                           border
-                          title={'Open wallet in App'}
-                          description={`Please connect below to use ${currentWallet()?.name}`}
+                          title={`Connect with ${currentWallet()?.name} Mobile`}
+                          description={''}
                           buttons={[
                             {
                               label: 'Use App',
@@ -872,6 +872,7 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
                                 }
                               : undefined
                           }
+                          onShowQRCodeClick={() => handleClickWallet(currentWallet()?.id ?? '')}
                         />
                       )}
                     </div>