Skip to content

Commit

Permalink
Merge pull request #24 from boomcrypto/feat/ccip-022-nyc-redemption
Browse files Browse the repository at this point in the history 
Add tab for CCIP-022 NYC redemption
  • Loading branch information
@whoabuddy
whoabuddy authored Jul 8, 2024
2 parents d021d9b + c0e0cf5 commit 762aa11
Show file tree
Hide file tree
Showing 11 changed files with 1,295 additions and 143 deletions.
10 changes: 4 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"openai": "^4.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^3.11.0",
"react-icons": "^5.2.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
Expand Down
5 changes: 5 additions & 0 deletions src/components/layout/page-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import { useAtom } from "jotai";
import { activeTabAtom } from "../../store/common";
import Dashboard from "../tabs/dashboard";
import RedeemNYC from "../tabs/redeem-nyc";
import MiningClaims from "../tabs/mining-claims";
import StackingClaims from "../tabs/stacking-claims";
import Voting from "../tabs/voting";
Expand Down Expand Up @@ -29,6 +30,7 @@ function Content() {
}}
>
<Tab>Dashboard</Tab>
<Tab>Redeem NYC</Tab>
<Tab>Mining Claims</Tab>
<Tab>Stacking Claims</Tab>
<Tab>Voting</Tab>
Expand All @@ -37,6 +39,9 @@ function Content() {
<TabPanel>
<Dashboard />
</TabPanel>
<TabPanel>
<RedeemNYC />
</TabPanel>
<TabPanel>
<MiningClaims />
</TabPanel>
Expand Down
258 changes: 127 additions & 131 deletions src/components/tabs/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,140 +46,136 @@ function Dashboard() {
}
};

if (!stxAddress) {
return (
<Stack spacing={4}>
<Heading>CityCoins Dashboard</Heading>
<Text>Wallet connection required to access dashboard.</Text>
<SignIn />
</Stack>
);
}

return (
<Stack spacing={4}>
<Heading>CityCoins Dashboard</Heading>
{stxAddress ? (
<>
<Stack
direction={["column", null, "row"]}
alignItems="center"
justifyContent="space-between"
spacing={2}
>
<Text fontWeight="bold">{stxAddress}</Text>
<Text size="sm">{`${transactions.length} transactions detected`}</Text>
<Button onClick={() => selectTransactions("all")}>Show All</Button>
</Stack>
<Divider />
{/* Transaction Stats and Filters */}
<Stack
direction={["column", null, "row"]}
justifyContent="space-between"
spacing={2}
>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Mining TXs</StatLabel>
<StatNumber>{miningTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "mining" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("mining")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Mining Claim TXs</StatLabel>
<StatNumber>{miningClaimTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "mining-claims" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("mining-claims")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Stacking TXs</StatLabel>
<StatNumber>{stackingTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "stacking" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("stacking")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Stacking Claim TXs</StatLabel>
<StatNumber>{stackingClaimTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "stacking-claims"
? "blue"
: "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("stacking-claims")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Voting TXs</StatLabel>
<StatNumber>{votingTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "voting" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("voting")}
/>
</Stack>
</Stack>
<Divider />
<TransactionList transactions={selectedTransactions} />
</>
) : (
<>
<Text>Wallet connection required to access dashboard.</Text>
<SignIn />
</>
)}

<Stack
direction={["column", null, "row"]}
alignItems="center"
justifyContent="space-between"
spacing={2}
>
<Text fontWeight="bold">{stxAddress}</Text>
<Text size="sm">{`${transactions.length} transactions detected`}</Text>
<Button onClick={() => selectTransactions("all")}>Show All</Button>
</Stack>
<Divider />
{/* Transaction Stats and Filters */}
<Stack
direction={["column", null, "row"]}
justifyContent="space-between"
spacing={2}
>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Mining TXs</StatLabel>
<StatNumber>{miningTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={selectedTransactionType === "mining" ? "blue" : "gray"}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("mining")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Mining Claim TXs</StatLabel>
<StatNumber>{miningClaimTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "mining-claims" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("mining-claims")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Stacking TXs</StatLabel>
<StatNumber>{stackingTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "stacking" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("stacking")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Stacking Claim TXs</StatLabel>
<StatNumber>{stackingClaimTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={
selectedTransactionType === "stacking-claims" ? "blue" : "gray"
}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("stacking-claims")}
/>
</Stack>
<Stack
direction="row"
alignContent="center"
justifyContent="space-between"
>
<Stat>
<StatLabel>Voting TXs</StatLabel>
<StatNumber>{votingTransactions.length}</StatNumber>
</Stat>
<IconButton
colorScheme={selectedTransactionType === "voting" ? "blue" : "gray"}
icon={<MdFilterList />}
aria-label="Filter transactions"
title="Filter Transactions"
size="xs"
onClick={() => selectTransactions("voting")}
/>
</Stack>
</Stack>
<Divider />
<TransactionList transactions={selectedTransactions} />
</Stack>
);
}
Expand Down
17 changes: 16 additions & 1 deletion src/components/tabs/mining-claims.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,22 @@
import { Heading, Stack } from "@chakra-ui/react";
import { Heading, Stack, Text } from "@chakra-ui/react";
import { useAtomValue } from "jotai";
import { stxAddressAtom } from "../../store/stacks";
import ComingSoon from "../coming-soon";
import SignIn from "../auth/sign-in";

function MiningClaims() {
const stxAddress = useAtomValue(stxAddressAtom);

if (!stxAddress) {
return (
<Stack spacing={4}>
<Heading>CityCoins Mining Claims</Heading>
<Text>Wallet connection required to access mining claims.</Text>
<SignIn />
</Stack>
);
}

return (
<Stack spacing={4}>
<Heading>CityCoins Mining Claims</Heading>
Expand Down
Loading

0 comments on commit 762aa11

Please sign in to comment.