feat: init useConnect

airgap-it · Sep 9, 2024 · ccc4d7f · ccc4d7f
1 parent 1f6d4f3
commit ccc4d7f
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 91 deletions.
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -1,39 +1,29 @@
-import React, { useEffect } from "react";
-import { CloseIcon, LeftIcon, LogoIcon } from "../icons";
-import Loader from "../loader";
-
-export interface AlertProps {
-  content: any;
-  open: boolean;
-  showMore?: boolean;
-  extraContent?: any;
-  loading?: boolean;
-  onCloseClick: () => void;
-  onClickShowMore?: () => void;
-  onBackClick?: () => void;
-}
+import React, { useEffect } from 'react'
+import { CloseIcon, LeftIcon, LogoIcon } from '../icons'
+import Loader from '../loader'
+import { AlertProps } from '../../ui/alert/common'
 
 const Alert: React.FC<AlertProps> = (props: AlertProps) => {
   useEffect(() => {
-    const prevBodyOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    const prevBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
 
     return () => {
-      document.body.style.overflow = prevBodyOverflow;
-    };
-  }, []);
+      document.body.style.overflow = prevBodyOverflow
+    }
+  }, [])
 
-  const isMobile = window.innerWidth <= 800;
+  const isMobile = window.innerWidth <= 800
 
   return (
     <div
-      className={props.open ? "alert-wrapper-show" : "alert-wrapper-hide"}
+      className={props.open ? 'alert-wrapper-show' : 'alert-wrapper-hide'}
       onClick={props.onCloseClick}
     >
       <div
-        className={props.open ? "alert-modal-show" : "alert-modal-hide"}
+        className={props.open ? 'alert-modal-show' : 'alert-modal-hide'}
         onClick={(e) => {
-          e.stopPropagation();
+          e.stopPropagation()
         }}
       >
         <div className="alert-header">
@@ -57,48 +47,39 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
             props.loading
               ? {
                   opacity: 1,
-                  transition: "all ease 0.3s",
-                  height: "14px",
-                  overflow: "unset",
-                  width: "unset",
+                  transition: 'all ease 0.3s',
+                  height: '14px',
+                  overflow: 'unset',
+                  width: 'unset'
                 }
               : {
                   opacity: 0,
-                  transition: "all ease 0.3s",
+                  transition: 'all ease 0.3s',
                   height: 0,
-                  overflow: "hidden",
-                  width: 0,
+                  overflow: 'hidden',
+                  width: 0
                 }
           }
         >
           <Loader />
         </div>
-        <div
-          className="alert-body"
-          style={{ marginBottom: props.extraContent ? "" : "1.8em" }}
-        >
+        <div className="alert-body" style={{ marginBottom: props.extraContent ? '' : '1.8em' }}>
           {props.content}
           {!isMobile && (
-            <div
-              className={
-                props.showMore
-                  ? "alert-body-extra-show"
-                  : "alert-body-extra-hide"
-              }
-            >
+            <div className={props.showMore ? 'alert-body-extra-show' : 'alert-body-extra-hide'}>
               {props.extraContent && <div className="alert-divider"></div>}
               {props.extraContent}
             </div>
           )}
         </div>
         {!isMobile && props.extraContent && (
           <div className="alert-footer" onClick={props.onClickShowMore}>
-            {props.showMore ? "Show less" : "Show more"}
+            {props.showMore ? 'Show less' : 'Show more'}
           </div>
         )}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Alert;
+export default Alert
diff --git a/packages/beacon-ui/src/index.ts b/packages/beacon-ui/src/index.ts
@@ -1,5 +1,5 @@
 export { openAlert, closeAlert, closeAlerts } from './ui/alert'
