Implement USDT swapping

nimiq · Nov 1, 2024 · fde689f · fde689f
1 parent 92aaf4b
commit fde689f
Show file tree

Hide file tree

Showing 25 changed files with 1,009 additions and 380 deletions.
diff --git a/package.json b/package.json
@@ -26,10 +26,10 @@
     "@formatjs/intl-displaynames": "^3.3.4",
     "@linusborg/vue-simple-portal": "^0.1.4",
     "@nimiq/electrum-client": "https://github.com/nimiq/electrum-client#build",
-    "@nimiq/fastspot-api": "^1.10.0",
-    "@nimiq/hub-api": "^1.8.0",
+    "@nimiq/fastspot-api": "^1.10.2",
+    "@nimiq/hub-api": "https://gitpkg.now.sh/nimiq/hub/client?73c31757aa9e93912f7540a272914ecdb51a23ad",
     "@nimiq/iqons": "^1.5.2",
-    "@nimiq/libswap": "^1.4.0",
+    "@nimiq/libswap": "^1.4.1",
     "@nimiq/oasis-api": "^1.1.1",
     "@nimiq/oasis-bank-list": "https://github.com/nimiq/oasis-bank-list#main",
     "@nimiq/rpc": "^0.4.1",

diff --git a/src/components/BtcTransactionListItem.vue b/src/components/BtcTransactionListItem.vue
@@ -29,7 +29,7 @@
             <UsdcIcon v-else-if="swapData
                 && (swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)"/>
             <UsdtIcon v-else-if="swapData
-                && (swapData.asset === SwapAsset.USDT)"/>
+                && (swapData.asset === SwapAsset.USDT_MATIC)"/>
             <BankIcon v-else-if="swapData && swapData.asset === SwapAsset.EUR"/>
             <Avatar v-else :label="!isCancelledSwap ? peerLabel || '' : ''"/>
             <SwapSmallIcon/>

diff --git a/src/components/TransactionListItem.vue b/src/components/TransactionListItem.vue
@@ -26,8 +26,7 @@
             <BitcoinIcon v-else-if="swapData && swapData.asset === SwapAsset.BTC"/>
             <UsdcIcon v-else-if="swapData
                 && (swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)"/>
-            <UsdtIcon v-else-if="swapData
-                && (swapData.asset === SwapAsset.USDT)"/>
+            <UsdtIcon v-else-if="swapData && swapData.asset === SwapAsset.USDT_MATIC"/>
             <BankIcon v-else-if="swapData && swapData.asset === SwapAsset.EUR"/>
             <Identicon v-else :address="peerAddress" />
             <div v-if="isCashlink" class="cashlink-or-swap"><CashlinkXSmallIcon/></div>

diff --git a/src/components/layouts/AccountOverview.vue b/src/components/layouts/AccountOverview.vue
@@ -84,7 +84,6 @@
                     v-if="$config.fastspot.enabled
                         && activeAccountInfo.type !== AccountType.LEDGER
                         && hasPolygonAddresses && $config.polygon.enabled
-                        && stablecoin === CryptoCurrency.USDC
                         && (
                             nimAccountBalance > 0
                             || (stablecoin === CryptoCurrency.USDC
@@ -104,7 +103,7 @@
                             $event,
                             `${SwapAsset.NIM}-${stablecoin === CryptoCurrency.USDC
                                 ? SwapAsset.USDC_MATIC
-                                : SwapAsset.USDT}`
+                                : SwapAsset.USDT_MATIC}`
                         )"
                         @focus="nimUsdcSwapTooltip$ && nimUsdcSwapTooltip$.show()"
                         @blur="nimUsdcSwapTooltip$ && nimUsdcSwapTooltip$.hide()"
@@ -156,7 +155,6 @@
                         && activeAccountInfo.type !== AccountType.LEDGER
                         && hasBitcoinAddresses && $config.enableBitcoin
                         && hasPolygonAddresses && $config.polygon.enabled
-                        && stablecoin === CryptoCurrency.USDC
                         && (
                             btcAccountBalance > 0
                             || (stablecoin === CryptoCurrency.USDC
@@ -176,7 +174,7 @@
                             $event,
                             `${SwapAsset.BTC}-${stablecoin === CryptoCurrency.USDC
                                 ? SwapAsset.USDC_MATIC
-                                : SwapAsset.USDT}`
+                                : SwapAsset.USDT_MATIC}`
                         )"
                         @focus="btcUsdcSwapTooltip$ && btcUsdcSwapTooltip$.show()"
                         @blur="btcUsdcSwapTooltip$ && btcUsdcSwapTooltip$.hide()"

