Merge pull request #2898 from IX-Swap/release/v1.1.0

v1.1.0 patch for payout
IX-Swap · Oct 9, 2024 · 48013ed · 48013ed
2 parents 14ab0a6 + 54a4aaf
commit 48013ed
Show file tree

Hide file tree

Showing 17 changed files with 137 additions and 188 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -287,7 +287,6 @@ export const PinnedContentButton = styled(Base)`
   font-family: ${(props) => props.theme.launchpad.font};
   border-radius: 6px;
   text-align: center;
-  padding: 12px, 16px, 12px, 16px;
   border: unset;
   cursor: pointer;
   width: 100%;

diff --git a/src/components/MultipleFilters/index.tsx b/src/components/MultipleFilters/index.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useMemo } from 'react'
 import { useFormik } from 'formik'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { MobileDatePicker } from '@material-ui/pickers'
 import { capitalize } from '@material-ui/core'
 import { useLocation } from 'react-router-dom'
 import dayjs from 'dayjs'
 import { PAYOUT_STATUS } from 'constants/enums'
 import { Search } from 'components/Search'
-import {  TYPE } from 'theme'
+import { TYPE } from 'theme'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { DateRangePickerFilter } from 'components/DateRangePicker'
@@ -41,7 +41,6 @@ export const MultipleFilters = ({
   isClearable,
   fullWidth = true,
 }: Props) => {
-
   const { pathname } = useLocation()
   const withSearch = useMemo(() => filters.includes(FILTERS.SEARCH), [filters])
   const { me } = useUserState()
@@ -230,11 +229,7 @@ export const MultipleFilters = ({
             onClick={inputProps?.onClick as any}
             isOpen={Boolean(focused || values.recordDate)}
           >
-            <TYPE.main1
-              color="#8F8FB2"
-              overflow="hidden"
-              style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-            >
+            <TYPE.main1 color="#8F8FB2" overflow="hidden" style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               <Trans>Record date</Trans>
             </TYPE.main1>
             <ArrowDownIcon />
@@ -269,26 +264,15 @@ export const MultipleFilters = ({
     ),
   } as Record<string, JSX.Element>
 
-  // if (isMobile) {
-  //   return (
-  //     <MobileFilters
-  //       applyFilters={submitForm}
-  //       values={values}
-  //       setFieldValue={setFieldValue}
-  //       onSelectValueChange={onSelectValueChange}
-  //       haveValues={!isEmpty}
-  //       filters={filters}
-  //       searchPlaceholder={searchPlaceholder}
-  //       forManager={forManager}
-  //       managerSecTokensOptions={managerSecTokensOptions}
-  //       statusOptionsSorted={statusOptionsSorted}
-  //       onResetFilters={onResetFilters}
-  //     />
-  //   )
-  // }
+  let additionalColumnAmount = 0
+  if (withSearch) additionalColumnAmount++
+  if (isClearable) additionalColumnAmount++
 
   return (
-    <Container sx={{ gap: fullWidth ? '16px' : 0 }}>
+    <Container
+      sx={{ gap: fullWidth ? '16px' : 0 }}
+      $gridTemplateColumns={'1fr' + ' auto'.repeat(additionalColumnAmount)}
+    >
       {withSearch && filterComponents[FILTERS.SEARCH]}
       <FiltersContainer className="filters-container">
         {filters.map(
@@ -299,7 +283,7 @@ export const MultipleFilters = ({
         )}
       </FiltersContainer>
       {isClearable ? (
-        <PinnedContentButton disabled={isEmpty} onClick={onResetFilters}>
+        <PinnedContentButton disabled={isEmpty} onClick={onResetFilters} fontSize={1} padding="0 0.5rem">
           Clear Filters
         </PinnedContentButton>
       ) : null}

diff --git a/src/components/MultipleFilters/styleds.ts b/src/components/MultipleFilters/styleds.ts
@@ -5,10 +5,10 @@ import { ButtonText } from 'components/Button'
 import { MEDIA_WIDTHS } from 'theme'
 import Box from '@mui/material/Box'
 
-export const Container = styled(Box)`
+export const Container = styled(Box) <{ $gridTemplateColumns: string }>`
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: ${({ $gridTemplateColumns }) => $gridTemplateColumns};
   gap: 16px;
   @media (max-width: ${MEDIA_WIDTHS.upToMedium}px) {
     grid-template-columns: 1fr;

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -27,7 +27,6 @@ const rowStyle = css`
     padding-left: 0px;
   }
 
