Skip to content

Commit

Permalink
Yj fix/approvals cta (#187)
Browse files Browse the repository at this point in the history 
Co-authored-by: Karan <[email protected]>
  • Loading branch information
@jagnani73 @karanpargal
jagnani73 and karanpargal committed Jun 4, 2024
1 parent e1ffb99 commit 207db33
Show file tree
Hide file tree
Showing 10 changed files with 174 additions and 178 deletions.
110 changes: 62 additions & 48 deletions src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { TableHeaderSorting, TableList } from "@/components/Shared";
import type { ColumnDef } from "@tanstack/react-table";
import { Address } from "@/components/Atoms";
import { Button } from "@/components/ui/button";
import { TableHeader } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";

export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
Expand Down Expand Up @@ -51,14 +50,14 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
{
id: "token_details",
accessorKey: "token_details",
header: () => <TableHeader>Token</TableHeader>,
header: () => "Token",
cell: ({ row }) => {
return (
<div className="flex flex-col">
<p className="flex items-center gap-1">
{row.original.contract_ticker_symbol}
</p>
<p className="text-xs opacity-80">
<p className="text-xs opacity-75">
<Address
address={row.original.contract_address}
actionable_address={actionable_token}
Expand All @@ -83,7 +82,7 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
{
id: "token_id",
accessorKey: "token_id",
header: () => <TableHeader>Token ID</TableHeader>,
header: () => "Token ID",
cell: ({ row }) => {
const token_ids = row.original.token_balances.map(
(balance) => balance.token_id
Expand All @@ -93,63 +92,78 @@ export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
);
},
},
{
id: "spender_address_label",
accessorKey: "spender_address_label",
header: () => <TableHeader>Spender Address Label</TableHeader>,
cell: ({ row }) => {
return (
<p className="flex flex-col">
{row.original.spenders.map((spender) => (
<Address
address={spender.spender_address}
label={spender.spender_address_label}
key={spender.spender_address}
actionable_address={actionable_spender}
/>
))}
</p>
);
},
},
{
id: "risk_factor",
accessorKey: "risk_factor",
header: () => <TableHeader>Risk Factor</TableHeader>,
header: () => <p className="text-center">Risk Factor</p>,
cell: ({ row }) => {
return (
<Badge
variant={
row.original.spenders[0].allowance ===
<div className="flex items-center justify-center">
<Badge
variant={
row.original.spenders[0].allowance ===
"CONSIDER REVOKING"
? "danger"
: "success"
}
>
{row.original.spenders[0].allowance ===
"CONSIDER REVOKING"
? "danger"
: "success"
}
>
{row.original.spenders[0].allowance ===
"CONSIDER REVOKING"
? "High"
: "Low"}
</Badge>
? "High"
: "Low"}
</Badge>
</div>
);
},
},
];

if (on_revoke_approval) {
columns.push({
id: "revoke",
accessorKey: "revoke",
header: () => <div className="w-12"></div>,
{
id: "spender_address_label",
accessorKey: "spender_address_label",
header: () => <p className="text-center">Spender(s)</p>,
cell: ({ row }) => {
return (
<Button onClick={() => on_revoke_approval(row.original)}>
Revoke
</Button>
<div className="flex flex-col gap-4">
{row.original.spenders.map((spender) => (
<div
key={spender.spender_address}
className="grid grid-cols-3 items-center gap-x-8 gap-y-4"
>
<div
className={
!on_revoke_approval
? "col-span-3"
: "col-span-2"
}
>
<Address
key={spender.spender_address}
address={spender.spender_address}
label={spender.spender_address_label}
actionable_address={actionable_spender}
/>
</div>

{on_revoke_approval && (
<Button
onClick={() =>
on_revoke_approval(
spender,
row.original.contract_address
)
}
size={"sm"}
className="flex w-fit"
>
Revoke
</Button>
)}
</div>
))}
</div>
);
},
});
}
},
];

return (
<TableList<NftApprovalsItem>
Expand Down
168 changes: 90 additions & 78 deletions src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { type Option, None, Some } from "@/utils/option";
import { type TokensApprovalItem } from "@covalenthq/client-sdk";
import {
calculatePrettyBalance,
type TokensApprovalItem,
} from "@covalenthq/client-sdk";
import { useEffect, useState } from "react";
import { type TokenApprovalListProps } from "@/utils/types/molecules.types";
import { useGoldRush } from "@/utils/store";
Expand All @@ -8,11 +11,10 @@ import {
GRK_SIZES,
defaultErrorMessage,
} from "@/utils/constants/shared.constants";
import { CardDetail, TableHeaderSorting, TableList } from "@/components/Shared";
import { TableHeaderSorting, TableList } from "@/components/Shared";
import type { ColumnDef } from "@tanstack/react-table";
import { Address, TokenAvatar } from "@/components/Atoms";
import { Button } from "@/components/ui/button";
import { TableHeader } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";

export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
Expand Down Expand Up @@ -54,29 +56,24 @@ export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
{
id: "token_details",
accessorKey: "token_details",
header: () => <TableHeader>Token</TableHeader>,
header: () => "Token",
cell: ({ row }) => {
return (
<div className="flex flex-col">
<CardDetail
content={
<div className="flex items-center gap-1">
<TokenAvatar
token_url={row.original.logo_url}
size={GRK_SIZES.EXTRA_SMALL}
/>
{row.original.ticker_symbol}
</div>
}
/>
<CardDetail
subtext={
<Address
address={row.original.token_address}
actionable_address={actionable_token}
/>
}
/>
<div className="flex items-center gap-1">
<TokenAvatar
token_url={row.original.logo_url}
size={GRK_SIZES.EXTRA_SMALL}
/>
{row.original.ticker_symbol}
</div>

<p className="text-xs opacity-75">
<Address
address={row.original.token_address}
actionable_address={actionable_token}
/>
</p>
</div>
);
},
Expand All @@ -94,15 +91,14 @@ export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
cell: ({ row }) => {
return (
<div className="flex flex-col">
<CardDetail
content={
Number(row.original.balance) /
Math.pow(10, row.original.contract_decimals)
}
/>
<CardDetail
subtext={row.original.pretty_balance_quote}
/>
{calculatePrettyBalance(
Number(row.original.balance),
row.original.contract_decimals
)}

<p className="text-xs opacity-75">
{row.original.pretty_balance_quote}
</p>
</div>
);
},
Expand All @@ -122,70 +118,86 @@ export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
<p>
{row.original.pretty_value_at_risk_quote
? row.original.pretty_value_at_risk_quote
: Number(row.original.value_at_risk) /
Math.pow(10, row.original.contract_decimals)}
: calculatePrettyBalance(
Number(row.original.balance),
row.original.contract_decimals
)}
</p>
);
},
},
{
id: "spender_address_label",
accessorKey: "spender_address_label",
header: () => <TableHeader>Spender(s)</TableHeader>,
id: "risk_factor",
accessorKey: "risk_factor",
header: () => <p className="text-center">Risk Factor</p>,
cell: ({ row }) => {
return (
<p className="flex flex-col">
{row.original.spenders.map((spender) => (
<Address
address={spender.spender_address}
label={spender.spender_address_label}
key={spender.spender_address}
actionable_address={actionable_spender}
/>
))}
</p>
<div className="flex items-center justify-center">
<Badge
variant={
row.original.spenders[0].risk_factor ===
"LOW RISK"
? "success"
: "danger"
}
>
{row.original.spenders[0].risk_factor === "LOW RISK"
? "Low"
: "High"}
</Badge>
</div>
);
},
},
{
id: "risk_factor",
accessorKey: "risk_factor",
header: () => <TableHeader>Risk Factor</TableHeader>,
id: "spender_address_label",
accessorKey: "spender_address_label",
header: () => <p className="text-center">Spender(s)</p>,
cell: ({ row }) => {
return (
<Badge
variant={
row.original.spenders[0].risk_factor ===
"CONSIDER REVOKING"
? "danger"
: "success"
}
>
{row.original.spenders[0].risk_factor ===
"CONSIDER REVOKING"
? "High"
: "Low"}
</Badge>
<div className="flex flex-col gap-4">
{row.original.spenders.map((spender) => (
<div
key={spender.spender_address}
className="grid grid-cols-3 items-center gap-x-8 gap-y-4"
>
<div
className={
!on_revoke_approval
? "col-span-3"
: "col-span-2"
}
>
<Address
key={spender.spender_address}
address={spender.spender_address}
label={spender.spender_address_label}
actionable_address={actionable_spender}
/>
</div>

{on_revoke_approval && (
<Button
onClick={() =>
on_revoke_approval(
spender,
row.original.token_address
)
}
size={"sm"}
className="flex w-fit"
>
Revoke
</Button>
)}
</div>
))}
</div>
);
},
},
];

if (on_revoke_approval) {
columns.push({
id: "revoke",
accessorKey: "revoke",
header: () => <div className="w-12"></div>,
cell: ({ row }) => {
return (
<Button onClick={() => on_revoke_approval(row.original)}>
Revoke
</Button>
);
},
});
}

return (
<TableList<TokensApprovalItem>
columns={columns}
Expand Down
Loading

0 comments on commit 207db33

Please sign in to comment.