-export type { AlertButton, AlertConfig } from './ui/alert'
+export type { AlertButton, AlertConfig } from './ui/alert/common'
 
 export {
   Pairing,

diff --git a/packages/beacon-ui/src/ui/alert/common.ts b/packages/beacon-ui/src/ui/alert/common.ts
@@ -0,0 +1,42 @@
+import {
+  P2PPairingRequest,
+  PostMessagePairingRequest,
+  WalletConnectPairingRequest,
+  NetworkType,
+  AnalyticsInterface
+} from '@airgap/beacon-types'
+
+export interface AlertButton {
+  text: string
+  style?: 'solid' | 'outline'
+  actionCallback?(): Promise<void>
+}
+
+export interface AlertConfig {
+  title: string
+  body?: string
+  data?: string
+  timer?: number
+  buttons?: AlertButton[]
+  pairingPayload?: {
+    p2pSyncCode: () => Promise<P2PPairingRequest>
+    postmessageSyncCode: () => Promise<PostMessagePairingRequest>
+    walletConnectSyncCode: () => Promise<WalletConnectPairingRequest>
+    networkType: NetworkType
+  }
+  closeButtonCallback?(): void
+  disclaimerText?: string
+  analytics?: AnalyticsInterface
+  featuredWallets?: string[]
+}
+
+export interface AlertProps {
+  content: any
+  open: boolean
+  showMore?: boolean
+  extraContent?: any
+  loading?: boolean
+  onCloseClick: () => void
+  onClickShowMore?: () => void
+  onBackClick?: () => void
+}
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,13 +1,34 @@
+import Alert from 'src/components/alert'
+import useConnect from '../../hooks/useConnect'
 import useWallets from '../../hooks/useWallets'
 
-const PairingAlert = () => {
+// todo remove any
+const PairingAlert: React.FC<any> = ({ wcPayload, p2pPayload, postPayload, onCloseHandler }) => {
   const wallets = useWallets()
+  const [
+    isLoading
+    // qrCode,
+    // state,
+    // displayQRExtra,
+    // showMoreContent,
+    // handleNewTab,
+    // handleDeepLinking,
+    // handleClickOther,
+    // handleClickConnectExtension,
+    // handleClickInstallExtension,
+    // handleClickOpenDesktopApp,
+    // handleClickDownloadDesktopApp
+  ] = useConnect(wcPayload, p2pPayload, postPayload, onCloseHandler)
+
+  console.log('wallets', wallets)
+
   return (
-    <h1>
-      {wallets.map((wallet, i) => (
-        <div key={`${i}`}>{wallet.name}</div>
-      ))}
-    </h1>
+    <Alert
+      loading={isLoading}
+      onCloseClick={onCloseHandler}
+      open={true}
+      content={<h1>Hello World</h1>}
+    />
   )
 }
 

diff --git a/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx b/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx
@@ -5,9 +5,9 @@ import { getTzip10Link } from 'src/utils/get-tzip10-link'
 import { isTwBrowser, isAndroid } from 'src/utils/platform'
 import { MergedWallet, OSLink } from 'src/utils/wallets'
 import { Serializer } from '@airgap/beacon-core'
-import { AlertConfig } from '..'
 import getDefaultLogo from '../getDefautlLogo'
 import { parseUri } from '@walletconnect/utils'
+import { AlertConfig } from '../common'
 
 const logger = new Logger('useConnect')
 
@@ -20,7 +20,7 @@ const useConnect = (
   // const [wallet, setWallet] = useState<MergedWallet>()
   const [isLoading, setIsLoading] = useState(false)
   const [qrCode, setQRCode] = useState<string>()
-  const [info, setInfo] = useState<'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'>(
+  const [state, setState] = useState<'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'>(
     'top-wallets'
   )
   const [displayQRExtra, setDisplayQRExtra] = useState(false)
@@ -124,7 +124,7 @@ const useConnect = (
       }
 
       setQRCode(syncCode)
-      setInfo('qr')
+      setState('qr')
       setDisplayQRExtra(true)
 
       return
@@ -157,7 +157,7 @@ const useConnect = (
         icon: getDefaultLogo()
       })
     )
-    setInfo('qr')
+    setState('qr')
   }, [])
 
   const handleClickConnectExtension = useCallback(async (wallet: MergedWallet) => {
@@ -228,7 +228,7 @@ const useConnect = (
   return [
     isLoading,
     qrCode,
-    info,
+    state,
     displayQRExtra,
     showMoreContent,
     handleNewTab,
@@ -238,7 +238,7 @@ const useConnect = (
     handleClickInstallExtension,
     handleClickOpenDesktopApp,
     handleClickDownloadDesktopApp
-  ]
+  ] as const
 }
 
 export default useConnect
diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -1,40 +1,9 @@
-import {
-  P2PPairingRequest,
-  PostMessagePairingRequest,
-  WalletConnectPairingRequest,
-  NetworkType,
-  AnalyticsInterface
-} from '@airgap/beacon-types'
 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 'src/utils/subject'
-
-// Interfaces
-export interface AlertButton {
-  text: string
-  style?: 'solid' | 'outline'
-  actionCallback?(): Promise<void>
-}
-
-export interface AlertConfig {
-  title: string
-  body?: string
-  data?: string
-  timer?: number
-  buttons?: AlertButton[]
-  pairingPayload?: {
-    p2pSyncCode: () => Promise<P2PPairingRequest>
-    postmessageSyncCode: () => Promise<PostMessagePairingRequest>
-    walletConnectSyncCode: () => Promise<WalletConnectPairingRequest>
-    networkType: NetworkType
-  }
-  closeButtonCallback?(): void
-  disclaimerText?: string
-  analytics?: AnalyticsInterface
-  featuredWallets?: string[]
-}
+import { Subject } from '../../utils/subject'
+import { AlertConfig } from './common'
 
 let initDone: boolean = false
 const show$ = new Subject<boolean>()