fix: onClose

airgap-it · Sep 9, 2024 · 0d754d3 · 0d754d3
1 parent 68b8419
commit 0d754d3
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 68 deletions.
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import { CloseIcon, LeftIcon, LogoIcon } from '../icons'
 import Loader from '../loader'
 import { AlertProps } from '../../ui/alert/common'
+import './styles.css'
 
 const Alert: React.FC<AlertProps> = (props: AlertProps) => {
   useEffect(() => {

diff --git a/packages/beacon-ui/src/components/bug-report-form/index.tsx b/packages/beacon-ui/src/components/bug-report-form/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { IndexedDBStorage, Logger, SDK_VERSION } from '@airgap/beacon-core'
 import { StorageKey } from '@airgap/beacon-types'
-import styles from './styles.css'
 import { currentBrowser, currentOS } from '../../utils/platform'
+import './styles.css'
 
 const logger = new Logger('BugReport')
 
@@ -244,5 +244,4 @@ const BugReportForm: React.FC<{ onSubmit: () => void }> = (props) => {
   )
 }
 
-export { styles }
 export default BugReportForm
diff --git a/packages/beacon-ui/src/components/info/index.tsx b/packages/beacon-ui/src/components/info/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./styles.css";
+import "./styles.css";
 import { QRCodeIcon } from "../icons";
 
 interface InfoProps {
@@ -64,5 +64,5 @@ const Info: React.FC<InfoProps> = (props: InfoProps) => {
   );
 };
 
-export { styles };
+
 export default Info;
diff --git a/packages/beacon-ui/src/components/loader/index.tsx b/packages/beacon-ui/src/components/loader/index.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import styles from "./styles.css";
+import "./styles.css";
 
 interface LoaderProps {}
 
 const Loader: React.FC<LoaderProps> = () => {
   return <div className="loader"></div>;
 };
 
-export { styles };
+
 export default Loader;
diff --git a/packages/beacon-ui/src/components/pair-other/pair-other.tsx b/packages/beacon-ui/src/components/pair-other/pair-other.tsx
@@ -5,7 +5,7 @@ import {
   P2PPairingRequest,
   WalletConnectPairingRequest,
 } from "@airgap/beacon-types";
-import styles from "./styles.css";
+import "./styles.css";
 import { Serializer } from "@airgap/beacon-core";
 
 export interface PairOtherProps {
@@ -84,5 +84,5 @@ const PairOther: React.FC<PairOtherProps> = (props: PairOtherProps) => {
   );
 };
 
-export { styles };
+
 export default PairOther;
diff --git a/packages/beacon-ui/src/components/qr/index.tsx b/packages/beacon-ui/src/components/qr/index.tsx
@@ -1,63 +1,61 @@
-import React, { useState, useEffect } from "react";
-import { getTzip10Link } from "../../utils/get-tzip10-link";
-import { getQrData } from "../../utils/qr";
-import styles from "./styles.css";
+import React, { useState, useEffect } from 'react'
+import { getTzip10Link } from '../../utils/get-tzip10-link'
+import { getQrData } from '../../utils/qr'
+import './styles.css'
 
-const COPY_RESET_TIMEOUT = 3000;
+const COPY_RESET_TIMEOUT = 3000
 
 interface QRProps {
-  isWalletConnect: boolean;
-  isMobile: boolean;
-  walletName: string;
-  code: string;
-  onClickLearnMore?: () => void;
-  onClickQrCode?: () => void;
+  isWalletConnect: boolean
+  isMobile: boolean
+  walletName: string
+  code: string
+  onClickLearnMore?: () => void
+  onClickQrCode?: () => void
 }
 
 const QR: React.FC<QRProps> = (props: QRProps) => {
-  const [copied, setCopied] = useState<boolean>(false);
-  const [qrSVG, setQrSVG] = useState<string>("");
+  const [copied, setCopied] = useState<boolean>(false)
+  const [qrSVG, setQrSVG] = useState<string>('')
 
   useEffect(() => {
-    const payload = props.code.startsWith("wc:")
+    const payload = props.code.startsWith('wc:')
       ? props.code
-      : getTzip10Link("tezos://", props.code);
+      : getTzip10Link('tezos://', props.code)
 
-    const svg = props.isMobile
-      ? getQrData(payload, 300, 300)
-      : getQrData(payload, 160, 160);
-    setQrSVG(svg);
-  }, [props.code, props.isMobile]);
+    const svg = props.isMobile ? getQrData(payload, 300, 300) : getQrData(payload, 160, 160)
+    setQrSVG(svg)
+  }, [props.code, props.isMobile])
 
   const handleCopyClipboard = async () => {
     if (props.onClickQrCode) {
-      props.onClickQrCode();
+      props.onClickQrCode()
     }
     try {
-      await navigator.clipboard.writeText(props.code);
+      await navigator.clipboard.writeText(props.code)
       if (!copied) {
-        setCopied(true);
+        setCopied(true)
         setTimeout(() => {
-          setCopied(false);
-        }, COPY_RESET_TIMEOUT);
+          setCopied(false)
+        }, COPY_RESET_TIMEOUT)
       }
     } catch (error) {
-      console.error("Error copying text: ", error);
+      console.error('Error copying text: ', error)
     }
