From a47bf40e20ba202499d494346ffef3c2c33cd88a Mon Sep 17 00:00:00 2001
From: IsaccoSordo <isacco.sordo@gmail.com>
Date: Tue, 10 Sep 2024 14:32:45 +0200
Subject: [PATCH] fix: removed content in favor of children

---
 .../beacon-ui/src/components/alert/index.tsx  |   4 +-
 .../src/components/pair-other/pair-other.tsx  |  83 +--
 .../beacon-ui/src/components/wallet/index.tsx |   1 -
 packages/beacon-ui/src/ui/alert/common.ts     |  11 +-
 .../alert/components/alert-content/index.tsx  |   5 +-
 .../alert/components/pairing-alert/index.tsx  | 669 +++++++++---------
 packages/beacon-ui/src/ui/alert/index.tsx     |  15 +-
 7 files changed, 388 insertions(+), 400 deletions(-)

diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
index 522e933bc..dced5e239 100644
--- a/packages/beacon-ui/src/components/alert/index.tsx
+++ b/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>}
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 1a7770e2e..f1e632fa3 100644
--- a/packages/beacon-ui/src/components/pair-other/pair-other.tsx
+++ b/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
diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
index 08dca2d3e..259e2b306 100644
--- a/packages/beacon-ui/src/components/wallet/index.tsx
+++ b/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">
diff --git a/packages/beacon-ui/src/ui/alert/common.ts b/packages/beacon-ui/src/ui/alert/common.ts
index a0e0d63df..72b497371 100644
--- a/packages/beacon-ui/src/ui/alert/common.ts
+++ b/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
+}
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
index 78375c3e2..ea7626a22 100644
--- a/packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx
+++ b/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
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 28043a333..23eb3cd13 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
@@ -9,10 +9,16 @@ import { isIOS } from 'src/utils/platform'
 import { StorageKey } from '@airgap/beacon-types'
 import QR from 'src/components/qr'
 import useWallets from '../../hooks/useWallets'
+import { AlertConfig } from '../../common'
+import { useEffect, useState } from 'react'
+import { Serializer } from '@airgap/beacon-core'
 
 // todo remove any
