Skip to content

Commit

Permalink
Refactor table skeletons
Browse files Browse the repository at this point in the history
  • Loading branch information
@nguyenlejoe
nguyenlejoe committed Jan 30, 2024
1 parent 80d4e36 commit 2ba85f0
Show file tree
Hide file tree
Showing 11 changed files with 21 additions and 246 deletions.
32 changes: 2 additions & 30 deletions src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { useCovalent } from "@/utils/store/Covalent";
import { type AddressActivityListViewProps } from "@/utils/types/organisms.types";
import { SkeletonTable } from "@/components/ui/skeletonTable";

export const AddressActivityListView: React.FC<
AddressActivityListViewProps
Expand Down Expand Up @@ -191,36 +192,7 @@ export const AddressActivityListView: React.FC<
});

const body = maybeResult.match({
None: () => (
<TableRow>
<TableCell
// colSpan={columns.length}
className="h-12 text-center"
></TableCell>
<TableCell
// colSpan={columns.length}
className="h-12 text-left"
>
<div className="float-left">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell
// colSpan={columns.length}
className="h-12 text-left"
>
<div className="float-left">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell
// colSpan={columns.length}
className="h-12 text-center"
>
<div className="text-center"></div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={1} />,
Some: () =>
error.error ? (
<TableRow>
Expand Down
32 changes: 2 additions & 30 deletions src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import {
type CrossChainBalanceItem,
type TokenBalancesListViewProps,
} from "@/utils/types/organisms.types";
import { SkeletonTable } from "@/components/ui/skeletonTable";

export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
chain_names,
Expand Down Expand Up @@ -545,36 +546,7 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
});

const body = filterResult.match({
None: () => (
<TableRow>
<TableCell className="h-12 text-center"></TableCell>
<TableCell className="h-12 text-right">
<div className="float-left">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={4} float="right" />,
Some: () =>
error.error ? (
<TableRow>
Expand Down
36 changes: 2 additions & 34 deletions src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import {
type TokenTransferMeta,
} from "@/utils/types/organisms.types";
import { useCovalent } from "@/utils/store/Covalent";
import { SkeletonTable } from "@/components/ui/skeletonTable";

const columns: ColumnDef<BlockTransactionWithContractTransfers>[] = [
{
Expand Down Expand Up @@ -324,40 +325,7 @@ export const TokenTransfersListView: React.FC<TokenTransfersListViewProps> = ({
});

const body = maybeResult.match({
None: () => (
<TableRow>
<TableCell
// colSpan={columns.length}
className="h-12 text-center"
>
<Skeleton size={GRK_SIZES.MEDIUM} />
</TableCell>
<TableCell
// colSpan={columns.length}
className="h-12 text-right"
>
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell
// colSpan={columns.length}
className="h-12 text-right"
>
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell
// colSpan={columns.length}
className="h-12 "
>
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={6} />,
Some: () => {
let lastGroup: TIME_SERIES_GROUP | null = null;
const now = new Date();
Expand Down
2 changes: 1 addition & 1 deletion src/components/Organisms/XYK/XYKPoolListView/XYKPoolListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,7 @@ export const XYKPoolListView: React.FC<XYKPoolListViewProps> = ({
});

const body = maybeResult.match({
None: () => <SkeletonTable />,
None: () => <SkeletonTable float="right" />,
Some: () =>
error.error ? (
<TableRow>
Expand Down
27 changes: 2 additions & 25 deletions src/components/Organisms/XYK/XYKPoolTransactionsListView/XYKPoolTransactionsListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ import {
TableRow,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Skeleton } from "@/components/ui/skeleton";
import { timestampParser } from "@/utils/functions";
import { Badge } from "@/components/ui/badge";
import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { type XYKPoolTransactionsListViewProps } from "@/utils/types/organisms.types";
import { useCovalent } from "@/utils/store/Covalent";
import { handleTokenTransactions } from "@/utils/functions/pretty-exchange-amount";
import { handleExchangeType } from "@/utils/functions/exchange-type";
import { SkeletonTable } from "@/components/ui/skeletonTable";

const columns: ColumnDef<ExchangeTransaction>[] = [
{
Expand Down Expand Up @@ -242,7 +241,6 @@ export const XYKPoolTransactionsListView: React.FC<
pool_address.trim()
);
setResult(new Some(response.data.items));

setError({ error: false, error_message: "" });
} catch (error) {
setResult(new Some([]));
Expand Down Expand Up @@ -271,28 +269,7 @@ export const XYKPoolTransactionsListView: React.FC<
});

const body = maybeResult.match({
None: () => (
<TableRow>
<TableCell className="h-12 text-center">
<Skeleton size={GRK_SIZES.MEDIUM} />
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell className="h-12 ">
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={4} />,
Some: () => {
return error.error ? (
<TableRow>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Organisms/XYK/XYKTokenListView/XYKTokenListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,7 +447,7 @@ export const XYKTokenListView: React.FC<XYKTokenListViewProps> = ({
});

const body = maybeResult.match({
None: () => <SkeletonTable cols={5} />,
None: () => <SkeletonTable cols={5} float="right" />,
Some: () =>
error.error ? (
<TableRow>
Expand Down
38 changes: 2 additions & 36 deletions src/components/Organisms/XYK/XYKTokenPoolListView/XYKTokenPoolListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ import {
TableRow,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Skeleton } from "@/components/ui/skeleton";
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 { GRK_SIZES } from "@/utils/constants/shared.constants";
import { useCovalent } from "@/utils/store/Covalent";
import { type XYKTokenPoolListViewProps } from "@/utils/types/organisms.types";
import { SkeletonTable } from "@/components/ui/skeletonTable";

export const XYKTokenPoolListView: React.FC<XYKTokenPoolListViewProps> = ({
chain_name,
Expand Down Expand Up @@ -472,41 +472,7 @@ export const XYKTokenPoolListView: React.FC<XYKTokenPoolListViewProps> = ({
});

const body = maybeResult.match({
None: () => (
<TableRow>
<TableCell className="h-12 text-center"></TableCell>
<TableCell className="h-12 text-right">
<div className="float-left">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={5} float="right" />,
Some: () =>
error.error ? (
<TableRow>
Expand Down
28 changes: 2 additions & 26 deletions src/components/Organisms/XYK/XYKTokenTransactionsListView/XYKTokenTransactionsListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ import {
TableRow,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Skeleton } from "@/components/ui/skeleton";
import { timestampParser } from "@/utils/functions";
import { Badge } from "@/components/ui/badge";
import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { type XYKTokenTransactionsListViewProps } from "@/utils/types/organisms.types";
import { useCovalent } from "@/utils/store/Covalent";
import { handleTokenTransactions } from "@/utils/functions/pretty-exchange-amount";
import { handleExchangeType } from "@/utils/functions/exchange-type";
import { SkeletonTable } from "@/components/ui/skeletonTable";

const columns: ColumnDef<ExchangeTransaction>[] = [
{
Expand Down Expand Up @@ -241,9 +240,7 @@ export const XYKTokenTransactionsListView: React.FC<
dex_name,
token_address.trim()
);
console.log(response);
setResult(new Some(response.data.items));

setError({ error: false, error_message: "" });
} catch (error) {
setResult(new Some([]));
Expand Down Expand Up @@ -272,28 +269,7 @@ export const XYKTokenTransactionsListView: React.FC<
});

const body = maybeResult.match({
None: () => (
<TableRow>
<TableCell className="h-12 text-center">
<Skeleton size={GRK_SIZES.MEDIUM} />
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
<TableCell className="h-12 ">
<div className="float-right">
<Skeleton size={GRK_SIZES.MEDIUM} />
</div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={4} />,
Some: () => {
return error.error ? (
<TableRow>
Expand Down
38 changes: 2 additions & 36 deletions src/components/Organisms/XYK/XYKWalletPoolListView/XYKWalletPoolListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ import {
TableRow,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Skeleton } from "@/components/ui/skeleton";
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 { GRK_SIZES } from "@/utils/constants/shared.constants";
import { useCovalent } from "@/utils/store/Covalent";
import { type XYKWalletPoolListViewProps } from "@/utils/types/organisms.types";
import { SkeletonTable } from "@/components/ui/skeletonTable";

export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
chain_name,
Expand Down Expand Up @@ -445,41 +445,7 @@ export const XYKWalletPoolListView: React.FC<XYKWalletPoolListViewProps> = ({
});

const body = maybeResult.match({
None: () => (
<TableRow>
<TableCell className="h-12 text-center"></TableCell>
<TableCell className="h-12 text-right">
<div className="float-left">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
<TableCell className="h-12 text-right">
<div className="float-right">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
</TableCell>
</TableRow>
),
None: () => <SkeletonTable cols={5} float="right" />,
Some: () =>
error.error ? (
<TableRow>
Expand Down
Loading

0 comments on commit 2ba85f0

Please sign in to comment.