style: add new txLink + remove markets from profile

jumperexchange · Dec 26, 2024 · d4ad4a4 · d4ad4a4
1 parent 85f9589
commit d4ad4a4
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 58 deletions.
diff --git a/src/components/Berachain/components/BerachainWidget/DepositWidget/DepositWidget.tsx b/src/components/Berachain/components/BerachainWidget/DepositWidget/DepositWidget.tsx
@@ -16,8 +16,6 @@ import {
   WalletCardBadge,
 } from '@/components/Menus/WalletMenu/WalletCard.style';
 import TokenImage from '@/components/Portfolio/TokenImage';
-import CheckIcon from '@mui/icons-material/Check';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import {
   useConfig,
   useWaitForTransactionReceipt,
@@ -43,10 +41,8 @@ import {
 } from '@/components/Navbar/WalletButton.style';
 import { useTranslation } from 'react-i18next';
 import ConnectButton from '@/components/Navbar/ConnectButton';
-import {
-  BerachainDepositInputBackground,
-  BerachainWidgetSelection,
-} from '../../BerachainWidgetWip/BerachainWidgetWip.style';
+import { BerachainDepositInputBackground } from '../../BerachainWidgetWip/BerachainWidgetWip.style';
+import { TxConfirmation } from '../TxConfirmation';
 
 interface Image {
   url?: string;
@@ -228,7 +224,7 @@ function DepositWidget({
         market?.input_token_data.decimals ?? 0,
       )
     ) {
-      return `There are not enough positions left in the market. Still available to deposit: ${Intl.NumberFormat(
+      return `Not enough positions left. Still available to deposit: ${Intl.NumberFormat(
         'en-US',
         {
           notation: 'standard',
@@ -473,7 +469,18 @@ function DepositWidget({
             {market?.input_token_data.symbol.toUpperCase()} Fillable in Total
           </Typography> */}
             {hasErrorText && (
-              <Typography component="span">{hasErrorText}</Typography>
+              <Typography
+                component="span"
+                variant="bodySmall"
+                sx={(theme) => ({
+                  typography: {
+                    xs: theme.typography.bodyXSmall,
+                    sm: theme.typography.bodySmall,
+                  },
+                })}
+              >
+                {hasErrorText}
+              </Typography>
             )}
             {txHash && (
               <Typography
@@ -553,35 +560,12 @@ function DepositWidget({
             </Box>
           )}
 
-        {/* {txHash && (
-          <Box
-            sx={{
-              width: '100%',
-              borderRadius: '16px',
-              backgroundColor: 'inherit',
-              padding: theme.spacing(2),
-              marginTop: theme.spacing(2),
-              border: `1px solid ${alpha(theme.palette.white.main, 0.08)}`,
-              gap: '8px',
-            }}
-          >
-            <Box sx={{ backgroundColor: '#291812' }}>
-              <CheckIcon sx={{ color: '#FF8425' }} />
-            </Box>
-            <Typography
-              component="a"
-              href={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io'}/tx/${txHash}`}
-              target="_blank"
-            >
-              Transaction completed
-            </Typography>
-            <Box
-              sx={{ backgroundColor: alpha(theme.palette.white.main, 0.08) }}
-            >
-              <OpenInNewIcon />
-            </Box>
-          </Box>
-        )} */}
+        {txHash && (
+          <TxConfirmation
+            s={'Transaction completed'}
+            link={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io/'}tx/${txHash}`}
+          />
+        )}
       </Box>
     </BerachainDepositInputBackground>
   );

diff --git a/src/components/Berachain/components/BerachainWidget/TxConfirmation.tsx b/src/components/Berachain/components/BerachainWidget/TxConfirmation.tsx
@@ -0,0 +1,66 @@
+import { alpha, Box, Typography, useTheme } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+
+export const TxConfirmation = ({ s, link }: { s: string; link: string }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: '16px',
+        justifyContent: 'space-between',
+        backgroundColor: 'inherit',
+        padding: theme.spacing(2),
+        marginTop: theme.spacing(2),
+        border: `1px solid ${alpha(theme.palette.white.main, 0.08)}`,
+        gap: '8px',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '16px',
+          alignItems: 'center',
+        }}
+      >
+        <Box
+          sx={{
+            backgroundColor: '#291812',
+            borderRadius: '50%',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <CheckIcon sx={{ color: '#FF8425', width: '16px', height: '16px' }} />
+        </Box>
+        <Typography>{s}</Typography>
+      </Box>
+      <a
+        href={link}
+        target="_blank"
+        style={{
+          textDecoration: 'none',
+          color: 'inherit',
+        }}
+        rel="noreferrer"
+      >
+        <Box
+          sx={{
+            backgroundColor: alpha(theme.palette.white.main, 0.08),
+            borderRadius: '50%',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <OpenInNewIcon sx={{ width: '16px', height: '16px' }} />
+        </Box>
+      </a>
+    </Box>
+  );
+};
diff --git a/...onents/Berachain/components/BerachainWidget/WithdrawWidget/WithdrawWidgetIncentiveTab.tsx b/...onents/Berachain/components/BerachainWidget/WithdrawWidget/WithdrawWidgetIncentiveTab.tsx
@@ -23,6 +23,7 @@ import { useEffect, useMemo, useState } from 'react';
 import type { ExtendedChain } from '@lifi/sdk';
 import { WithdrawInputTokenRow } from '@/components/Berachain/components/BerachainWidget/WithdrawWidget/WithdrawInputTokenRow';
 import { CustomLoadingButton } from '@/components/Berachain/components/BerachainWidget/LoadingButton.style';
+import { TxConfirmation } from '../TxConfirmation';
 
 export const WithdrawWidgetIncentiveTab = ({
   market,
@@ -339,29 +340,26 @@ export const WithdrawWidgetIncentiveTab = ({
       >
         <Typography variant="bodyMediumStrong">Claim incentive</Typography>
       </CustomLoadingButton>
-      {txHash && (
-        <Box
-          sx={{
-            flexShrink: 0, // Equivalent to `shrink-0`
-          }}
-          // className="w-24 shrink-0"
-        >
-          <Typography
-            component="a"
-            href={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io'}/tx/${txHash}`}
-            target="_blank"
-          >
-            Transaction link
-          </Typography>
-        </Box>
+      {isTxConfirmed && txHash ? (
+        <TxConfirmation
+          s={'Transaction successfull'}
+          link={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io'}/tx/${txHash}`}
+        />
+      ) : (
+        txHash && (
+          <TxConfirmation
+            s={'Transaction completed'}
+            link={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io'}/tx/${txHash}`}
+          />
+        )
       )}
-      {isTxConfirmed && (
+      {/* {isTxConfirmed && (
         <Box>
           <Typography variant="body2" color="textSecondary">
             Transaction successfull!
           </Typography>
         </Box>
-      )}
+      )} */}
     </Box>
   );
 };
diff --git a/...nents/Berachain/components/BerachainWidget/WithdrawWidget/WithdrawWidgetInputTokenTab.tsx b/...nents/Berachain/components/BerachainWidget/WithdrawWidget/WithdrawWidgetInputTokenTab.tsx
@@ -20,6 +20,7 @@ import type { ChangeEvent } from 'react';
 import { useEffect, useState } from 'react';
 import { CustomLoadingButton } from '@/components/Berachain/components/BerachainWidget/LoadingButton.style';
 import type { ExtendedChain } from '@lifi/sdk';
+import { TxConfirmation } from '../TxConfirmation';
 
 export const WithdrawWidgetInputTokenTab = ({
   market,
@@ -317,7 +318,20 @@ export const WithdrawWidgetInputTokenTab = ({
       >
         <Typography variant="bodyMediumStrong">Withdraw</Typography>
       </CustomLoadingButton>
-      {txHash && (
+      {isTxConfirmed && txHash ? (
+        <TxConfirmation
+          s={'Transaction successfull'}
+          link={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io'}/tx/${txHash}`}
+        />
+      ) : (
+        txHash && (
+          <TxConfirmation
+            s={'Transaction completed'}
+            link={`${chain?.metamask.blockExplorerUrls?.[0] ?? 'https://etherscan.io'}/tx/${txHash}`}
+          />
+        )
+      )}
+      {/* {txHash && (
         <Box
           sx={{
             flexShrink: 0, // Equivalent to `shrink-0`
@@ -332,14 +346,14 @@ export const WithdrawWidgetInputTokenTab = ({
             Transaction link
           </Typography>
         </Box>
-      )}
-      {isTxConfirmed && (
+      )} */}
+      {/* {isTxConfirmed && (
         <Box>
           <Typography variant="body2" color="textSecondary">
             Transaction successfull!
           </Typography>
         </Box>
-      )}
+      )} */}
     </Box>
   );
 };
diff --git a/src/hooks/useOngoingQuests.ts b/src/hooks/useOngoingQuests.ts
@@ -34,6 +34,8 @@ export const useOngoingQuests = (): UseQuestsProps => {
   apiUrl.searchParams.set('sort[0]', 'id:desc');
   //filter url
   apiUrl.searchParams.set('pagination[pageSize]', '50');
+  // todo: remove this line
+  apiUrl.searchParams.set('filters[Label][$ne]', 'berachain'); // not showing all the berachain markets during boyco
   // apiUrl.searchParams.set('filters[Points][$gte]', '0');
   const currentDate = new Date(Date.now()).toISOString().split('T')[0];
   apiUrl.searchParams.set('filters[StartDate][$lte]', currentDate);