diff --git a/src/components/layouts/Sidebar.vue b/src/components/layouts/Sidebar.vue
@@ -291,9 +291,9 @@ export default defineComponent({
                     ? stablecoin.value === CryptoCurrency.USDC
                         // For USDC, only native USDC is supported for swapping.
                         ? store.accountUsdcBalance.value
-                        // : stablecoin.value === CryptoCurrency.USDT
-                        //     ? store.accountUsdtBridgedBalance.value
-                        : 0
+                        : stablecoin.value === CryptoCurrency.USDT
+                            ? store.accountUsdtBridgedBalance.value
+                            : 0
                     : store.accountBalance.value;
             }),
         );

diff --git a/src/components/modals/BtcTransactionModal.vue b/src/components/modals/BtcTransactionModal.vue
@@ -12,7 +12,8 @@
             <i18n v-else-if="swapData && isIncoming" path="Swap from {address}" :tag="false">
                 <template v-if="swapData.asset === SwapAsset.NIM
                     || swapData.asset === SwapAsset.USDC
-                    || swapData.asset === SwapAsset.USDC_MATIC" v-slot:address>
+                    || swapData.asset === SwapAsset.USDC_MATIC
+                    || swapData.asset === SwapAsset.USDT_MATIC" v-slot:address>
                     <label>{{ peerLabel || peerAddresses[0].substring(0, 9) }}</label>
                 </template>
 
@@ -26,7 +27,8 @@
             <i18n v-else-if="swapData" path="Swap to {address}" :tag="false">
                 <template v-if="swapData.asset === SwapAsset.NIM
                     || swapData.asset === SwapAsset.USDC
-                    || swapData.asset === SwapAsset.USDC_MATIC" v-slot:address>
+                    || swapData.asset === SwapAsset.USDC_MATIC
+                    || swapData.asset === SwapAsset.USDT_MATIC" v-slot:address>
                     <label>{{ peerLabel || peerAddresses[0].substring(0, 9) }}</label>
                 </template>
 
@@ -92,8 +94,7 @@
                             :address="peerAddresses[0]"/>
                         <UsdcIcon v-else-if="swapData
                             && (swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)"/>
-                        <UsdtIcon v-else-if="swapData
-                            && (swapData.asset === SwapAsset.USDT)"/>
+                        <UsdtIcon v-else-if="swapData && swapData.asset === SwapAsset.USDT_MATIC"/>
                         <BankIcon v-else-if="swapData && swapData.asset === SwapAsset.EUR"/>
                         <Avatar v-else :label="!isCancelledSwap ? peerLabel || '' : ''"/>
                         <SwapMediumIcon/>
@@ -147,8 +148,7 @@
                             :address="peerAddresses[0]"/>
                         <UsdcIcon v-else-if="swapData
                             && (swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)"/>
-                        <UsdtIcon v-else-if="swapData
-                            && (swapData.asset === SwapAsset.USDT)"/>
+                        <UsdtIcon v-else-if="swapData && swapData.asset === SwapAsset.USDT_MATIC"/>
                         <BankIcon v-else-if="swapData && swapData.asset === SwapAsset.EUR"/>
                         <Avatar v-else :label="!isCancelledSwap ? peerLabel || '' : ''"/>
                         <SwapMediumIcon/>
