chore: fix styling and add fixed price for nfs

push-protocol · Oct 5, 2023 · 1ea7ae0 · 1ea7ae0
1 parent 5ae98de
commit 1ea7ae0
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 79 deletions.
diff --git a/src/components/channel/AddSettingModalContent.tsx b/src/components/channel/AddSettingModalContent.tsx
@@ -324,7 +324,7 @@ const ModalContainer = styled.div`
   }
 `;
 
-const Label = styled.div`
+const Label = styled.div<{ padding?: string }>`
   font-style: normal;
   font-weight: 500;
   font-size: 16px;
@@ -347,13 +347,13 @@ const MaxWidthInput = styled(Input)<{ hasError: boolean }>`
   max-width: 108px;
   flex: 1;
   border: ${(props) =>
-    props.hasError ? `1px solid rgba(237, 88, 88, 1)` : `1px solid ${props.theme.default.borderColor}`};
+    props.hasError ? `1px solid ${props.theme.nfsError}` : `1px solid ${props.theme.default.borderColor}`};
 `;
 
 const InputWithError = styled(Input)<{ hasError: boolean }>`
   flex: 1;
   border: ${(props) =>
-    props.hasError ? `1px solid rgba(237, 88, 88, 1)` : `1px solid ${props.theme.default.borderColor}`};
+    props.hasError ? `1px solid ${props.theme.nfsError}` : `1px solid ${props.theme.default.borderColor}`};
 `;
 
 const ErrorInfo = styled.span`
@@ -362,7 +362,7 @@ const ErrorInfo = styled.span`
   line-height: 18px;
   letter-spacing: 0em;
   text-align: left;
-  color: rgba(237, 88, 88, 1);
+  color: ${(props) => props.theme.nfsError};
   margin-top: 4px;
 `;
 

diff --git a/src/components/channel/ChannelButtons.tsx b/src/components/channel/ChannelButtons.tsx
@@ -47,38 +47,30 @@ export const AddSettingButton = ({ onClick }: ChannelButtonProps) => {
 
 const ChannelButton = styled(Button)`
   height: 36px;
-  background: #cf1c84;
+  background: ${(props) => props.theme.default.primaryPushThemeTextColor};
   color: #fff;
   z-index: 0;
-  font-family: 'Strawford';
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   border-radius: 8px;
   padding: 4px 12px 4px 12px;
-  @media (min-width: 600px) and (max-width: 700px) {
-    margin-right: 9px;
-  }
 `;
 
 const ChannelButtonWhite = styled.button`
   height: 36px;
   border: 1px solid ${(props) => props.theme.default.borderColor};
   background: transparent;
-  color: #fff;
+  color: white;
   z-index: 0;
-  font-family: 'Strawford';
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   border-radius: 8px;
   padding: 4px 12px 4px 12px;
   cursor: pointer;
-  @media (min-width: 600px) and (max-width: 700px) {
-    margin-right: 9px;
-  }
 `;
 
 const ButtonText = styled.span`

diff --git a/src/components/channel/ChannelInfoList.tsx b/src/components/channel/ChannelInfoList.tsx
@@ -149,14 +149,16 @@ const DelegatesList = styled.div<{ isLoading: boolean }>`
 const Tag = styled.div`
   padding: 4px 8px 4px 8px;
   border-radius: 4px;
-  background-color: rgba(244, 245, 250, 1);
-  color: rgba(73, 77, 95, 1);
+  background-color: ${(props) => props.theme.default.secondaryBg};
+  color: ${(props) => props.theme.tooltipContentDesc};
   font-size: 10px;
   margin-left: 8px;
 `;
 
 const NotificationSettingName = styled.span`
   margin-left: 15px;
+  color: ${(props) =>
+    props.theme.scheme === 'light' ? props.theme.default.color : props.theme.default.secondaryColor};
 `;
 
 const EmptyNotificationSetting = styled.div`