-const PairingAlert: React.FC<any> = (props) => {
-  const { wcPayload, p2pPayload, postPayload, onClose } = props
+const PairingAlert: React.FC<React.PropsWithChildren<AlertConfig>> = (props) => {
+  // const { wcPayload, p2pPayload, postPayload, onClose } = props
+  const [wcPayload, setWcPayload] = useState<string>('')
+  const [p2pPayload, setP2pPayload] = useState<string>('')
+  const [postPayload, setPostPayload] = useState<string>('')
   const wallets = useWallets()
   const [
     wallet,
@@ -34,7 +40,13 @@ const PairingAlert: React.FC<any> = (props) => {
     handleUpdateState,
     handleUpdateQRCode,
     handleShowMoreContent
-  ] = useConnect(wcPayload, p2pPayload, postPayload, wallets, onClose)
+  ] = useConnect(
+    wcPayload,
+    p2pPayload,
+    postPayload,
+    wallets,
+    props.closeButtonCallback ?? (() => {})
+  )
   const isOnline = navigator.onLine
   const walletList = Array.from(wallets.values())
   const areMetricsEnabled = localStorage
@@ -94,228 +106,65 @@ const PairingAlert: React.FC<any> = (props) => {
     )
   }
 
+  useEffect(() => {
+    const serializer = new Serializer()
+    props.pairingPayload
+      ?.p2pSyncCode()
+      .then(async (code) => setP2pPayload(await serializer.serialize(code)))
+      .catch((err) => console.error(err.message))
+    props.pairingPayload
+      ?.walletConnectSyncCode()
+      .then((code) => setWcPayload(code.uri))
+      .catch((err) => console.error(err.message))
+    props.pairingPayload
+      ?.postmessageSyncCode()
+      .then(async (code) => setPostPayload(await serializer.serialize(code)))
+      .catch((err) => console.error(err.message))
+  }, [])
+
   return (
     <Alert
-      {...props}
       loading={isLoading}
-      onCloseClick={onClose}
+      onCloseClick={props.closeButtonCallback ?? (() => {})}
       open={true}
       showMore={showMoreContent}
-      content={
-        <div>
-          {state === 'install' && (
-            <div
-              style={
-                state === 'install' || state === 'qr'
-                  ? {
-                      opacity: 1,
-                      height: 'unset',
-                      overflow: 'unset',
-                      transform: 'scale(1)',
-                      transition: 'all ease 0.3s',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '0.9em'
-                    }
-                  : {
-                      opacity: 0,
-                      height: 0,
-                      overflow: 'hidden',
-                      transform: 'scale(1.1)',
-                      transition: 'all ease 0.3s',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '0.9em'
-                    }
-              }
-            >
-              {isOnline && wallet?.types.includes('web') && (
-                <Info
-                  border
-                  title={`Connect with ${wallet?.name} Web`}
-                  description={`(It will open the wallet in a new tab)`}
-                  buttons={[
-                    {
-                      label: 'Use Browser',
-                      type: 'primary',
-                      onClick: () => handleNewTab(props, wallet)
-                    }
-                  ]}
-                />
-              )}
-              {!isMobile && wallet?.types.includes('extension') && (
-                <Info
-                  border
-                  title={
-                    wallet.firefoxId
-                      ? `Connect with ${wallet?.name} Browser Extension`
-                      : `Install ${wallet?.name} Wallet`
-                  }
-                  description={
-                    wallet.firefoxId
-                      ? `Please connect below to use your ${wallet?.name} Wallet browser extension.`
-                      : `To connect your ${wallet?.name} Wallet, install the browser extension.`
-                  }
-                  buttons={
-                    wallet.firefoxId
-                      ? [
-                          {
-                            label: 'Use Extension',
-                            type: 'primary',
-                            onClick: () => handleClickConnectExtension()
-                          }
-                        ]
-                      : [
-                          {
-                            label: 'Install extension',
-                            type: 'primary',
-                            onClick: () => handleClickInstallExtension()
-                          }
-                        ]
-                  }
-                />
-              )}
-              {!isMobile && wallet?.types.includes('desktop') && (
-                <Info
-                  border
-                  title={`Connect with ${wallet?.name} Desktop App`}
-                  description={`If you don't have the desktop app installed, click below to download it.`}
-                  buttons={[
-                    {
-                      label: 'Open desktop app',
-                      type: 'primary',
-                      onClick: () => handleClickOpenDesktopApp()
-                    },
-                    {
-                      label: 'Download desktop app',
-                      type: 'secondary',
-                      onClick: () => handleClickDownloadDesktopApp()
-                    }
-                  ]}
-                />
-              )}
-              {!isMobile &&
-                (qrCode?.length ?? 0) &&
-                wallet?.types.includes('ios') &&
-                (wallet?.types.length as number) > 1 && <QRCode isMobile={false} />}
-              {!isMobile &&
-                (qrCode?.length ?? 0) &&
-                wallet?.types.includes('ios') &&
-                (wallet?.types.length as number) <= 1 && <QRCode isMobile={true} />}
-              {isMobile &&
-                wallet?.types.includes('ios') &&
-                (!wallet?.supportedInteractionStandards?.includes('wallet_connect') ||
-                isWCWorking ? (
-                  <Info
-                    border
-                    title={`Connect with ${wallet?.name} Mobile`}
-                    description={''}
-                    buttons={[
-                      {
-                        label: 'Use App',
-                        type: 'primary',
-                        onClick: async () => {
-                          if (!wallet) {
-                            return
-                          }
-
-                          handleDeepLinking(
-                            wallet.supportedInteractionStandards?.includes('wallet_connect')
-                              ? wcPayload
-                              : p2pPayload
-                          )
-                        }
-                      }
-                    ]}
-                    downloadLink={
-                      wallet?.name.toLowerCase().includes('kukai') && isIOS(window)
-                        ? {
-                            label: 'Get Kukai Mobile >',
-                            url: 'https://ios.kukai.app'
-                          }
-                        : undefined
-                    }
-                    onShowQRCodeClick={async () => {
-                      const syncCode = wallet?.supportedInteractionStandards?.includes(
-                        'wallet_connect'
-                      )
-                        ? wcPayload
-                        : p2pPayload
-
-                      if (!syncCode.length || !wallet) {
-                        onClose()
-                        return
-                      }
-
-                      if (isMobile && wallet.types.includes('ios') && wallet.types.length === 1) {
-                        handleDeepLinking(syncCode)
-                      } else {
-                        handleUpdateQRCode(syncCode)
-                      }
-
-                      handleUpdateState('qr')
-                      // todo setDisplayQrExtra(true)
-                    }}
-                  />
-                ) : (
-                  generateWCError(`Connect with ${wallet?.name} Mobile`)
-                ))}
-            </div>
-          )}
-          {state === 'qr' && (
-            <div
-              style={{
-                opacity: 1,
-                height: 'unset',
-                overflow: 'unset',
-                transform: 'scale(1)',
-                transition: 'all ease 0.3s',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.9em'
-              }}
-            >
-              {!displayQRExtra ? (
-                <PairOther
-                  walletList={walletList}
-                  onClickLearnMore={() => {}}
-                  p2pPayload={p2pPayload}
-                  wcPayload={wcPayload}
-                ></PairOther>
-              ) : (
-                <QRCode isMobile={true} />
-              )}
-            </div>
-          )}
-          <div
-            style={
-              state === 'wallets'
-                ? {
-                    opacity: 1,
-                    height: 'unset',
-                    overflow: 'unset',
-                    transform: 'scale(1)',
-                    transition: 'all ease 0.3s'
-                  }
-                : {
-                    opacity: 0,
-                    height: 0,
-                    overflow: 'hidden',
-                    transform: 'scale(1.1)',
-                    transition: 'all ease 0.3s'
-                  }
+      extraContent={
+        state !== 'top-wallets' || isMobile ? undefined : (
+          <Wallets
+            small
+            wallets={walletList.slice(-(walletList.length - 4))}
+            isMobile={isMobile}
+            onClickWallet={(id) => handleClickWallet(id, props)}
+            onClickOther={handleClickOther}
+          />
+        )
+      }
+      onClickShowMore={handleShowMoreContent}
+      onBackClick={() => {
+        switch (state) {
+          case 'install':
+          case 'qr':
+          case 'wallets':
+            if (state === 'wallets' && !isMobile) return undefined
+            return () => handleUpdateState('top-wallets')
+          case 'help':
+            return () => {
+              // todo if (pairingExpired) {
+              //   handleCloseAlert();
+              //   return;
+              // }
+              // todo return setCurrentInfo(previousInfo());
             }
-          >
-            <Wallets
-              wallets={walletList.slice(-(walletList.length - (isMobile ? 3 : 4)))}
-              isMobile={isMobile}
-              onClickWallet={(id) => handleClickWallet(id, props)}
-              onClickOther={handleClickOther}
-            />
-          </div>
+          default:
+            return undefined
+        }
+      }}
+    >
+      <div>
+        {state === 'install' && (
           <div
             style={
-              state === 'help'
+              state === 'install' || state === 'qr'
                 ? {
                     opacity: 1,
                     height: 'unset',
@@ -338,124 +187,302 @@ const PairingAlert: React.FC<any> = (props) => {
                   }
             }
           >
-            {areMetricsEnabled && <BugReportForm onSubmit={onClose} />}
-            {!areMetricsEnabled && (
-              <>
-                <Info
-                  iconBadge
-                  icon={
-                    <svg
-                      fill="currentColor"
-                      stroke-width="0"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      height="1em"
-                      width="1em"
-                      style={{ overflow: 'visible' }}
-                      color="white"
-                    >
-                      <path d="M16 12h2v4h-2z"></path>
-                      <path d="M20 7V5c0-1.103-.897-2-2-2H5C3.346 3 2 4.346 2 6v12c0 2.201 1.794 3 3 3h15c1.103 0 2-.897 2-2V9c0-1.103-.897-2-2-2zM5 5h13v2H5a1.001 1.001 0 0 1 0-2zm15 14H5.012C4.55 18.988 4 18.805 4 18V8.815c.314.113.647.185 1 .185h15v10z"></path>
-                    </svg>
+            {isOnline && wallet?.types.includes('web') && (
+              <Info
+                border
+                title={`Connect with ${wallet?.name} Web`}
+                description={`(It will open the wallet in a new tab)`}
+                buttons={[
+                  {
+                    label: 'Use Browser',
+                    type: 'primary',
+                    onClick: () => handleNewTab(props, wallet)
                   }
-                  title="What is a wallet?"
-                  description="Wallets let you send, receive, store and interact with digital assets. Your wallet can be used as an easy way to login, instead of having to remember a password."
-                />
+                ]}
+              />
+            )}
+            {!isMobile && wallet?.types.includes('extension') && (
+              <Info
+                border
+                title={
+                  wallet.firefoxId
+                    ? `Connect with ${wallet?.name} Browser Extension`
+                    : `Install ${wallet?.name} Wallet`
+                }
+                description={
+                  wallet.firefoxId
+                    ? `Please connect below to use your ${wallet?.name} Wallet browser extension.`
+                    : `To connect your ${wallet?.name} Wallet, install the browser extension.`
+                }
+                buttons={
+                  wallet.firefoxId
+                    ? [
+                        {
+                          label: 'Use Extension',
+                          type: 'primary',
+                          onClick: () => handleClickConnectExtension()
+                        }
+                      ]
+                    : [
+                        {
+                          label: 'Install extension',
+                          type: 'primary',
+                          onClick: () => handleClickInstallExtension()
+                        }
+                      ]
+                }
+              />
+            )}
+            {!isMobile && wallet?.types.includes('desktop') && (
+              <Info
+                border
+                title={`Connect with ${wallet?.name} Desktop App`}
+                description={`If you don't have the desktop app installed, click below to download it.`}
+                buttons={[
+                  {
+                    label: 'Open desktop app',
+                    type: 'primary',
+                    onClick: () => handleClickOpenDesktopApp()
+                  },
+                  {
+                    label: 'Download desktop app',
+                    type: 'secondary',
+                    onClick: () => handleClickDownloadDesktopApp()
+                  }
+                ]}
+              />
+            )}
+            {!isMobile &&
+              (qrCode?.length ?? 0) &&
+              wallet?.types.includes('ios') &&
+              (wallet?.types.length as number) > 1 && <QRCode isMobile={false} />}
+            {!isMobile &&
+              (qrCode?.length ?? 0) &&
+              wallet?.types.includes('ios') &&
+              (wallet?.types.length as number) <= 1 && <QRCode isMobile={true} />}
+            {isMobile &&
+              wallet?.types.includes('ios') &&
+              (!wallet?.supportedInteractionStandards?.includes('wallet_connect') || isWCWorking ? (
                 <Info
-                  iconBadge
-                  icon={
-                    <svg
-                      fill="none"
-                      stroke-width="2"
-                      xmlns="http://www.w3.org/2000/svg"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      viewBox="0 0 24 24"
-                      height="1em"
-                      width="1em"
-                      style={{ overflow: 'visible' }}
-                      color="white"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z"></path>
-                      <rect width="16" height="16" x="4" y="4" rx="2"></rect>
-                      <path d="M9 12h6M12 9v6"></path>
-                    </svg>
+                  border
+                  title={`Connect with ${wallet?.name} Mobile`}
+                  description={''}
+                  buttons={[
+                    {
+                      label: 'Use App',
+                      type: 'primary',
+                      onClick: async () => {
+                        if (!wallet) {
+                          return
+                        }
+
+                        handleDeepLinking(
+                          wallet.supportedInteractionStandards?.includes('wallet_connect')
+                            ? wcPayload
+                            : p2pPayload
+                        )
+                      }
+                    }
+                  ]}
+                  downloadLink={
+                    wallet?.name.toLowerCase().includes('kukai') && isIOS(window)
+                      ? {
+                          label: 'Get Kukai Mobile >',
+                          url: 'https://ios.kukai.app'
+                        }
+                      : undefined
                   }
-                  title="Not sure where to start?"
-                  description="If you are new to the Web3, we recommend that you start by creating a Kukai wallet. Kukai is a fast way of creating your first wallet using your preferred social account."
+                  onShowQRCodeClick={async () => {
+                    const syncCode = wallet?.supportedInteractionStandards?.includes(
+                      'wallet_connect'
+                    )
+                      ? wcPayload
+                      : p2pPayload
+
+                    if (!syncCode.length || !wallet) {
+                      props.closeButtonCallback && props.closeButtonCallback()
+                      return
+                    }
+
+                    if (isMobile && wallet.types.includes('ios') && wallet.types.length === 1) {
+                      handleDeepLinking(syncCode)
+                    } else {
+                      handleUpdateQRCode(syncCode)
+                    }
+
+                    handleUpdateState('qr')
+                    // todo setDisplayQrExtra(true)
+                  }}
                 />
-              </>
-            )}
+              ) : (
+                generateWCError(`Connect with ${wallet?.name} Mobile`)
+              ))}
           </div>
+        )}
+        {state === 'qr' && (
           <div
-            style={
-              state !== 'install' && state !== 'qr' && state !== 'wallets' && state !== 'help'
-                ? {
-                    opacity: 1,
-                    height: 'unset',
-                    overflow: 'unset',
-                    transform: 'scale(1)',
-                    transition: 'all ease 0.3s'
-                  }
-                : {
-                    opacity: 0,
-                    height: 0,
-                    overflow: 'hidden',
-                    transform: 'scale(1.1)',
-                    transition: 'all ease 0.3s'
-                  }
-            }
+            style={{
+              opacity: 1,
+              height: 'unset',
+              overflow: 'unset',
+              transform: 'scale(1)',
+              transition: 'all ease 0.3s',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.9em'
+            }}
           >
-            <TopWallets
-              wallets={isMobile ? walletList.slice(0, 3) : walletList.slice(0, 4)}
-              isMobile={isMobile}
-              onClickWallet={(id) => handleClickWallet(id, props)}
-              onClickLearnMore={() => {}}
-              otherWallets={
-                isMobile
-                  ? {
-                      images: [walletList[3].image, walletList[4].image, walletList[5].image],
-                      onClick: () => handleUpdateState('wallets')
-                    }
-                  : undefined
-              }
-            />
+            {!displayQRExtra ? (
+              <PairOther
+                walletList={walletList}
+                onClickLearnMore={() => {}}
+                p2pPayload={p2pPayload}
+                wcPayload={wcPayload}
+              ></PairOther>
+            ) : (
+              <QRCode isMobile={true} />
+            )}
           </div>
-        </div>
-      }
-      extraContent={
-        state !== 'top-wallets' || isMobile ? undefined : (
+        )}
+        <div
+          style={
+            state === 'wallets'
+              ? {
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s'
+                }
+              : {
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s'
+                }
+          }
+        >
           <Wallets
-            small
-            wallets={walletList.slice(-(walletList.length - 4))}
+            wallets={walletList.slice(-(walletList.length - (isMobile ? 3 : 4)))}
             isMobile={isMobile}
             onClickWallet={(id) => handleClickWallet(id, props)}
             onClickOther={handleClickOther}
           />
-        )
-      }
-      onClickShowMore={handleShowMoreContent}
-      onBackClick={() => {
-        switch (state) {
-          case 'install':
-          case 'qr':
-          case 'wallets':
-            if (state === 'wallets' && !isMobile) return undefined
-            return () => handleUpdateState('top-wallets')
-          case 'help':
-            return () => {
-              // todo if (pairingExpired) {
-              //   handleCloseAlert();
-              //   return;
-              // }
-              // todo return setCurrentInfo(previousInfo());
+        </div>
+        <div
+          style={
+            state === 'help'
+              ? {
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.9em'
+                }
+              : {
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0.9em'
+                }
+          }
+        >
+          {areMetricsEnabled && (
+            <BugReportForm onSubmit={props.closeButtonCallback ?? (() => {})} />
+          )}
+          {!areMetricsEnabled && (
+            <>
+              <Info
+                iconBadge
+                icon={
+                  <svg
+                    fill="currentColor"
+                    stroke-width="0"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    height="1em"
+                    width="1em"
+                    style={{ overflow: 'visible' }}
+                    color="white"
+                  >
+                    <path d="M16 12h2v4h-2z"></path>
+                    <path d="M20 7V5c0-1.103-.897-2-2-2H5C3.346 3 2 4.346 2 6v12c0 2.201 1.794 3 3 3h15c1.103 0 2-.897 2-2V9c0-1.103-.897-2-2-2zM5 5h13v2H5a1.001 1.001 0 0 1 0-2zm15 14H5.012C4.55 18.988 4 18.805 4 18V8.815c.314.113.647.185 1 .185h15v10z"></path>
+                  </svg>
+                }
+                title="What is a wallet?"
+                description="Wallets let you send, receive, store and interact with digital assets. Your wallet can be used as an easy way to login, instead of having to remember a password."
+              />
+              <Info
+                iconBadge
+                icon={
+                  <svg
+                    fill="none"
+                    stroke-width="2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    viewBox="0 0 24 24"
+                    height="1em"
+                    width="1em"
+                    style={{ overflow: 'visible' }}
+                    color="white"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z"></path>
+                    <rect width="16" height="16" x="4" y="4" rx="2"></rect>
+                    <path d="M9 12h6M12 9v6"></path>
+                  </svg>
+                }
+                title="Not sure where to start?"
+                description="If you are new to the Web3, we recommend that you start by creating a Kukai wallet. Kukai is a fast way of creating your first wallet using your preferred social account."
+              />
+            </>
+          )}
+        </div>
+        <div
+          style={
+            state !== 'install' && state !== 'qr' && state !== 'wallets' && state !== 'help'
+              ? {
+                  opacity: 1,
+                  height: 'unset',
+                  overflow: 'unset',
+                  transform: 'scale(1)',
+                  transition: 'all ease 0.3s'
+                }
+              : {
+                  opacity: 0,
+                  height: 0,
+                  overflow: 'hidden',
+                  transform: 'scale(1.1)',
+                  transition: 'all ease 0.3s'
+                }
+          }
+        >
+          <TopWallets
+            wallets={isMobile ? walletList.slice(0, 3) : walletList.slice(0, 4)}
+            isMobile={isMobile}
+            onClickWallet={(id) => handleClickWallet(id, props)}
+            onClickLearnMore={() => {}}
+            otherWallets={
+              isMobile
+                ? {
+                    images: [walletList[3].image, walletList[4].image, walletList[5].image],
+                    onClick: () => handleUpdateState('wallets')
+                  }
+                : undefined
             }
-          default:
-            return undefined
-        }
-      }}
-    />
+          />
+        </div>
+      </div>
+    </Alert>
   )
 }
 
diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
index eda31dc67..5daf442a7 100644
--- a/packages/beacon-ui/src/ui/alert/index.tsx
+++ b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -1,5 +1,4 @@
 import { createRoot } from 'react-dom/client'
-import AlertContent from './components/alert-content'
 import { useEffect, useState } from 'react'
 import { Subject } from '../../utils/subject'
 import { AlertConfig } from './common'
@@ -33,19 +32,7 @@ const AlertRoot = (props: AlertConfig) => {
   useEffect(() => {
     show$.subscribe((value) => setIsAlertVisible(value))
   }, [])
-  return (
-    <>
-      {isAlertVisible && (
-        <PairingAlert
-          {...props}
-          open={true}
-          loading={false}
-          onClose={() => closeAlert()}
-          content={<AlertContent />}
-        />
-      )}
-    </>
-  )
+  return <>{isAlertVisible && <PairingAlert {...props} closeButtonCallback={closeAlert} />}</>
 }
 
 export { openAlert, closeAlert, closeAlerts }