fix: after retry, put listing button in a ready state (#5372)

* update color confirmation

* update color checkmark

* reset continue button after retry

* reset before listing
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/bag/profile/ListingModal.tsx

@@ -76,15 +76,41 @@ const ListingModal = () => {
       )
     if (
       allCollectionsApproved &&
-      (listingStatus === ListingStatus.PENDING || listingStatus === ListingStatus.CONTINUE)
+      (listingStatus === ListingStatus.PENDING ||
+        listingStatus === ListingStatus.CONTINUE ||
+        listingStatus === ListingStatus.SIGNING)
     ) {
+      resetAllRows()
       signListings()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collectionsRequiringApproval, allCollectionsApproved])
 
-  // handles the modal wide listing state based on conglomeration of the wallet, collection, and listing states
+  const allCollectionsApprovedOrPaused = useMemo(
+    () =>
+      collectionsRequiringApproval.every(
+        (collection: CollectionRow) =>
+          collection.status === ListingStatus.APPROVED || collection.status === ListingStatus.PAUSED
+      ),
+    [collectionsRequiringApproval]
+  )
+  const allListingsApprovedOrPaused = useMemo(
+    () =>
+      listings.every(
+        (listing: ListingRow) => listing.status === ListingStatus.APPROVED || listing.status === ListingStatus.PAUSED
+      ),
+    [listings]
+  )
+
+  // go back to a ready state after a successful retry
+  useEffect(() => {
+    if (listingStatus === ListingStatus.SIGNING && allCollectionsApprovedOrPaused && allListingsApprovedOrPaused) {
+      resetAllRows()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allCollectionsApprovedOrPaused, allListingsApprovedOrPaused])
 
+  // handles the modal wide listing state based on conglomeration of the wallet, collection, and listing states
   const startListingFlow = async () => {
     if (!signer) return
     sendAnalyticsEvent(EventName.NFT_SELL_START_LISTING, { ...startListingEventProperties })
@@ -257,7 +283,7 @@ const ListingModal = () => {
         {showSuccessScreen ? (
           <Box as="span" className={caption} color="textSecondary">
             Status:{' '}
-            <Box as="span" color="green200">
+            <Box as="span" color="accentSuccess">
               Confirmed
             </Box>
           </Box>

src/nft/components/bag/profile/ListingSection.tsx

@@ -61,7 +61,7 @@ export const ListingSection = ({
       marginTop="10"
       marginBottom="10"
       onClick={() => rows.length > 0 && setIsOpen(!isOpen)}
-      color={allApproved ? 'green' : 'textPrimary'}
+      color={allApproved ? 'accentSuccess' : 'textPrimary'}
     >
       {allApproved && <ApprovedCheckmarkIcon style={{ marginRight: '8px' }} />}
       {sectionTitle}

src/nft/css/sprinkles.css.ts

@@ -7,6 +7,7 @@ const themeContractValues = {
     accentFailureSoft: '',
     accentAction: '',
     accentActionSoft: '',
+    accentSuccess: '',
 
     explicitWhite: '',
     gold: '',
@@ -177,6 +178,7 @@ export const vars = createGlobalTheme(':root', {
     gold200: '#EEB317',
     gold400: '#B17900',
     green200: '#5CFE9D',
+    green300: '#40B66B',
     green400: '#1A9550',
     violet200: '#BDB8FA',
     violet400: '#7A7BEB',

src/nft/themes/darkTheme.ts

@@ -6,6 +6,7 @@ export const darkTheme: Theme = {
     accentFailureSoft: 'rgba(253, 118, 107, 0.12)',
     accentAction: vars.color.blue400,
     accentActionSoft: 'rgba(76, 130, 251, 0.24)',
+    accentSuccess: vars.color.green200,
 
     explicitWhite: '#FFFFFF',
     green: vars.color.green200,

src/nft/themes/lightTheme.ts

@@ -6,6 +6,7 @@ export const lightTheme: Theme = {
     accentFailureSoft: 'rgba(250, 43, 57, 0.12)',
     accentAction: vars.color.pink400,
     accentActionSoft: vars.color.accentActionSoft,
+    accentSuccess: vars.color.green300,
 
     explicitWhite: '#FFFFFF',