From 0d754d323f3d5c5bc999a95bad1f2cb6944480a1 Mon Sep 17 00:00:00 2001 From: IsaccoSordo Date: Mon, 9 Sep 2024 11:53:09 +0200 Subject: [PATCH] fix: onClose --- .../beacon-ui/src/components/alert/index.tsx | 1 + .../src/components/bug-report-form/index.tsx | 3 +- .../beacon-ui/src/components/info/index.tsx | 4 +- .../beacon-ui/src/components/loader/index.tsx | 4 +- .../src/components/pair-other/pair-other.tsx | 4 +- .../beacon-ui/src/components/qr/index.tsx | 86 +++++++++---------- .../src/components/top-wallets/index.tsx | 4 +- .../beacon-ui/src/components/wallet/index.tsx | 4 +- .../src/components/wallets/index.tsx | 4 +- .../alert/components/pairing-alert/index.tsx | 10 +-- packages/beacon-ui/src/ui/alert/index.tsx | 6 +- 11 files changed, 62 insertions(+), 68 deletions(-) diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx index c926627d4..435ade10b 100644 --- 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 = (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 index 59ed33543..9aa8106a4 100644 --- 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 index 66ea4c77a..3d8ac7289 100644 --- 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 = (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 index 5e549171e..3a498012b 100644 --- a/packages/beacon-ui/src/components/loader/index.tsx +++ b/packages/beacon-ui/src/components/loader/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./styles.css"; +import "./styles.css"; interface LoaderProps {} @@ -7,5 +7,5 @@ const Loader: React.FC = () => { return
; }; -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 index 007e7592c..bcb6e7145 100644 --- 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 = (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 index 698d7bca2..983022939 100644 --- a/packages/beacon-ui/src/components/qr/index.tsx +++ b/packages/beacon-ui/src/components/qr/index.tsx @@ -1,50 +1,48 @@ -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 = (props: QRProps) => { - const [copied, setCopied] = useState(false); - const [qrSVG, setQrSVG] = useState(""); + const [copied, setCopied] = useState(false) + const [qrSVG, setQrSVG] = useState('') 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 (
= (props: QRProps) => { 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 = (props: QRProps) => { {props.isMobile && ( {`Scan QR code with a ${ - props.isWalletConnect ? "WalletConnect" : "Beacon" + props.isWalletConnect ? 'WalletConnect' : 'Beacon' }-compatible wallet.`} {props.onClickLearnMore && ( @@ -82,7 +80,7 @@ const QR: React.FC = (props: QRProps) => { {!props.isMobile && props.onClickLearnMore && ( @@ -92,13 +90,10 @@ const QR: React.FC = (props: QRProps) => {
-
+
{copied ? (
= (props: QRProps) => { viewBox="0 0 512 512" height="1em" width="1em" - style={{ overflow: "visible" }} + style={{ overflow: 'visible' }} > @@ -123,7 +118,7 @@ const QR: React.FC = (props: QRProps) => { viewBox="0 0 512 512" height="1em" width="1em" - style={{ overflow: "visible" }} + style={{ overflow: 'visible' }} > @@ -132,8 +127,7 @@ const QR: React.FC = (props: QRProps) => { )}
- ); -}; + ) +} -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 index 944718000..be7197760 100644 --- 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 = (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 index d4ca305ff..3afd5cf1e 100644 --- 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 = (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 index ec1d838e4..6366f1760 100644 --- 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 = (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 index 47aefd3e9..56a41286c 100644 --- 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 = (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 = (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 = (props) => { return ( = (props) => { : p2pPayload if (!syncCode.length || !wallet) { - onCloseHandler() + onClose() return } @@ -336,7 +336,7 @@ const PairingAlert: React.FC = (props) => { } } > - {areMetricsEnabled && } + {areMetricsEnabled && } {!areMetricsEnabled && ( <> () @@ -36,10 +36,10 @@ const AlertRoot = (_props: any) => { return ( <> {isAlertVisible && ( - closeAlert()} + onClose={() => closeAlert()} content={} /> )}