fix: sPinto unwrap output and send tokens UX issues

src/pages/silo/actions/UnwrapToken.tsx

@@ -26,9 +26,9 @@ import useTransaction from "@/hooks/useTransaction";
 import { FarmerBalance, useFarmerBalances } from "@/state/useFarmerBalances";
 import { useFarmerSilo } from "@/state/useFarmerSilo";
 import { usePriceData } from "@/state/usePriceData";
+import { useSiloData } from "@/state/useSiloData";
 import useTokenData from "@/state/useTokenData";
 import { trackSimpleEvent } from "@/utils/analytics";
-import { pickCratesAsCrates, sortCratesByStem } from "@/utils/convert";
 import { tryExtractErrorMessage } from "@/utils/error";
 import { formatter } from "@/utils/format";
 import { toSafeTVFromHuman } from "@/utils/number";
@@ -86,7 +86,7 @@ export default function UnwrapToken({ siloToken }: { siloToken: Token }) {
   // Queries & Hooks
   // Quote for redeemToSilo and redeemAdvanced
   const { data: quote, ...quoteQuery } = useUnwrapTokenQuoteQuery(amountTV, siloToken, mainToken, quoteDisabled);
-  const output = useUnwrapQuoteOutputSummary(contractBalances.deposits, mainToken, quote);
+  const output = useUnwrapQuoteOutputSummary(mainToken, quote);
 
   // Quote for swap (ONLY if tokenOut is not main token)
   const swap = useSwap({
@@ -522,30 +522,29 @@ function useUnwrapTokenQuoteQuery(amount: TV, tokenIn: Token, tokenOut: Token, d
   };
 }
 
-function useUnwrapQuoteOutputSummary(
-  data: ReturnType<typeof useFarmerSilo>["deposits"],
-  token: Token,
-  quote: TV | undefined,
-) {
+function useUnwrapQuoteOutputSummary(token: Token, quote: TV | undefined) {
   const { tokenPrices } = usePriceData();
-
-  // sort by latest deposit first
-  const sortedDeposits = useMemo(() => {
-    const depositsData = data.get(token);
-    return sortCratesByStem(depositsData?.deposits ?? [], "desc");
-  }, [data, token]);
+  const siloData = useSiloData();
 
   return useMemo(() => {
     if (!quote || quote.lte(0)) return undefined;
 
     const tokenPrice = tokenPrices.get(token);
     const usd = quote.mul(tokenPrice?.instant ?? 0);
 
+    const sData = siloData.tokenData.get(token);
+    if (!sData) return undefined;
+
+    const stalkGain = quote.mul(sData.rewards.stalk).mul(sData.tokenBDV);
+    const seedGain = quote.mul(sData.rewards.seeds).mul(sData.tokenBDV);
+
     return {
-      ...pickCratesAsCrates(sortedDeposits, quote),
+      amount: quote,
+      stalk: { total: stalkGain },
+      seeds: seedGain,
       usd: usd,
     };
-  }, [quote, sortedDeposits]);
+  }, [quote, token, tokenPrices, siloData]);
 }
 
 function useFilterOutTokens(token: Token) {

src/pages/transfer/actions/TransferFarmBalance.tsx

@@ -27,7 +27,7 @@ export default function TransferFarmBalance() {
 
   useEffect(() => {
     setTransferNotice(false);
-  }, [balanceTo, destination]);
+  }, [destination]);
 
   const totalAmount = useMemo(
     () => transferData.reduce((total, tokenData) => Number(tokenData.amount) + total, 0),
@@ -93,9 +93,7 @@ export default function TransferFarmBalance() {
       stepNumber={step}
       setStep={setStep}
       totalSteps={2}
-      enableNextStep={
-        !!destination && totalAmount > 0 && !!balanceTo && (balanceTo === FarmToMode.INTERNAL ? transferNotice : true)
-      }
+      enableNextStep={!!destination && totalAmount > 0 && !!balanceTo && transferNotice}
       onSubmit={onSubmit}
       stepDescription={stepDescription}
     >

src/pages/transfer/actions/farmbalance/FinalStep.tsx

@@ -23,7 +23,7 @@ export default function FinalStep({ balanceTo, destination, transferData }: Step
       <div>
         <Label className="font-[340] text-[1rem] sm:text-[1.25rem]">To their</Label>
         <div className="font-[340] text-[2rem] leading-[110%] -tracking-[0.02em]">
-          {balanceTo === FarmToMode.EXTERNAL ? "ExternalWallet" : "Farm Wallet"}
+          {balanceTo === FarmToMode.EXTERNAL ? "External Wallet" : "Farm Wallet"}
         </div>
       </div>
     </div>

src/pages/transfer/actions/farmbalance/StepOne.tsx

@@ -244,28 +244,29 @@ export default function StepOne({
       <motion.div variants={variants} initial="hidden" animate="visible" className="flex flex-col gap-2">
         <Label>Send tokens to</Label>
         <AddressInputField value={destination} setValue={setDestination} />
-        <AnimatePresence>
-          {destination && (
-            <motion.div
-              initial={{ opacity: 0, height: 0 }}
-              animate={{ opacity: 1, height: "auto" }}
-              exit={{ opacity: 0, height: 0 }}
-              transition={{ duration: 0.2 }}
-            >
-              <PintoAssetTransferNotice
-                transferNotice={transferNotice}
-                setTransferNotice={setTransferNotice}
-                variant={balanceTo === FarmToMode.EXTERNAL ? "walletBalance" : "farmBalance"}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
       </motion.div>
 
       <motion.div variants={variants} initial="hidden" animate="visible" className="flex flex-col gap-4 items-start">
         <Label>I want to send these tokens to the recipient's:</Label>
         <DestinationBalanceSelect balanceTo={balanceTo} setBalanceTo={setBalanceTo} variant="transferFlow" />
       </motion.div>
+
+      <AnimatePresence>
+        {destination && balanceTo !== undefined && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <PintoAssetTransferNotice
+              transferNotice={transferNotice}
+              setTransferNotice={setTransferNotice}
+              variant={balanceTo === FarmToMode.EXTERNAL ? "walletBalance" : "farmBalance"}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 }