Merge pull request #226 from Propy/dev

dev -> main
Propy · Jul 19, 2024 · ecefc8f · ecefc8f
2 parents 216560d + 5d426ad
commit ecefc8f
Show file tree

Hide file tree

Showing 19 changed files with 437 additions and 52 deletions.
diff --git a/src/components/BridgeFinalizeWithdrawalForm.tsx b/src/components/BridgeFinalizeWithdrawalForm.tsx
@@ -4,6 +4,8 @@ import { animated, useSpring } from '@react-spring/web';
 
 import { utils } from "ethers";
 
+import dayjs from 'dayjs';
+
 import BigNumber from 'bignumber.js';
 
 import { toast } from 'sonner';
@@ -32,10 +34,16 @@ import BaseLogo from '../assets/img/base-logo-transparent-bg.png';
 
 import FloatingActionButton from './FloatingActionButton';
 
-import { SupportedNetworks } from '../interfaces';
+import { 
+  SupportedNetworks,
+  NetworkName,
+} from '../interfaces';
+
+import LinkWrapper from './LinkWrapper';
 
 import {
   priceFormat,
+  getEtherscanLinkByNetworkName,
 } from '../utils';
 
 import {
@@ -44,6 +52,7 @@ import {
   OPTIMISM_PORTAL_ADDRESS,
   BASE_BRIDGE_L1_NETWORK,
   BASE_BRIDGE_L2_NETWORK,
+  PROPY_LIGHT_BLUE,
 } from '../utils/constants';
 
 import {
@@ -381,7 +390,14 @@ const BridgeFinalizeWithdrawalForm = (props: PropsFromRedux & IBridgeFinalizeWit
               showLoadingIcon={isAwaitingWalletInteraction || isAwaitingFinalizeTx || isAwaitingValidPreparation || isFinalizationPeriodNotElapsed}
               text={getBridgeFinalizedWithdrawalButtonText(isAwaitingWalletInteraction, isAwaitingFinalizeTx, isAwaitingValidPreparation, isWithdrawalAlreadyFinalized, showSuccessMessage, isFinalizationPeriodNotElapsed)}
             />
-            {isAwaitingValidPreparation && <Typography variant="caption" style={{textAlign: 'center', fontWeight: 'bold', fontSize: '0.8rem'}} className={classes.innerSpacingTop}>Waiting for your withdrawal proof to make it through the challenge period, this will take around ~ 1 week from the time of submitting your withdrawal proof.</Typography>}
+            {isAwaitingValidPreparation && 
+              <>
+                <Typography variant="caption" style={{textAlign: 'center', fontWeight: 'bold', fontSize: '0.8rem'}} className={classes.innerSpacingTop}>Waiting for your <LinkWrapper style={{display: 'inline-block', fontWeight: 'bold', color: PROPY_LIGHT_BLUE}} external={true} link={transactionData?.withdrawal_proven_event?.transaction_hash && getEtherscanLinkByNetworkName(destination as NetworkName, transactionData?.withdrawal_proven_event?.transaction_hash, 'transaction')}>withdrawal proof</LinkWrapper> to make it through the challenge period, this will take around ~ 1 week from the time of submitting your withdrawal proof.</Typography>
+                {transactionData?.withdrawal_proven_event?.evm_transaction?.block_timestamp &&
+                  <Typography variant="caption" style={{textAlign: 'center', fontWeight: 'bold', fontSize: '0.8rem'}} className={classes.innerSpacingTop}>Detected <LinkWrapper style={{display: 'inline-block', fontWeight: 'bold', color: PROPY_LIGHT_BLUE}} external={true} link={transactionData?.withdrawal_proven_event?.transaction_hash && getEtherscanLinkByNetworkName(destination as NetworkName, transactionData?.withdrawal_proven_event?.transaction_hash, 'transaction')}>withdrawal proof</LinkWrapper> at {dayjs.unix(Number(transactionData?.withdrawal_proven_event?.evm_transaction?.block_timestamp)).format('hh:mm A MMM-D-YYYY')}, therefore withdrawal finalization should be possible at approximately {dayjs.unix(Number(transactionData?.withdrawal_proven_event?.evm_transaction?.block_timestamp)).add(7, 'day').format('hh:mm A MMM-D-YYYY')}.</Typography>
+                }
+              </>
+            }
             {(isWithdrawalAlreadyFinalized || showSuccessMessage) && <Typography variant="caption" style={{textAlign: 'center', fontWeight: 'bold', fontSize: '0.8rem'}} className={classes.innerSpacingTop}>Withdrawal finalized! Tokens have been withdrawn to L1.</Typography>}
           </div>
         }

diff --git a/src/components/FullScreenGallery.tsx b/src/components/FullScreenGallery.tsx
@@ -40,6 +40,10 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: 'black',
       height: 'calc(100% - 100px)'
     },
+    primaryImage: {
+      maxHeight: '100%',
+      maxWidth: '100%',
+    },
     primaryImageBackgroundContainer: {
       backgroundSize: 'cover',
       width: '110%',
@@ -56,11 +60,21 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundPosition: 'center',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'space-between',
+      justifyContent: 'center',
       alignItems: 'center',
       position: 'relative',
       height: '100%',
     },
+    controlsOverlayContainer: {
+      top: 0,
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
     primaryImageControlsTopRow: {
       display: 'flex',
       width: '100%',
@@ -192,7 +206,10 @@ const FullScreenGallery = (props: PropsFromRedux & IFullScreenGallery) => {
             // onClick={() => handleFullscreenImageSelection(selectedImageIndex)}
           >
             <div className={[classes.primaryImageBackgroundContainer, 'image-filter-blur-heavy'].join(' ')} style={fullScreenGalleryConfig?.images?.length > 0 ? { backgroundImage: `url(${fullScreenGalleryConfig?.images[fullScreenGalleryConfig?.selectedImageIndex]})` } : {}} />
-            <div className={classes.primaryImageForegroundContainer} style={fullScreenGalleryConfig?.images?.length > 0 ? { backgroundImage: `url(${fullScreenGalleryConfig?.images[fullScreenGalleryConfig?.selectedImageIndex]})` } : {}}>
+            <div className={classes.primaryImageForegroundContainer}>
+              <img alt={`fullscreen listing ${fullScreenGalleryConfig?.selectedImageIndex}`} key={`listing-image-${fullScreenGalleryConfig?.selectedImageIndex}`} className={classes.primaryImage} src={fullScreenGalleryConfig?.images?.length > 0 ? fullScreenGalleryConfig?.images[fullScreenGalleryConfig?.selectedImageIndex] : ""}/>
+            </div>
+            <div className={classes.controlsOverlayContainer}>
               <div className={classes.primaryImageControlsTopRow}>
                 <div style={{margin: 8}}>
                   <Typography style={{fontWeight: 'bold'}}>{fullScreenGalleryConfig?.selectedImageIndex + 1} / {fullScreenGalleryConfig?.images?.length}</Typography>

diff --git a/src/components/ListingGallery.tsx b/src/components/ListingGallery.tsx
@@ -81,6 +81,7 @@ const useStyles = makeStyles((theme: Theme) =>
       overflowX: 'scroll',
       padding: 4,
       border: '1px solid #d5d5d5',
+      height: 110,
     },
     previewImageRowInner: {
       display: 'flex',

diff --git a/src/components/NFTLikeZone.tsx b/src/components/NFTLikeZone.tsx
@@ -69,7 +69,7 @@ const NFTLikeZone = (props: PropsFromRedux & INFTLikeZone) => {
 
   const classes = useStyles();
 
-  const { address } = useAccount();
+  const { address, chainId } = useAccount();
 
   const { 
     // data,
@@ -125,7 +125,7 @@ const NFTLikeZone = (props: PropsFromRedux & INFTLikeZone) => {
   }, [tokenNetwork, tokenAddress, tokenId, address, reloadIndex])
 
   const signLike = async (type: 'add_like_nft' | 'remove_like_nft') => {
-    if(signMessageAsync && address) {
+    if(signMessageAsync && address && chainId) {
       let signerAccount = address;
       let nonceResponse : INonceResponse = await SignerService.getSignerNonce(address);
       let {
@@ -140,6 +140,7 @@ const NFTLikeZone = (props: PropsFromRedux & INFTLikeZone) => {
           signerAccount,
           nonce,
           salt,
+          chainId,
           type,
           {
             token_address: tokenAddress,
@@ -171,9 +172,15 @@ const NFTLikeZone = (props: PropsFromRedux & INFTLikeZone) => {
                 toast.error(`Unable to ${type === 'add_like_nft' ? "add" : "remove"} like`);
               }
             }
-          } catch (e) {
-            //@ts-ignore
-            toast.error(e?.shortMessage ? e.shortMessage : "Failed to sign message");
+          } catch (e: any) {
+            let errorMessage;
+            if(e?.shortMessage) {
+              errorMessage = e?.shortMessage;
+            }
+            if(e?.data?.message) {
+              errorMessage = e?.data?.message;
+            }
+            toast.error(errorMessage ? errorMessage : "Failed to sign message");
           }
         } else {
           toast.error("Unable to generate message for signing");

diff --git a/src/components/NetworkSelectDropdown.tsx b/src/components/NetworkSelectDropdown.tsx
@@ -42,21 +42,22 @@ const NetworkSelectDropdown = (props: PropsFromRedux & INetworkSelectButton) =>
     showCompactNetworkSwitch = false,
   } = props;
 
-  const { chain } = useAccount();
+  const { chainId, address } = useAccount();
 
   const { open } = useWeb3Modal();
 
   useEffect(() => {
-    if(chain) {
-      console.log({chain})
-      let networkName = NETWORK_ID_TO_NAME[chain.id];
+    if(chainId) {
+      let networkName = NETWORK_ID_TO_NAME[chainId];
       if(networkName) {
         setActiveNetwork(networkName as SupportedNetworks);
       } else {
         setActiveNetwork('unsupported');
       }
+    } else if (!chainId && address) {
+      setActiveNetwork('unsupported');
     }
-  }, [chain, setActiveNetwork, open]);
+  }, [chainId, address, setActiveNetwork, open]);
 
   const activeNetworkToImage = (network: SupportedNetworks, showCompactNetworkSwitch: boolean) => {
     let networkImage;

diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
@@ -31,6 +31,8 @@ import useWindowSize from '../hooks/useWindowSize';
 
 import { PropsFromRedux } from '../containers/PageContainerContainer';
 
+import { defaultFullScreenGalleryConfig } from '../state/reducers/fullScreenGalleryConfig';
+
 import {
   IS_GLOBAL_TOP_BANNER_ENABLED,
   GLOBAL_TOP_BANNER_HEIGHT,
@@ -54,6 +56,7 @@ const PageContainer = (props: PropsFromRedux) => {
     const {
       isConsideredMobile,
       darkMode,
+      setFullScreenGalleryConfig,
     } = props;
 
     const { pathname } = useLocation();
@@ -78,8 +81,9 @@ const PageContainer = (props: PropsFromRedux) => {
     }, [windowSize.width, windowSize.height, setShowDesktopMenu]);
 
     useEffect(() => {
-        window.scrollTo(0, 0);
-    }, [pathname]);
+      window.scrollTo(0, 0);
+      setFullScreenGalleryConfig(defaultFullScreenGalleryConfig);
+    }, [pathname, setFullScreenGalleryConfig]);
 
     return (
         <Navigation>