fix: no title for unavailable nft (#5397)

src/nft/components/bag/BagContent.tsx

@@ -56,6 +56,10 @@ export const BagContent = () => {
       if (hasAssets) setBagStatus(BagStatus.CONFIRM_REVIEW)
       else setBagStatus(BagStatus.ADDING_TO_BAG)
     }
+
+    if (bagStatus === BagStatus.CONFIRM_REVIEW && !hasAssets) {
+      setBagStatus(BagStatus.ADDING_TO_BAG)
+    }
   }, [bagStatus, itemsInBag, priceChangedAssets, setBagStatus, fetchedPriceData])
 
   return (

src/nft/components/bag/BagRow.tsx

@@ -278,57 +278,59 @@ export const UnavailableAssetsHeaderRow = ({
 
   if (!assets || assets.length === 0) return null
 
+  const moreThanOneUnavailable = assets.length > 1
+  const isShowingAssets = isOpen || !moreThanOneUnavailable
+
   return (
     <Column className={styles.unavailableAssetsContainer}>
-      {assets.length === 1 && (
+      <Column>
-        <BagRow asset={assets[0]} usdPrice={usdPrice} removeAsset={() => undefined} grayscale isMobile={isMobile} />
+        <Row
-      )}
+          justifyContent="space-between"
-      {assets.length > 1 && (
+          marginBottom={isShowingAssets ? '12' : '0'}
-        <Column>
+          cursor={moreThanOneUnavailable ? 'pointer' : 'default'}
-          <Row
+          onClick={() => {
-            justifyContent="space-between"
+            if (moreThanOneUnavailable) {
-            marginBottom={isOpen ? '12' : '0'}
-            cursor="pointer"
-            onClick={() => {
               !didOpenUnavailableAssets && setDidOpenUnavailableAssets(true)
               toggleOpen()
-            }}
+            }
-          >
+          }}
-            <Row gap="12" color="textPrimary" className={bodySmall}>
+        >
-              {!isOpen && <UnavailableAssetsPreview assets={assets.slice(0, 5)} />}
+          <Row gap="12" color="textSecondary" className={bodySmall}>
-              No longer available
+            {!isShowingAssets && <UnavailableAssetsPreview assets={assets.slice(0, 5)} />}
-            </Row>
+            No longer available
-            <Row color="textSecondary">{isOpen ? <ChevronUpBagIcon /> : <ChevronDownBagIcon />}</Row>
-            {!didOpenUnavailableAssets && (
-              <Row
-                position="relative"
-                width="20"
-                height="20"
-                color="textPrimary"
-                justifyContent="center"
-                cursor="pointer"
-                onClick={clearUnavailableAssets}
-              >
-                <TimedLoader />
-                <CloseTimerIcon />
-              </Row>
-            )}
           </Row>
-          <Column gap="8" style={{ marginLeft: '-8px', marginRight: '-8px' }}>
+          {moreThanOneUnavailable && (
-            {isOpen &&
+            <Row color="textSecondary">{isOpen ? <ChevronUpBagIcon /> : <ChevronDownBagIcon />}</Row>
-              assets.map((asset) => (
+          )}
-                <BagRow
+          {!didOpenUnavailableAssets && (
-                  key={asset.id}
+            <Row
-                  asset={asset}
+              position="relative"
-                  usdPrice={usdPrice}
+              width="20"
-                  removeAsset={() => undefined}
+              height="20"
-                  grayscale
+              color="textPrimary"
-                  isMobile={isMobile}
+              justifyContent="center"
-                />
+              cursor="pointer"
-              ))}
+              onClick={clearUnavailableAssets}
-          </Column>
+            >
+              <TimedLoader />
+              <CloseTimerIcon />
+            </Row>
+          )}
+        </Row>
+        <Column gap="8" style={{ marginLeft: '-8px', marginRight: '-8px' }}>
+          {isShowingAssets &&
+            assets.map((asset) => (
+              <BagRow
+                key={asset.id}
+                asset={asset}
+                usdPrice={usdPrice}
+                removeAsset={() => undefined}
+                grayscale
+                isMobile={isMobile}
+              />
+            ))}
         </Column>
-      )}
+      </Column>
     </Column>
   )
 }

src/nft/components/bag/TimedLoader.tsx

@@ -15,7 +15,7 @@ const Circle = styled.circle`
   -webkit-animation: ${dash} linear;
   animation: ${dash} linear;
   animation-duration: 160s;
-  stroke: ${({ theme }) => theme.accentActive};
+  stroke: ${({ theme }) => theme.accentAction};
 `
 export const TimedLoader = () => {
   const stroke = 1.5