Merge pull request #1457 from trilitech/web-add-dynamic-modal

Web add dynamic modal

apps/desktop/package.json

@@ -85,6 +85,7 @@
     "@types/react-dom": "18.3.0",
     "@types/react-test-renderer": "^18.3.0",
     "@tzkt/sdk-api": "^2.2.1",
+    "@umami/components": "workspace:^",
     "@umami/core": "workspace:^",
     "@umami/crypto": "workspace:^",
     "@umami/data-polling": "workspace:^",

apps/desktop/src/Router.tsx

@@ -1,12 +1,12 @@
 /* istanbul ignore file */
+import { DynamicModalContext, useDynamicModal } from "@umami/components";
 import { useDataPolling } from "@umami/data-polling";
 import { WalletClient, useImplicitAccounts, useResetConnections } from "@umami/state";
 import { noop } from "lodash";
 import { useEffect } from "react";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import { AnnouncementBanner } from "./components/AnnouncementBanner";
-import { DynamicModalContext, useDynamicModal } from "./components/DynamicModal";
 import { BeaconProvider } from "./utils/beacon/BeaconProvider";
 import { useDeeplinkHandler } from "./utils/useDeeplinkHandler";
 import { AddressBookView } from "./views/addressBook/AddressBookView";

apps/desktop/src/components/AccountDrawer/AccountDrawerDisplay.tsx