@@ -265,6 +265,20 @@
                                 class="swapped-amount"
                                 value-mask/>
                         </button>
+                        <button v-if="swapData.asset === SwapAsset.USDT_MATIC && swapTransaction"
+                            class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
+                            @click="$router.replace(`/usdt-transaction/${swapTransaction.transactionHash}`)"
+                        >
+                            <div class="icon">
+                                <GroundedArrowUpIcon v-if="isIncoming"/>
+                                <GroundedArrowDownIcon v-else/>
+                            </div>
+                            <Amount
+                                :amount="swapTransaction.value"
+                                :currency="assetToCurrency(swapData.asset)"
+                                class="swapped-amount"
+                                value-mask/>
+                        </button>
                         <div v-else-if="swapData.asset === SwapAsset.EUR"
                             class="swap-other-side flex-row" :class="{'incoming': !isIncoming}">
                             <div class="icon">
@@ -357,6 +371,7 @@ import { explorerTxLink } from '../../lib/ExplorerUtils';
 import { assetToCurrency } from '../../lib/swap/utils/Assets';
 import TransactionDetailOasisPayoutStatus from '../TransactionDetailOasisPayoutStatus.vue';
 import { useUsdcTransactionsStore, Transaction as UsdcTransaction } from '../../stores/UsdcTransactions';
+import { useUsdtTransactionsStore, Transaction as UsdtTransaction } from '../../stores/UsdtTransactions';
 import { useBtcTransactionInfo } from '../../composables/useBtcTransactionInfo';
 import UsdcIcon from '../icons/UsdcIcon.vue';
 import UsdtIcon from '../icons/UsdtIcon.vue';
@@ -421,6 +436,10 @@ export default defineComponent({
                 return useUsdcTransactionsStore().state.transactions[swapData.value.transactionHash] || null;
             }
 
+            if (swapData.value.asset === SwapAsset.USDT_MATIC) {
+                return useUsdtTransactionsStore().state.transactions[swapData.value.transactionHash] || null;
+            }
+
             return null;
         });
 
@@ -468,6 +487,11 @@ export default defineComponent({
                     return isIncoming.value ? [swapTx.sender] : [swapTx.recipient];
                 }
 
+                if (swapData.value.asset === SwapAsset.USDT_MATIC && swapTransaction.value) {
+                    const swapTx = swapTransaction.value as UsdtTransaction;
+                    return isIncoming.value ? [swapTx.sender] : [swapTx.recipient];
+                }
+
                 if (swapData.value.asset === SwapAsset.EUR) return [swapData.value.iban || ''];
             }
 

diff --git a/src/components/modals/TransactionModal.vue b/src/components/modals/TransactionModal.vue
@@ -9,7 +9,8 @@
             <i18n v-else-if="swapData && isIncoming" path="Swap from {address}" :tag="false">
                 <template v-if="swapData.asset === SwapAsset.BTC
                     || swapData.asset === SwapAsset.USDC
-                    || swapData.asset === SwapAsset.USDC_MATIC" v-slot:address>
+                    || swapData.asset === SwapAsset.USDC_MATIC
+                    || swapData.asset === SwapAsset.USDT_MATIC" v-slot:address>
                     <label>{{ peerLabel || peerAddress.substring(0, 9) }}</label>
                 </template>
 
@@ -23,7 +24,8 @@
             <i18n v-else-if="swapData" path="Swap to {address}" :tag="false">
                 <template v-if="swapData.asset === SwapAsset.BTC
                     || swapData.asset === SwapAsset.USDC
-                    || swapData.asset === SwapAsset.USDC_MATIC" v-slot:address>
+                    || swapData.asset === SwapAsset.USDC_MATIC
+                    || swapData.asset === SwapAsset.USDT_MATIC" v-slot:address>
                     <label>{{ peerLabel || peerAddress.substring(0, 9) }}</label>
                 </template>
 
