Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tab for CCIP-022 NYC redemption #24

Merged
merged 26 commits into from
Jul 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
a7423c2
feat: add redeem nyc tab, skeleton logic
whoabuddy Jul 4, 2024
33a6ef4
fix: sonnet with some mods for the icons
whoabuddy Jul 4, 2024
b1e1c1c
chore: update react-icons to latest
whoabuddy Jul 4, 2024
53ac0e1
fix: cleaning up the generated code, update styling
whoabuddy Jul 4, 2024
72b821a
fix: update active tab default to Voting tab
whoabuddy Jul 5, 2024
38523d0
fix: cleanup and standardize sign-in
whoabuddy Jul 5, 2024
11c1593
fix: separate atoms and create local/derived/query variants with helpers
whoabuddy Jul 5, 2024
1a330a4
fix: add balance for nyc v1/v2 with refresh
whoabuddy Jul 5, 2024
e8ecdc9
fix: mmm toast
whoabuddy Jul 5, 2024
763d635
fix: add update for redemption amount from contract
whoabuddy Jul 5, 2024
f15167c
fix: add missing derived atoms with new structure
whoabuddy Jul 5, 2024
264685e
fix: add hook for redeem nyc contract call
whoabuddy Jul 5, 2024
dfb1017
fix: add constants for v1/v2 tokens, set post conditions
whoabuddy Jul 5, 2024
0caeaed
fix: update formatting and post conditions
whoabuddy Jul 6, 2024
64041d9
fix: update modal layout, colors, text
whoabuddy Jul 7, 2024
c486ab1
fix: checkbox value should use consent atom value
whoabuddy Jul 7, 2024
5a15629
fix: add majority of stackingdao code
whoabuddy Jul 7, 2024
5ad0314
fix: generalize base post conditions before wrappers
whoabuddy Jul 7, 2024
bf719f8
fix: add lisa integration code
whoabuddy Jul 7, 2024
a461d77
fix: implement new hooks for stackingdao/lisa redemptions
whoabuddy Jul 7, 2024
f0a2e7a
fix: consistent toast is the best toast
whoabuddy Jul 7, 2024
2a2e166
fix: update post conditions and fn args for stackingdao
whoabuddy Jul 8, 2024
538cc08
fix: refactor stSTX ratio lookup into useEffect
whoabuddy Jul 8, 2024
dcb1093
fix: typo in reserve contract name
whoabuddy Jul 8, 2024
0a0aeb1
fix: store txid once sent and display explorer link
whoabuddy Jul 8, 2024
c0e0cf5
chore: code cleanup
whoabuddy Jul 8, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions package-lock.json

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
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
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
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
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