Skip to content

Commit

Permalink
Merge branch 'issue/2583-remove-roles-drawer' of github.com:decentdao…
Browse files Browse the repository at this point in the history
…/decent-interface into issue/2583-remove-details-drawer-view
  • Loading branch information
Da-Colon committed Dec 5, 2024
2 parents 4309d6c + aab3432 commit 8b3157d
Show file tree
Hide file tree
Showing 12 changed files with 227 additions and 240 deletions.
18 changes: 4 additions & 14 deletions src/components/ProposalBuilder/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
import { ArrowLeft, SquaresFour } from '@phosphor-icons/react';
import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
import { ArrowLeft } from '@phosphor-icons/react';
import { Formik, FormikProps } from 'formik';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -265,21 +265,11 @@ export function ProposalBuilder({
gap="0.5rem"
>
<Flex
mt={4}
mt={6}
mb={2}
alignItems="center"
>
<Icon
as={SquaresFour}
w="1.5rem"
h="1.5rem"
/>
<Text
textStyle="heading-small"
ml={2}
>
{t('actions', { ns: 'actions' })}
</Text>
<Text ml={2}>{t('actions', { ns: 'actions' })}</Text>
</Flex>
{actions.map((action, index) => {
return (
Expand Down
25 changes: 14 additions & 11 deletions src/components/Roles/RoleDetailsTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,20 @@ function RolesDetailsPayments({
variant="darker"
my={4}
/>
{sortedPayments.map((payment, index) => (
<RolePaymentDetails
key={index}
payment={payment}
roleHatSmartAccountAddress={roleHatSmartAccountAddress}
roleHatId={roleHatId}
roleTerms={roleTerms}
roleHatWearerAddress={roleHatWearerAddress}
showWithdraw
/>
))}
{sortedPayments.map(payment => {
const thisPaymentIndex = payments?.findIndex(p => p.streamId === payment.streamId);
return (
<RolePaymentDetails
key={thisPaymentIndex}
payment={payment}
roleHatSmartAccountAddress={roleHatSmartAccountAddress}
roleHatId={roleHatId}
roleTerms={roleTerms}
roleHatWearerAddress={roleHatWearerAddress}
showWithdraw
/>
);
})}
</>
);
}
Expand Down
140 changes: 39 additions & 101 deletions src/components/Roles/RolePaymentDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ import { Address, getAddress, Hex } from 'viem';
import { useAccount, usePublicClient } from 'wagmi';
import { DETAILS_BOX_SHADOW, isDemoMode } from '../../constants/common';
import { DAO_ROUTES } from '../../constants/routes';
import { useFractal } from '../../providers/App/AppProvider';
import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
import { useRolesStore } from '../../store/roles/useRolesStore';
import { BigIntValuePair } from '../../types';
import { DEFAULT_DATE_FORMAT, formatCoin, formatUSD } from '../../utils';
import { DEFAULT_DATE_FORMAT, formatCoin } from '../../utils';
import { ModalType } from '../ui/modals/ModalProvider';
import { useDecentModal } from '../ui/modals/useDecentModal';

Expand Down Expand Up @@ -140,9 +139,6 @@ export function RolePaymentDetails({
roleTerms,
}: RolePaymentDetailsProps) {
const { t } = useTranslation(['roles']);
const {
treasury: { assetsFungible },
} = useFractal();
const { safe } = useDaoInfoStore();
const { address: connectedAccount } = useAccount();
const { addressPrefix } = useNetworkConfig();
Expand Down Expand Up @@ -216,40 +212,23 @@ export function RolePaymentDetails({
}
}, [addressPrefix, navigate, safe?.address, withdraw]);

const amountPerWeek = useMemo(() => {
if (!payment.amount?.bigintValue) {
return;
}

const endTime = payment.endDate.getTime() / 1000;
const startTime = payment.startDate.getTime() / 1000;
const totalSeconds = Math.round(endTime - startTime); // @dev due to milliseconds we need to round it to avoid problems with BigInt
const amountPerSecond = payment.amount.bigintValue / BigInt(totalSeconds);
const secondsInWeek = BigInt(60 * 60 * 24 * 7);
return amountPerSecond * secondsInWeek;
}, [payment]);

const streamAmountUSD = useMemo(() => {
// @todo add price support for tokens not found in assetsFungible
const foundAsset = assetsFungible.find(
asset => getAddress(asset.tokenAddress) === payment.asset.address,
);
if (!foundAsset || foundAsset.usdPrice === undefined) {
return;
}
return Number(payment.amount.value) * foundAsset.usdPrice;
}, [payment, assetsFungible]);

const isActiveStream =
!payment.isCancelled && Date.now() < payment.endDate.getTime() && !payment.isCancelling;

const activeStreamProps = useCallback(
(isTop: boolean) =>
isActiveStream
(section: 'top' | 'bottom') => {
const borderTopRadius = section === 'top' ? '0.75rem' : '0';
const borderBottomRadius = section === 'bottom' ? '0.75rem' : '0';
const borderBottom = section === 'bottom' ? '1px solid' : 'none';

return isActiveStream
? {
bg: 'neutral-2',
sx: undefined,
boxShadow: DETAILS_BOX_SHADOW,
borderTopRadius,
borderBottomRadius,
py: '1rem',
}
: {
sx: {
Expand All @@ -260,9 +239,13 @@ export function RolePaymentDetails({
bg: 'none',
boxShadow: 'none',
border: '1px solid',
borderBottom: isTop ? 'none' : '1px solid',
borderBottom,
borderTopRadius,
borderBottomRadius,
py: '1rem',
borderColor: 'neutral-4',
},
};
},
[isActiveStream],
);

Expand Down Expand Up @@ -327,35 +310,37 @@ export function RolePaymentDetails({
transitionTimingFunction="ease-out"
>
<Box
borderTopRadius="0.75rem"
py="1rem"
onClick={onClick}
cursor={!!onClick ? 'pointer' : 'default'}
{...activeStreamProps(true)}
{...activeStreamProps('top')}
>
<Flex
flexDir="column"
mx={4}
>
<Flex justifyContent="space-between">
<Text
textStyle="heading-large"
color="white-0"
>
{payment.amount?.bigintValue
? formatCoin(
payment.amount.bigintValue,
false,
payment.asset.decimals,
payment.asset.symbol,
)
: undefined}
</Text>
<Flex gap={2}>
<Image
src={payment.asset.logo}
fallbackSrc="/images/coin-icon-default.svg"
/>
<Text
textStyle="heading-large"
color="white-0"
>
{payment.amount?.bigintValue
? formatCoin(
payment.amount.bigintValue,
false,
payment.asset.decimals,
payment.asset.symbol,
)
: undefined}
</Text>
</Flex>
<Flex
gap={[2, 2, 6]}
gap={6}
alignItems="center"
justifyContent={['flex-end', 'flex-end', 'flex-end', 'unset']}
flexWrap="wrap"
>
{(payment.isCancelled || payment.isCancelling) && (
<Tag
Expand All @@ -371,60 +356,13 @@ export function RolePaymentDetails({
{t(payment.isCancelling ? 'cancelling' : 'cancelled')}
</Tag>
)}
<Flex
gap={2}
alignItems="center"
border="1px solid"
borderColor="neutral-4"
borderRadius="9999px"
w="fit-content"
className="payment-menu-asset"
p="0.5rem"
>
<Image
src={payment.asset.logo}
fallbackSrc="/images/coin-icon-default.svg"
boxSize="1.5rem"
/>
<Text
textStyle="labels-large"
color="white-0"
>
{payment.asset.symbol ?? t('selectLabel', { ns: 'modals' })}
</Text>
</Flex>
<GreenStreamingDot isStreaming={payment.isStreaming()} />
</Flex>
</Flex>
<Flex justifyContent="space-between">
<Text
textStyle="labels-small"
color="neutral-7"
>
{streamAmountUSD !== undefined ? formatUSD(streamAmountUSD.toString()) : '$ ---'}
</Text>
{amountPerWeek !== undefined && (
<Flex
alignItems="center"
gap="0.5rem"
>
<GreenStreamingDot isStreaming={payment.isStreaming()} />
<Text
textStyle="labels-small"
color="white-0"
>
{`${formatCoin(amountPerWeek, true, payment.asset.decimals, payment.asset.symbol)} / ${t('week')}`}
</Text>
</Flex>
)}
</Flex>
</Flex>
</Box>

<Box
{...activeStreamProps(false)}
borderBottomRadius="0.75rem"
py="1rem"
>
<Box {...activeStreamProps('bottom')}>
<Grid
mx={4}
templateAreas='"starting dividerOne cliff dividerTwo ending"'
Expand Down
Loading

0 comments on commit 8b3157d

Please sign in to comment.