@@ -1,4 +1,5 @@
 import { Box, Center, Flex, Heading, IconButton, Text } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import {
   type Account,
   type FA12TokenBalance,
@@ -17,7 +18,6 @@ import { accountIconGradient } from "../AccountTile/AccountTile";
 import { AccountTileIcon } from "../AccountTile/AccountTileIcon";
 import { AddressPill } from "../AddressPill/AddressPill";
 import { BuyTezForm } from "../BuyTez/BuyTezForm";
-import { DynamicModalContext } from "../DynamicModal";
 import { NoticeModal as DelegateNoticeModal } from "../SendFlow/Delegation/NoticeModal";
 import { TezRecapDisplay } from "../TezRecapDisplay";
 

apps/desktop/src/components/AccountDrawer/AssetsPanel/EarnTab.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, Center, Flex, type FlexProps, Heading, Text } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account, type ImplicitAccount } from "@umami/core";
 import {
   useGetAccountDelegate,
@@ -13,7 +14,6 @@ import { PendingUnstakeRequests } from "./PendingUnstakeRequests/PendingUnstakeR
 import { ExternalLinkIcon, PenIcon, XMarkIcon } from "../../../assets/icons";
 import colors from "../../../style/colors";
 import { AddressPill } from "../../AddressPill/AddressPill";
-import { DynamicModalContext } from "../../DynamicModal";
 import { ExternalLink } from "../../ExternalLink";
 import { NoticeModal as DelegateNoticeModal } from "../../SendFlow/Delegation/NoticeModal";
 import { NoticeModal as StakeNoticeModal } from "../../SendFlow/Stake/NoticeModal";

apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigSignerTile.tsx

@@ -1,3 +1,4 @@
+import { DynamicModalContext } from "@umami/components";
 import {
   type ImplicitAccount,
   type MultisigAccount,
@@ -16,7 +17,6 @@ import colors from "../../../../style/colors";
 import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTile";
 import { AddressTileIcon } from "../../../AddressTile/AddressTileIcon";
 import { useAddressKind } from "../../../AddressTile/useAddressKind";
-import { DynamicModalContext } from "../../../DynamicModal";
 import { SignPage } from "../../../SendFlow/Multisig/SignPage";
 
 export const MultisigSignerTile: React.FC<{

apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/FinalizableUnstakeRequest.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, Center, Flex, type FlexProps, Text } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type ImplicitAccount, estimate, makeAccountOperations } from "@umami/core";
 import {
   useAccountTotalFinalizableUnstakeAmount,
@@ -9,7 +10,6 @@ import { prettyTezAmount } from "@umami/tezos";
 import { useContext } from "react";
 
 import colors from "../../../../style/colors";
-import { DynamicModalContext } from "../../../DynamicModal";
 import { PrettyNumber } from "../../../PrettyNumber";
 import { SignPage } from "../../../SendFlow/FinalizeUnstake/SignPage";
 

apps/desktop/src/components/AccountDrawer/DerivationInfo/DerivationInfoButton.tsx

@@ -1,10 +1,10 @@
 import { Button, type ButtonProps } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { useContext } from "react";
 
 import { InfoModal } from "./InfoModal";
 import { FolderInfoIcon } from "../../../assets/icons";
-import { DynamicModalContext } from "../../DynamicModal";
 
 /**
  * Button to open a modal with the account's derivation info

apps/desktop/src/components/AccountDrawer/RenameAccountModal.tsx

@@ -9,12 +9,12 @@ import {
   ModalContent,
   ModalFooter,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { renameAccount, useAppDispatch, useValidateName } from "@umami/state";
 import { type FC, useContext } from "react";
 import { useForm } from "react-hook-form";
 
-import { DynamicModalContext } from "../DynamicModal";
 import { FormPageHeader } from "../SendFlow/FormPageHeader";
 
 export const RenameAccountModal: FC<{

apps/desktop/src/components/AccountDrawer/RenameRemoveMenuSwitch.tsx

@@ -1,11 +1,11 @@
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { useImplicitAccounts, useRemoveAccount } from "@umami/state";
 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { RenameAccountModal } from "./RenameAccountModal";
 import { ConfirmationModal } from "../ConfirmationModal";
-import { DynamicModalContext } from "../DynamicModal";
 import { RenameRemoveMenu } from "../RenameRemoveMenu";
 
 export const RenameRemoveMenuSwitch: React.FC<{ account: Account }> = ({ account }) => {

apps/desktop/src/components/AccountDrawer/index.tsx

@@ -1,10 +1,10 @@
+import { DynamicModalContext } from "@umami/components";
 import { useGetAccountAllTokens, useGetAccountNFTs, useGetOwnedAccount } from "@umami/state";
 import { type RawPkh } from "@umami/tezos";
 import { useContext } from "react";
 
 import { AccountDrawerDisplay } from "./AccountDrawerDisplay";
 import { sortedByLastUpdate } from "../../utils/token/utils";
-import { DynamicModalContext } from "../DynamicModal";
 import { ReceiveModal } from "../ReceiveModal";
 import { FormPage as SendTezForm } from "../SendFlow/Tez/FormPage";
 

apps/desktop/src/components/AddressPill/AddressPillIcon.tsx

@@ -1,4 +1,5 @@
 import { type IconProps } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { useAddressExistsInContacts } from "@umami/state";
 import { useContext } from "react";
 
@@ -13,7 +14,6 @@ import {
   KeyIcon,
   XMarkIcon,
 } from "../../assets/icons";
-import { DynamicModalContext } from "../DynamicModal";
 import { UpsertContactModal } from "../UpsertContactModal";
 
 export const LeftIcon: React.FC<{ addressKind: AddressKind } & IconProps> = ({

apps/desktop/src/components/CSVFileUploader/CSVFileUploadForm.tsx

@@ -13,6 +13,7 @@ import {
   Text,
   useToast,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Operation, makeAccountOperations } from "@umami/core";
 import {
   estimateAndUpdateBatch,
@@ -31,7 +32,6 @@ import { FormProvider, useForm } from "react-hook-form";
 import { parseOperation } from "./utils";
 import colors from "../../style/colors";
 import { OwnedAccountsAutocomplete } from "../AddressAutocomplete";
-import { DynamicModalContext } from "../DynamicModal";
 import { FormErrorMessage } from "../FormErrorMessage";
 
 type FormFields = {

apps/desktop/src/components/CSVFileUploader/index.tsx

@@ -1,9 +1,9 @@
 import { Button, Text } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { useContext } from "react";
 
 import { CSVFileUploadForm } from "./CSVFileUploadForm";
 import { FileArrowDownIcon } from "../../assets/icons";
-import { DynamicModalContext } from "../DynamicModal";
 
 export const CSVFileUploader = () => {
   const { openWith } = useContext(DynamicModalContext);

apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx

@@ -9,12 +9,12 @@ import {
   ModalHeader,
   useToast,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { changeMnemonicPassword, useAppDispatch, useAsyncActionHandler } from "@umami/state";
 import { useContext } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import colors from "../../style/colors";
-import { DynamicModalContext } from "../DynamicModal";
 import { FormErrorMessage } from "../FormErrorMessage";
 import { PasswordInput } from "../PasswordInput";
 

apps/desktop/src/components/ConfirmationModal.tsx

@@ -9,9 +9,9 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { useContext } from "react";
 
-import { DynamicModalContext } from "./DynamicModal";
 import { WarningIcon } from "../assets/icons";
 import colors from "../style/colors";
 

apps/desktop/src/components/DeleteContactModal.tsx

@@ -10,12 +10,12 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Contact } from "@umami/core";
 import { contactsActions, useAppDispatch } from "@umami/state";
 import { type FC, useContext } from "react";
 
 import { CopyableAddress } from "./CopyableText";
-import { DynamicModalContext } from "./DynamicModal";
 import colors from "../style/colors";
 
 /**

apps/desktop/src/components/SendFlow/Beacon/useSignWithBeacon.tsx

@@ -4,12 +4,12 @@ import {
   type OperationResponseInput,
 } from "@airgap/beacon-wallet";
 import { type TezosToolkit } from "@taquito/taquito";
+import { DynamicModalContext } from "@umami/components";
 import { type EstimatedAccountOperations, executeOperations, totalFee } from "@umami/core";
 import { WalletClient, useAsyncActionHandler, useFindNetwork } from "@umami/state";
 import { useContext } from "react";
 import { useForm } from "react-hook-form";
 
-import { DynamicModalContext } from "../../DynamicModal";
 import { SuccessStep } from "../SuccessStep";
 
 export const useSignWithBeacon = (

apps/desktop/src/components/SendFlow/Delegation/ChangeDelegateNoticeModal.tsx

@@ -8,14 +8,14 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { type TzktAlias } from "@umami/tzkt";
 import { useContext } from "react";
 
 import { FormPage } from "./FormPage";
 import { WarningIcon } from "../../../assets/icons";
 import colors from "../../../style/colors";
-import { DynamicModalContext } from "../../DynamicModal";
 
 export const ChangeDelegateNoticeModal = ({
   account,

apps/desktop/src/components/SendFlow/Delegation/NewDelegateNoticeModal.tsx

@@ -8,13 +8,13 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { useContext } from "react";
 
 import { FormPage } from "./FormPage";
 import { NoticeIcon } from "../../../assets/icons";
 import colors from "../../../style/colors";
-import { DynamicModalContext } from "../../DynamicModal";
 import { NoticeSteps } from "../NoticeSteps";
 
 export const NewDelegateNoticeModal = ({ account }: { account: Account }) => {

apps/desktop/src/components/SendFlow/Multisig/SignPage.tsx

@@ -1,5 +1,6 @@
 import { ModalContent, ModalFooter } from "@chakra-ui/react";
 import { type TezosToolkit } from "@taquito/taquito";
+import { DynamicModalContext } from "@umami/components";
 import {
   type ApproveOrExecute,
   type EstimatedAccountOperations,
@@ -13,7 +14,6 @@ import { useContext } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { AdvancedSettingsAccordion } from "../../AdvancedSettingsAccordion";
-import { DynamicModalContext } from "../../DynamicModal";
 import { BatchModalBody } from "../BatchModalBody";
 import { SignButton } from "../SignButton";
 import { SuccessStep } from "../SuccessStep";

apps/desktop/src/components/SendFlow/MultisigAccount/NameMultisigFormPage.tsx

@@ -8,6 +8,7 @@ import {
   ModalContent,
   ModalFooter,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import {
   useGetMostFundedImplicitAccount,
   useImplicitAccounts,
@@ -17,7 +18,6 @@ import { useContext } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { SelectApproversFormPage } from "./SelectApproversFormPage";
-import { DynamicModalContext } from "../../DynamicModal";
 import { FormErrorMessage } from "../../FormErrorMessage";
 import { FormPageHeader } from "../FormPageHeader";
 

apps/desktop/src/components/SendFlow/Stake/NoticeModal.tsx

@@ -9,14 +9,14 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { useContext } from "react";
 import { useForm } from "react-hook-form";
 
 import { FormPage } from "./FormPage";
 import { WarningIcon } from "../../../assets/icons";
 import colors from "../../../style/colors";
-import { DynamicModalContext } from "../../DynamicModal";
 
 export const NoticeModal = ({ account }: { account: Account }) => {
   const { openWith } = useContext(DynamicModalContext);

apps/desktop/src/components/SendFlow/SuccessStep.tsx

@@ -9,13 +9,13 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { useSelectedNetwork } from "@umami/state";
 import type React from "react";
 import { useContext } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 import { WindowLinkIcon } from "../../assets/icons/WindowLink";
-import { DynamicModalContext } from "../DynamicModal";
 
 export const SuccessStep: React.FC<{ hash: string }> = ({ hash }) => {
   const network = useSelectedNetwork();

apps/desktop/src/components/SendFlow/Unstake/NoticeModal.tsx

@@ -8,14 +8,14 @@ import {
   ModalHeader,
   Text,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Account } from "@umami/core";
 import { useGetAccountStakedBalance } from "@umami/state";
 import { useContext } from "react";
 
 import { FormPage } from "./FormPage";
 import { WarningIcon } from "../../../assets/icons";
 import colors from "../../../style/colors";
-import { DynamicModalContext } from "../../DynamicModal";
 import { NoticeSteps } from "../NoticeSteps";
 // TODO: test
 export const NoticeModal = ({ account }: { account: Account }) => {

apps/desktop/src/components/SendFlow/onSubmitFormActionHooks.tsx

@@ -1,4 +1,5 @@
 import { useToast } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Operation, estimate } from "@umami/core";
 import {
   estimateAndUpdateBatch,
@@ -14,7 +15,6 @@ import {
   type SignPageProps,
   useMakeFormOperations,
 } from "./utils";
-import { DynamicModalContext } from "../DynamicModal";
 
 // This file defines hooks to create actions when form is submitted.
 

apps/desktop/src/components/SendFlow/utils.tsx

@@ -1,5 +1,6 @@
 import { Box, Button } from "@chakra-ui/react";
 import { type TezosToolkit } from "@taquito/taquito";
+import { DynamicModalContext } from "@umami/components";
 import {
   type Account,
   type AccountOperations,
@@ -24,7 +25,6 @@ import { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { SuccessStep } from "./SuccessStep";
-import { DynamicModalContext } from "../DynamicModal";
 
 // Convert given optional fields to required
 // For example:

apps/desktop/src/components/TopBar.tsx

@@ -8,13 +8,13 @@ import {
   Text,
   useMediaQuery,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { assetsActions, useAppDispatch, useIsLoading, useLastTimeUpdated } from "@umami/state";
 import { differenceInMinutes, differenceInSeconds, formatDistance } from "date-fns";
 import type React from "react";
 import { useContext, useEffect, useState } from "react";
 
 import { BuyTezForm } from "./BuyTez/BuyTezForm";
-import { DynamicModalContext } from "./DynamicModal";
 import { FormPage as SendTezForm } from "./SendFlow/Tez/FormPage";
 import { FetchingIcon } from "../assets/icons";
 import { CheckIcon } from "../assets/icons/CheckIcon";

apps/desktop/src/components/UpsertContactModal.tsx

@@ -10,6 +10,7 @@ import {
   ModalFooter,
   ModalHeader,
 } from "@chakra-ui/react";
+import { DynamicModalContext } from "@umami/components";
 import { type Contact } from "@umami/core";
 import { getNetworksForContracts } from "@umami/multisig";
 import {
@@ -24,7 +25,6 @@ import { isValidContractPkh } from "@umami/tezos";
 import { type FC, useContext, useEffect, useRef } from "react";
 import { useForm } from "react-hook-form";
 
-import { DynamicModalContext } from "./DynamicModal";
 import { FormErrorMessage } from "./FormErrorMessage";
 
 /**