@@ -106,8 +108,7 @@
                         <BitcoinIcon v-if="swapData && swapData.asset === SwapAsset.BTC"/>
                         <UsdcIcon v-else-if="swapData
                             && (swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)"/>
-                        <UsdtIcon v-else-if="swapData
-                            && (swapData.asset === SwapAsset.USDT)"/>
+                        <UsdtIcon v-else-if="swapData && swapData.asset === SwapAsset.USDT_MATIC"/>
                         <BankIcon v-else-if="swapData && swapData.asset === SwapAsset.EUR"/>
                         <Identicon v-else :address="peerAddress"/>
                         <div v-if="isCashlink" class="cashlink-or-swap"><CashlinkSmallIcon/></div>
@@ -150,8 +151,7 @@
                         <BitcoinIcon v-else-if="swapData && swapData.asset === SwapAsset.BTC"/>
                         <UsdcIcon v-else-if="swapData
                             && (swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)"/>
-                        <UsdtIcon v-else-if="swapData
-                            && (swapData.asset === SwapAsset.USDT)"/>
+                        <UsdtIcon v-else-if="swapData && swapData.asset === SwapAsset.USDT_MATIC"/>
                         <BankIcon v-else-if="swapData && swapData.asset === SwapAsset.EUR"/>
                         <Identicon v-else :address="peerAddress"/>
                         <div v-if="isCashlink" class="cashlink-or-swap"><CashlinkSmallIcon/></div>
@@ -269,6 +269,20 @@
                                 class="swapped-amount"
                                 value-mask/>
                         </button>
+                        <button v-if="swapData.asset === SwapAsset.USDT_MATIC && swapTransaction"
+                            class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
+                            @click="$router.replace(`/usdt-transaction/${swapTransaction.transactionHash}`)"
+                        >
+                            <div class="icon">
+                                <GroundedArrowUpIcon v-if="isIncoming"/>
+                                <GroundedArrowDownIcon v-else/>
+                            </div>
+                            <Amount
+                                :amount="swapTransaction.value"
+                                :currency="assetToCurrency(swapData.asset)"
+                                class="swapped-amount"
+                                value-mask/>
+                        </button>
                         <div v-else-if="swapData.asset === SwapAsset.EUR"
                             class="swap-other-side flex-row" :class="{'incoming': !isIncoming}"
                         >
@@ -363,6 +377,7 @@ import { manageCashlink, refundSwap } from '../../hub';
 import { SwapNimData } from '../../stores/Swaps';
 import { useBtcTransactionsStore, Transaction as BtcTransaction } from '../../stores/BtcTransactions';
 import { useUsdcTransactionsStore, Transaction as UsdcTransaction } from '../../stores/UsdcTransactions';
+import { useUsdtTransactionsStore, Transaction as UsdtTransaction } from '../../stores/UsdtTransactions';
 import { sendTransaction } from '../../network';
 import { useAccountStore, AccountType } from '../../stores/Account';
 import { explorerTxLink } from '../../lib/ExplorerUtils';
@@ -476,6 +491,12 @@ export default defineComponent({
                 return usdcTx;
             }
 
+            if (swapData.value.asset === SwapAsset.USDT_MATIC) {
+                const usdtTx = useUsdtTransactionsStore().state.transactions[swapData.value.transactionHash];
+                if (!usdtTx) return null;
+                return usdtTx;
+            }
+
             return null;
         });
 
@@ -532,6 +553,13 @@ export default defineComponent({
                         : ''; // we don't know the peer address
                 }
 
+                if (swapData.value.asset === SwapAsset.USDT_MATIC) {
+                    const swapTx = swapTransaction.value as UsdtTransaction | null;
+                    return swapTx
+                        ? isIncoming.value ? swapTx.sender : swapTx.recipient
+                        : ''; // we don't know the peer address
+                }
+
                 if (swapData.value.asset === SwapAsset.EUR) {
                     return swapData.value.iban || '';
                 }