Skip to content

Commit

Permalink
render v3 spoils in spoils table (#148)
Browse files Browse the repository at this point in the history
* remove V2 data from accounting and fixed type and export errors

* fetch smartInvoices and add query to fecth raids

* create formatSpoils function and raids query mvp

* unsuccessful attempt to fetch raids in useAccountingV3

* fetch invoice and raids and map them together using formatSpoils

* render formatted spoils in spoilsTable

* clean up useAccountingV3 & useFormattedDataV3

* cleanup accounting.tsx

* change file names for useFormattedData to useFormattedAccountingV3
  • Loading branch information
growindiedev authored Jul 26, 2024
1 parent 6c9954c commit 63e8950
Show file tree
Hide file tree
Showing 10 changed files with 279 additions and 188 deletions.
7 changes: 5 additions & 2 deletions apps/frontend/components/SiteLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ interface SiteLayoutProps {
data?: any;
subheader?: ReactNode;
emptyDataPhrase?: string;
error?: Error;
error?: Error | boolean;
isLoading?: boolean;
minHeight?: string;
}
Expand Down Expand Up @@ -157,7 +157,10 @@ const SiteLayout = ({
minHeight={minHeight}
>
<Flex w='100%' justify='center' pt={40}>
<Heading size='md'>Error loading data: {error.message}</Heading>
<Heading size='md'>
Error loading data
{typeof error === 'object' && `: ${error.message}`}
</Heading>
</Flex>
</GeneralLayout>
);
Expand Down
209 changes: 51 additions & 158 deletions apps/frontend/pages/accounting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,63 +10,47 @@ import {
Tabs,
} from '@raidguild/design-system';
import {
useAccountingV2,
useFormattedDataV2,
useMemberList,
useFormattedDataV3,
useFormattedAccountingV3,
useAccountingV3,
} from '@raidguild/dm-hooks';
import { exportToCsv } from '@raidguild/dm-utils';
import _ from 'lodash';
import { useSession } from 'next-auth/react';
import { NextSeo } from 'next-seo';
import Papa from 'papaparse';
import { useCallback, useState } from 'react';
import { useCallback } from 'react';

import _ from 'lodash';
import BalancesTable from '../components/BalancesTable';
import SiteLayout from '../components/SiteLayout';
import SpoilsTable from '../components/SpoilsTable';
import TransactionsTable from '../components/TransactionsTable';

export const Accounting = () => {
const { data: session } = useSession();
const [isV3, setIsV3] = useState(true);

const token = _.get(session, 'token');
const {
data: dataFromMolochV2,
loading,
error,
} = useAccountingV2({
token,
});

const { data: memberData } = useMemberList({
token,
limit: 1000,
});

const { balances, spoils, transactions, tokenPrices } = dataFromMolochV2;
const { loading, isError, error } = useAccountingV3();

const {
formattedSpoils: formattedSpoilsV3,
members,
balancesWithPrices: balancesWithPricesV2,
transactionsWithPrices: transactionsWithPricesV2,
transactionsWithPricesAndMembers: transactionsWithPricesAndMembersV2,
} = useFormattedDataV2(memberData, balances, transactions, tokenPrices);

const {
balancesWithPrices: balancesWithPricesV3,
transactionsWithPrices: transactionsWithPricesV3,
transactionsWithPricesAndMembers: transactionsWithPricesAndMembersV3,
} = useFormattedDataV3(memberData);
} = useFormattedAccountingV3(memberData);

const onExportCsv = useCallback(
(type: 'transactions' | 'balances' | 'spoils') => {
let csvString = '';
if (type === 'transactions') {
const formattedTransactions = (
isV3 ? transactionsWithPricesV3 : transactionsWithPricesV2
).map((t) => ({
const formattedTransactions = transactionsWithPricesV3.map((t) => ({
Date: t.date,
'Tx Explorer Link': t.txExplorerLink,
'Elapsed Days': t.elapsedDays,
Expand Down Expand Up @@ -99,9 +83,7 @@ export const Accounting = () => {
csvString = Papa.unparse(formattedTransactions);
} else if (type === 'balances') {
if (type === 'balances') {
const formattedBalances = (
isV3 ? balancesWithPricesV3 : balancesWithPricesV2
).map((b) => ({
const formattedBalances = balancesWithPricesV3.map((b) => ({
Token: b.tokenSymbol,
'Tx Explorer Link': b.tokenExplorerLink,
Inflow: b.inflow.tokenValue,
Expand All @@ -126,7 +108,7 @@ export const Accounting = () => {
csvString = Papa.unparse(formattedBalances);
}
} else if (type === 'spoils') {
const formattedSpoils = spoils.map((s) => ({
const formattedSpoils = formattedSpoilsV3.map((s) => ({
Date: s.date,
Raid: s.raidName,
// TODO: Get this dynamically from the subgraph
Expand All @@ -138,15 +120,7 @@ export const Accounting = () => {
}
exportToCsv(csvString, `raidguild-treasury-${type}`);
},
[
balancesWithPricesV2,
balancesWithPricesV3,
isV3,
members,
spoils,
transactionsWithPricesV2,
transactionsWithPricesV3,
]
[balancesWithPricesV3, members, formattedSpoilsV3, transactionsWithPricesV3]
);

return (
Expand All @@ -156,14 +130,14 @@ export const Accounting = () => {
<SiteLayout
isLoading={loading}
data={[
...transactionsWithPricesAndMembersV2,
...transactionsWithPricesV3,
...transactionsWithPricesAndMembersV3,
...balances,
...Object.values(tokenPrices),
...balancesWithPricesV3,
// ...Object.values(tokenPrices),
]}
subheader={<Heading>Accounting</Heading>}
emptyDataPhrase='No transactions'
error={error}
error={error && isError}
>
<Tabs align='center' colorScheme='whiteAlpha' variant='soft-rounded'>
<TabList>
Expand All @@ -180,133 +154,52 @@ export const Accounting = () => {

<TabPanels>
<TabPanel>
<Tabs
align='start'
colorScheme='whiteAlpha'
variant='unstyled'
defaultIndex={0}
onChange={(index) => {
if (index === 0) setIsV3(true);
else setIsV3(false);
}}
<Flex
alignItems='right'
justifyContent='right'
marginBlock='20px'
>
<Flex
alignItems='right'
justifyContent='space-between'
marginBlock='20px'
<Button
onClick={() => onExportCsv('balances')}
size='sm'
fontWeight='normal'
>
<TabList>
<Tab>
<Heading size='sm'>V3 (current)</Heading>
</Tab>
<Tab>
<Heading size='sm'>V2</Heading>
</Tab>
</TabList>
<Button
onClick={() => onExportCsv('balances')}
size='sm'
fontWeight='normal'
>
Export Balances
</Button>
</Flex>

<TabPanels>
<TabPanel>
<BalancesTable data={balancesWithPricesV3} />
</TabPanel>
<TabPanel>
<BalancesTable data={balancesWithPricesV2} />
</TabPanel>
</TabPanels>
</Tabs>
Export Balances
</Button>
</Flex>
<BalancesTable data={balancesWithPricesV3} />
</TabPanel>
<TabPanel>
<Tabs
align='start'
colorScheme='whiteAlpha'
variant='unstyled'
defaultIndex={0}
onChange={(index) => {
if (index === 0) setIsV3(true);
else setIsV3(false);
}}
<Flex
alignItems='right'
justifyContent='right'
marginBlock='20px'
>
<Flex
alignItems='right'
justifyContent='space-between'
marginBlock='20px'
<Button
onClick={() => onExportCsv('transactions')}
size='sm'
fontWeight='normal'
>
<TabList>
<Tab>
<Heading size='sm'>V3 (current)</Heading>
</Tab>
<Tab>
<Heading size='sm'>V2</Heading>
</Tab>
</TabList>
<Button
onClick={() => onExportCsv('transactions')}
size='sm'
fontWeight='normal'
>
Export Transactions
</Button>
</Flex>

<TabPanels>
<TabPanel>
<TransactionsTable
data={transactionsWithPricesAndMembersV3}
/>
</TabPanel>
<TabPanel>
<TransactionsTable
data={transactionsWithPricesAndMembersV2}
/>
</TabPanel>
</TabPanels>
</Tabs>
Export Transactions
</Button>
</Flex>
<TransactionsTable data={transactionsWithPricesV3} />
</TabPanel>
<TabPanel>
<Tabs
align='start'
colorScheme='whiteAlpha'
variant='unstyled'
defaultIndex={0}
<Flex
alignItems='right'
justifyContent='right'
marginBlock='20px'
>
<Flex
alignItems='right'
justifyContent='space-between'
marginBlock='20px'
<Button
onClick={() => onExportCsv('spoils')}
size='sm'
fontWeight='normal'
>
<TabList>
<Tab>
<Heading size='sm'>V3 (current)</Heading>
</Tab>
<Tab>
<Heading size='sm'>V2</Heading>
</Tab>
</TabList>
<Button
onClick={() => onExportCsv('spoils')}
size='sm'
fontWeight='normal'
>
Export Spoils
</Button>
</Flex>

<TabPanels>
<TabPanel>
<SpoilsTable data={spoils} />
</TabPanel>
<TabPanel>
<div>This is the placeholder for v3 spoils data.</div>
</TabPanel>
</TabPanels>
</Tabs>
Export Spoils
</Button>
</Flex>
<SpoilsTable data={formattedSpoilsV3} />
</TabPanel>
</TabPanels>
</Tabs>
Expand Down
14 changes: 14 additions & 0 deletions libs/dm-graphql/src/queries/accounting.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,17 @@ export const TRANSACTIONS_QUERY = gql`
}
}
`;

export const TRANSACTIONS_QUERY_V3 = gql`
query AccountingQuery {
raids(
where: { invoice_address: { _is_null: false } }
order_by: { created_at: desc }
) {
id
invoice_address
name
created_at
}
}
`;
4 changes: 2 additions & 2 deletions libs/dm-hooks/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ export { useContacts } from './useContacts';
export { default as useContactUpdate } from './useContactUpdate';
export { default as useDashboardList } from './useDashboardList';
export { default as useDefaultTitle } from './useDefaultTitle';
export { default as useFormattedDataV2 } from './useFormattedDataV2';
export { default as useFormattedDataV3 } from './useFormattedDataV3';
export { default as useFormattedAccountingV2 } from './useFormattedAccountingV2';
export { default as useFormattedAccountingV3 } from './useFormattedAccountingV3';
export * from './useLinks';
export { default as useLinksUpdate } from './useLinksUpdate';
export { default as useMemberCreate } from './useMemberCreate';
Expand Down
10 changes: 5 additions & 5 deletions libs/dm-hooks/src/useAccountingV2.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
camelize,
formatDate,
formatUnitsAsNumber,
GUILD_GNOSIS_DAO_ADDRESS,
GUILD_GNOSIS_DAO_ADDRESS_V2,
} from '@raidguild/dm-utils';
import { useInfiniteQuery } from '@tanstack/react-query';
import _ from 'lodash';
Expand Down Expand Up @@ -197,7 +197,7 @@ const formatBalancesAsTransactions = async (

const txExplorerLink = `https://blockscout.com/xdai/mainnet/tx/${molochStatBalance.transactionHash}`;
const proposalLink = molochStatBalance.proposalDetail
? `https://app.daohaus.club/dao/0x64/${GUILD_GNOSIS_DAO_ADDRESS}/proposals/${molochStatBalance.proposalDetail.proposalId}`
? `https://app.daohaus.club/dao/0x64/${GUILD_GNOSIS_DAO_ADDRESS_V2}/proposals/${molochStatBalance.proposalDetail.proposalId}`
: '';
const epochTimeAtIngressMs =
Number(molochStatBalance.timestamp) * 1000;
Expand Down Expand Up @@ -358,9 +358,9 @@ export const useAccountingV2 = ({ token }: { token: string }) => {
const response = await client({ token }).request(TRANSACTIONS_QUERY, {
first: limit,
skip: pageParam * limit,
molochAddress: GUILD_GNOSIS_DAO_ADDRESS,
contractAddr: GUILD_GNOSIS_DAO_ADDRESS,
escrowParentAddress: GUILD_GNOSIS_DAO_ADDRESS,
molochAddress: GUILD_GNOSIS_DAO_ADDRESS_V2,
contractAddr: GUILD_GNOSIS_DAO_ADDRESS_V2,
escrowParentAddress: GUILD_GNOSIS_DAO_ADDRESS_V2,
});

return {
Expand Down
Loading

0 comments on commit 63e8950

Please sign in to comment.