-
   > div {
     display: flex;
     align-items: center;
@@ -53,11 +52,8 @@ export const HeaderRow = styled.div`
 
 export const BodyRow = styled.div`
   ${rowStyle};
-  // border: 1px solid ${({ theme: { bg11 } }) => bg11};
   border-bottom: 1px solid #e6e6ff;
-  // border-radius: 20px;
   margin-bottom: 8px;
-  // background-color: ${({ theme: { config } }) => config.background?.main || 'rgba(39, 31, 74, 0.3)'};
 `
 
 const Wrap = styled.div`

diff --git a/src/components/TmPayoutEvents/index.tsx b/src/components/TmPayoutEvents/index.tsx
@@ -193,14 +193,16 @@ const Row = ({ item }: IRow) => {
         <TYPE.main1 style={{ fontWeight: 500 }}>
           {amountClaimed ? (
             <div style={{ display: 'block' }}>
-              <MouseoverTooltip style={{ height: '30px' }} text={tooltipText} textStyle={{ whiteSpace: 'pre-line' }}>
-                <CurrencyLogo currency={currency} style={{ marginRight: 4 }} />
+              <MouseoverTooltip text={tooltipText} textStyle={{ whiteSpace: 'pre-line' }}>
+                <Flex alignItems="center">
+                  <CurrencyLogo currency={currency} style={{ marginRight: 4 }} />
+                  {currency?.symbol || '-'}&nbsp;
+                </Flex>
+                <TYPE.main1>
+                  {amountClaimed}&nbsp;/&nbsp;
+                  {formatedTokenAmount}
+                </TYPE.main1>
               </MouseoverTooltip>
-              {currency?.symbol || '-'}&nbsp;
-              <TYPE.main1>
-                {amountClaimed}&nbsp;/&nbsp;
-                {formatedTokenAmount}
-              </TYPE.main1>
             </div>
           ) : (
             '-'

diff --git a/src/components/TmPayoutEvents/styleds.ts b/src/components/TmPayoutEvents/styleds.ts
@@ -18,7 +18,7 @@ export const BodyContainer = styled.div`
   row-gap: 8px;
 `
 
-const gridTemplateColumns = '70px 2fr 1fr 1fr 1fr 2fr 140px minmax(100px,10%)';
+const gridTemplateColumns = '70px 2fr 1fr 1fr 1fr 2fr minmax(100px,160px) 80px';
 const minWidth = '900px';
 
 export const StyledHeaderRow = styled(HeaderRow)`
@@ -46,6 +46,10 @@ export const StyledBodyRow = styled(BodyRow)`
     gap: 4px;
   }
 
+  > div:last-child {
+    padding: 0;
+  }
+
   button {
     min-height: 32px;
     height: 32px;

diff --git a/src/components/TmPayoutHistory/index.tsx b/src/components/TmPayoutHistory/index.tsx
@@ -73,6 +73,7 @@ export const TmPayoutHistory = () => {
           searchPlaceholder="Search by Wallet or ID"
           onFiltersChange={handleFilters}
           forManager
+          isClearable
         />
       </Container>
       <Line style={{ width: 'webkit-fill-available' }} />

diff --git a/src/pages/CreatePayoutEvent/EditPayoutEvent.tsx b/src/pages/CreatePayoutEvent/EditPayoutEvent.tsx
@@ -2,7 +2,6 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { Flex } from 'rebass'
 import { useHistory, useParams } from 'react-router-dom'
-import { capitalize } from '@material-ui/core'
 import { useActiveWeb3React } from 'hooks/web3'
 import { StyledBodyWrapper } from 'pages/SecurityTokens'
 import { Loadable } from 'components/LoaderHover'
@@ -88,7 +87,7 @@ const EditPayoutEventPage: FC = () => {
         title: payout.title,
         token,
         tokenAmount: payout.tokenAmount,
-        type: capitalize(payout.type),
+        type: payout.type,
         otherType: payout.otherType,
         payoutContractAddress: payout.payoutContractAddress,
         blockNumber: payout.blockNumber,

diff --git a/src/pages/CreatePayoutEvent/PayoutType.tsx b/src/pages/CreatePayoutEvent/PayoutType.tsx
@@ -1,10 +1,9 @@
 import React, { FC } from 'react'
 import { Box } from 'rebass'
 import styled from 'styled-components'
-import { t } from '@lingui/macro'
 import { useFormikContext } from 'formik'
+import { capitalize } from '@material-ui/core'
 
-import { Label } from 'components/Label'
 import { TYPE } from 'theme'
 import { Checkbox } from 'components/Checkbox'
 import { TextInput } from 'pages/KYC/common'
@@ -21,11 +20,11 @@ interface Props {
 export const PayoutType: FC<Props> = ({ onValueChange, availableForEditing }) => {
   const { values, errors, touched } = useFormikContext<FormValues>()
 
-  const description = payoutTypes.find(({ label }) => values.type === label)?.description || null
+  const description = payoutTypes.find(({ value }) => values.type === value)?.description || null
 
-  const onTypeChange = (label: string) => {
-    if (label !== 'Other') onValueChange('otherType', '')
-    onValueChange('type', label)
+  const onTypeChange = (value: string) => {
+    if (value !== 'other') onValueChange('otherType', '')
+    onValueChange('type', value)
   }
 
   return (
@@ -34,20 +33,20 @@ export const PayoutType: FC<Props> = ({ onValueChange, availableForEditing }) =>
         {!availableForEditing.includes('type') ? (
           <>
             <div style={{ color: '#555566', fontSize: '13px', marginBottom: '18px' }}>Payout Type</div>
-            <div>{values.type || values.otherType}</div>
+            <div>{capitalize(values.type)}{values.type === 'other' ? ` - ${values.otherType}` : ''}</div>
           </>
         ) : (
           <>
-            {payoutTypes.map(({ id, label }) => (
+            {payoutTypes.map(({ id, label, value }) => (
               <Card key={`payout-type-card-${id}`}>
                 <Checkbox
                   key={`payout-type-${id}`}
                   scaleSize={0.8}
                   buttonStyles={{ marginRight: 32 }}
                   isRadio
                   label={label}
-                  onClick={() => onTypeChange(label)}
-                  checked={values.type === label}
+                  onClick={() => onTypeChange(value)}
+                  checked={values.type === value}
                   disabled={!availableForEditing.includes('type')}
                 />
               </Card>
@@ -65,7 +64,7 @@ export const PayoutType: FC<Props> = ({ onValueChange, availableForEditing }) =>
                 </TYPE.buttonMuted>
               </ExtraInfoCard>
             )}
-            {values.type === 'Other' && (
+            {values.type === 'other' && (
               <TextInput
                 style={{ marginTop: 12 }}
                 placeholder="Write payout type"

diff --git a/src/pages/CreatePayoutEvent/mock.ts b/src/pages/CreatePayoutEvent/mock.ts
@@ -4,23 +4,27 @@ export const payoutTypes = [
   {
     id: 1,
     label: 'Dividends',
+    value: 'dividends',
     description: 'Dividends - A token reward paid to the shareholders for their investment in a company’s equity',
   },
   {
     id: 2,
     label: 'Interest',
+    value: 'interest',
     description:
       'Interest - Is the monetary charge for the privilege of borrowing money, typically expressed as an annual percentage rate (APR).',
   },
   {
     id: 3,
     label: 'Royalties',
+    value: 'royalties',
     description:
       'Royalties - A legally binding payment made to an individual or company for the ongoing use of their assets, including copyrighted works, franchises, and natural resources.',
   },
   {
     id: 4,
     label: 'Other',
+    value: 'other',
     description:
       'Other - Any type of pay-out that doesn’t fall under any of the options can be tagged as “Other”, provided that additional details will be provided about the payout event.',
   },

diff --git a/src/pages/CreatePayoutEvent/validation.ts b/src/pages/CreatePayoutEvent/validation.ts
@@ -7,7 +7,7 @@ export const validation = object().shape({
   tokenAmount: string().required('Field is required'),
   type: string().required('Field is required'),
   otherType: string().nullable().when('type', {
-    is: (type: string) => type === 'Other',
+    is: (type: string) => type === 'other',
     then: string().required('Field is required').max(50, 'Maximum is allowed 50 chars'),
     otherwise: string().nullable(),
   }),