Merge pull request #2283 from decentdao/typing-updates-pushing

Typing the Push

src/components/Proposals/ProposalInfo.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Flex, Link } from '@chakra-ui/react';
 import { ArrowUpRight } from '@phosphor-icons/react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Shield } from '../../assets/theme/custom/icons/Shield';
 import useSnapshotProposal from '../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
@@ -27,7 +28,19 @@ export function ProposalInfo({
   } = useFractal();
   const { isSnapshotProposal } = useSnapshotProposal(proposal);
 
-  const confirmUrl = useDecentModal(ModalType.CONFIRM_URL, { url: metaData.documentationUrl });
+  const [modalType, props] = useMemo(() => {
+    if (!metaData.documentationUrl) {
+      return [ModalType.NONE] as const;
+    }
+    return [
+      ModalType.CONFIRM_URL,
+      {
+        url: metaData.documentationUrl,
+      },
+    ] as const;
+  }, [metaData.documentationUrl]);
+
+  const confirmUrl = useDecentModal(modalType, props);
 
   return (
     <Box

src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Hide, HStack, Icon, Show, Text } from '@chakra-ui/react';
 import { MinusCircle, PlusCircle } from '@phosphor-icons/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccount } from 'wagmi';
 import { useFractal } from '../../../../../providers/App/AppProvider';
@@ -20,11 +20,21 @@ function Signer({
   threshold: number | undefined;
   disabled: boolean;
 }) {
-  const removeSigner = useDecentModal(ModalType.REMOVE_SIGNER, {
-    selectedSigner: signer,
-    signers: signers,
-    currentThreshold: threshold,
-  });
+  const [modalType, props] = useMemo(() => {
+    if (!signers || !threshold) {
+      return [ModalType.NONE] as const;
+    }
+    return [
+      ModalType.REMOVE_SIGNER,
+      {
+        selectedSigner: signer,
+        signers: signers,
+        currentThreshold: threshold,
+      },
+    ] as const;
+  }, [signer, signers, threshold]);
+
+  const removeSigner = useDecentModal(modalType, props);
   return (
     <HStack
       key={signer}
@@ -68,10 +78,14 @@ export function SignersContainer() {
   const [signers, setSigners] = useState<string[]>();
   const [userIsSigner, setUserIsSigner] = useState<boolean>();
 
-  const addSigner = useDecentModal(ModalType.ADD_SIGNER, {
-    signers: signers,
-    currentThreshold: safe?.threshold,
-  });
+  const [modalType, props] = useMemo(() => {
+    if (!signers) {
+      return [ModalType.NONE] as const;
+    }
+    return [ModalType.ADD_SIGNER, { signers, currentThreshold: safe?.threshold }] as const;
+  }, [signers, safe?.threshold]);
+
+  const addSigner = useDecentModal(modalType, props);
   const { t } = useTranslation(['common', 'breadcrumbs']);
   const { address: account } = useAccount();
   const enableRemove = userIsSigner && signers && signers?.length > 1;

src/components/pages/Roles/RoleCard.tsx

@@ -19,7 +19,7 @@ export function AvatarAndRoleName({
   paymentsCount,
 }: {
   wearerAddress: string | undefined;
-  name: string;
+  name?: string;
   paymentsCount?: number;
 }) {
   const { addressPrefix } = useNetworkConfig();

src/components/pages/Roles/RolePaymentDetails.tsx

@@ -4,19 +4,18 @@ import { format } from 'date-fns';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { getAddress, getContract } from 'viem';
-import { useAccount, useWalletClient } from 'wagmi';
+import { Address, getAddress, getContract } from 'viem';
+import { useWalletClient, useAccount } from 'wagmi';
 import { SablierV2LockupLinearAbi } from '../../../assets/abi/SablierV2LockupLinear';
 import { DETAILS_SHADOW } from '../../../constants/common';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { convertStreamIdToBigInt } from '../../../hooks/streams/useCreateSablierStream';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat } from '../../../store/roles';
+import { BigIntValuePair } from '../../../types';
 import { DEFAULT_DATE_FORMAT, formatCoin, formatUSD } from '../../../utils';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
-import { RoleHatFormValue, SablierPaymentOrPartial } from './types';
 
 function PaymentDate({ label, date }: { label: string; date?: Date }) {
   const { t } = useTranslation(['roles']);
@@ -63,16 +62,32 @@ function GreenStreamingDot({ isStreaming }: { isStreaming: boolean }) {
 }
 
 interface RolePaymentDetailsProps {
-  roleHat?: DecentRoleHat | RoleHatFormValue;
-  payment: SablierPaymentOrPartial;
+  roleHatWearerAddress?: Address;
+  roleHatSmartAddress?: Address;
+  payment: {
+    streamId?: string;
+    contractAddress?: Address;
+    asset: {
+      logo: string;
+      symbol: string;
+      decimals: number;
+      address: Address;
+    };
+    amount: BigIntValuePair;
+    startDate: Date;
+    endDate: Date;
+    cliffDate?: Date;
+    isStreaming: () => boolean;
+  };
   onClick?: () => void;
   showWithdraw?: boolean;
 }
 export function RolePaymentDetails({
   payment,
   onClick,
   showWithdraw,
-  roleHat,
+  roleHatWearerAddress,
+  roleHatSmartAddress,
 }: RolePaymentDetailsProps) {
   const { t } = useTranslation(['roles']);
   const {
@@ -87,19 +102,14 @@ export function RolePaymentDetails({
   const [withdrawableAmount, setWithdrawableAmount] = useState(0n);
 
   const canWithdraw = useMemo(() => {
-    if (
-      connectedAccount &&
-      roleHat?.wearer &&
-      connectedAccount === roleHat.wearer &&
-      !!showWithdraw
-    ) {
+    if (connectedAccount && connectedAccount === roleHatWearerAddress && !!showWithdraw) {
       return true;
     }
     return false;
-  }, [connectedAccount, showWithdraw, roleHat?.wearer]);
+  }, [connectedAccount, showWithdraw, roleHatWearerAddress]);
 
   const loadAmounts = useCallback(async () => {
-    if (walletClient && payment?.streamId && payment?.contractAddress && canWithdraw) {
+    if (walletClient && payment.streamId && payment.contractAddress && canWithdraw) {
       const streamContract = getContract({
         abi: SablierV2LockupLinearAbi,
         address: payment.contractAddress,
@@ -113,18 +123,40 @@ export function RolePaymentDetails({
       ]);
       setWithdrawableAmount(newWithdrawableAmount);
     }
-  }, [walletClient, payment?.streamId, payment?.contractAddress, canWithdraw]);
+  }, [walletClient, payment, canWithdraw]);
 
   useEffect(() => {
     loadAmounts();
   }, [loadAmounts]);
 
-  const withdraw = useDecentModal(ModalType.WITHDRAW_PAYMENT, {
-    payment,
-    roleHat,
-    onSuccess: loadAmounts,
-    withdrawableAmount,
-  });
+  const [modalType, props] = useMemo(() => {
+    if (
+      !payment.streamId ||
+      !payment.contractAddress ||
+      !roleHatWearerAddress ||
+      !roleHatSmartAddress
+    ) {
+      return [ModalType.NONE] as const;
+    }
+    return [
+      ModalType.WITHDRAW_PAYMENT,
+      {
+        paymentAssetLogo: payment.asset.logo,
+        paymentAssetSymbol: payment.asset.symbol,
+        paymentAssetDecimals: payment.asset.decimals,
+        paymentStreamId: payment.streamId,
+        paymentContractAddress: payment.contractAddress,
+        onSuccess: loadAmounts,
+        withdrawInformation: {
+          withdrawableAmount,
+          roleHatWearerAddress,
+          roleHatSmartAddress,
+        },
+      },
+    ] as const;
+  }, [payment, roleHatSmartAddress, roleHatWearerAddress, loadAmounts, withdrawableAmount]);
+
+  const withdraw = useDecentModal(modalType, props);
 
   const handleClickWithdraw = useCallback(() => {
     if (safe?.address) {
@@ -134,7 +166,7 @@ export function RolePaymentDetails({
   }, [addressPrefix, navigate, safe?.address, withdraw]);
 
   const amountPerWeek = useMemo(() => {
-    if (!payment.amount?.bigintValue || !payment.startDate || !payment.endDate) {
+    if (!payment.amount?.bigintValue) {
       return;
     }
 
@@ -147,18 +179,15 @@ export function RolePaymentDetails({
   }, [payment]);
 
   const streamAmountUSD = useMemo(() => {
-    if (!payment.amount) {
-      return;
-    }
     // @todo add price support for tokens not found in assetsFungible
     const foundAsset = assetsFungible.find(
-      asset => getAddress(asset.tokenAddress) === payment.asset?.address,
+      asset => getAddress(asset.tokenAddress) === payment.asset.address,
     );
     if (!foundAsset || foundAsset.usdPrice === undefined) {
       return;
     }
     return Number(payment.amount.value) * foundAsset.usdPrice;
-  }, [payment.amount, payment.asset?.address, assetsFungible]);
+  }, [payment, assetsFungible]);
 
   return (
     <Box
@@ -185,8 +214,8 @@ export function RolePaymentDetails({
                 ? formatCoin(
                     payment.amount.bigintValue,
                     false,
-                    payment.asset?.decimals,
-                    payment.asset?.symbol,
+                    payment.asset.decimals,
+                    payment.asset.symbol,
                   )
                 : undefined}
             </Text>
@@ -201,15 +230,15 @@ export function RolePaymentDetails({
               p="0.5rem"
             >
               <Image
-                src={payment.asset?.logo}
+                src={payment.asset.logo}
                 fallbackSrc="/images/coin-icon-default.svg"
                 boxSize="1.5rem"
               />
               <Text
                 textStyle="label-base"
                 color="white-0"
               >
-                {payment.asset?.symbol ?? t('selectLabel', { ns: 'modals' })}
+                {payment.asset.symbol ?? t('selectLabel', { ns: 'modals' })}
               </Text>
             </Flex>
           </Flex>
@@ -230,7 +259,7 @@ export function RolePaymentDetails({
                   textStyle="label-small"
                   color="white-0"
                 >
-                  {`${formatCoin(amountPerWeek, true, payment.asset?.decimals, payment.asset?.symbol)} / ${t('week')}`}
+                  {`${formatCoin(amountPerWeek, true, payment.asset.decimals, payment.asset.symbol)} / ${t('week')}`}
                 </Text>
               </Flex>
             )}

src/components/pages/Roles/RolesDetailsDrawer.tsx

@@ -16,11 +16,10 @@ import { useGetDAOName } from '../../../hooks/DAO/useGetDAOName';
 import useAvatar from '../../../hooks/utils/useAvatar';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { DecentRoleHat } from '../../../store/roles';
 import Avatar from '../../ui/page/Header/Avatar';
 import Divider from '../../ui/utils/Divider';
 import { RolePaymentDetails } from './RolePaymentDetails';
-import { SablierPayment } from './types';
+import { RoleDetailsDrawerRoleHatProp } from './types';
 
 function RoleAndDescriptionLabel({ label, icon }: { label: string; icon: React.ElementType }) {
   return (
@@ -40,8 +39,7 @@ function RoleAndDescriptionLabel({ label, icon }: { label: string; icon: React.E
 }
 
 interface RoleDetailsDrawerProps {
-  roleHat: DecentRoleHat;
-  payments?: SablierPayment[];
+  roleHat: RoleDetailsDrawerRoleHatProp;
   onOpen?: () => void;
   onClose: () => void;
   onEdit: (hatId: Hex) => void;
@@ -53,7 +51,6 @@ export default function RolesDetailsDrawer({
   onClose,
   isOpen = true,
   onEdit,
-  payments,
 }: RoleDetailsDrawerProps) {
   const {
     node: { daoAddress },
@@ -157,7 +154,7 @@ export default function RolesDetailsDrawer({
               </Text>
             </GridItem>
           </Grid>
-          {payments && (
+          {roleHat.payments && (
             <>
               <Divider
                 variant="darker"
@@ -169,11 +166,12 @@ export default function RolesDetailsDrawer({
               >
                 {t('payments')}
               </Text>
-              {payments.map((payment, index) => (
+              {roleHat.payments.map((payment, index) => (
                 <RolePaymentDetails
                   key={index}
                   payment={payment}
-                  roleHat={roleHat}
+                  roleHatSmartAddress={roleHat.smartAddress}
+                  roleHatWearerAddress={getAddress(roleHat.wearer)}
                   showWithdraw
                 />
               ))}

src/components/pages/Roles/RolesDetailsDrawerMobile.tsx

@@ -1,18 +1,17 @@
 import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react';
 import { PencilLine } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
-import { Hex } from 'viem';
+import { getAddress, Hex } from 'viem';
 import { useFractal } from '../../../providers/App/AppProvider';
-import { DecentRoleHat, useRolesStore } from '../../../store/roles';
+import { useRolesStore } from '../../../store/roles';
 import DraggableDrawer from '../../ui/containers/DraggableDrawer';
 import Divider from '../../ui/utils/Divider';
 import { AvatarAndRoleName } from './RoleCard';
 import { RolePaymentDetails } from './RolePaymentDetails';
-import { SablierPayment } from './types';
+import { RoleDetailsDrawerRoleHatProp } from './types';
 
 interface RoleDetailsDrawerMobileProps {
-  roleHat: DecentRoleHat;
-  payments?: SablierPayment[];
+  roleHat: RoleDetailsDrawerRoleHatProp;
   onOpen?: () => void;
   onClose?: () => void;
   isOpen?: boolean;
@@ -25,7 +24,6 @@ export default function RolesDetailsDrawerMobile({
   onOpen,
   isOpen = true,
   onEdit,
-  payments,
 }: RoleDetailsDrawerMobileProps) {
   const {
     node: { daoAddress },
@@ -87,7 +85,7 @@ export default function RolesDetailsDrawerMobile({
         px="1rem"
         mb="1.5rem"
       >
-        {payments && (
+        {roleHat.payments && (
           <>
             <Divider
               variant="darker"
@@ -101,11 +99,12 @@ export default function RolesDetailsDrawerMobile({
             >
               {t('payments')}
             </Text>
-            {payments.map((payment, index) => (
+            {roleHat.payments.map((payment, index) => (
               <RolePaymentDetails
                 key={index}
                 payment={payment}
-                roleHat={roleHat}
+                roleHatSmartAddress={roleHat.smartAddress}
+                roleHatWearerAddress={getAddress(roleHat.wearer)}
                 showWithdraw
               />
             ))}