fix: onClose

airgap-it · Jan 30, 2025 · 56afab2 · 56afab2
1 parent d3a30b1
commit 56afab2
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 108 deletions.
diff --git a/packages/beacon-ui/src/components/info/index.tsx b/packages/beacon-ui/src/components/info/index.tsx
@@ -1,49 +1,27 @@
-import React from "react";
-import "./styles.css";
-import { QRCodeIcon } from "../icons";
-
-interface InfoProps {
-  title: string;
-  description?: string;
-  data?: string;
-  icon?: any;
-  border?: boolean;
-  iconBadge?: boolean;
-  bigIcon?: boolean;
-  buttons?: {
-    label: string;
-    type: "primary" | "secondary";
-    onClick: () => void;
-  }[];
-  downloadLink?: { url: string; label: string };
-  onShowQRCodeClick?: (() => void) | (() => Promise<void>);
-}
+import React from 'react'
+import './styles.css'
+import { QRCodeIcon } from '../icons'
+import { InfoProps } from '../../ui/common'
 
 const Info: React.FC<InfoProps> = (props: InfoProps) => {
   return (
-    <div className={`info-wrapper ${props.border ? "info-border" : ""}`}>
+    <div className={`info-wrapper ${props.border ? 'info-border' : ''}`}>
       {props.icon && (
         <div
-          className={`info-icon ${props.iconBadge ? "info-badge" : ""}`}
-          style={props.bigIcon ? { fontSize: "3.4em" } : {}}
+          className={`info-icon ${props.iconBadge ? 'info-badge' : ''}`}
+          style={props.bigIcon ? { fontSize: '3.4em' } : {}}
         >
           {props.icon}
         </div>
       )}
       <h3 className="info-title">{props.title}</h3>
-      {props.description && (
-        <div className="info-description">{props.description}</div>
-      )}
+      {props.description && <div className="info-description">{props.description}</div>}
       {props.data && <pre className="info-data">{props.data}</pre>}
       <div className="info-buttons">
         {props.buttons?.map((button, index) => (
           <button
             key={index}
-            className={
-              button.type !== "secondary"
-                ? "info-button"
-                : "info-button-secondary"
-            }
+            className={button.type !== 'secondary' ? 'info-button' : 'info-button-secondary'}
             onClick={button.onClick}
           >
             {button.label}
@@ -61,8 +39,7 @@ const Info: React.FC<InfoProps> = (props: InfoProps) => {
         </button>
       )}
     </div>
-  );
-};
-
+  )
+}
 
-export default Info;
+export default Info
diff --git a/packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx b/packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx
diff --git a/packages/beacon-ui/src/ui/alert/components/info-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/info-alert/index.tsx
@@ -1,50 +1,54 @@
+import { ConfigurableAlertProps } from '../../../common'
 import Info from '../../../../components/info'
+import Alert from '../../../../components/alert'
 
