fix: removed content in favor of children

packages/beacon-ui/src/components/alert/index.tsx

@@ -4,7 +4,7 @@ import { LeftIcon, LogoIcon, CloseIcon } from '../icons'
 // import Loader from '../loader'
 import useIsMobile from 'src/ui/alert/hooks/useIsMobile'
 
-const Alert: React.FC<AlertProps> = (props: AlertProps) => {
+const Alert: React.FC<React.PropsWithChildren<AlertProps>> = (props) => {
   const isMobile = useIsMobile()
 
   return (
@@ -33,7 +33,7 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
           </Button>
         </Grid2>
         <Grid2 container>
-          {props.content}
+          {props.children}
           {!isMobile && (
             <Grid2 container>
               {props.extraContent && <Grid2>---</Grid2>}

packages/beacon-ui/src/components/pair-other/pair-other.tsx

@@ -1,88 +1,55 @@
-import React, { useState, useEffect } from "react";
-import QR from "../qr";
-import { MergedWallet } from "../../utils/wallets";
-import {
-  P2PPairingRequest,
-  WalletConnectPairingRequest,
-} from "@airgap/beacon-types";
+import React, { useState, useEffect } from 'react'
+import QR from '../qr'
 
-import { Serializer } from "@airgap/beacon-core";
-
-export interface PairOtherProps {
-  walletList: MergedWallet[];
-  p2pPayload: Promise<P2PPairingRequest> | undefined;
-  wcPayload: Promise<WalletConnectPairingRequest> | undefined;
-  onClickLearnMore: () => void;
-}
+import { PairOtherProps } from 'src/ui/alert/common'
 
 const PairOther: React.FC<PairOtherProps> = (props: PairOtherProps) => {
-  const [uiState, setUiState] = useState<"selection" | "p2p" | "walletconnect">(
-    "selection"
-  );
-  const [hasBeacon, setHasBeacon] = useState<boolean>(false);
-  const [hasWalletConnect, setHasWalletConnect] = useState<boolean>(false);
-  const [qrData, setQrData] = useState<string>("");
+  const [uiState, setUiState] = useState<'selection' | 'p2p' | 'walletconnect'>('selection')
+  const [hasBeacon, setHasBeacon] = useState<boolean>(false)
+  const [hasWalletConnect, setHasWalletConnect] = useState<boolean>(false)
+  const [qrData, setQrData] = useState<string>('')
 
   useEffect(() => {
-    setUiState("selection");
-    setQrData("");
-    setHasBeacon(!!props.p2pPayload);
-    setHasWalletConnect(!!props.wcPayload);
-  }, [props.p2pPayload, props.wcPayload]);
+    setUiState('selection')
+    setQrData('')
+    setHasBeacon(!!props.p2pPayload)
+    setHasWalletConnect(!!props.wcPayload)
+  }, [props.p2pPayload, props.wcPayload])
 
-  const buttonClickHandler = (state: "p2p" | "walletconnect") => {
-    if (state === "p2p" && props.p2pPayload) {
-      props.p2pPayload.then(async (payload) => {
-        const serializer = new Serializer();
-        const codeQR = await serializer.serialize(payload);
-        setQrData(codeQR);
-      });
-    } else if (state === "walletconnect" && props.wcPayload) {
-      props.wcPayload
-        .then((payload) => {
-          setQrData(payload.uri);
-        })
-        .catch((error) => console.error(error.message));
-    }
-    setUiState(state);
-  };
+  const buttonClickHandler = (state: 'p2p' | 'walletconnect') => {
+    state === 'p2p' ? setQrData(props.p2pPayload) : setQrData(props.wcPayload)
+    setUiState(state)
+  }
 
   return (
     <>
-      {uiState === "selection" && (
+      {uiState === 'selection' && (
         <div>
           <span className="pair-other-info">Select QR Type</span>
           <br />
           {hasBeacon && (
-            <button
-              className="wallets-button"
-              onClick={() => buttonClickHandler("p2p")}
-            >
+            <button className="wallets-button" onClick={() => buttonClickHandler('p2p')}>
               Beacon
             </button>
           )}
           {hasWalletConnect && (
-            <button
-              className="wallets-button"
-              onClick={() => buttonClickHandler("walletconnect")}
-            >
+            <button className="wallets-button" onClick={() => buttonClickHandler('walletconnect')}>
               WalletConnect
             </button>
           )}
         </div>
       )}
-      {uiState !== "selection" && qrData && (
+      {uiState !== 'selection' && qrData && (
         <QR
-          isWalletConnect={uiState === "walletconnect"}
+          isWalletConnect={uiState === 'walletconnect'}
           isMobile={true}
-          walletName={"AirGap"}
+          walletName={'AirGap'}
           code={qrData}
           onClickLearnMore={props.onClickLearnMore}
         />
       )}
     </>
-  );
-};
-
+  )
+}
 
-export default PairOther;
+export default PairOther

packages/beacon-ui/src/components/wallet/index.tsx

@@ -13,7 +13,6 @@ interface WalletProps {
 }
 
 const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
-  console.log(props.name, props.tags)
   return (
     <Grid2 size={6} alignSelf={'baseline'}>
       <Button variant="outlined">

packages/beacon-ui/src/ui/alert/common.ts

@@ -5,6 +5,7 @@ import {
   NetworkType,
   AnalyticsInterface
 } from '@airgap/beacon-types'
+import { MergedWallet } from '../../utils/wallets'
 
 export interface AlertButton {
   text: string
@@ -24,14 +25,13 @@ export interface AlertConfig {
     walletConnectSyncCode: () => Promise<WalletConnectPairingRequest>
     networkType: NetworkType
   }
-  closeButtonCallback?(): void
+  closeButtonCallback?: () => void
   disclaimerText?: string
   analytics?: AnalyticsInterface
   featuredWallets?: string[]
 }
 
 export interface AlertProps {
-  content: any
   open: boolean
   showMore?: boolean
   extraContent?: any
@@ -40,3 +40,10 @@ export interface AlertProps {
   onClickShowMore?: () => void
   onBackClick?: () => void
 }
+
+export interface PairOtherProps {
+  walletList: MergedWallet[]
+  p2pPayload: string
+  wcPayload: string
+  onClickLearnMore: () => void
+}

packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx

@@ -1,7 +1,8 @@
+import { AlertConfig } from '../../common'
 import PairingAlert from '../pairing-alert'
 
-const AlertContent = () => {
-  return <PairingAlert />
+const AlertContent = (props: AlertConfig) => {
+  return <PairingAlert {...props} />
 }
 
 export default AlertContent