Merge pull request #2156 from decentdao/roles-0.2.0/now-this-shit-wit…

…h-payroll-getting-real `[roles-0.2.0/streams]` - Now the payroll is getting real baby
decentdao · Jul 18, 2024 · 208c1e7 · 208c1e7
2 parents 0bb5ffa + bc71740
commit 208c1e7
Show file tree

Hide file tree

Showing 16 changed files with 615 additions and 856 deletions.
diff --git a/src/components/pages/Roles/RoleCard.tsx b/src/components/pages/Roles/RoleCard.tsx
@@ -10,7 +10,13 @@ import { Card } from '../../ui/cards/Card';
 import EtherscanLink from '../../ui/links/EtherscanLink';
 import Avatar from '../../ui/page/Header/Avatar';
 import EditBadge from './EditBadge';
-import { RoleEditProps, RoleProps, SablierPayroll, SablierVesting } from './types';
+import {
+  RoleEditProps,
+  RoleProps,
+  SablierPayroll,
+  SablierVesting,
+  frequencyOptions,
+} from './types';
 
 export function AvatarAndRoleName({
   wearerAddress,
@@ -92,13 +98,13 @@ function PayrollAndVesting({
             my="0.5rem"
           >
             <Image
-              src={payrollData.asset.iconUri}
+              src={payrollData.asset.logo}
               fallbackSrc="/images/coin-icon-default.svg"
               alt={payrollData.asset.symbol}
               w="1.25rem"
               h="1.25rem"
             />
-            {payrollData.payrollAmount}
+            {payrollData.amount.value}
             <EtherscanLink
               color="white-0"
               _hover={{ bg: 'transparent' }}
@@ -112,7 +118,7 @@ function PayrollAndVesting({
               {payrollData.asset.symbol}
             </EtherscanLink>
             <Text>
-              {'/'} {payrollData.payrollSchedule}
+              {'/'} {t(`${frequencyOptions[payrollData.paymentFrequency]}Short`)}
             </Text>
           </Flex>
         </Box>

diff --git a/src/components/pages/Roles/RolesTable.tsx b/src/components/pages/Roles/RolesTable.tsx
@@ -12,7 +12,14 @@ import EtherscanLink from '../../ui/links/EtherscanLink';
 import Avatar from '../../ui/page/Header/Avatar';
 import EditBadge from './EditBadge';
 import { RoleCardLoading, RoleCardNoRoles } from './RolePageCard';
-import { RoleEditProps, RoleFormValues, RoleProps, SablierPayroll, SablierVesting } from './types';
+import {
+  RoleEditProps,
+  RoleFormValues,
+  RoleProps,
+  SablierPayroll,
+  SablierVesting,
+  frequencyOptions,
+} from './types';
 
 function RolesHeader({ addHiddenColumn }: { addHiddenColumn?: boolean }) {
   const { t } = useTranslation(['roles']);
@@ -124,7 +131,7 @@ function MemberColumn({ wearerAddress }: { wearerAddress: string | undefined })
 }
 
 function PayrollColumn({ payrollData }: { payrollData: SablierPayroll | undefined }) {
-  const { t } = useTranslation(['daoCreate']);
+  const { t } = useTranslation(['roles', 'daoCreate']);
   return (
     <Td>
       <Flex flexDir="column">
@@ -136,13 +143,13 @@ function PayrollColumn({ payrollData }: { payrollData: SablierPayroll | undefine
               my="0.5rem"
             >
               <Image
-                src={payrollData.asset.iconUri}
+                src={payrollData.asset.logo}
                 fallbackSrc="/images/coin-icon-default.svg"
                 alt={payrollData.asset.symbol}
                 w="1.25rem"
                 h="1.25rem"
               />
-              {payrollData.payrollAmount}
+              {payrollData.amount.value}
               <EtherscanLink
                 color="white-0"
                 _hover={{ bg: 'transparent' }}
@@ -159,7 +166,7 @@ function PayrollColumn({ payrollData }: { payrollData: SablierPayroll | undefine
                 color="white-0"
                 textStyle="body-base"
               >
-                {'/'} {payrollData.payrollSchedule}
+                {'/'} {t(`${frequencyOptions[payrollData.paymentFrequency]}Short`)}
               </Text>
             </Flex>
           </Box>
@@ -168,7 +175,7 @@ function PayrollColumn({ payrollData }: { payrollData: SablierPayroll | undefine
             textStyle="body-base"
             color="neutral-6"
           >
-            {t('n/a')}
+            {t('n/a', { ns: 'daoCreate' })}
           </Text>
         )}
       </Flex>
@@ -366,13 +373,14 @@ export function RolesEditTable({ handleRoleClick }: { handleRoleClick: (hatId: H
           {values.hats.map(role => (
             <RolesRowEdit
               key={role.id}
+              name={role.name}
               wearerAddress={role.wearer}
               handleRoleClick={() => {
                 setFieldValue('roleEditing', role);
                 handleRoleClick(role.id);
               }}
               editStatus={role.editedRole?.status}
-              {...role}
+              payrollData={role.payroll}
             />
           ))}
         </Tbody>

diff --git a/src/components/pages/Roles/forms/RoleFormInfo.tsx b/src/components/pages/Roles/forms/RoleFormInfo.tsx
@@ -19,7 +19,7 @@ export default function RoleFormInfo() {
       borderRadius="0.5rem"
     >
       <FormControl>
-        <Field name={`roleEditing.name`}>
+        <Field name="roleEditing.name">
           {({
             field,
             form: { setFieldValue, setFieldTouched },
@@ -52,7 +52,7 @@ export default function RoleFormInfo() {
         </Field>
       </FormControl>
       <FormControl>
-        <Field name={`roleEditing.description`}>
+        <Field name="roleEditing.description">
           {({
             field,
             form: { setFieldValue, setFieldTouched },
@@ -86,7 +86,7 @@ export default function RoleFormInfo() {
         </Field>
       </FormControl>
       <FormControl>
-        <Field name={`roleEditing.wearer`}>
+        <Field name="roleEditing.wearer">
           {({
             field,
             form: { setFieldValue, setFieldTouched },

diff --git a/src/components/pages/Roles/forms/RoleFormPayroll.tsx b/src/components/pages/Roles/forms/RoleFormPayroll.tsx
@@ -36,6 +36,7 @@ import { CARD_SHADOW, TOOLTIP_MAXW } from '../../../../constants/common';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { BigIntValuePair } from '../../../../types';
 import { DEFAULT_DATE_FORMAT, formatUSD } from '../../../../utils';
+import { MOCK_MORALIS_ETH_ADDRESS } from '../../../../utils/address';
 import DraggableDrawer from '../../../ui/containers/DraggableDrawer';
 import { BigIntInput } from '../../../ui/forms/BigIntInput';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
@@ -104,7 +105,9 @@ function AssetSelector() {
   const {
     treasury: { assetsFungible },
   } = useFractal();
-  const fungibleAssetsWithBalance = assetsFungible.filter(asset => parseFloat(asset.balance) > 0);
+  const fungibleAssetsWithBalance = assetsFungible.filter(
+    asset => parseFloat(asset.balance) > 0 && asset.tokenAddress !== MOCK_MORALIS_ETH_ADDRESS, // Can't stream native token
+  );
   const { values, setFieldValue } = useFormikContext<RoleFormValues>();
   const selectedAsset = values.roleEditing?.payroll?.asset;
   return (
@@ -455,7 +458,6 @@ function PaymentStartDatePicker() {
   );
 }
 
-// @todo @dev is this frequency or period???
 function PaymentFrequency() {
   const { t } = useTranslation(['roles']);
   return (

diff --git a/src/components/pages/Roles/types.tsx b/src/components/pages/Roles/types.tsx
@@ -20,17 +20,17 @@ export interface SablierVesting {
 }
 
 export interface SablierPayroll {
-  payrollSchedule: string;
-  payrollAmount: string;
-  payrollAmountUSD: string;
-  payrollStartDate: string;
-  payrollEndDate: string;
   asset: {
     address: Address;
-    symbol: string;
     name: string;
-    iconUri: string;
+    symbol: string;
+    decimals: number;
+    logo: string;
   };
+  amount: BigIntValuePair;
+  paymentFrequency: Frequency;
+  paymentStartDate: Date;
+  paymentFrequencyNumber: number;
 }
 export interface RoleProps {
   editStatus?: EditBadgeStatus;
@@ -81,24 +81,10 @@ export interface EditedRole {
   status: EditBadgeStatus;
 }
 
-export interface RoleFormPayrollValue {
-  asset: {
-    address: Address;
-    name: string;
-    symbol: string;
-    decimals: number;
-    logo: string;
-  };
-  amount: BigIntValuePair;
-  paymentFrequency: string;
-  paymentStartDate: Date;
-  paymentFrequencyNumber: number;
-}
-
 export interface RoleValue extends Omit<DecentRoleHat, 'wearer'> {
   wearer: string;
   editedRole?: EditedRole;
-  payroll?: RoleFormPayrollValue;
+  payroll?: SablierPayroll;
 }
 
 export interface RoleFormValues {