diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx index 7d192a0b..b1c3e1fc 100644 --- a/src/components/Atoms/Address/Address.tsx +++ b/src/components/Atoms/Address/Address.tsx @@ -1,5 +1,5 @@ import { copyToClipboard, truncate } from "@/utils/functions"; -import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "@/components/Shared"; import { type AddressProps } from "@/utils/types/atoms.types"; export const Address: React.FC = ({ address }) => { diff --git a/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx b/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx deleted file mode 100644 index a4fadffa..00000000 --- a/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useMemo } from "react"; -import { type NetPriceDeltaProps } from "@/utils/types/atoms.types"; - -export const NetPriceDelta: React.FC = ({ - numerator, - denominator, -}) => { - const DELTA = useMemo( - () => ((numerator - denominator) / denominator) * 100, - [numerator, denominator] - ); - - const AMOUNT = useMemo(() => (DELTA / 100) * denominator, [DELTA]); - - const SUMMARY_STRING = useMemo( - () => - `${DELTA.toLocaleString("en", { - maximumFractionDigits: 2, - })}% (${AMOUNT.toLocaleString("en", { - style: "currency", - currency: "USD", - maximumFractionDigits: 2, - })})`, - [AMOUNT, DELTA] - ); - - if (DELTA > 1) { - return ▲{SUMMARY_STRING}; - } else if (DELTA < 1) { - return ▼{SUMMARY_STRING}; - } - - return -; -}; diff --git a/src/components/Molecules/AccountCardView/AccountCardView.tsx b/src/components/Molecules/AccountCardView/AccountCardView.tsx index 0e55478b..24b40e27 100644 --- a/src/components/Molecules/AccountCardView/AccountCardView.tsx +++ b/src/components/Molecules/AccountCardView/AccountCardView.tsx @@ -9,7 +9,7 @@ import QRCode from "react-qr-code"; import { useState } from "react"; import { useToast } from "../../../utils/hooks/use-toast"; import { AddressAvatar } from "../../Atoms/AddressAvatar/AddressAvatar"; -import { IconWrapper } from "../../Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "../../Shared"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; import { type AccountCardViewProps } from "@/utils/types/molecules.types"; diff --git a/src/components/Molecules/CollectionCardView/CollectionCardView.tsx b/src/components/Molecules/CollectionCardView/CollectionCardView.tsx index c2bff11f..021e7702 100644 --- a/src/components/Molecules/CollectionCardView/CollectionCardView.tsx +++ b/src/components/Molecules/CollectionCardView/CollectionCardView.tsx @@ -9,7 +9,7 @@ import QRCode from "react-qr-code"; import { useEffect, useState } from "react"; import { useToast } from "../../../utils/hooks/use-toast"; import { AddressAvatar } from "../../Atoms/AddressAvatar/AddressAvatar"; -import { IconWrapper } from "../../Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "../../Shared"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; import { type CollectionCardViewProps } from "@/utils/types/molecules.types"; import { useCovalent } from "@/utils/store/Covalent"; diff --git a/src/components/Organisms/NFTs/NFTCollectionTokenListView/NFTCollectionTokenListView.tsx b/src/components/Organisms/NFTs/NFTCollectionTokenListView/NFTCollectionTokenListView.tsx index 8d107d07..c85198dc 100644 --- a/src/components/Organisms/NFTs/NFTCollectionTokenListView/NFTCollectionTokenListView.tsx +++ b/src/components/Organisms/NFTs/NFTCollectionTokenListView/NFTCollectionTokenListView.tsx @@ -29,7 +29,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "@/components/Shared"; export const NFTCollectionTokenListView: React.FC< NFTCollectionTokenListViewProps diff --git a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx index 3e63a795..c2a33e36 100644 --- a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx +++ b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx @@ -23,7 +23,7 @@ import { Skeleton } from "@/components/ui/skeleton"; import { timestampParser } from "@/utils/functions"; import { TokenAvatar } from "@/components/Atoms/TokenAvatar/TokenAvatar"; import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting"; -import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "@/components/Shared"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; import { useCovalent } from "@/utils/store/Covalent"; import { type AddressActivityListViewProps } from "@/utils/types/organisms.types"; diff --git a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx index 8208bc40..4f31f3bd 100644 --- a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx +++ b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx @@ -35,11 +35,10 @@ import { Skeleton } from "@/components/ui/skeleton"; import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar"; import { Button } from "@/components/ui/button"; import { timestampParser } from "@/utils/functions"; -import { BalancePriceDelta } from "@/components/Atoms/BalancePriceDelta/BalancePriceDelta"; import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView"; import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting"; import { sum } from "lodash"; -import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; +import { BalancePriceDelta, IconWrapper } from "@/components/Shared"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; import { useCovalent } from "@/utils/store/Covalent"; import { diff --git a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx index a1e2f395..358bf8cd 100644 --- a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx +++ b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx @@ -45,7 +45,7 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { AddressAvatar } from "@/components/Atoms/AddressAvatar/AddressAvatar"; -import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "@/components/Shared"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; import { type TokenTransfersListViewProps, diff --git a/src/components/Atoms/BalancePriceDelta/BalancePriceDelta.tsx b/src/components/Shared/BalancePriceDelta.tsx similarity index 78% rename from src/components/Atoms/BalancePriceDelta/BalancePriceDelta.tsx rename to src/components/Shared/BalancePriceDelta.tsx index 116c287a..df909394 100644 --- a/src/components/Atoms/BalancePriceDelta/BalancePriceDelta.tsx +++ b/src/components/Shared/BalancePriceDelta.tsx @@ -1,7 +1,7 @@ -import { type BalancePriceDeltaProps } from "@/utils/types/atoms.types"; +import { type BalancePriceDeltaProps } from "@/utils/types/shared.types"; import { useMemo } from "react"; -export const BalancePriceDelta: React.FC = ({ +const BalancePriceDelta: React.FC = ({ numerator, denominator, }) => { @@ -26,3 +26,5 @@ export const BalancePriceDelta: React.FC = ({ return -; }; + +export default BalancePriceDelta; diff --git a/src/components/Atoms/CopyImage/CopyImage.tsx b/src/components/Shared/CopyImage.tsx similarity index 79% rename from src/components/Atoms/CopyImage/CopyImage.tsx rename to src/components/Shared/CopyImage.tsx index e08a439f..1d43a69f 100644 --- a/src/components/Atoms/CopyImage/CopyImage.tsx +++ b/src/components/Shared/CopyImage.tsx @@ -1,9 +1,9 @@ import { useState } from "react"; -import { IconWrapper } from "../IconWrapper/IconWrapper"; -import { type CopyImageProps } from "@/utils/types/atoms.types"; +import { IconWrapper } from "."; +import { type CopyImageProps } from "@/utils/types/shared.types"; import { copyToClipboard } from "@/utils/functions"; -export const CopyImage: React.FC = ({ url }) => { +const CopyImage: React.FC = ({ url }) => { const [copied, showCopied] = useState(false); return copied ? ( @@ -26,3 +26,5 @@ export const CopyImage: React.FC = ({ url }) => { /> ); }; + +export default CopyImage; diff --git a/src/components/Atoms/IconWrapper/IconWrapper.tsx b/src/components/Shared/IconWrapper.tsx similarity index 77% rename from src/components/Atoms/IconWrapper/IconWrapper.tsx rename to src/components/Shared/IconWrapper.tsx index 85bea7dc..3e5fd292 100644 --- a/src/components/Atoms/IconWrapper/IconWrapper.tsx +++ b/src/components/Shared/IconWrapper.tsx @@ -1,6 +1,6 @@ -import { type IconWrapperPropsType } from "@/utils/types/atoms.types"; +import { type IconWrapperProps } from "@/utils/types/shared.types"; -export const IconWrapper: React.FC = ({ +const IconWrapper: React.FC = ({ class_name, icon_class_name, on_click, @@ -23,3 +23,5 @@ export const IconWrapper: React.FC = ({ ); }; + +export default IconWrapper; diff --git a/src/components/Shared/index.tsx b/src/components/Shared/index.tsx new file mode 100644 index 00000000..f8458170 --- /dev/null +++ b/src/components/Shared/index.tsx @@ -0,0 +1,3 @@ +export { default as BalancePriceDelta } from "./BalancePriceDelta"; +export { default as CopyImage } from "./CopyImage"; +export { default as IconWrapper } from "./IconWrapper"; diff --git a/src/components/ui/tableHeaderSorting.tsx b/src/components/ui/tableHeaderSorting.tsx index 3b386175..538cb817 100644 --- a/src/components/ui/tableHeaderSorting.tsx +++ b/src/components/ui/tableHeaderSorting.tsx @@ -1,5 +1,5 @@ import { type Column } from "@tanstack/react-table"; -import { IconWrapper } from "../Atoms/IconWrapper/IconWrapper"; +import { IconWrapper } from "../Shared"; export interface TableHeaderSortingProps { header_name: string; diff --git a/src/utils/types/shared.types.ts b/src/utils/types/shared.types.ts new file mode 100644 index 00000000..1e7302b8 --- /dev/null +++ b/src/utils/types/shared.types.ts @@ -0,0 +1,16 @@ +export interface BalancePriceDeltaProps { + numerator: number; + denominator: number; +} + +export interface CopyImageProps { + url: string; +} + +export interface IconWrapperProps { + class_name?: string; + icon_class_name?: string; + on_click?: (e?: React.MouseEvent) => void; + icon_size?: string; + icon_type?: string; +}