chore: add receive modal

apps/bridge-dapp/src/components/ReceiveModal.tsx

@@ -0,0 +1,93 @@
+import { type FC, useCallback } from 'react';
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  Typography,
+  useCopyable,
+} from '@webb-tools/webb-ui-components';
+import { QRScanLineIcon } from '@webb-tools/icons';
+import { shortenHex } from '@webb-tools/webb-ui-components';
+import { useReceiveModal } from '../hooks';
+
+const ReceiveModal: FC = () => {
+  const { copy, isCopied } = useCopyable();
+  const { isModalOpen, toggleModal, publicKey } = useReceiveModal();
+
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      toggleModal(isOpen);
+    },
+    [toggleModal]
+  );
+
+  const closeModal = useCallback(() => {
+    toggleModal(false);
+  }, [toggleModal]);
+
+  return (
+    <Modal open={isModalOpen} onOpenChange={handleOpenChange}>
+      <ModalContent
+        onCloseAutoFocus={closeModal}
+        isOpen={isModalOpen}
+        className="bg-mono-0 dark:bg-mono-180 w-full md:!w-[448px] rounded-2xl"
+        isCenter
+      >
+        <ModalHeader onClose={closeModal} className="">
+          Receive
+        </ModalHeader>
+
+        <div className="flex flex-col gap-9 p-9">
+          <div className="flex gap-3">
+            <div>
+              <QRScanLineIcon size="lg" />
+            </div>
+            <div className="">
+              <Typography
+                variant="body2"
+                fw="bold"
+                className="dark:text-mono-0"
+              >
+                Receiving Shielded Funds
+              </Typography>
+              <Typography variant="body2" className="dark:text-mono-0">
+                To receive shielded funds via transfers on the Hubble Bridge,
+                simply copy and share your shielded account public key. This
+                unique identifier allows others to transfer spend notes to your
+                account.
+              </Typography>
+            </div>
+          </div>
+          <div className="rounded-lg p-4 bg-mono-20 dark:bg-mono-160 flex items-center justify-between gap-1">
+            <Typography variant="body1" className="dark:text-mono-0">
+              Account Public Key:
+            </Typography>
+            <Typography variant="body1" className="dark:text-mono-0">
+              {publicKey ? shortenHex(publicKey, 5) : '--'}
+            </Typography>
+          </div>
+        </div>
+
+        <ModalFooter>
+          {publicKey !== undefined && (
+            <Button
+              isFullWidth
+              onClick={() => {
+                copy(publicKey);
+              }}
+            >
+              {isCopied ? 'Copied!' : 'Click to copy'}
+            </Button>
+          )}
+          <Button variant="secondary" isFullWidth>
+            Learn More
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ReceiveModal;

apps/bridge-dapp/src/containers/Layout/Layout.tsx

@@ -25,7 +25,7 @@ export const Layout: FC = () => {
   return (
     <div className={cx('bg-body', heightClsx)}>
       <div className={cx('flex', heightClsx)}>
-        <SideBar {...sidebarProps} className="hidden lg:flex" />
+        <SideBar {...sidebarProps} className="hidden lg:flex !z-0" />
 
         <div className="flex flex-col w-full mx-auto overflow-y-auto">
           <Transition show={showBanner} className="hidden lg:!block">

apps/bridge-dapp/src/hooks/index.ts

@@ -12,6 +12,8 @@ export { default as useInProgressTxInfo } from './useInProgressTxInfo';
 export * from './useLatestTransactionStage';
 export * from './useMaxFeeInfo';
 export { default as useNavigateWithPersistParams } from './useNavigateWithPersistParams';
+export { default as useReceiveModal } from './useReceiveModal';
+export * from './useReceiveModal';
 export * from './useRelayerManager';
 export { default as useRelayerWithRoute } from './useRelayerWithRoute';
 export * from './useShieldedAssets';

apps/bridge-dapp/src/hooks/useReceiveModal/index.ts

@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+import { useObservableState } from 'observable-hooks';
+import { useWebContext } from '@webb-tools/api-provider-environment';
+
+import subjects from './subjects';
+
+export type UseReceiveModalReturnType = {
+  /**
+   * Boolean to check if the receive modal is open
+   */
+  isModalOpen: boolean;
+
+  /**
+   * Toggle or set state of the wallet modal
+   */
+  toggleModal: (isOpen?: boolean) => void;
+
+  /**
+   * Public key of current account
+   */
+  publicKey?: string;
+};
+
+const useReceiveModal = (): UseReceiveModalReturnType => {
+  const isModalOpen = useObservableState(subjects.isReceiveModalOpenSubject);
+
+  const { noteManager } = useWebContext();
+
+  /**
+   * Toggle or set state of the wallet modal
+   */
+  const toggleModal = useCallback((isOpenArg?: boolean) => {
+    const isOpen = isOpenArg ?? !subjects.isReceiveModalOpenSubject.getValue();
+
+    subjects.setReceiveModalOpen(isOpen);
+  }, []);
+
+  const publicKey = useMemo(
+    () => noteManager?.getKeypair().toString(),
+    [noteManager]
+  );
+
+  return {
+    isModalOpen,
+    toggleModal,
+    publicKey,
+  };
+};
+
+export default useReceiveModal;

apps/bridge-dapp/src/hooks/useReceiveModal/subjects.ts

@@ -0,0 +1,10 @@
+import { BehaviorSubject } from 'rxjs';
+
+const isReceiveModalOpenSubject = new BehaviorSubject<boolean>(false);
+const setReceiveModalOpen = (isOpen: boolean) =>
+  isReceiveModalOpenSubject.next(isOpen);
+
+export default {
+  isReceiveModalOpenSubject,
+  setReceiveModalOpen,
+};

apps/bridge-dapp/src/pages/Account/AccountSummaryCard.tsx

@@ -37,6 +37,7 @@ import {
   WITHDRAW_PATH,
 } from '../../constants';
 import useHiddenValue from '../../hooks/useHiddenValue';
+import useReceiveModal from '../../hooks/useReceiveModal';
 
 const AccountSummaryCard = forwardRef<ElementRef<'div'>, PropsOf<'div'>>(
   ({ className, ...props }, ref) => {
@@ -259,10 +260,15 @@ const ActionItem = (props: {
 /** @internal */
 function Actions() {
   const navigate = useNavigate();
+  const { toggleModal } = useReceiveModal();
 
   return (
     <div className="flex items-center gap-6">
-      <ActionItem icon={<QRScanLineIcon size="lg" />} label="Receive" />
+      <ActionItem
+        icon={<QRScanLineIcon size="lg" />}
+        label="Receive"
+        onClick={() => toggleModal()}
+      />
       {actionItems.map(({ path, ...restItem }) => (
         <ActionItem key={path} {...restItem} onClick={() => navigate(path)} />
       ))}

apps/bridge-dapp/src/pages/Account/index.tsx

@@ -6,6 +6,7 @@ import { TabContent } from '@webb-tools/webb-ui-components/components/Tabs';
 import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
 import { useCallback, useMemo, useState } from 'react';
 import { FilterButton, ManageButton } from '../../components/tables';
+import ReceiveModal from '../../components/ReceiveModal';
 import { DeleteNotesModal } from '../../containers/DeleteNotesModal';
 import { UploadSpendNoteModal } from '../../containers/UploadSpendNoteModal';
 import {
@@ -129,6 +130,8 @@ const Account = () => {
         isOpen={uploadModalOpen}
         setIsOpen={(isOpen) => setUploadModalOpen(isOpen)}
       />
+
+      <ReceiveModal />
     </>
   );
 };