github/pools-ui
1
1
Fork 0
mirror of https://github.com/ameensol/pools-ui.git synced 2026-01-10 05:47:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7 from jfarid27/bugfix/useEffect-useExplorerData

Browse Source 
Fix Explorer Subset Data viewing.
This commit is contained in:
Ameen Soleimani
2023-03-08 19:23:32 -08:00
committed by GitHub
parent 87b08cf61d da81f317a0
commit 44ce984583
3 changed files with 118 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/hooks/useExplorerData.ts
View File

@@ -8,6 +8,21 @@ import {
useSubsetDataByNullifier
} from '../hooks';
export interface ExplorerDataI {
accessList: AccessList;
includedDeposits: Commitment[];
excludedDeposits: Commitment[];
}
const defaultExplorerData: ExplorerDataI = {
accessList: AccessList.fullEmpty({
accessType: 'blocklist',
subsetLength: 0
}),
includedDeposits: [],
excludedDeposits: []
};
export function useExplorerData() {
const { commitments } = useCommitments();
const [recentWithdrawal] = useAtom(recentWithdrawalAtom);
@@ -18,52 +33,50 @@ export function useExplorerData() {
const { nullifier, subsetRoot } = debouncedRecentWithdrawal;
const { accessType, bitLength, subsetData: data } = subsetMetadata;
if (
!nullifier ||
!subsetRoot ||
!debouncedCommitments.length ||
!accessType ||
isNaN(bitLength) ||
data.length === 0
) {
return {
accessList: AccessList.fullEmpty({
accessType: 'blocklist',
subsetLength: 0
}),
includedDeposits: [],
excludedDeposits: []
};
}
const accessList = new AccessList({
accessType,
bytesData: { bitLength, data }
});
let includedDeposits: Commitment[];
let excludedDeposits: Commitment[];
if (commitments.length >= accessList.length) {
let start = 0;
const end = accessList.length;
if (end > 30) {
start = end - 30;
const [explorerData, setExplorerData] = useState<ExplorerDataI>(defaultExplorerData);
useEffect(() => {
if (
!nullifier ||
!subsetRoot ||
!debouncedCommitments.length ||
!accessType
) {
return setExplorerData(defaultExplorerData);
}
const accessList = new AccessList({
accessType,
bytesData: { bitLength, data }
});
let includedDeposits: Commitment[];
let excludedDeposits: Commitment[];
if (debouncedCommitments.length >= accessList.length) {
let start = 0;
const end = accessList.length;
if (end > 30) {
start = end - 30;
}
const c = debouncedCommitments.slice(start, end);
includedDeposits = c.filter(
({ leafIndex }) => accessList.subsetData[Number(leafIndex)] === 0
);
excludedDeposits = c.filter(
({ leafIndex }) => accessList.subsetData[Number(leafIndex)] === 1
);
} else {
includedDeposits = [];
excludedDeposits = [];
}
const c = commitments.slice(start, end);
includedDeposits = c.filter(
({ leafIndex }) => accessList.subsetData[Number(leafIndex)] === 0
);
excludedDeposits = c.filter(
({ leafIndex }) => accessList.subsetData[Number(leafIndex)] === 1
);
} else {
includedDeposits = [];
excludedDeposits = [];
}
return {
accessList,
includedDeposits,
excludedDeposits
};
setExplorerData({
accessList,
includedDeposits,
excludedDeposits
});
}, [nullifier, subsetRoot, debouncedCommitments, accessType, bitLength, data]);
return explorerData;
}

9
src/hooks/useSubsetDataByNullifier.ts
View File

@@ -24,6 +24,15 @@ export function useSubsetDataByNullifier() {
}
// requestPolicy: 'cache-and-network'
});
useEffect(() => {
executeSubsetDatasQuery({
contractAddress: contractAddress.toLowerCase(),
nullifier: recentWithdrawal.nullifier.toLowerCase(),
subsetRoot: recentWithdrawal.subsetRoot.toLowerCase()
});
}, [recentWithdrawal, contractAddress]);
useEffect(() => {
if (

99
src/pages/explorer.tsx
View File

@@ -305,7 +305,7 @@ function Page() {
</Stack>
</Container>
{accessList.length > 0 && (
{ accessList.length >= 0 && (
<Container centerContent minW="216px" maxW="960px" mb={40}>
<Stack w="full">
<Stack
@@ -524,59 +524,60 @@ function Page() {
</Text>
</HStack>
<VStack
w="full"
minH="360px"
overflowY="auto"
bg="gray.50"
py={4}
gap={1}
>
{includedDeposits
.slice(
includedDeposits.length < 30
? 0
: includedDeposits.length - 30
)
.map(({ commitment, sender, leafIndex }, index) => (
<HStack
key={`included-${leafIndex}`}
justify="center"
w="full"
borderTop={index ? 'solid 1px #BEE3F8' : 'none'}
pt={4}
>
<HStack w="33%" justify="center">
<Text>{leafIndex.toString()}</Text>
</HStack>
{ includedDeposits.length > 0 ?
<VStack
w="full"
minH="360px"
overflowY="auto"
bg="gray.50"
py={4}
gap={1}
>
{ includedDeposits
.slice(
includedDeposits.length < 30
? 0
: includedDeposits.length - 30
)
.map(({ commitment, sender, leafIndex }, index) => (
<HStack
key={`included-${leafIndex}`}
justify="center"
w="full"
borderTop={index ? 'solid 1px #BEE3F8' : 'none'}
pt={4}
>
<HStack w="33%" justify="center">
<Text>{leafIndex.toString()}</Text>
</HStack>
<HStack w="33%" justify="flex-start">
<Link
as={NextLink}
{...growShrinkProps}
href={`${chain?.blockExplorers?.default.url}/address/${sender}`}
isExternal
>
<Text
key={`sender-${leafIndex}`}
color="blue.700"
fontSize="sm"
textAlign="left"
wordBreak="break-all"
<HStack w="33%" justify="flex-start">
<Link
as={NextLink}
{...growShrinkProps}
href={`${chain?.blockExplorers?.default.url}/address/${sender}`}
isExternal
>
{pinchString(sender.toString(), 5)}{' '}
<ExternalLinkIcon />
</Text>
</Link>
</HStack>
<Text
key={`sender-${leafIndex}`}
color="blue.700"
fontSize="sm"
textAlign="left"
wordBreak="break-all"
{...growShrinkProps}
>
{pinchString(sender.toString(), 5)}{' '}
<ExternalLinkIcon />
</Text>
</Link>
</HStack>
<HStack w="33%" justify="flex-start">
<Text>{pinchString(commitment, 6)}</Text>
<HStack w="33%" justify="flex-start">
<Text>{pinchString(commitment, 6)}</Text>
</HStack>
</HStack>
</HStack>
))}
</VStack>
))}
</VStack> : "" }
</>
)}