fix: fixed the swap message for multihop swaps (#701)

* fix: fixed the swap message for multihop swaps

* fix: according to feedback

src/components/Toaster/index.tsx

@@ -30,21 +30,26 @@ function isPromise(object?: any): object is ToastPending {
 
 export function generateToastContent(content: ToastSuccess['content']): ReactNode {
   return content.map((item, index) => (
-    <div className='flex flex-wrap w-full' key={index}>
-      {item.coins.length > 0 && (
+    <div className='flex flex-wrap w-full mb-1' key={index}>
+      {item.text && (
         <>
           <Text size='sm' className='w-full mb-1 text-white'>
             {item.text}
           </Text>
+          {item.coins.length > 0 && (
             <ul className='flex flex-wrap w-full gap-1 p-1 pl-4 list-disc'>
-            {item.coins.map((coin) =>
-              BN(coin.amount).isZero() ? null : (
+              {item.coins.map((coin, index) => {
+                let prefix = ''
+                if (item.text === 'Swapped') prefix = index === 0 ? 'from ' : 'to '
+
+                return BN(coin.amount).isZero() ? null : (
                   <li className='w-full p-0 text-sm text-white' key={coin.denom}>
-                  {formatAmountWithSymbol(coin)}
+                    {`${prefix}${formatAmountWithSymbol(coin)}`}
                   </li>
-              ),
-            )}
+                )
+              })}
             </ul>
+          )}
         </>
       )}
     </div>

src/components/Trade/TradeModule/AssetSelector/AssetSelectorPair.tsx

@@ -24,7 +24,6 @@ export default function AssetSelectorPair(props: Props) {
 
   const onChangeTradingPair = useCallback(
     (tradingPair: TradingPair) => {
-      console.log(tradingPair.buy, tradingPair.sell)
       setTradingPairSimple(tradingPair)
     },
     [setTradingPairSimple],

src/store/slices/broadcast.ts

@@ -118,6 +118,33 @@ export default function createBroadcastSlice(
         })
         break
 
+      case 'swap':
+        if (changes.debts) {
+          toast.content.push({
+            coins: [changes.debts[0].toCoin()],
+            text: 'Borrowed',
+          })
+        }
+        if (changes.reclaims) {
+          toast.content.push({
+            coins: [changes.reclaims[0].toCoin()],
+            text: 'Unlent',
+          })
+        }
+        if (changes.swap) {
+          toast.content.push({
+            coins: [changes.swap.from, changes.swap.to],
+            text: 'Swapped',
+          })
+        }
+        if (changes.repays) {
+          toast.content.push({
+            coins: [changes.repays[0].toCoin()],
+            text: 'Repaid',
+          })
+        }
+        break
+
       case 'vault':
       case 'vaultCreate':
         toast.content.push({
@@ -766,6 +793,11 @@ export default function createBroadcastSlice(
           options: {
             action: 'swap',
             accountId: options.accountId,
+            changes: {
+              reclaims: options.reclaim ? [options.reclaim] : undefined,
+              debts: options.borrow ? [options.borrow] : undefined,
+            },
+            repay: options.repay,
           },
           swapOptions,
         })
@@ -815,9 +847,12 @@ export default function createBroadcastSlice(
           const coinOut = getTokenOutFromSwapResponse(response, toast.swapOptions.denomOut)
 
           if (toast.options.action === 'swap') {
-            toast.options.message = `Swapped ${formatAmountWithSymbol(
-              toast.swapOptions.coinIn.toCoin(),
-            )} for ${formatAmountWithSymbol(coinOut)}`
+            if (!toast.options.changes) toast.options.changes = {}
+            toast.options.changes.swap = {
+              from: toast.swapOptions.coinIn.toCoin(),
+              to: getTokenOutFromSwapResponse(response, toast.swapOptions.denomOut),
+            }
+            if (toast.options.repay) toast.options.changes.repays = [BNCoin.fromCoin(coinOut)]
           }
 
           if (toast.options.action === 'hls-staking') {

src/types/classes/BNCoin.ts

@@ -16,6 +16,9 @@ export class BNCoin {
   static fromDenomAndBigNumber(denom: string, amount: BigNumber) {
     return new BNCoin({ denom, amount: amount.toString() })
   }
+  static fromCoin(coin: Coin) {
+    return new BNCoin({ denom: coin.denom, amount: coin.amount.toString() })
+  }
 
   toCoin(): Coin {
     return {

src/types/interfaces/store/broadcast.d.ts

@@ -18,6 +18,7 @@ interface ToastObjectOptions extends HandleResponseProps {
 interface ToastObject {
   response: Promise<BroadcastResult>
   options: ToastObjectOptions
+
   swapOptions?: {
     coinIn: BNCoin
     denomOut: string
@@ -74,9 +75,17 @@ interface HandleResponseProps {
     | 'hls-staking'
   lend?: boolean
   accountId?: string
-  changes?: { debts?: BNCoin[]; deposits?: BNCoin[]; lends?: BNCoin[] }
+  changes?: {
+    debts?: BNCoin[]
+    deposits?: BNCoin[]
+    lends?: BNCoin[]
+    reclaims?: BNCoin[]
+    repays?: BNCoin[]
+    swap?: { from: Coin; to: Coin }
+  }
   target?: 'wallet' | 'account'
   message?: string
+  repay?: boolean
 }
 
 interface BroadcastSlice {

src/utils/getTokenOutFromSwapResponse.ts

@@ -1,3 +1,8 @@
+interface Event {
+  type: string
+  attributes: { key: string; value: string }[]
+}
+
 export default function getTokenOutFromSwapResponse(
   response: BroadcastResult,
   denom: string,
@@ -5,19 +10,26 @@ export default function getTokenOutFromSwapResponse(
   try {
     if (response.result?.response.code === 0) {
       const rawLogs = JSON.parse(response.result.rawLogs)
-      const events = rawLogs[0].events
-      const tokenSwappedEvent = events.find((e: { type: string }) => e.type === 'token_swapped')
-      const tokensOutValue = tokenSwappedEvent.attributes.find(
-        (a: { key: string; value: string }) =>
-          a.key === 'tokens_out' && a.value.toLowerCase().includes(denom.toLowerCase()),
-      ).value
-      const amount = tokensOutValue.split(denom)[0]
+      const events = rawLogs[0].events as Event[]
+      let tokensOutValue = '0'
+      events.forEach((event: Event) => {
+        const attributes = event.attributes
+        const type = event.type
+        if (type === 'token_swapped') {
+          attributes.forEach((a) => {
+            if (a.key === 'tokens_out' && a.value.toLowerCase().includes(denom.toLowerCase())) {
+              tokensOutValue = a.value
+            }
+          })
+        }
+      })
 
+      const amount = tokensOutValue.split(denom)[0]
       return { denom, amount }
     }
   } catch (ex) {
     console.error(ex)
   }
 
-  return { denom: '', amount: '' }
+  return { denom, amount: '0' }
 }