@@ -169,7 +171,6 @@ const EmptyNotificationSetting = styled.div`
 `;
 
 const EmptyNotificationTitle = styled.div`
-  font-family: Strawford;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;

diff --git a/src/components/channel/DepositFeeFooter.tsx b/src/components/channel/DepositFeeFooter.tsx
@@ -27,30 +27,17 @@ interface DepositFeeFooterProps {
   onCancel: () => void;
   disabled: boolean;
   onClick: () => void;
+  feeRequired: number;
 }
 
-const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick }: DepositFeeFooterProps) => {
+const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick, feeRequired }: DepositFeeFooterProps) => {
   const { account, provider } = useAccount();
-  const { epnsReadProvider } = useSelector((state: any) => state.contracts);
-  const [feesRequiredForEdit, setFeesRequiredForEdit] = useState(0);
   const [pushApprovalAmount, setPushApprovalAmount] = useState(0);
   const [pushDeposited, setPushDeposited] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  // it can be fetched from contract for dynamic, but making it const will be fast
-  const minFees = 50;
-
   const depositFeeToast = useToast();
 
-  useEffect(() => {
-    if (!account) return;
-
-    (async function () {
-      const amount = await epnsReadProvider.channelUpdateCounter(account);
-      setFeesRequiredForEdit(minFees * (Number(amount) + 1));
-    })();
-  }, [account]);
-
   useEffect(() => {
     if (!account || !provider) return;
 
@@ -63,7 +50,7 @@ const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick }: D
       setPushApprovalAmount(parseInt(pushTokenApprovalAmount));
       const amountToBeDeposit = parseInt(pushTokenApprovalAmount);
 
-      if (amountToBeDeposit >= feesRequiredForEdit && amountToBeDeposit != 0) {
+      if (amountToBeDeposit >= feeRequired && amountToBeDeposit != 0) {
         setPushDeposited(true);
       } else {
         setPushDeposited(false);
@@ -80,12 +67,12 @@ const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick }: D
       const response = await approvePushToken({
         signer,
         contractAddress: addresses.epnscore,
-        amount: feesRequiredForEdit - pushApprovalAmount,
+        amount: feeRequired - pushApprovalAmount,
       });
       console.log('response', response);
       if (response) {
         setIsLoading(false);
-        setPushApprovalAmount(feesRequiredForEdit);
+        setPushApprovalAmount(feeRequired);
         setPushDeposited(true);
         depositFeeToast.showMessageToast({
           toastTitle: 'Success',
@@ -143,11 +130,11 @@ const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick }: D
         </div>
         <ItemHV2 flex="0">
           {pushDeposited ? <TickImage src={VerifyLogo} /> : null}
-          <EditFee>{feesRequiredForEdit} PUSH</EditFee>
+          <EditFee>{feeRequired} PUSH</EditFee>
         </ItemHV2>
       </Footer>
       <FaucetInfo
-        noOfPushTokensToCheck={feesRequiredForEdit}
+        noOfPushTokensToCheck={feeRequired}
         containerProps={{ width: '100%' }}
         onMintPushToken={async (noOfTokens) => {
           await mintPushToken({ noOfTokens, provider, account });
@@ -170,18 +157,27 @@ const DepositFeeFooter = ({ title, description, onCancel, disabled, onClick }: D
         <>
           {/* This below is Footer Buttons i.e, Cancel and save changes */}
           <ButtonContainer>
-            <CancelButtons onClick={onCancel}>Cancel</CancelButtons>
-
-            {pushApprovalAmount >= feesRequiredForEdit ? (
+            <CancelButtons
+              onClick={onCancel}
+              disabled={false}
+            >
+              Cancel
+            </CancelButtons>
+
+            {pushApprovalAmount >= feeRequired ? (
               <FooterButtons
                 disabled={disabled}
-                style={{ background: disabled ? ' #F4DCEA' : '#CF1C84' }}
                 onClick={onClick}
               >
                 Save Changes
               </FooterButtons>
             ) : (
-              <FooterButtons onClick={depositPush}>Approve PUSH</FooterButtons>
+              <FooterButtons
+                disabled={disabled}
+                onClick={depositPush}
+              >
+                Approve PUSH
+              </FooterButtons>
             )}
           </ButtonContainer>
         </>
@@ -220,7 +216,6 @@ const Footer = styled(ItemVV2)`
 const FooterPrimaryText = styled.p`
   margin: 0px;
   color: ${(props) => props.theme.editChannelPrimaryText};
-  font-family: 'Strawford';
   font-style: normal;
   font-weight: 500;
   font-size: 20px;
@@ -237,8 +232,7 @@ const FooterSecondaryText = styled.p`
 
 const EditFee = styled.p`
   margin: 0px 0px 0px 5px;
-  color: #d53893;
-  font-family: 'Strawford';
+  color: ${(props) => props.theme.viewChannelSecondaryText};
   font-style: normal;
   font-weight: 500;
   font-size: 20px;
@@ -255,7 +249,6 @@ const VerifyingContainer = styled(ItemVV2)`
 `;
 
 const TransactionText = styled.p`
-  font-family: 'Strawford';
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
@@ -275,8 +268,7 @@ const ButtonContainer = styled(ItemHV2)`
   }
 `;
 