-  };
+  }
 
   return (
     <div
       className="qr-wrapper"
       style={
         props.isMobile
           ? {
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "340px",
-              textAlign: "center",
-              border: "none",
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '340px',
+              textAlign: 'center',
+              border: 'none'
             }
           : {}
       }
@@ -70,7 +68,7 @@ const QR: React.FC<QRProps> = (props: QRProps) => {
         {props.isMobile && (
           <span>
             {`Scan QR code with a ${
-              props.isWalletConnect ? "WalletConnect" : "Beacon"
+              props.isWalletConnect ? 'WalletConnect' : 'Beacon'
             }-compatible wallet.`}
             {props.onClickLearnMore && (
               <span className="qr-more-info" onClick={props.onClickLearnMore}>
@@ -82,7 +80,7 @@ const QR: React.FC<QRProps> = (props: QRProps) => {
 
         {!props.isMobile && props.onClickLearnMore && (
           <span
-            style={{ marginTop: "auto" }}
+            style={{ marginTop: 'auto' }}
             className="qr-more-info"
             onClick={props.onClickLearnMore}
           >
@@ -92,13 +90,10 @@ const QR: React.FC<QRProps> = (props: QRProps) => {
       </div>
       <div
         className="qr-right"
-        style={props.isMobile ? { backgroundColor: "transparent" } : {}}
+        style={props.isMobile ? { backgroundColor: 'transparent' } : {}}
         onClick={handleCopyClipboard}
       >
-        <div
-          dangerouslySetInnerHTML={{ __html: qrSVG }}
-          className="qr-svg-wrapper"
-        />
+        <div dangerouslySetInnerHTML={{ __html: qrSVG }} className="qr-svg-wrapper" />
         {copied ? (
           <div className="qr-copy-wrapper">
             <svg
@@ -108,7 +103,7 @@ const QR: React.FC<QRProps> = (props: QRProps) => {
               viewBox="0 0 512 512"
               height="1em"
               width="1em"
-              style={{ overflow: "visible" }}
+              style={{ overflow: 'visible' }}
             >
               <path d="M243.8 339.8c-10.9 10.9-28.7 10.9-39.6 0l-64-64c-10.9-10.9-10.9-28.7 0-39.6 10.9-10.9 28.7-10.9 39.6 0l44.2 44.2 108.2-108.2c10.9-10.9 28.7-10.9 39.6 0 10.9 10.9 10.9 28.7 0 39.6l-128 128zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256zM256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"></path>
             </svg>
@@ -123,7 +118,7 @@ const QR: React.FC<QRProps> = (props: QRProps) => {
               viewBox="0 0 512 512"
               height="1em"
               width="1em"
-              style={{ overflow: "visible" }}
+              style={{ overflow: 'visible' }}
             >
               <path d="M502.6 70.63 441.35 9.38C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.02 256c.88 35.4 29.58 64 64.88 64h192c35.2 0 64-28.8 64-64V93.25c0-8.48-3.4-16.62-9.4-22.62zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16V64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1v192zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16l.88-255.9c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64L0 448c.002 35.3 28.66 64 64 64h192c35.2 0 64-28.8 64-64v-32h-47.1l-.9 32z"></path>
             </svg>
@@ -132,8 +127,7 @@ const QR: React.FC<QRProps> = (props: QRProps) => {
         )}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export { styles };
-export default QR;
+export default QR
diff --git a/packages/beacon-ui/src/components/top-wallets/index.tsx b/packages/beacon-ui/src/components/top-wallets/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { MergedWallet } from "../../utils/wallets";
 import Wallet from "../wallet";
-import styles from "./styles.css";
+import "./styles.css";
 import { StorageKey } from "@airgap/beacon-types";
 
 interface TopWalletsProps {
@@ -83,5 +83,5 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
   );
 };
 
-export { styles };
+
 export default TopWallets;
diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./styles.css";
+import "./styles.css";
 
 interface WalletProps {
   name: string;
@@ -52,5 +52,5 @@ const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
   );
 };
 
-export { styles };
+
 export default Wallet;
diff --git a/packages/beacon-ui/src/components/wallets/index.tsx b/packages/beacon-ui/src/components/wallets/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { MergedWallet } from "../../utils/wallets";
 import Wallet from "../wallet";
-import styles from "./styles.css";
+import "./styles.css";
 
 interface WalletProps {
   wallets: MergedWallet[];
@@ -35,5 +35,5 @@ const Wallets: React.FC<WalletProps> = (props: WalletProps) => {
   );
 };
 
-export { styles };
+
 export default Wallets;
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
@@ -12,7 +12,7 @@ import useWallets from '../../hooks/useWallets'
 
 // todo remove any
 const PairingAlert: React.FC<any> = (props) => {
-  const { wcPayload, p2pPayload, postPayload, onCloseHandler } = props
+  const { wcPayload, p2pPayload, postPayload, onClose } = props
   const wallets = useWallets()
   const [
     wallet,
@@ -33,7 +33,7 @@ const PairingAlert: React.FC<any> = (props) => {
     handleClickDownloadDesktopApp,
     handleUpdateState,
     handleUpdateQRCode
-  ] = useConnect(wcPayload, p2pPayload, postPayload, wallets, onCloseHandler)
+  ] = useConnect(wcPayload, p2pPayload, postPayload, wallets, onClose)
   const isOnline = navigator.onLine
   const walletList = Array.from(wallets.values())
   const areMetricsEnabled = localStorage
@@ -96,7 +96,7 @@ const PairingAlert: React.FC<any> = (props) => {
   return (
     <Alert
       loading={isLoading}
-      onCloseClick={onCloseHandler}
+      onCloseClick={onClose}
       open={true}
       showMore={showMoreContent}
       content={
@@ -241,7 +241,7 @@ const PairingAlert: React.FC<any> = (props) => {
                         : p2pPayload
 
                       if (!syncCode.length || !wallet) {
-                        onCloseHandler()
+                        onClose()
                         return
                       }
 
@@ -336,7 +336,7 @@ const PairingAlert: React.FC<any> = (props) => {
                   }
             }
           >
-            {areMetricsEnabled && <BugReportForm onSubmit={onCloseHandler} />}
+            {areMetricsEnabled && <BugReportForm onSubmit={onClose} />}
             {!areMetricsEnabled && (
               <>
                 <Info

diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -1,9 +1,9 @@
 import { createRoot } from 'react-dom/client'
-import Alert from '../../components/alert'
 import AlertContent from './components/alert-content'
 import { useEffect, useState } from 'react'
 import { Subject } from '../../utils/subject'
 import { AlertConfig } from './common'
+import PairingAlert from './components/pairing-alert'
 
 let initDone: boolean = false
 const show$ = new Subject<boolean>()
@@ -36,10 +36,10 @@ const AlertRoot = (_props: any) => {
   return (
     <>
       {isAlertVisible && (
-        <Alert
+        <PairingAlert
           open={true}
           loading={false}
-          onCloseClick={() => closeAlert()}
+          onClose={() => closeAlert()}
           content={<AlertContent />}
         />
       )}