From 978ffd981b517875739715dcd98d10791a0bc10f Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 4 Jul 2024 16:54:55 +0100 Subject: [PATCH] Remove default imports from react --- apps/desktop/src/assets/icons/Accounts.tsx | 2 +- apps/desktop/src/assets/icons/AddAccount.tsx | 2 +- apps/desktop/src/assets/icons/AddContact.tsx | 2 +- apps/desktop/src/assets/icons/AddressBook.tsx | 2 +- apps/desktop/src/assets/icons/Baker.tsx | 2 +- apps/desktop/src/assets/icons/Batch.tsx | 2 +- apps/desktop/src/assets/icons/BurgerMenu.tsx | 2 +- apps/desktop/src/assets/icons/CheckIcon.tsx | 2 +- apps/desktop/src/assets/icons/Checkmark.tsx | 2 +- apps/desktop/src/assets/icons/ChevronDown.tsx | 2 +- .../desktop/src/assets/icons/ChevronRight.tsx | 2 +- apps/desktop/src/assets/icons/ChevronUp.tsx | 2 +- apps/desktop/src/assets/icons/Coin.tsx | 2 +- apps/desktop/src/assets/icons/Contact.tsx | 2 +- apps/desktop/src/assets/icons/Contract.tsx | 2 +- .../src/assets/icons/CrossedCircle.tsx | 2 +- apps/desktop/src/assets/icons/Diamond.tsx | 2 +- apps/desktop/src/assets/icons/Document.tsx | 2 +- .../src/assets/icons/DoubleCheckmark.tsx | 2 +- apps/desktop/src/assets/icons/Download.tsx | 2 +- apps/desktop/src/assets/icons/EditAccount.tsx | 2 +- apps/desktop/src/assets/icons/Email.tsx | 2 +- apps/desktop/src/assets/icons/Exclamation.tsx | 2 +- apps/desktop/src/assets/icons/ExitArrow.tsx | 2 +- .../desktop/src/assets/icons/ExternalLink.tsx | 2 +- apps/desktop/src/assets/icons/Eye.tsx | 2 +- apps/desktop/src/assets/icons/EyeSlash.tsx | 2 +- apps/desktop/src/assets/icons/FA1.2.tsx | 2 +- apps/desktop/src/assets/icons/FA2.tsx | 2 +- apps/desktop/src/assets/icons/Facebook.tsx | 2 +- apps/desktop/src/assets/icons/Feedback.tsx | 2 +- apps/desktop/src/assets/icons/Fetching.tsx | 2 +- .../src/assets/icons/FileArrowDown.tsx | 2 +- apps/desktop/src/assets/icons/FileCopy.tsx | 2 +- .../src/assets/icons/FlipForwardEnergy.tsx | 2 +- apps/desktop/src/assets/icons/FolderInfo.tsx | 2 +- apps/desktop/src/assets/icons/Gear.tsx | 2 +- apps/desktop/src/assets/icons/Google.tsx | 2 +- apps/desktop/src/assets/icons/Help.tsx | 2 +- apps/desktop/src/assets/icons/Hourglass.tsx | 2 +- .../src/assets/icons/IncomingArrow.tsx | 2 +- apps/desktop/src/assets/icons/Key.tsx | 2 +- apps/desktop/src/assets/icons/Ledger.tsx | 2 +- apps/desktop/src/assets/icons/Link.tsx | 2 +- apps/desktop/src/assets/icons/Lock.tsx | 2 +- apps/desktop/src/assets/icons/Maintenance.tsx | 2 +- apps/desktop/src/assets/icons/Maki.tsx | 2 +- apps/desktop/src/assets/icons/Notice.tsx | 2 +- .../src/assets/icons/OutgoingArrow.tsx | 2 +- .../assets/icons/OutlineExclamationCircle.tsx | 2 +- apps/desktop/src/assets/icons/Pen.tsx | 2 +- apps/desktop/src/assets/icons/Plus.tsx | 2 +- apps/desktop/src/assets/icons/Reddit.tsx | 2 +- .../desktop/src/assets/icons/RefreshClock.tsx | 2 +- apps/desktop/src/assets/icons/Reload.tsx | 2 +- apps/desktop/src/assets/icons/Rotate.tsx | 2 +- apps/desktop/src/assets/icons/Slash.tsx | 2 +- apps/desktop/src/assets/icons/Sliders.tsx | 2 +- apps/desktop/src/assets/icons/ThreeDots.tsx | 2 +- apps/desktop/src/assets/icons/Token.tsx | 2 +- apps/desktop/src/assets/icons/Trash.tsx | 2 +- apps/desktop/src/assets/icons/Twitter.tsx | 2 +- apps/desktop/src/assets/icons/USB.tsx | 2 +- .../src/assets/icons/UnknownContact.tsx | 2 +- apps/desktop/src/assets/icons/Verified.tsx | 6 +- apps/desktop/src/assets/icons/WalletPlus.tsx | 2 +- apps/desktop/src/assets/icons/Warning.tsx | 2 +- apps/desktop/src/assets/icons/WindowLink.tsx | 2 +- apps/desktop/src/assets/icons/XMark.tsx | 2 +- .../desktop/src/components/AccountBalance.tsx | 12 ++- .../AccountDrawer/AccountDrawerDisplay.tsx | 13 ++- .../AccountDrawer/AssetsPanel/AssetsPanel.tsx | 9 +- .../AccountDrawer/AssetsPanel/EarnTab.tsx | 19 ++-- .../MultisigActionButton.tsx | 9 +- .../MultisigDecodedOperation.tsx | 8 +- .../MultisigDecodedOperations.tsx | 9 +- .../MultisigPendingOperation.tsx | 8 +- .../MultisigSignerTile.tsx | 10 +- .../MultisigPendingOperations/index.tsx | 5 +- .../AssetsPanel/OperationListDisplay.tsx | 8 +- .../FinalizableUnstakeRequest.tsx | 11 ++- .../PendingUnstakeRequest.tsx | 14 +-- .../PendingUnstakeRequests.tsx | 4 +- .../DerivationInfo/DerivationInfoButton.tsx | 5 +- .../DerivationInfo/InfoModal.tsx | 2 +- .../components/AccountDrawer/JsValueWrap.tsx | 4 +- .../AccountDrawer/MultisigApprovers.tsx | 5 +- .../AccountDrawer/RenameRemoveMenuSwitch.tsx | 2 +- .../src/components/AccountDrawer/index.tsx | 2 +- .../AccountSelector/AccountListDisplay.tsx | 8 +- .../components/AccountTile/AccountTile.tsx | 29 +++--- .../AccountTile/AccountTileIcon.tsx | 4 +- .../AddressAutocomplete.test.tsx | 14 +-- .../components/AddressPill/AddressPill.tsx | 8 +- .../AddressPill/AddressPillIcon.tsx | 12 ++- .../AddressPill/AddressPillText.tsx | 17 ++-- .../components/AddressTile/AddressTile.tsx | 7 +- .../AddressTile/AddressTileIcon.tsx | 97 +++++++++---------- .../components/AdvancedSettingsAccordion.tsx | 7 +- .../src/components/AnnouncementBanner.tsx | 2 +- .../src/components/AssetTiles/TezTile.tsx | 4 +- .../src/components/BuyTez/BuyTezForm.tsx | 4 +- .../src/components/CSVFileUploader/utils.ts | 2 +- .../ChangePassword/ChangePasswordForm.tsx | 2 +- apps/desktop/src/components/ClickableCard.tsx | 27 ++++-- .../src/components/ConfirmationModal.tsx | 9 +- apps/desktop/src/components/CopyableText.tsx | 41 ++++---- .../src/components/DrawerTopButtons.tsx | 12 +-- apps/desktop/src/components/ErrorPage.tsx | 2 +- apps/desktop/src/components/ExternalLink.tsx | 4 +- apps/desktop/src/components/Identicon.tsx | 24 ++--- apps/desktop/src/components/MakiLogo.tsx | 3 +- apps/desktop/src/components/NestedScroll.tsx | 3 +- apps/desktop/src/components/NoItems/index.tsx | 23 +++-- .../src/components/Onboarding/eula/Eula.tsx | 8 +- .../password/EnterAndConfirmPassword.tsx | 7 +- .../components/Onboarding/notice/Notice.tsx | 5 +- .../OperationTile/ContractCallTile.tsx | 4 +- .../OperationTile/DelegationTile.tsx | 2 +- .../src/components/OperationTile/Fee.tsx | 7 +- .../OperationTile/FinalizeUnstakeTile.tsx | 4 +- .../OperationTile/InternalPrefix.tsx | 4 +- .../OperationTile/OperationStatus.tsx | 5 +- .../OperationTile/OperationTile.tsx | 5 +- .../OperationTile/OperationTileContext.ts | 4 +- .../OperationTile/OperationTypeWrapper.tsx | 2 +- .../OperationTile/OriginationTile.tsx | 2 +- .../components/OperationTile/StakeTile.tsx | 2 +- .../components/OperationTile/Timestamp.tsx | 2 +- .../OperationTile/TokenTransferTile.tsx | 8 +- .../OperationTile/TransactionTile.tsx | 2 +- .../src/components/OperationTile/TzktLink.tsx | 4 +- .../components/OperationTile/UnstakeTile.tsx | 2 +- .../OperationTile/useShowAddress.test.tsx | 5 +- apps/desktop/src/components/PopoverMenu.tsx | 6 +- apps/desktop/src/components/PrettyNumber.tsx | 14 +-- .../desktop/src/components/ReactIdenticon.tsx | 93 +++++++++--------- .../src/components/RenameRemoveMenu.tsx | 5 +- apps/desktop/src/components/Select.tsx | 8 +- apps/desktop/src/components/SendButton.tsx | 11 ++- .../components/SendFlow/Batch/SignPage.tsx | 7 +- .../components/SendFlow/BatchModalBody.tsx | 12 ++- .../SendFlow/Beacon/BatchSignPage.tsx | 2 +- .../SendFlow/Beacon/BeaconSignPage.tsx | 2 +- .../SendFlow/Beacon/ContractCallSignPage.tsx | 2 +- .../SendFlow/Beacon/DelegationSignPage.tsx | 2 +- .../Beacon/FinalizeUnstakeSignPage.tsx | 2 +- .../src/components/SendFlow/Beacon/Header.tsx | 8 +- .../Beacon/OriginationOperationSignPage.tsx | 5 +- .../SendFlow/Beacon/StakeSignPage.tsx | 2 +- .../SendFlow/Beacon/TezSignPage.tsx | 2 +- .../SendFlow/Beacon/UndelegationSignPage.tsx | 2 +- .../SendFlow/Beacon/UnstakeSignPage.tsx | 2 +- .../SendFlow/Delegation/FormPage.tsx | 3 +- .../SendFlow/Delegation/SignPage.tsx | 2 +- .../SendFlow/FinalizeUnstake/SignPage.tsx | 2 +- .../components/SendFlow/FormPageHeader.tsx | 7 +- .../components/SendFlow/Multisig/SignPage.tsx | 10 +- .../MultisigAccount/NameMultisigFormPage.tsx | 2 +- .../SelectApproversFormPage.tsx | 6 +- .../SignTransactionFormPage.tsx | 7 +- .../src/components/SendFlow/NFT/FormPage.tsx | 5 +- .../src/components/SendFlow/NFT/SignPage.tsx | 2 +- .../src/components/SendFlow/SignButton.tsx | 17 ++-- .../src/components/SendFlow/SignPageFee.tsx | 2 +- .../components/SendFlow/SignPageHeader.tsx | 26 +++-- .../components/SendFlow/Stake/FormPage.tsx | 6 +- .../components/SendFlow/Stake/SignPage.tsx | 2 +- .../src/components/SendFlow/SuccessStep.tsx | 3 +- .../src/components/SendFlow/Tez/FormPage.tsx | 8 +- .../src/components/SendFlow/Tez/SignPage.tsx | 2 +- .../components/SendFlow/Token/FormPage.tsx | 7 +- .../components/SendFlow/Token/SignPage.tsx | 4 +- .../SendFlow/Undelegation/FormPage.tsx | 3 +- .../SendFlow/Undelegation/SignPage.tsx | 2 +- .../components/SendFlow/Unstake/FormPage.tsx | 6 +- .../components/SendFlow/Unstake/SignPage.tsx | 2 +- .../SendFlow/onSubmitFormActionHooks.tsx | 6 +- apps/desktop/src/components/SideNavbar.tsx | 22 +++-- apps/desktop/src/components/SmallTab.tsx | 7 +- .../src/components/TezRecapDisplay.tsx | 5 +- apps/desktop/src/components/TokenTile.tsx | 8 +- apps/desktop/src/components/TopBar.tsx | 3 +- .../components/TruncatedTextWithTooltip.tsx | 8 +- apps/desktop/src/mocks/testUtils.tsx | 4 +- .../src/utils/beacon/BeaconProvider.tsx | 2 +- .../utils/beacon/PermissionRequestModal.tsx | 5 +- .../utils/beacon/SignPayloadRequestModal.tsx | 5 +- .../src/views/addressBook/AddressBookView.tsx | 2 +- .../src/views/addressBook/ContactTable.tsx | 2 +- apps/desktop/src/views/batch/BatchView.tsx | 16 +-- .../views/batch/OperationEstimationStatus.tsx | 3 +- apps/desktop/src/views/help/HelpView.tsx | 18 ++-- apps/desktop/src/views/home/AccountGroup.tsx | 7 +- .../src/views/home/AccountGroupPopover.tsx | 7 +- .../src/views/home/AccountListWithDrawer.tsx | 2 +- apps/desktop/src/views/nfts/NFTCard.tsx | 4 +- apps/desktop/src/views/nfts/NFTGallery.tsx | 7 +- .../src/views/operations/OperationsView.tsx | 4 +- .../src/views/operations/useGetOperations.tsx | 12 ++- .../views/settings/ErrorLogsDrawerCard.tsx | 4 +- .../src/views/settings/SettingsView.tsx | 10 +- .../src/views/tokens/AccountTokens.tsx | 12 +-- apps/desktop/src/views/withSideMenu.tsx | 3 +- .../embed-iframe/src/LoginButtonComponent.tsx | 15 ++- apps/embed-iframe/src/LoginModalContent.tsx | 7 +- .../src/SignOperationModalContent.tsx | 8 +- .../embed-iframe/src/imported/JsValueWrap.tsx | 4 +- apps/embed-iframe/src/main.tsx | 6 +- apps/web/src/main.tsx | 6 +- apps/web/src/providers/ReduxStore.tsx | 4 +- packages/eslint-config/index.js | 15 ++- 212 files changed, 691 insertions(+), 635 deletions(-) diff --git a/apps/desktop/src/assets/icons/Accounts.tsx b/apps/desktop/src/assets/icons/Accounts.tsx index 435c346aa..a5848c499 100644 --- a/apps/desktop/src/assets/icons/Accounts.tsx +++ b/apps/desktop/src/assets/icons/Accounts.tsx @@ -2,7 +2,7 @@ import { Icon, type IconProps } from "@chakra-ui/react"; import colors from "../../style/colors"; -export const AccountsIcon: React.FC = props => ( +export const AccountsIcon = (props: IconProps) => ( = props => ( +export const AddAccountIcon = (props: IconProps) => ( = props => ( +export const AddContactIcon = (props: IconProps) => ( = props => ( +export const AddressBookIcon = (props: IconProps) => ( = props => ( +export const BakerIcon = (props: IconProps) => ( = props => ( +export const BatchIcon = (props: IconProps) => ( = props => ( +export const BurgerMenuIcon = (props: IconProps) => ( = props => ( +export const CheckIcon = (props: IconProps) => ( = props => ( +export const CheckmarkIcon = (props: IconProps) => ( = props => ( +export const ChevronDownIcon = (props: IconProps) => ( = props => ( +export const ChevronRightIcon = (props: IconProps) => ( = props => ( +export const ChevronUpIcon = (props: IconProps) => ( = props => ( +export const CoinIcon = (props: IconProps) => ( = props => ( +export const ContactIcon = (props: IconProps) => ( = props => ( +export const ContractIcon = (props: IconProps) => ( = props => ( +export const CrossedCircleIcon = (props: IconProps) => ( = props => ( +export const DiamondIcon = (props: IconProps) => ( = props => ( +export const DocumentIcon = (props: IconProps) => ( = props => ( +export const DoubleCheckmarkIcon = (props: IconProps) => ( = props => ( +export const DownloadIcon = (props: IconProps) => ( = props => ( +export const EditAccountIcon = (props: IconProps) => ( = props => ( +export const EmailIcon = (props: IconProps) => ( = props => ( +export const ExclamationIcon = (props: IconProps) => ( = props => ( +export const ExitArrowIcon = (props: IconProps) => ( = props => ( +export const ExternalLinkIcon = (props: IconProps) => ( = props => ( +export const EyeIcon = (props: IconProps) => ( = props => ( +export const EyeSlashIcon = (props: IconProps) => ( = props => ( +export const FA12Icon = (props: IconProps) => ( = props => ( +export const FA2Icon = (props: IconProps) => ( = props => ( +export const FacebookIcon = (props: IconProps) => ( = props => ( +export const FeedbackIcon = (props: IconProps) => ( = props => ( +export const FetchingIcon = (props: IconProps) => ( = props => ( +export const FileArrowDownIcon = (props: IconProps) => ( = props => ( +export const FileCopyIcon = (props: IconProps) => ( = props => ( +export const FlipForwardEnergy = (props: IconProps) => ( = props => ( +export const FolderInfoIcon = (props: IconProps) => ( = props => ( +export const GearIcon = (props: IconProps) => ( = props => ( +export const GoogleIcon = (props: IconProps) => ( = props => ( +export const HelpIcon = (props: IconProps) => ( = props => ( +export const HourglassIcon = (props: IconProps) => ( = props => ( +export const IncomingArrow = (props: IconProps) => ( ); diff --git a/apps/desktop/src/assets/icons/Key.tsx b/apps/desktop/src/assets/icons/Key.tsx index de1c1d5ab..b415d7cde 100644 --- a/apps/desktop/src/assets/icons/Key.tsx +++ b/apps/desktop/src/assets/icons/Key.tsx @@ -2,7 +2,7 @@ import { Icon, type IconProps } from "@chakra-ui/react"; import colors from "../../style/colors"; -export const KeyIcon: React.FC = props => ( +export const KeyIcon = (props: IconProps) => ( = props => ( +export const LedgerIcon = (props: IconProps) => ( = props => ( +export const LinkIcon = (props: IconProps) => ( = props => ( +export const LockIcon = (props: IconProps) => ( = props => ( +export const MaintenanceIcon = (props: IconProps) => ( = ({ fishColor, ...props }) => ( +export const MakiIcon = ({ fishColor, ...props }: IconProps & { fishColor: string }) => ( = props => ( +export const NoticeIcon = (props: IconProps) => ( = props => ( +export const OutgoingArrow = (props: IconProps) => ( = props => ( +export const OutlineExclamationCircleIcon = (props: IconProps) => ( = props => ( +export const PenIcon = (props: IconProps) => ( = props => ( +export const PlusIcon = (props: IconProps) => ( = props => ( +export const RedditIcon = (props: IconProps) => ( = props => ( +export const RefreshClockIcon = (props: IconProps) => ( = props => ( +export const ReloadIcon = (props: IconProps) => ( = props => ( +export const RotateIcon = (props: IconProps) => ( = props => ( +export const SlashIcon = (props: IconProps) => ( = props => ( +export const SlidersIcon = (props: IconProps) => ( = props => ( +export const ThreeDotsIcon = (props: IconProps) => ( = ({ contract, ...props }) => { +export const TokenIcon = ({ contract, ...props }: { contract: RawPkh } & ImageProps) => { const url = `https://services.tzkt.io/v1/avatars/${contract}`; return ; }; diff --git a/apps/desktop/src/assets/icons/Trash.tsx b/apps/desktop/src/assets/icons/Trash.tsx index 2370790df..db57565cd 100644 --- a/apps/desktop/src/assets/icons/Trash.tsx +++ b/apps/desktop/src/assets/icons/Trash.tsx @@ -2,7 +2,7 @@ import { Icon, type IconProps } from "@chakra-ui/react"; import colors from "../../style/colors"; -export const TrashIcon: React.FC = props => ( +export const TrashIcon = (props: IconProps) => ( = props => ( +export const TwitterIcon = (props: IconProps) => ( = props => ( +export const USBIcon = (props: IconProps) => ( = props => ( +export const UnknownContactIcon = (props: IconProps) => ( ( +export const VerifiedIcon = () => ( @@ -11,7 +11,7 @@ export const VerifiedIcon: React.FC = () => ( ); -const StarIcon: React.FC = props => ( +const StarIcon = (props: IconProps) => ( = props => ( ); -const CheckIcon: React.FC = props => ( +const CheckIcon = (props: IconProps) => ( = props => ( +export const WalletPlusIcon = (props: IconProps) => ( = props => ( +export const WarningIcon = (props: IconProps) => ( = props => ( +export const WindowLinkIcon = (props: IconProps) => ( = props => ( +export const XMarkIcon = (props: IconProps) => ( = ({ address, size, numberProps, ...props }) => { +export const AccountBalance = ({ + address, + size, + numberProps, + ...props +}: { address: RawPkh; size?: "md" | "lg"; numberProps?: FlexProps } & BoxProps) => { const getBalance = useGetAccountBalance(); const balance = getBalance(address); diff --git a/apps/desktop/src/components/AccountDrawer/AccountDrawerDisplay.tsx b/apps/desktop/src/components/AccountDrawer/AccountDrawerDisplay.tsx index 97925df4b..76768bb85 100644 --- a/apps/desktop/src/components/AccountDrawer/AccountDrawerDisplay.tsx +++ b/apps/desktop/src/components/AccountDrawer/AccountDrawerDisplay.tsx @@ -24,17 +24,20 @@ import { TezRecapDisplay } from "../TezRecapDisplay"; type Props = { onSend: () => void; onReceive?: () => void; - onBuyTez?: () => void; tokens: Array; nfts: Array; account: Account; }; -const RoundButton: React.FC<{ +const RoundButton = ({ + icon, + label, + onClick = () => {}, +}: { label: string; icon: ReactElement; onClick?: () => void; -}> = ({ icon, label, onClick = () => {} }) => ( +}) => ( ); -export const AccountDrawerDisplay: React.FC = ({ +export const AccountDrawerDisplay = ({ onSend, onReceive = () => {}, tokens, nfts, account, -}) => { +}: Props) => { const isMultisig = account.type === "multisig"; const { openWith } = useContext(DynamicModalContext); const pkh = account.address.pkh; diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx index 7505eefa5..ea20b9892 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx @@ -22,7 +22,6 @@ import { useGetPendingMultisigOperations, useSelectedNetwork, } from "@umami/state"; -import type React from "react"; import { EarnTab } from "./EarnTab"; import { MultisigPendingOperations } from "./MultisigPendingOperations"; @@ -45,11 +44,15 @@ import { SmallTab } from "../../SmallTab"; * @param account - selected account in the drawer * @param delegation - delegation info if exists */ -export const AssetsPanel: React.FC<{ +export const AssetsPanel = ({ + tokens, + nfts, + account, +}: { tokens: Array; nfts: Array; account: Account; -}> = ({ tokens, nfts, account }) => { +}) => { const getPendingOperations = useGetPendingMultisigOperations(); const hasPendingMultisigOperations = account.type === "multisig" && getPendingOperations(account).length > 0; diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/EarnTab.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/EarnTab.tsx index 8a5761279..a1382c607 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/EarnTab.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/EarnTab.tsx @@ -7,7 +7,6 @@ import { useSelectedNetwork, } from "@umami/state"; import { prettyTezAmount } from "@umami/tezos"; -import type React from "react"; import { type ReactNode, useContext } from "react"; import { PendingUnstakeRequests } from "./PendingUnstakeRequests/PendingUnstakeRequests"; @@ -20,12 +19,14 @@ import { NoticeModal as StakeNoticeModal } from "../../SendFlow/Stake/NoticeModa import { FormPage as UndelegationFormPage } from "../../SendFlow/Undelegation/FormPage"; import { NoticeModal as UnstakeNoticeModal } from "../../SendFlow/Unstake/NoticeModal"; -const Row: React.FC< - { - label: string; - value: ReactNode; - } & FlexProps -> = ({ label, value, ...props }) => ( +const Row = ({ + label, + value, + ...props +}: { + label: string; + value: ReactNode; +} & FlexProps) => ( @@ -47,9 +48,7 @@ const RoundStatusDot = ({ background }: { background: string }) => ( /> ); -export const EarnTab: React.FC<{ - account: Account; -}> = ({ account }) => { +export const EarnTab = ({ account }: { account: Account }) => { const { openWith } = useContext(DynamicModalContext); const network = useSelectedNetwork(); const pkh = account.address.pkh; diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigActionButton.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigActionButton.tsx index 1c5516e0d..1e5c239e5 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigActionButton.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigActionButton.tsx @@ -1,5 +1,4 @@ import { Button, Flex, Text } from "@chakra-ui/react"; -import type React from "react"; import { CheckmarkIcon, HourglassIcon } from "../../../../assets/icons"; import colors from "../../../../style/colors"; @@ -10,11 +9,15 @@ export type MultisigSignerState = | "executable" | "approvable"; -export const MultisigActionButton: React.FC<{ +export const MultisigActionButton = ({ + approveOrExecute, + isLoading, + signerState, +}: { signerState: MultisigSignerState; approveOrExecute: () => void; isLoading: boolean; -}> = ({ approveOrExecute, isLoading, signerState }) => { +}) => { switch (signerState) { case "awaitingApprovalByExternalSigner": { return ( diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperation.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperation.tsx index 228ffd092..dbbcae4e8 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperation.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperation.tsx @@ -7,9 +7,7 @@ import { OutgoingArrow } from "../../../../assets/icons"; import colors from "../../../../style/colors"; import { AddressPill } from "../../../AddressPill/AddressPill"; -export const MultisigDecodedOperation: React.FC<{ - operation: Operation; -}> = ({ operation }) => { +export const MultisigDecodedOperation = ({ operation }: { operation: Operation }) => { switch (operation.type) { case "delegation": return ( @@ -51,9 +49,7 @@ export const MultisigDecodedOperation: React.FC<{ } }; -const MultisigOperationAmount: React.FC<{ - operation: Operation; -}> = ({ operation }) => { +const MultisigOperationAmount = ({ operation }: { operation: Operation }) => { const getToken = useGetToken(); switch (operation.type) { diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperations.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperations.tsx index 3ed493cbc..efdcaa201 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperations.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigDecodedOperations.tsx @@ -15,10 +15,13 @@ import { MultisigDecodedOperation } from "./MultisigDecodedOperation"; import colors from "../../../../style/colors"; import { JsValueWrap } from "../../JsValueWrap"; -export const MultisigDecodedOperations: React.FC<{ +export const MultisigDecodedOperations = ({ + rawMichelson, + sender, +}: { rawMichelson: string; sender: MultisigAccount; -}> = ({ rawMichelson, sender }) => { +}) => { try { const operations = parseRawMichelson(rawMichelson, sender); return ( @@ -51,7 +54,7 @@ export const MultisigDecodedOperations: React.FC<{ } }; -const UnrecognizedOperation: React.FC<{ rawMichelson: string }> = ({ rawMichelson }) => ( +const UnrecognizedOperation = ({ rawMichelson }: { rawMichelson: string }) => ( = ({ operation, sender }) => { +}) => { const { signers, threshold } = sender; const pendingApprovals = Math.max(threshold - operation.approvals.length, 0); return ( diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigSignerTile.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigSignerTile.tsx index eb142a8a7..816de8747 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigSignerTile.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/MultisigSignerTile.tsx @@ -9,7 +9,6 @@ import { import { type MultisigOperation, parseRawMichelson } from "@umami/multisig"; import { useAsyncActionHandler, useGetImplicitAccountSafe, useSelectedNetwork } from "@umami/state"; import { type ImplicitAddress } from "@umami/tezos"; -import type React from "react"; import { useContext } from "react"; import { MultisigActionButton, type MultisigSignerState } from "./MultisigActionButton"; @@ -19,12 +18,17 @@ import { AddressTileIcon } from "../../../AddressTile/AddressTileIcon"; import { useAddressKind } from "../../../AddressTile/useAddressKind"; import { SignPage } from "../../../SendFlow/Multisig/SignPage"; -export const MultisigSignerTile: React.FC<{ +export const MultisigSignerTile = ({ + pendingApprovals, + sender, + operation, + signerAddress, +}: { signerAddress: ImplicitAddress; pendingApprovals: number; operation: MultisigOperation; sender: MultisigAccount; -}> = ({ pendingApprovals, sender, operation, signerAddress }) => { +}) => { const addressKind = useAddressKind(signerAddress); const getImplicitAccount = useGetImplicitAccountSafe(); const { isLoading, handleAsyncAction } = useAsyncActionHandler(); diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/index.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/index.tsx index 51508e374..af87335c2 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/index.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/MultisigPendingOperations/index.tsx @@ -1,13 +1,10 @@ import { Box } from "@chakra-ui/react"; import { type MultisigAccount } from "@umami/core"; import { useGetPendingMultisigOperations } from "@umami/state"; -import type React from "react"; import { MultisigPendingOperation } from "./MultisigPendingOperation"; -export const MultisigPendingOperations: React.FC<{ - account: MultisigAccount; -}> = ({ account }) => { +export const MultisigPendingOperations = ({ account }: { account: MultisigAccount }) => { const getPendingOperations = useGetPendingMultisigOperations(); const pendingOperations = getPendingOperations(account); diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/OperationListDisplay.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/OperationListDisplay.tsx index 3bfb2bea5..ca21412b5 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/OperationListDisplay.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/OperationListDisplay.tsx @@ -1,7 +1,6 @@ import { Box, Divider } from "@chakra-ui/react"; import { type RawPkh } from "@umami/tezos"; import { type TzktCombinedOperation } from "@umami/tzkt"; -import type React from "react"; import { ViewAllLink } from "./ViewAllLink"; import { NoOperations } from "../../NoItems"; @@ -18,10 +17,13 @@ const MAX_OPERATIONS_SIZE = 20; * @param owner - Address of the account for which the drawer was opened. * @param operations - List of owner's operations. */ -export const OperationListDisplay: React.FC<{ +export const OperationListDisplay = ({ + owner, + operations, +}: { owner: RawPkh; operations: TzktCombinedOperation[]; -}> = ({ owner, operations }) => { +}) => { if (operations.length === 0) { return ; } diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/FinalizableUnstakeRequest.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/FinalizableUnstakeRequest.tsx index 09c212c75..54613c2b3 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/FinalizableUnstakeRequest.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/FinalizableUnstakeRequest.tsx @@ -21,11 +21,12 @@ import { SignPage } from "../../../SendFlow/FinalizeUnstake/SignPage"; * @param account - account to display the finalizable unstake request for */ // TODO: test -export const FinalizableUnstakeRequest: React.FC< - { - account: ImplicitAccount; - } & FlexProps -> = ({ account, ...props }) => { +export const FinalizableUnstakeRequest = ({ + account, + ...props +}: { + account: ImplicitAccount; +} & FlexProps) => { const { openWith } = useContext(DynamicModalContext); const { handleAsyncAction, isLoading } = useAsyncActionHandler(); const network = useSelectedNetwork(); diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequest.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequest.tsx index 13974eacd..dca209230 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequest.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequest.tsx @@ -13,12 +13,14 @@ import { PrettyNumber } from "../../../PrettyNumber"; * @param request - the unstake request to display (it should not be finalizable yet) */ // TODO: test -export const PendingUnstakeRequest: React.FC< - { - account: ImplicitAccount; - request: RawTzktUnstakeRequest; - } & FlexProps -> = ({ request, account, ...props }) => { +export const PendingUnstakeRequest = ({ + request, + account, + ...props +}: { + account: ImplicitAccount; + request: RawTzktUnstakeRequest; +} & FlexProps) => { const firstFinalizableCycle = useGetFirstFinalizableCycle()(request.cycle); const { tzktExplorerUrl } = useSelectedNetwork(); diff --git a/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequests.tsx b/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequests.tsx index 05055a392..ac8de1b89 100644 --- a/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequests.tsx +++ b/apps/desktop/src/components/AccountDrawer/AssetsPanel/PendingUnstakeRequests/PendingUnstakeRequests.tsx @@ -18,10 +18,10 @@ import colors from "../../../../style/colors"; * @param account - account to display the pending unstake requests for */ //TODO: test -export const PendingUnstakeRequests: React.FC<{ account: ImplicitAccount } & FlexProps> = ({ +export const PendingUnstakeRequests = ({ account, ...props -}) => { +}: { account: ImplicitAccount } & FlexProps) => { const pendingUnstakeRequests = useAccountPendingUnstakeRequests(account.address.pkh); const totalFinalizableAmount = useAccountTotalFinalizableUnstakeAmount(account.address.pkh); diff --git a/apps/desktop/src/components/AccountDrawer/DerivationInfo/DerivationInfoButton.tsx b/apps/desktop/src/components/AccountDrawer/DerivationInfo/DerivationInfoButton.tsx index c3c7320fa..1f2a2533c 100644 --- a/apps/desktop/src/components/AccountDrawer/DerivationInfo/DerivationInfoButton.tsx +++ b/apps/desktop/src/components/AccountDrawer/DerivationInfo/DerivationInfoButton.tsx @@ -12,10 +12,7 @@ import { FolderInfoIcon } from "../../../assets/icons"; * @param account - * @returns null if the account's derivation path is unknown, a button to open the modal otherwise */ -export const DerivationInfoButton: React.FC<{ account: Account } & ButtonProps> = ({ - account, - ...props -}) => { +export const DerivationInfoButton = ({ account, ...props }: { account: Account } & ButtonProps) => { const { openWith } = useContext(DynamicModalContext); switch (account.type) { diff --git a/apps/desktop/src/components/AccountDrawer/DerivationInfo/InfoModal.tsx b/apps/desktop/src/components/AccountDrawer/DerivationInfo/InfoModal.tsx index fabef30e9..24ab99154 100644 --- a/apps/desktop/src/components/AccountDrawer/DerivationInfo/InfoModal.tsx +++ b/apps/desktop/src/components/AccountDrawer/DerivationInfo/InfoModal.tsx @@ -19,7 +19,7 @@ import { CircleIcon } from "../../CircleIcon"; * * @param account - */ -export const InfoModal: React.FC<{ account: LedgerAccount | MnemonicAccount }> = ({ account }) => { +export const InfoModal = ({ account }: { account: LedgerAccount | MnemonicAccount }) => { const values = [ { title: "Template", diff --git a/apps/desktop/src/components/AccountDrawer/JsValueWrap.tsx b/apps/desktop/src/components/AccountDrawer/JsValueWrap.tsx index 76822679c..14b97e9d1 100644 --- a/apps/desktop/src/components/AccountDrawer/JsValueWrap.tsx +++ b/apps/desktop/src/components/AccountDrawer/JsValueWrap.tsx @@ -3,11 +3,11 @@ import { Card, CardBody, type CardProps } from "@chakra-ui/react"; import colors from "../../style/colors"; // Wrapper for any JavaScript value -export const JsValueWrap: React.FC<{ value: any; space?: number } & CardProps> = ({ +export const JsValueWrap = ({ value, space = 2, ...props -}) => ( +}: { value: any; space?: number } & CardProps) => ( 
 = ({ signers }) => (
+export const MultisigApprovers = ({ signers }: { signers: ImplicitAddress[] }) => (
    = ({ account }) => {
+export const RenameRemoveMenuSwitch = ({ account }: { account: Account }) => {
   const { openWith, onClose: closeModal } = useContext(DynamicModalContext);
   const navigate = useNavigate();
   const isLastImplicitAccount = useImplicitAccounts().length === 1;
diff --git a/apps/desktop/src/components/AccountDrawer/index.tsx b/apps/desktop/src/components/AccountDrawer/index.tsx
index 72288290c..a48539a07 100644
--- a/apps/desktop/src/components/AccountDrawer/index.tsx
+++ b/apps/desktop/src/components/AccountDrawer/index.tsx
@@ -9,7 +9,7 @@ import { ReceiveModal } from "../ReceiveModal";
 import { FormPage as SendTezForm } from "../SendFlow/Tez/FormPage";
 
 // TODO: replace current component with the underlying one
-export const AccountCard: React.FC<{ accountPkh: RawPkh }> = ({ accountPkh }) => {
+export const AccountCard = ({ accountPkh }: { accountPkh: RawPkh }) => {
   const getOwnedAccount = useGetOwnedAccount();
 
   const getTokens = useGetAccountAllTokens();
diff --git a/apps/desktop/src/components/AccountSelector/AccountListDisplay.tsx b/apps/desktop/src/components/AccountSelector/AccountListDisplay.tsx
index 79b38c286..9b5a73876 100644
--- a/apps/desktop/src/components/AccountSelector/AccountListDisplay.tsx
+++ b/apps/desktop/src/components/AccountSelector/AccountListDisplay.tsx
@@ -1,14 +1,16 @@
 import { MenuItem, MenuList } from "@chakra-ui/react";
 import { type Account } from "@umami/core";
-import type React from "react";
 
 import colors from "../../style/colors";
 import { AddressTile } from "../AddressTile/AddressTile";
 
-export const AccountListDisplay: React.FC<{
+export const AccountListDisplay = ({
+  accounts,
+  onSelect,
+}: {
   accounts: Account[];
   onSelect: (account: Account) => void;
-}> = ({ accounts, onSelect }) => (
+}) => (
    = ({ icon, leftElement, rightElement, ...flexProps }) => (
+export const AccountTileBase = ({
+  icon,
+  leftElement,
+  rightElement,
+  ...flexProps
+}: {
+  icon: ReactNode;
+  leftElement: ReactNode;
+  rightElement: ReactNode;
+} & FlexProps) => (
   
 );
 
-export const LabelAndAddress: React.FC<{ label: string | null; pkh: string }> = ({
-  label,
-  pkh,
-}) => (
+export const LabelAndAddress = ({ label, pkh }: { label: string | null; pkh: string }) => (
   
     {label && {label}}
     
@@ -109,9 +108,7 @@ export const accountIconGradient = ({
   }px, transparent ${radius}), ${mainBackgroundColor}`;
 };
 
-export const AccountTile: React.FC<{
-  account: Account;
-}> = ({ account }) => {
+export const AccountTile = ({ account }: { account: Account }) => {
   const pkh = account.address.pkh;
   const { selectedAccount, selectAccount } = useContext(SelectedAccountContext);
   const isSelected = selectedAccount?.address.pkh === pkh;
diff --git a/apps/desktop/src/components/AccountTile/AccountTileIcon.tsx b/apps/desktop/src/components/AccountTile/AccountTileIcon.tsx
index 6cdbab5ee..9887697f5 100644
--- a/apps/desktop/src/components/AccountTile/AccountTileIcon.tsx
+++ b/apps/desktop/src/components/AccountTile/AccountTileIcon.tsx
@@ -103,8 +103,8 @@ const SIZES = {
  * @param account - The account to display the icon for.
  * @param size - The size of the icon.
  */
-export const AccountTileIcon: React.FC<{ account: Account; size: AddressTileIconSize }> = memo(
-  ({ account, size }) => {
+export const AccountTileIcon = memo(
+  ({ account, size }: { account: Account; size: AddressTileIconSize }) => {
     const sizeObj = SIZES[size];
     const defaults = sizeObj.defaults;
 
diff --git a/apps/desktop/src/components/AddressAutocomplete/AddressAutocomplete.test.tsx b/apps/desktop/src/components/AddressAutocomplete/AddressAutocomplete.test.tsx
index eb8f9eec0..9bcd55f20 100644
--- a/apps/desktop/src/components/AddressAutocomplete/AddressAutocomplete.test.tsx
+++ b/apps/desktop/src/components/AddressAutocomplete/AddressAutocomplete.test.tsx
@@ -14,18 +14,18 @@ beforeEach(() => {
   store = makeStore();
 });
 
-const TestComponent: React.FC<{
-  defaultDestination?: string;
-  contacts?: Contact[];
-  allowUnknown?: boolean;
-  label?: string;
-  keepValid?: boolean;
-}> = ({
+const TestComponent = ({
   defaultDestination = "",
   allowUnknown = true,
   contacts = [mockImplicitContact(0), mockImplicitContact(1), mockImplicitContact(2)],
   label = "",
   keepValid,
+}: {
+  defaultDestination?: string;
+  contacts?: Contact[];
+  allowUnknown?: boolean;
+  label?: string;
+  keepValid?: boolean;
 }) => {
   const form = useForm({ defaultValues: { destination: defaultDestination } });
 
diff --git a/apps/desktop/src/components/AddressPill/AddressPill.tsx b/apps/desktop/src/components/AddressPill/AddressPill.tsx
index 38b86e79c..aa7e6cd28 100644
--- a/apps/desktop/src/components/AddressPill/AddressPill.tsx
+++ b/apps/desktop/src/components/AddressPill/AddressPill.tsx
@@ -22,9 +22,11 @@ import { AddressPillText } from "./AddressPillText";
 import { useAddressKind } from "./useAddressKind";
 import colors from "../../style/colors";
 
-export const AddressPill: React.FC<
-  { address: Address | TzktAlias; mode?: AddressPillMode } & BoxProps
-> = ({ address: rawAddress, mode = { type: "default" }, ...rest }) => {
+export const AddressPill = ({
+  address: rawAddress,
+  mode = { type: "default" },
+  ...rest
+}: { address: Address | TzktAlias; mode?: AddressPillMode } & BoxProps) => {
   const isAlias = !("pkh" in rawAddress && "type" in rawAddress);
   const address = isAlias ? parsePkh(rawAddress.address) : rawAddress;
   const addressKind = useAddressKind(address);
diff --git a/apps/desktop/src/components/AddressPill/AddressPillIcon.tsx b/apps/desktop/src/components/AddressPill/AddressPillIcon.tsx
index 031cc4bfe..b6194df89 100644
--- a/apps/desktop/src/components/AddressPill/AddressPillIcon.tsx
+++ b/apps/desktop/src/components/AddressPill/AddressPillIcon.tsx
@@ -16,10 +16,10 @@ import {
 } from "../../assets/icons";
 import { UpsertContactModal } from "../UpsertContactModal";
 
-export const LeftIcon: React.FC<{ addressKind: AddressKind } & IconProps> = ({
+export const LeftIcon = ({
   addressKind: { type },
   ...props
-}) => {
+}: { addressKind: AddressKind } & IconProps) => {
   switch (type) {
     case "multisig":
       return ;
@@ -37,9 +37,11 @@ export const LeftIcon: React.FC<{ addressKind: AddressKind } & IconProps> = ({
   }
 };
 
-export const RightIcon: React.FC<
-  { addressKind: AddressKind; addressPillMode: AddressPillMode } & IconProps
-> = ({ addressKind: { type, pkh }, addressPillMode, ...rest }) => {
+export const RightIcon = ({
+  addressKind: { type, pkh },
+  addressPillMode,
+  ...rest
+}: { addressKind: AddressKind; addressPillMode: AddressPillMode } & IconProps) => {
   const addressExistsInContacts = useAddressExistsInContacts();
   const { openWith } = useContext(DynamicModalContext);
 
diff --git a/apps/desktop/src/components/AddressPill/AddressPillText.tsx b/apps/desktop/src/components/AddressPill/AddressPillText.tsx
index 661d5b11e..eec78d203 100644
--- a/apps/desktop/src/components/AddressPill/AddressPillText.tsx
+++ b/apps/desktop/src/components/AddressPill/AddressPillText.tsx
@@ -4,13 +4,16 @@ import { formatPkh, truncate } from "@umami/tezos";
 
 import { type AddressKind } from "./types";
 
-export const AddressPillText: React.FC<
-  {
-    addressKind: AddressKind;
-    showPkh: boolean;
-    alias?: string;
-  } & TextProps
-> = ({ addressKind: { pkh, label }, showPkh, alias, ...rest }) => {
+export const AddressPillText = ({
+  addressKind: { pkh, label },
+  showPkh,
+  alias,
+  ...rest
+}: {
+  addressKind: AddressKind;
+  showPkh: boolean;
+  alias?: string;
+} & TextProps) => {
   const getContactName = useGetContactName();
   const formattedPkh = formatPkh(pkh);
   const nameOrLabel = getContactName(pkh) || label || alias;
diff --git a/apps/desktop/src/components/AddressTile/AddressTile.tsx b/apps/desktop/src/components/AddressTile/AddressTile.tsx
index 026e7931c..0f7a27e60 100644
--- a/apps/desktop/src/components/AddressTile/AddressTile.tsx
+++ b/apps/desktop/src/components/AddressTile/AddressTile.tsx
@@ -1,6 +1,5 @@
 import { Box, Flex, type FlexProps, Heading, Text, Tooltip } from "@chakra-ui/react";
-import { type Address } from "@umami/tezos";
-import { formatPkh } from "@umami/tezos";
+import { type Address, formatPkh } from "@umami/tezos";
 
 import { AddressTileIcon } from "./AddressTileIcon";
 import { useAddressKind } from "./useAddressKind";
@@ -17,11 +16,11 @@ import { AccountBalance } from "../AccountBalance";
  * @param flexProps - Defines component style.
  * @param hideBalance - If true, balance will not be displayed.
  */
-export const AddressTile: React.FC<{ address: Address; hideBalance?: boolean } & FlexProps> = ({
+export const AddressTile = ({
   address,
   hideBalance = false,
   ...flexProps
-}) => {
+}: { address: Address; hideBalance?: boolean } & FlexProps) => {
   const addressKind = useAddressKind(address);
 
   return (
diff --git a/apps/desktop/src/components/AddressTile/AddressTileIcon.tsx b/apps/desktop/src/components/AddressTile/AddressTileIcon.tsx
index 62305700e..c1171fcf5 100644
--- a/apps/desktop/src/components/AddressTile/AddressTileIcon.tsx
+++ b/apps/desktop/src/components/AddressTile/AddressTileIcon.tsx
@@ -22,56 +22,55 @@ const baseIconProps = {
  * @param addressKind - The address to display the icon for.
  * @param size - The size of the icon.
  */
-export const AddressTileIcon: React.FC<{
-  addressKind: AddressKind;
-  size: AddressTileIconSize;
-}> = memo(({ addressKind, size }) => {
-  const getAccount = useGetOwnedAccountSafe();
-  const account = getAccount(addressKind.pkh);
+export const AddressTileIcon = memo(
+  ({ addressKind, size }: { addressKind: AddressKind; size: AddressTileIconSize }) => {
+    const getAccount = useGetOwnedAccountSafe();
+    const account = getAccount(addressKind.pkh);
 
-  if (account) {
-    return ;
-  }
+    if (account) {
+      return ;
+    }
 
-  let sizeInPx;
-  let padding;
-  switch (size) {
-    case "sm":
-      sizeInPx = "30px";
-      padding = "5px";
-      break;
-    case "lg":
-      sizeInPx = "48px";
-      padding = "10px";
-  }
+    let sizeInPx;
+    let padding;
+    switch (size) {
+      case "sm":
+        sizeInPx = "30px";
+        padding = "5px";
+        break;
+      case "lg":
+        sizeInPx = "48px";
+        padding = "10px";
+    }
 
-  switch (addressKind.type) {
-    case "contact":
-      return (
-        
-      );
-    case "unknown":
-      return (
-        
-      );
-    case "baker":
-      return (
-        
-      );
-    case "secret_key":
-    case "mnemonic":
-    case "social":
-    case "ledger":
-    case "multisig":
-      return null; // impossible state
+    switch (addressKind.type) {
+      case "contact":
+        return (
+          
+        );
+      case "unknown":
+        return (
+          
+        );
+      case "baker":
+        return (
+          
+        );
+      case "secret_key":
+      case "mnemonic":
+      case "social":
+      case "ledger":
+      case "multisig":
+        return null; // impossible state
+    }
   }
-});
+);
diff --git a/apps/desktop/src/components/AdvancedSettingsAccordion.tsx b/apps/desktop/src/components/AdvancedSettingsAccordion.tsx
index 80c22a0b2..d225005ec 100644
--- a/apps/desktop/src/components/AdvancedSettingsAccordion.tsx
+++ b/apps/desktop/src/components/AdvancedSettingsAccordion.tsx
@@ -11,9 +11,8 @@ import {
   InputGroup,
   InputRightElement,
 } from "@chakra-ui/react";
-import { type Estimation, TEZ_DECIMALS } from "@umami/tezos";
-import { mutezToTez, tezToMutez } from "@umami/tezos";
-import { useState } from "react";
+import { type Estimation, TEZ_DECIMALS, mutezToTez, tezToMutez } from "@umami/tezos";
+import { type ChangeEvent, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 import { getSmallestUnit, makeValidateDecimals } from "./SendFlow/utils";
@@ -37,7 +36,7 @@ export const AdvancedSettingsAccordion = ({ index = 0 }: AdvancedSettingsAccordi
     mutezToTez(getValues().executeParams[index].fee).toFixed()
   );
 
-  const handleFeeChange = (event: React.ChangeEvent) => {
+  const handleFeeChange = (event: ChangeEvent) => {
     const newFeeValue = event.target.value;
 
     if (makeValidateDecimals(TEZ_DECIMALS)(newFeeValue) === true) {
diff --git a/apps/desktop/src/components/AnnouncementBanner.tsx b/apps/desktop/src/components/AnnouncementBanner.tsx
index f3a660a1c..7f3111bb1 100644
--- a/apps/desktop/src/components/AnnouncementBanner.tsx
+++ b/apps/desktop/src/components/AnnouncementBanner.tsx
@@ -15,7 +15,7 @@ const ANNOUNCEMENT_FILE_URL = "https://storage.googleapis.com/umami-artifacts/an
  * Once the user closes the notification, it won't show up again until
  * we post a new one
  */
-export const AnnouncementBanner: React.FC = () => {
+export const AnnouncementBanner = () => {
   const { html: announcementHTML, seen } = useAppSelector(s => s.announcement);
   const dispatch = useAppDispatch();
 
diff --git a/apps/desktop/src/components/AssetTiles/TezTile.tsx b/apps/desktop/src/components/AssetTiles/TezTile.tsx
index 1085ec149..87f83eecd 100644
--- a/apps/desktop/src/components/AssetTiles/TezTile.tsx
+++ b/apps/desktop/src/components/AssetTiles/TezTile.tsx
@@ -6,9 +6,7 @@ import { TezIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { PrettyNumber } from "../PrettyNumber";
 
-export const TezTile: React.FC<{ mutezAmount: string | number | BigNumber }> = ({
-  mutezAmount,
-}) => (
+export const TezTile = ({ mutezAmount }: { mutezAmount: string | number | BigNumber }) => (
    = ({ recipient: defaultRecipient = "" }) => {
+export const BuyTezForm = ({ recipient: defaultRecipient = "" }: { recipient?: RawPkh }) => {
   const network = useSelectedNetwork();
   const isMainnet = network.name === "mainnet";
   const title = isMainnet ? "Buy Tez" : "Request Tez from faucet";
diff --git a/apps/desktop/src/components/CSVFileUploader/utils.ts b/apps/desktop/src/components/CSVFileUploader/utils.ts
index 8d54fd83b..649653017 100644
--- a/apps/desktop/src/components/CSVFileUploader/utils.ts
+++ b/apps/desktop/src/components/CSVFileUploader/utils.ts
@@ -6,8 +6,8 @@ import {
   isValidContractPkh,
   parseContractPkh,
   parsePkh,
+  tezToMutez,
 } from "@umami/tezos";
-import { tezToMutez } from "@umami/tezos";
 
 import { validateNonNegativeNumber } from "../../utils/helpers";
 
diff --git a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
index 13741675e..6c4025877 100644
--- a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
+++ b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
@@ -24,7 +24,7 @@ type ChangePasswordFormValues = {
   newPasswordConfirmation: string;
 };
 
-export const ChangePasswordForm: React.FC = () => {
+export const ChangePasswordForm = () => {
   const { onClose } = useContext(DynamicModalContext);
   const form = useForm({ mode: "onBlur" });
   const toast = useToast();
diff --git a/apps/desktop/src/components/ClickableCard.tsx b/apps/desktop/src/components/ClickableCard.tsx
index 5dd3341b2..6a6dabd28 100644
--- a/apps/desktop/src/components/ClickableCard.tsx
+++ b/apps/desktop/src/components/ClickableCard.tsx
@@ -4,14 +4,17 @@ import { type PropsWithChildren } from "react";
 import { ChevronRightIcon } from "../assets/icons";
 import colors from "../style/colors";
 
-export const ClickableCard: React.FC<
-  PropsWithChildren<
-    {
-      onClick?: () => void;
-      isSelected: boolean;
-    } & CardProps
-  >
-> = ({ onClick, children, isSelected, ...props }) => (
+export const ClickableCard = ({
+  onClick,
+  children,
+  isSelected,
+  ...props
+}: PropsWithChildren<
+  {
+    onClick?: () => void;
+    isSelected: boolean;
+  } & CardProps
+>) => (
   
 );
 
-export const SettingsCardWithDrawerIcon: React.FC<{
+export const SettingsCardWithDrawerIcon = ({
+  left,
+  isSelected,
+  onClick,
+}: {
   left: string;
   isSelected: boolean;
   onClick?: () => void;
-}> = ({ left, isSelected, onClick }) => (
+}) => (
   
     
       
diff --git a/apps/desktop/src/components/ConfirmationModal.tsx b/apps/desktop/src/components/ConfirmationModal.tsx
index c56a1fdda..40a22e653 100644
--- a/apps/desktop/src/components/ConfirmationModal.tsx
+++ b/apps/desktop/src/components/ConfirmationModal.tsx
@@ -15,12 +15,17 @@ import { useContext } from "react";
 import { WarningIcon } from "../assets/icons";
 import colors from "../style/colors";
 
-export const ConfirmationModal: React.FC<{
+export const ConfirmationModal = ({
+  title,
+  description,
+  buttonLabel,
+  onSubmit,
+}: {
   title: string;
   buttonLabel: string;
   description?: string;
   onSubmit: () => void;
-}> = ({ title, description, buttonLabel, onSubmit }) => {
+}) => {
   const { onClose } = useContext(DynamicModalContext);
   const onClick = () => {
     onSubmit();
diff --git a/apps/desktop/src/components/CopyableText.tsx b/apps/desktop/src/components/CopyableText.tsx
index 7c7112163..eb9342060 100644
--- a/apps/desktop/src/components/CopyableText.tsx
+++ b/apps/desktop/src/components/CopyableText.tsx
@@ -1,20 +1,23 @@
 import { Flex, type FlexProps, Text, useToast } from "@chakra-ui/react";
 import { formatPkh } from "@umami/tezos";
-import type React from "react";
 
 import { FileCopyIcon } from "../assets/icons";
 import colors from "../style/colors";
 
 const TOAST_ID = "TOAST_ID";
 
-export const CopyableAddress: React.FC<
-  {
-    pkh: string;
-    formatAddress?: boolean;
-    copyable?: boolean;
-    iconColor?: string;
-  } & FlexProps
-> = ({ pkh, formatAddress = true, copyable = true, iconColor = colors.gray[600], ...rest }) => (
+export const CopyableAddress = ({
+  pkh,
+  formatAddress = true,
+  copyable = true,
+  iconColor = colors.gray[600],
+  ...rest
+}: {
+  pkh: string;
+  formatAddress?: boolean;
+  copyable?: boolean;
+  iconColor?: string;
+} & FlexProps) => (
   
 );
 
-const CopyableText: React.FC<
-  {
-    displayText: string;
-    copyValue?: string;
-    toastMessage?: string;
-    iconColor?: string;
-  } & FlexProps
-> = ({ displayText, copyValue, toastMessage, iconColor, ...rest }) => {
+const CopyableText = ({
+  displayText,
+  copyValue,
+  toastMessage,
+  iconColor,
+  ...rest
+}: {
+  displayText: string;
+  copyValue?: string;
+  toastMessage?: string;
+  iconColor?: string;
+} & FlexProps) => {
   const toast = useToast();
   const onClickCopyIcon = async () => {
     if (!copyValue) {
diff --git a/apps/desktop/src/components/DrawerTopButtons.tsx b/apps/desktop/src/components/DrawerTopButtons.tsx
index f78937e5f..59e671c7d 100644
--- a/apps/desktop/src/components/DrawerTopButtons.tsx
+++ b/apps/desktop/src/components/DrawerTopButtons.tsx
@@ -1,13 +1,13 @@
 import { Flex, type FlexProps } from "@chakra-ui/react";
-import type React from "react";
 
 import { CloseDrawerButton } from "./CloseDrawerButton";
 
-export const DrawerTopButtons: React.FC<
-  {
-    onClose: () => void;
-  } & FlexProps
-> = ({ onClose, ...props }) => (
+export const DrawerTopButtons = ({
+  onClose,
+  ...props
+}: {
+  onClose: () => void;
+} & FlexProps) => (
   
     
   
diff --git a/apps/desktop/src/components/ErrorPage.tsx b/apps/desktop/src/components/ErrorPage.tsx
index cd5a3126a..4c029208a 100644
--- a/apps/desktop/src/components/ErrorPage.tsx
+++ b/apps/desktop/src/components/ErrorPage.tsx
@@ -14,7 +14,7 @@ const refresh = () => {
   window.location.href = "/";
 };
 
-export const ErrorPage: React.FC = () => {
+export const ErrorPage = () => {
   const { modalElement: OffboardingModal, onOpen: onOpenOffboardingModal } = useOffboardingModal();
 
   return (
diff --git a/apps/desktop/src/components/ExternalLink.tsx b/apps/desktop/src/components/ExternalLink.tsx
index ce57f9c53..fb9cca378 100644
--- a/apps/desktop/src/components/ExternalLink.tsx
+++ b/apps/desktop/src/components/ExternalLink.tsx
@@ -1,11 +1,11 @@
 import { Link, type LinkProps } from "@chakra-ui/react";
 import { type PropsWithChildren } from "react";
 
-export const ExternalLink: React.FC> = ({
+export const ExternalLink = ({
   href,
   children,
   ...props
-}) => (
+}: PropsWithChildren<{ href: string } & LinkProps>) => (
    `#${md5(address).slice(0, 6)}`;
 
-export const Identicon: React.FC<
-  {
-    address: Address;
-    identiconSize: number;
-  } & ChakraProps
-> = ({ address, identiconSize, ...props }) => (
+export const Identicon = ({
+  address,
+  identiconSize,
+  ...props
+}: {
+  address: Address;
+  identiconSize: number;
+} & ChakraProps) => (
   
-    
+    
   
 );
diff --git a/apps/desktop/src/components/MakiLogo.tsx b/apps/desktop/src/components/MakiLogo.tsx
index e53027d9b..6cc630d97 100644
--- a/apps/desktop/src/components/MakiLogo.tsx
+++ b/apps/desktop/src/components/MakiLogo.tsx
@@ -1,12 +1,11 @@
 import { type IconProps } from "@chakra-ui/react";
 import { useSelectedNetwork } from "@umami/state";
-import type React from "react";
 
 import { MakiIcon } from "../assets/icons";
 
 const ORANGE = "#F74F18";
 
-export const MakiLogo: React.FC = props => {
+export const MakiLogo = (props: IconProps) => {
   const network = useSelectedNetwork();
 
   return (
diff --git a/apps/desktop/src/components/NestedScroll.tsx b/apps/desktop/src/components/NestedScroll.tsx
index 1e6ef1326..d7862df4d 100644
--- a/apps/desktop/src/components/NestedScroll.tsx
+++ b/apps/desktop/src/components/NestedScroll.tsx
@@ -1,8 +1,7 @@
 import { Box } from "@chakra-ui/react";
-import type React from "react";
 import { type ReactNode } from "react";
 
-export const NestedScroll: React.FC<{ children: ReactNode }> = props => (
+export const NestedScroll = (props: { children: ReactNode }) => (
   
     {props.children}
   
diff --git a/apps/desktop/src/components/NoItems/index.tsx b/apps/desktop/src/components/NoItems/index.tsx
index 6ebe61f3a..e21178f7d 100644
--- a/apps/desktop/src/components/NoItems/index.tsx
+++ b/apps/desktop/src/components/NoItems/index.tsx
@@ -19,13 +19,16 @@ const SIZES = {
 };
 type AvailableSizes = keyof typeof SIZES;
 
-export const NoItems: React.FC<
-  PropsWithChildren<{
-    title: string;
-    description: string;
-    size: AvailableSizes;
-  }>
-> = ({ title, description, children, size }) => (
+export const NoItems = ({
+  title,
+  description,
+  children,
+  size,
+}: PropsWithChildren<{
+  title: string;
+  description: string;
+  size: AvailableSizes;
+}>) => (
   
     
       
@@ -44,7 +47,7 @@ export const NoItems: React.FC<
   
 );
 
-export const NoOperations: React.FC<{ size: AvailableSizes }> = ({ size }) => (
+export const NoOperations = ({ size }: { size: AvailableSizes }) => (
    = ({ size }) => (
   />
 );
 
-export const NoNFTs: React.FC<{ size: AvailableSizes }> = ({ size }) => (
+export const NoNFTs = ({ size }: { size: AvailableSizes }) => (
    = ({ size }) => (
   
 );
 
-export const NoTokens: React.FC<{ size: AvailableSizes }> = ({ size }) => (
+export const NoTokens = ({ size }: { size: AvailableSizes }) => (
    void;
-}> = ({ goToStep }) => {
-  const [isChecked, setIsChecked] = React.useState(false);
+export const Eula = ({ goToStep }: { goToStep: (step: OnboardingStep) => void }) => {
+  const [isChecked, setIsChecked] = useState(false);
   return (
     } title="Accept to Continue">
       <>
diff --git a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
index 91067fc60..be3129920 100644
--- a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
+++ b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
@@ -6,10 +6,13 @@ import { FormErrorMessage } from "../../../FormErrorMessage";
 import { PasswordInput } from "../../../PasswordInput";
 import { ModalContentWrapper } from "../../ModalContentWrapper";
 
-export const EnterAndConfirmPassword: React.FC<{
+export const EnterAndConfirmPassword = ({
+  onSubmit: onSubmitPassword,
+  isLoading,
+}: {
   onSubmit: (password: string) => void;
   isLoading: boolean;
-}> = ({ onSubmit: onSubmitPassword, isLoading }) => {
+}) => {
   type ConfirmPasswordFormValues = {
     password: string;
     confirm: string;
diff --git a/apps/desktop/src/components/Onboarding/notice/Notice.tsx b/apps/desktop/src/components/Onboarding/notice/Notice.tsx
index c30029bf9..fd6353aed 100644
--- a/apps/desktop/src/components/Onboarding/notice/Notice.tsx
+++ b/apps/desktop/src/components/Onboarding/notice/Notice.tsx
@@ -1,14 +1,11 @@
 import { Box, Button, ListItem, OrderedList } from "@chakra-ui/react";
 import { generate24WordMnemonic } from "@umami/state";
-import type React from "react";
 
 import { NoticeIcon } from "../../../assets/icons";
 import { ModalContentWrapper } from "../ModalContentWrapper";
 import { type OnboardingStep } from "../OnboardingStep";
 
-export const Notice: React.FC<{
-  goToStep: (step: OnboardingStep) => void;
-}> = ({ goToStep }) => {
+export const Notice = ({ goToStep }: { goToStep: (step: OnboardingStep) => void }) => {
   const noticeItems = [
     {
       content: "Write down your seed phrase and store it in a safe place.",
diff --git a/apps/desktop/src/components/OperationTile/ContractCallTile.tsx b/apps/desktop/src/components/OperationTile/ContractCallTile.tsx
index 8ca5a7970..60a753749 100644
--- a/apps/desktop/src/components/OperationTile/ContractCallTile.tsx
+++ b/apps/desktop/src/components/OperationTile/ContractCallTile.tsx
@@ -11,9 +11,7 @@ import { ContractIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const ContractCallTile: React.FC<{
-  operation: TransactionOperation;
-}> = ({ operation }) => (
+export const ContractCallTile = ({ operation }: { operation: TransactionOperation }) => (
   
     
       

diff --git a/apps/desktop/src/components/OperationTile/DelegationTile.tsx b/apps/desktop/src/components/OperationTile/DelegationTile.tsx
index c9ed16f8d..184177fa5 100644
--- a/apps/desktop/src/components/OperationTile/DelegationTile.tsx
+++ b/apps/desktop/src/components/OperationTile/DelegationTile.tsx
@@ -11,7 +11,7 @@ import { BakerIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const DelegationTile: React.FC<{ operation: DelegationOperation }> = ({ operation }) => {
+export const DelegationTile = ({ operation }: { operation: DelegationOperation }) => {
   const operationType = operation.newDelegate ? "Delegate" : "Delegation Ended";
 
   return (
diff --git a/apps/desktop/src/components/OperationTile/Fee.tsx b/apps/desktop/src/components/OperationTile/Fee.tsx
index 3074cd867..570b95553 100644
--- a/apps/desktop/src/components/OperationTile/Fee.tsx
+++ b/apps/desktop/src/components/OperationTile/Fee.tsx
@@ -11,7 +11,6 @@ import {
 } from "@umami/tzkt";
 import { BigNumber } from "bignumber.js";
 import { get } from "lodash";
-import type React from "react";
 import { useContext } from "react";
 
 import { OperationTileContext } from "./OperationTileContext";
@@ -19,7 +18,9 @@ import colors from "../../style/colors";
 
 const FEE_FIELDS = ["bakerFee", "storageFee", "allocationFee"];
 
-export const Fee: React.FC<{
+export const Fee = ({
+  operation,
+}: {
   operation:
     | TransactionOperation
     | DelegationOperation
@@ -27,7 +28,7 @@ export const Fee: React.FC<{
     | StakeOperation
     | UnstakeOperation
     | FinalizeUnstakeOperation;
-}> = ({ operation }) => {
+}) => {
   const tileContext = useContext(OperationTileContext);
   const isOwned = useIsOwnedAddress();
   const isOutgoing = isOwned(operation.sender.address);
diff --git a/apps/desktop/src/components/OperationTile/FinalizeUnstakeTile.tsx b/apps/desktop/src/components/OperationTile/FinalizeUnstakeTile.tsx
index 0e32c1d78..8141c8f0e 100644
--- a/apps/desktop/src/components/OperationTile/FinalizeUnstakeTile.tsx
+++ b/apps/desktop/src/components/OperationTile/FinalizeUnstakeTile.tsx
@@ -13,8 +13,8 @@ import { BakerIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const FinalizeUnstakeTile: React.FC<{ operation: FinalizeUnstakeOperation }> = memo(
-  ({ operation }) => {
+export const FinalizeUnstakeTile = memo(
+  ({ operation }: { operation: FinalizeUnstakeOperation }) => {
     const amount = prettyTezAmount(String(operation.amount));
 
     return (
diff --git a/apps/desktop/src/components/OperationTile/InternalPrefix.tsx b/apps/desktop/src/components/OperationTile/InternalPrefix.tsx
index 7bffa535e..de3549e59 100644
--- a/apps/desktop/src/components/OperationTile/InternalPrefix.tsx
+++ b/apps/desktop/src/components/OperationTile/InternalPrefix.tsx
@@ -11,9 +11,7 @@ import colors from "../../style/colors";
  *
  * @param operation -
  */
-export const InternalPrefix: React.FC<{
-  operation: TzktCombinedOperation;
-}> = ({ operation }) => {
+export const InternalPrefix = ({ operation }: { operation: TzktCombinedOperation }) => {
   let target;
   let sender;
 
diff --git a/apps/desktop/src/components/OperationTile/OperationStatus.tsx b/apps/desktop/src/components/OperationTile/OperationStatus.tsx
index d0d805acc..4e1140232 100644
--- a/apps/desktop/src/components/OperationTile/OperationStatus.tsx
+++ b/apps/desktop/src/components/OperationTile/OperationStatus.tsx
@@ -2,10 +2,7 @@ import { useIsBlockFinalised } from "@umami/state";
 
 import { CheckmarkIcon, CrossedCircleIcon, HourglassIcon } from "../../assets/icons";
 
-export const OperationStatus: React.FC<{ level: number; status?: string }> = ({
-  level,
-  status,
-}) => {
+export const OperationStatus = ({ level, status }: { level: number; status?: string }) => {
   const isFinalised = useIsBlockFinalised(level);
 
   // if we don't know the status we assume it's applied
diff --git a/apps/desktop/src/components/OperationTile/OperationTile.tsx b/apps/desktop/src/components/OperationTile/OperationTile.tsx
index 7f2e2f842..3751d74a3 100644
--- a/apps/desktop/src/components/OperationTile/OperationTile.tsx
+++ b/apps/desktop/src/components/OperationTile/OperationTile.tsx
@@ -1,7 +1,6 @@
 import { fromRawToken } from "@umami/core";
 import { useGetTokenTransfer } from "@umami/state";
 import { type TzktCombinedOperation } from "@umami/tzkt";
-import type React from "react";
 
 import { ContractCallTile } from "./ContractCallTile";
 import { DelegationTile } from "./DelegationTile";
@@ -12,9 +11,7 @@ import { TokenTransferTile } from "./TokenTransferTile";
 import { TransactionTile } from "./TransactionTile";
 import { UnstakeTile } from "./UnstakeTile";
 
-export const OperationTile: React.FC<{
-  operation: TzktCombinedOperation;
-}> = ({ operation }) => {
+export const OperationTile = ({ operation }: { operation: TzktCombinedOperation }) => {
   const getTokenTransfer = useGetTokenTransfer();
 
   switch (operation.type) {
diff --git a/apps/desktop/src/components/OperationTile/OperationTileContext.ts b/apps/desktop/src/components/OperationTile/OperationTileContext.ts
index 0c5ee9d3d..557adfb69 100644
--- a/apps/desktop/src/components/OperationTile/OperationTileContext.ts
+++ b/apps/desktop/src/components/OperationTile/OperationTileContext.ts
@@ -1,10 +1,10 @@
 import { type Address } from "@umami/tezos";
-import React from "react";
+import { createContext } from "react";
 
 export type OperationTileContextType =
   | { mode: "page" }
   | { mode: "drawer"; selectedAddress: Address };
 
-export const OperationTileContext = React.createContext({
+export const OperationTileContext = createContext({
   mode: "page",
 });
diff --git a/apps/desktop/src/components/OperationTile/OperationTypeWrapper.tsx b/apps/desktop/src/components/OperationTile/OperationTypeWrapper.tsx
index ecea72fc3..863b76777 100644
--- a/apps/desktop/src/components/OperationTile/OperationTypeWrapper.tsx
+++ b/apps/desktop/src/components/OperationTile/OperationTypeWrapper.tsx
@@ -5,7 +5,7 @@ import { OperationTileContext } from "./OperationTileContext";
 import colors from "../../style/colors";
 
 // It hides the operation type in the drawer to save space
-export const OperationTypeWrapper: React.FC = ({ children }) => {
+export const OperationTypeWrapper = ({ children }: PropsWithChildren) => {
   const tileContext = useContext(OperationTileContext);
 
   if (tileContext.mode === "drawer") {
diff --git a/apps/desktop/src/components/OperationTile/OriginationTile.tsx b/apps/desktop/src/components/OperationTile/OriginationTile.tsx
index 570855c1d..54ad820a0 100644
--- a/apps/desktop/src/components/OperationTile/OriginationTile.tsx
+++ b/apps/desktop/src/components/OperationTile/OriginationTile.tsx
@@ -12,7 +12,7 @@ import { ContractIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const OriginationTile: React.FC<{ operation: OriginationOperation }> = ({ operation }) => {
+export const OriginationTile = ({ operation }: { operation: OriginationOperation }) => {
   const isMultisig =
     operation.originatedContract.codeHash === CODE_HASH &&
     operation.originatedContract.typeHash === TYPE_HASH;
diff --git a/apps/desktop/src/components/OperationTile/StakeTile.tsx b/apps/desktop/src/components/OperationTile/StakeTile.tsx
index f75809aff..ffa374584 100644
--- a/apps/desktop/src/components/OperationTile/StakeTile.tsx
+++ b/apps/desktop/src/components/OperationTile/StakeTile.tsx
@@ -13,7 +13,7 @@ import { BakerIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const StakeTile: React.FC<{ operation: StakeOperation }> = memo(({ operation }) => {
+export const StakeTile = memo(({ operation }: { operation: StakeOperation }) => {
   const amount = prettyTezAmount(String(operation.amount));
 
   return (
diff --git a/apps/desktop/src/components/OperationTile/Timestamp.tsx b/apps/desktop/src/components/OperationTile/Timestamp.tsx
index 6b3309cf5..b343946c7 100644
--- a/apps/desktop/src/components/OperationTile/Timestamp.tsx
+++ b/apps/desktop/src/components/OperationTile/Timestamp.tsx
@@ -3,7 +3,7 @@ import { differenceInDays, format, formatDistance } from "date-fns";
 
 import colors from "../../style/colors";
 
-export const Timestamp: React.FC<{ timestamp: string | undefined }> = ({ timestamp }) => {
+export const Timestamp = ({ timestamp }: { timestamp: string | undefined }) => {
   if (!timestamp) {
     return null;
   }
diff --git a/apps/desktop/src/components/OperationTile/TokenTransferTile.tsx b/apps/desktop/src/components/OperationTile/TokenTransferTile.tsx
index d33837b90..e40332550 100644
--- a/apps/desktop/src/components/OperationTile/TokenTransferTile.tsx
+++ b/apps/desktop/src/components/OperationTile/TokenTransferTile.tsx
@@ -18,7 +18,11 @@ import colors from "../../style/colors";
 import { getIPFSurl } from "../../utils/token/utils";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const TokenTransferTile: React.FC<{
+export const TokenTransferTile = ({
+  operation,
+  tokenTransfer,
+  token,
+}: {
   // externally originated token transfers
   // do not have a corresponding operation in the list
   // in fact, they might not even have a corresponding transaction
@@ -26,7 +30,7 @@ export const TokenTransferTile: React.FC<{
   operation?: TransactionOperation;
   tokenTransfer: TokenTransferOperation;
   token: Token;
-}> = ({ operation, tokenTransfer, token }) => {
+}) => {
   const rawAmount = tokenTransfer.amount;
 
   const operationDestination = useGetOperationDestination(
diff --git a/apps/desktop/src/components/OperationTile/TransactionTile.tsx b/apps/desktop/src/components/OperationTile/TransactionTile.tsx
index a6a40bac9..3475b914c 100644
--- a/apps/desktop/src/components/OperationTile/TransactionTile.tsx
+++ b/apps/desktop/src/components/OperationTile/TransactionTile.tsx
@@ -17,7 +17,7 @@ import {
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const TransactionTile: React.FC<{ operation: TransactionOperation }> = ({ operation }) => {
+export const TransactionTile = ({ operation }: { operation: TransactionOperation }) => {
   const operationDestination = useGetOperationDestination(
     operation.sender.address,
     operation.target?.address
diff --git a/apps/desktop/src/components/OperationTile/TzktLink.tsx b/apps/desktop/src/components/OperationTile/TzktLink.tsx
index 5b9501620..aed0341f6 100644
--- a/apps/desktop/src/components/OperationTile/TzktLink.tsx
+++ b/apps/desktop/src/components/OperationTile/TzktLink.tsx
@@ -22,7 +22,7 @@ type OperationIdProps = {
 
 type Props = OperationHashProps | OperationIdProps;
 
-export const TzktLink: React.FC> = ({
+export const TzktLink = ({
   hash,
   counter,
   transactionId,
@@ -30,7 +30,7 @@ export const TzktLink: React.FC> = ({
   migrationId,
   children,
   ...props
-}) => {
+}: PropsWithChildren) => {
   const { tzktExplorerUrl } = useSelectedNetwork();
   let url = tzktExplorerUrl;
 
diff --git a/apps/desktop/src/components/OperationTile/UnstakeTile.tsx b/apps/desktop/src/components/OperationTile/UnstakeTile.tsx
index 39a53b609..f491c8c8d 100644
--- a/apps/desktop/src/components/OperationTile/UnstakeTile.tsx
+++ b/apps/desktop/src/components/OperationTile/UnstakeTile.tsx
@@ -13,7 +13,7 @@ import { BakerIcon } from "../../assets/icons";
 import colors from "../../style/colors";
 import { AddressPill } from "../AddressPill/AddressPill";
 
-export const UnstakeTile: React.FC<{ operation: UnstakeOperation }> = memo(({ operation }) => {
+export const UnstakeTile = memo(({ operation }: { operation: UnstakeOperation }) => {
   const amount = prettyTezAmount(String(operation.amount));
 
   return (
diff --git a/apps/desktop/src/components/OperationTile/useShowAddress.test.tsx b/apps/desktop/src/components/OperationTile/useShowAddress.test.tsx
index 665ee1db1..8c931803e 100644
--- a/apps/desktop/src/components/OperationTile/useShowAddress.test.tsx
+++ b/apps/desktop/src/components/OperationTile/useShowAddress.test.tsx
@@ -1,14 +1,15 @@
 import { mockImplicitAddress } from "@umami/tezos";
+import { type PropsWithChildren } from "react";
 
 import { OperationTileContext } from "./OperationTileContext";
 import { useShowAddress } from "./useShowAddress";
 import { renderHook } from "../../mocks/testUtils";
 
-const PageWrapper = ({ children }: { children: React.ReactNode }) => (
+const PageWrapper = ({ children }: PropsWithChildren) => (
   {children}
 );
 
-const DrawerWrapper = ({ children }: { children: React.ReactNode }) => (
+const DrawerWrapper = ({ children }: PropsWithChildren) => (
   
diff --git a/apps/desktop/src/components/PopoverMenu.tsx b/apps/desktop/src/components/PopoverMenu.tsx
index 047134cc5..d9175e8a2 100644
--- a/apps/desktop/src/components/PopoverMenu.tsx
+++ b/apps/desktop/src/components/PopoverMenu.tsx
@@ -7,14 +7,12 @@ import {
   PopoverTrigger,
   useDisclosure,
 } from "@chakra-ui/react";
-import { type ReactNode } from "react";
+import { type PropsWithChildren } from "react";
 
 import { ThreeDotsIcon } from "../assets/icons";
 import colors from "../style/colors";
 
-export const PopoverMenu: React.FC<{
-  children: ReactNode;
-}> = props => {
+export const PopoverMenu = (props: PropsWithChildren) => {
   const { onOpen, onClose, isOpen } = useDisclosure();
   return (
     
diff --git a/apps/desktop/src/components/PrettyNumber.tsx b/apps/desktop/src/components/PrettyNumber.tsx
index 91b5b7bc4..e1eece7ca 100644
--- a/apps/desktop/src/components/PrettyNumber.tsx
+++ b/apps/desktop/src/components/PrettyNumber.tsx
@@ -5,12 +5,14 @@ const splitNumber = (num: string) => {
   return { integer, decimal };
 };
 
-export const PrettyNumber: React.FC<
-  {
-    number: string;
-    size?: "md" | "lg";
-  } & FlexProps
-> = ({ number, size = "md", ...props }) => {
+export const PrettyNumber = ({
+  number,
+  size = "md",
+  ...props
+}: {
+  number: string;
+  size?: "md" | "lg";
+} & FlexProps) => {
   const intSize = size === "md" ? "md" : "lg";
   const fractionSize = size === "md" ? "sm" : "md";
 
diff --git a/apps/desktop/src/components/ReactIdenticon.tsx b/apps/desktop/src/components/ReactIdenticon.tsx
index 5a25c63a6..6360d7543 100644
--- a/apps/desktop/src/components/ReactIdenticon.tsx
+++ b/apps/desktop/src/components/ReactIdenticon.tsx
@@ -2,61 +2,58 @@
 // the library is unmaintained, but it's a simple component
 // and will stop working with the next major React release
 import md5 from "md5";
-import React, { type CSSProperties, useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 
 type Props = {
   count?: number;
   background: string;
   size: number;
   string: string;
-  style?: CSSProperties;
 };
 
-export const ReactIdenticon: React.FC = React.memo(
-  ({ count = 5, background, string, size }) => {
-    const canvasRef = useRef(null);
-
-    useEffect(() => {
-      updateCanvas();
-    });
-
-    const updateCanvas = () => {
-      const hash = md5(string);
-      const block = Math.floor(size / count);
-      const hashcolor = hash.slice(0, 6);
-
-      const canvas = canvasRef.current!;
-
-      canvas.width = block * count;
-      canvas.height = block * count;
-      const arr = hash
-        .split("")
-        .map(el => parseInt(el, 16))
-        .map(n => (n < 8 ? 0 : 1));
-
-      const map = [];
-
-      map[0] = map[4] = arr.slice(0, 5);
-      map[1] = map[3] = arr.slice(5, 10);
-      map[2] = arr.slice(10, 15);
-
-      const ctx = canvas.getContext("2d")!;
-      ctx.imageSmoothingEnabled = false;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      map.forEach((row, i) => {
-        row.forEach((el, j) => {
-          if (el) {
-            ctx.fillStyle = "#" + hashcolor;
-            ctx.fillRect(block * i, block * j, block, block);
-          } else {
-            ctx.fillStyle = background;
-            ctx.fillRect(block * i, block * j, block, block);
-          }
-        });
+export const ReactIdenticon = memo(({ count = 5, background, string, size }: Props) => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    updateCanvas();
+  });
+
+  const updateCanvas = () => {
+    const hash = md5(string);
+    const block = Math.floor(size / count);
+    const hashcolor = hash.slice(0, 6);
+
+    const canvas = canvasRef.current!;
+
+    canvas.width = block * count;
+    canvas.height = block * count;
+    const arr = hash
+      .split("")
+      .map(el => parseInt(el, 16))
+      .map(n => (n < 8 ? 0 : 1));
+
+    const map = [];
+
+    map[0] = map[4] = arr.slice(0, 5);
+    map[1] = map[3] = arr.slice(5, 10);
+    map[2] = arr.slice(10, 15);
+
+    const ctx = canvas.getContext("2d")!;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    map.forEach((row, i) => {
+      row.forEach((el, j) => {
+        if (el) {
+          ctx.fillStyle = "#" + hashcolor;
+          ctx.fillRect(block * i, block * j, block, block);
+        } else {
+          ctx.fillStyle = background;
+          ctx.fillRect(block * i, block * j, block, block);
+        }
       });
-    };
+    });
+  };
 
-    return ;
-  }
-);
+  return ;
+});
diff --git a/apps/desktop/src/components/RenameRemoveMenu.tsx b/apps/desktop/src/components/RenameRemoveMenu.tsx
index cfd8f4f61..8105488e5 100644
--- a/apps/desktop/src/components/RenameRemoveMenu.tsx
+++ b/apps/desktop/src/components/RenameRemoveMenu.tsx
@@ -3,9 +3,12 @@ import { Box, Button, Divider, Flex, Text } from "@chakra-ui/react";
 import { PopoverMenu } from "./PopoverMenu";
 import { PenIcon, TrashIcon } from "../assets/icons";
 
-export const RenameRemoveMenu: React.FC<{ onRename: () => void; onRemove?: () => void }> = ({
+export const RenameRemoveMenu = ({
   onRename,
   onRemove,
+}: {
+  onRename: () => void;
+  onRemove?: () => void;
 }) => (
   
     
diff --git a/apps/desktop/src/components/Select.tsx b/apps/desktop/src/components/Select.tsx
index 26982244d..482a24b5b 100644
--- a/apps/desktop/src/components/Select.tsx
+++ b/apps/desktop/src/components/Select.tsx
@@ -5,11 +5,15 @@ import { ChevronDownIcon } from "../assets/icons";
 import colors from "../style/colors";
 
 type Option = { label: string; value: string };
-export const Select: React.FC<{
+export const Select = ({
+  selected,
+  options,
+  onChange,
+}: {
   selected: Option;
   options: Option[];
   onChange: (newValue: string) => void;
-}> = ({ selected, options, onChange }) => {
+}) => {
   const [currentOption, setCurrentOption] = useState(selected);
   const [showOptions, setShowOptions] = useState(false);
 
diff --git a/apps/desktop/src/components/SendButton.tsx b/apps/desktop/src/components/SendButton.tsx
index 39e79d1d4..5102fb544 100644
--- a/apps/desktop/src/components/SendButton.tsx
+++ b/apps/desktop/src/components/SendButton.tsx
@@ -2,11 +2,12 @@ import { Button, type ButtonProps, Text } from "@chakra-ui/react";
 
 import { OutgoingArrow } from "../assets/icons";
 
-export const SendButton: React.FC<
-  {
-    onClick: () => void;
-  } & ButtonProps
-> = ({ onClick, ...buttonProps }) => (
+export const SendButton = ({
+  onClick,
+  ...buttonProps
+}: {
+  onClick: () => void;
+} & ButtonProps) => (