-const FooterButtons = styled(Button)`
-  font-family: 'Strawford';
+const FooterButtons = styled(Button)<{ disabled: boolean }>`
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
@@ -285,8 +277,8 @@ const FooterButtons = styled(Button)`
   border-radius: 15px;
   align-items: center;
   text-align: center;
-  background: #cf1c84;
-  color: #fff;
+  background: ${(props) => (props.disabled ? props.theme.nfsDisabled : props.theme.default.primaryPushThemeTextColor)};
+  color: ${(props) => (props.disabled ? props.theme.nfsDisabledText : 'white')};
   padding: 16px 27px;
   width: 12rem;
 
@@ -302,23 +294,16 @@ const FooterButtons = styled(Button)`
 `;
 
 const CancelButtons = styled(FooterButtons)`
-  margin-right:14px;
-  background:${(props) => props.theme.default.bg};
-  color:${(props) => props.theme.logoBtnColor};
-  border:1px solid #CF1C84;
-  @media (max-width:425px){
-    margin-right:0px;
-    margin-top:10px;
-  }
+  margin-right: 14px;
+  background: ${(props) => props.theme.default.bg};
+  color: ${(props) => props.theme.logoBtnColor};
+  border: 1px solid ${(props) =>
+    props.theme.scheme === 'light'
+      ? props.theme.default.primaryPushThemeTextColor
+      : props.theme.default.borderColor};
 
-  &:hover{
-    color:#AC106C;
-    border:border: 1px solid #AC106C;
-    background:transparent;
-    opacity:1;
-  }
-
-  &:after{
-    background:white;
+  @media ${device.mobileL} {
+    margin-right: 0px;
+    margin-top: 10px;
   }
 `;
diff --git a/src/components/channel/NotificationSettings.tsx b/src/components/channel/NotificationSettings.tsx
@@ -24,21 +24,18 @@ import { useAccount } from 'hooks';
 import { appConfig } from 'config';
 import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
 import { ChannelSetting } from 'helpers/channel/types';
+import { getChannel } from 'services';
 
 // Constants
 const CORE_CHAIN_ID = appConfig.coreContractChain;
 
 function NotificationSettings() {
   const { account, chainId } = useAccount();
-  const {
-    coreChannelAdmin,
-    channelDetails,
-    delegatees,
-    aliasDetails: { aliasEthAddr },
-  } = useSelector((state: any) => state.admin);
+  const { coreChannelAdmin, delegatees } = useSelector((state: any) => state.admin);
   const { epnsWriteProvider } = useSelector((state: any) => state.contracts);
 
   const onCoreNetwork = CORE_CHAIN_ID === chainId;
+  const EDIT_SETTING_FEE = 50;
 
   const [channelAddress, setChannelAddress] = React.useState('');
   const [settings, setSettings] = React.useState<ChannelSetting[]>([]);
@@ -53,14 +50,25 @@ function NotificationSettings() {
     ModalComponent: AddSettingModal,
   } = useModalBlur();
 
+  const redirectBack = () => {
+    const url = window.location.origin;
+    window.location.replace(`${url}/channels`);
+  };
+
   useEffect(() => {
     // Is not the channel admin so cannot edit settings
-    setIsLoading(true);
-    if (coreChannelAdmin && account && coreChannelAdmin !== account) {
-      const url = window.location.origin;
-      window.location.replace(`${url}/channels`);
-    }
-    setIsLoading(false);
+    (async () => {
+      setIsLoading(true);
+      if (!account) return;
+      try {
+        const channelDetails = await getChannel({ channel: account });
+        if (!channelDetails) redirectBack();
+      } catch {
+        redirectBack();
+      }
+      if (coreChannelAdmin && coreChannelAdmin !== account) redirectBack();
+      setIsLoading(false);
+    })();
   }, [account, coreChannelAdmin]);
 
   useEffect(() => {
@@ -257,6 +265,7 @@ function NotificationSettings() {
         ]}
       />
       <DepositFeeFooter
+        feeRequired={EDIT_SETTING_FEE}
         title="Modify Settings fee"
         description="Make sure all settings are ready before proceeding to the next step"
         onCancel={goBack}

diff --git a/src/config/Themization.js b/src/config/Themization.js
@@ -276,6 +276,10 @@ const themeLight = {
   snapSecondaryText:'#62626a',
   snapBackground:'#F2F2F2',
 
+  // Notification Settings
+  nfsError: '#ED5858',
+  nfsDisabled: '#DFDEE9',
+  nfsDisabledText: '#AFB3BF',
 };
 
 const themeDark = {
@@ -560,6 +564,10 @@ const themeDark = {
   snapSecondaryText:'#787E99',
   snapBackground:'#404650',
 
+  // Notification Settings
+  nfsError: '#ED5858',
+  nfsDisabled: '#AFB3BF',
+  nfsDisabledText: '#787E99',
 };
 
 module.exports = {