refactor: shared components (#43)

Co-authored-by: nguyenlejoe <[email protected]>
covalenthq · Jan 30, 2024 · 8e06e77 · 8e06e77
1 parent 22453ee
commit 8e06e77
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 55 deletions.
diff --git 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<AddressProps> = ({ address }) => {

diff --git a/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx b/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx b/src/components/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx
@@ -28,7 +28,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
 import { Button } from "@/components/ui/button";
 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 XYKPoolListViewProps } from "@/utils/types/organisms.types";

diff --git a/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx b/src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
@@ -28,11 +28,10 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
 import { Button } from "@/components/ui/button";
 import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
-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 { type XYKTokenListViewProps } from "@/utils/types/organisms.types";
-import { BalancePriceDelta } from "@/components/Atoms/BalancePriceDelta/BalancePriceDelta";
 import { SkeletonTable } from "@/components/ui/skeletonTable";
 import {
     Pagination,

diff --git a/src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx b/src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx
@@ -31,7 +31,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
 import { Button } from "@/components/ui/button";
 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 XYKTokenPoolListViewProps } from "@/utils/types/organisms.types";

diff --git a/src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx b/src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx
@@ -31,7 +31,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
 import { Button } from "@/components/ui/button";
 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 XYKWalletPoolListViewProps } from "@/utils/types/organisms.types";

diff --git a/...s/BalancePriceDelta/BalancePriceDelta.tsx → src/components/Shared/BalancePriceDelta.tsx b/...s/BalancePriceDelta/BalancePriceDelta.tsx → 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<BalancePriceDeltaProps> = ({
+const BalancePriceDelta: React.FC<BalancePriceDeltaProps> = ({
     numerator,
     denominator,
 }) => {
@@ -26,3 +26,5 @@ export const BalancePriceDelta: React.FC<BalancePriceDeltaProps> = ({
 
     return <span>-</span>;
 };
+
+export default BalancePriceDelta;
diff --git a/src/components/Atoms/CopyImage/CopyImage.tsx → src/components/Shared/CopyImage.tsx b/src/components/Atoms/CopyImage/CopyImage.tsx → 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<CopyImageProps> = ({ url }) => {
+const CopyImage: React.FC<CopyImageProps> = ({ url }) => {
     const [copied, showCopied] = useState<boolean>(false);
 
     return copied ? (
@@ -26,3 +26,5 @@ export const CopyImage: React.FC<CopyImageProps> = ({ url }) => {
         />
     );
 };
+
+export default CopyImage;
diff --git a/...ponents/Atoms/IconWrapper/IconWrapper.tsx → src/components/Shared/IconWrapper.tsx b/...ponents/Atoms/IconWrapper/IconWrapper.tsx → 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<IconWrapperPropsType> = ({
+const IconWrapper: React.FC<IconWrapperProps> = ({
     class_name,
     icon_class_name,
     on_click,
@@ -23,3 +23,5 @@ export const IconWrapper: React.FC<IconWrapperPropsType> = ({
         </div>
     );
 };
+
+export default IconWrapper;
diff --git a/src/components/Shared/index.tsx 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/...Atoms/ThemeChange/ThemeChange.stories.tsx → ...nents/ThemeConfig/ThemeConfig.stories.tsx b/...Atoms/ThemeChange/ThemeChange.stories.tsx → ...nents/ThemeConfig/ThemeConfig.stories.tsx
diff --git 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
@@ -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<HTMLDivElement>) => void;
+    icon_size?: string;
+    icon_type?: string;
+}