-const InfoAlert = ({ title, body, data }: any) => {
+const InfoAlert = ({ title, body, data, open, onClose }: ConfigurableAlertProps) => {
   return (
-    <Info
-      bigIcon
-      icon={
-        <svg
-          fill="currentColor"
-          strokeWidth="0"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          height="1em"
-          width="1em"
-          style={{ overflow: 'hidden' }}
-          color="#494949"
-        >
-          <path
-            d="M85.57 446.25h340.86a32 32 0 0 0 28.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0 0 28.17 47.17Z"
-            fill="none"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="32px"
-          ></path>
-          <path
-            d="m250.26 195.39 5.74 122 5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 5.95Z"
-            fill="none"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="32px"
-          ></path>
-          <path d="M256 397.25a20 20 0 1 1 20-20 20 20 0 0 1-20 20Z"></path>
-        </svg>
-      }
-      title={title || 'No title'}
-      description={body || 'No description'}
-      data={data}
-      buttons={[
-        {
-          label: 'Close',
-          type: 'primary',
-          onClick: () => console.log('todo')
+    <Alert open={open} onCloseClick={onClose}>
+      <Info
+        bigIcon
+        icon={
+          <svg
+            fill="currentColor"
+            strokeWidth="0"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            height="1em"
+            width="1em"
+            style={{ overflow: 'hidden' }}
+            color="#494949"
+          >
+            <path
+              d="M85.57 446.25h340.86a32 32 0 0 0 28.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0 0 28.17 47.17Z"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="32px"
+            ></path>
+            <path
+              d="m250.26 195.39 5.74 122 5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 5.95Z"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="32px"
+            ></path>
+            <path d="M256 397.25a20 20 0 1 1 20-20 20 20 0 0 1-20 20Z"></path>
+          </svg>
         }
-      ]}
-    />
+        title={title || 'No title'}
+        description={body || 'No description'}
+        data={data}
+        buttons={[
+          {
+            label: 'Close',
+            type: 'primary',
+            onClick: onClose
+          }
+        ]}
+      />
+    </Alert>
   )
 }
 export default InfoAlert
diff --git a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
@@ -1,4 +1,4 @@
-import Alert from 'src/components/alert'
+import Alert from '../../../../components/alert'
 import useConnect from '../../hooks/useConnect'
 import BugReportForm from 'src/components/bug-report-form'
 import Info from 'src/components/info'
@@ -9,9 +9,9 @@ import { isIOS } from 'src/utils/platform'
 import { StorageKey } from '@airgap/beacon-types'
 import QR from 'src/components/qr'
 import useWallets from '../../hooks/useWallets'
+import { ConfigurableAlertProps } from '../../../common'
 
-// todo remove any
-const PairingAlert: React.FC<any> = (props) => {
+const PairingAlert: React.FC<ConfigurableAlertProps> = (props) => {
   const {
     walletConnectSyncCode: wcPayload,
     p2pSyncCode: p2pPayload,
@@ -38,13 +38,7 @@ const PairingAlert: React.FC<any> = (props) => {
     handleUpdateState,
     handleUpdateQRCode,
     handleShowMoreContent
-  ] = useConnect(
-    wcPayload,
-    p2pPayload,
-    postPayload,
-    wallets,
-    props.closeButtonCallback ?? (() => {})
-  )
+  ] = useConnect(wcPayload, p2pPayload, postPayload, wallets, props.onClose)
   const isOnline = navigator.onLine
   const walletList = Array.from(wallets.values())
   const areMetricsEnabled = localStorage

diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import { useEffect, useState } from 'react'
 import { Subject } from '../../utils/subject'
-import { AlertConfig } from '../common'
+import { AlertConfig, ConfigurableAlertProps } from '../common'
 import PairingAlert from './components/pairing-alert'
 import InfoAlert from './components/info-alert'
 
@@ -48,13 +48,26 @@ const AlertRoot = (props: AlertConfig) => {
     }
   }, [isOpen])
 
-  const Alert = props.pairingPayload ? (
-    <PairingAlert {...props} onClose={closeAlert} open={isOpen} />
-  ) : (
-    <InfoAlert {...props} />
-  )
+  const onCloseHandler = () => {
+    closeAlert()
+    props.closeButtonCallback && props.closeButtonCallback()
+  }
 
-  return <>{mount && Alert}</>
+  const filteredProps: ConfigurableAlertProps = {
+    ...props,
+    onClose: onCloseHandler,
+    open: isOpen
+  }
+
+  const Alert = () => {
+    return props.pairingPayload ? (
+      <PairingAlert {...filteredProps} />
+    ) : (
+      <InfoAlert {...filteredProps} />
+    )
+  }
+
+  return <>{mount && <Alert />}</>
 }
 
 export { openAlert, closeAlert, closeAlerts }
diff --git a/packages/beacon-ui/src/ui/common.ts b/packages/beacon-ui/src/ui/common.ts
@@ -15,18 +15,18 @@ export interface AlertConfig {
   data?: string
   timer?: number
   buttons?: AlertButton[]
-  pairingPayload?: {
-    p2pSyncCode: string
-    postmessageSyncCode: string
-    walletConnectSyncCode: string
-    networkType: NetworkType
-  }
+  pairingPayload?: PairingPayload
   closeButtonCallback?: () => void
   disclaimerText?: string
   analytics?: AnalyticsInterface
   featuredWallets?: string[]
 }
 
+export interface ConfigurableAlertProps extends Omit<AlertConfig, 'closeButtonCallback'> {
+  open: boolean
+  onClose: () => void
+}
+
 export interface AlertProps {
   open: boolean
   showMore?: boolean
@@ -37,13 +37,37 @@ export interface AlertProps {
   onBackClick?: () => void
 }
 
+export interface PairingPayload {
+  p2pSyncCode: string
+  postmessageSyncCode: string
+  walletConnectSyncCode: string
+  networkType: NetworkType
+}
+
 export interface PairOtherProps {
   walletList: MergedWallet[]
   p2pPayload: string
   wcPayload: string
   onClickLearnMore: () => void
 }
 
+export interface InfoProps {
+  title: string
+  description?: string
+  data?: string
+  icon?: any
+  border?: boolean
+  iconBadge?: boolean
+  bigIcon?: boolean
+  buttons?: {
+    label: string
+    type: 'primary' | 'secondary'
+    onClick: () => void
+  }[]
+  downloadLink?: { url: string; label: string }
+  onShowQRCodeClick?: (() => void) | (() => Promise<void>)
+}
+
 // TOAST
 
 export interface ToastAction {