Merge pull request #657 from arcana-network/testnet

Release Gasless Support and MVX Support

.env.example

@@ -13,9 +13,8 @@ VUE_APP_ARCANA_DOCS_URL=
 VUE_APP_OAUTH_SERVER_URL=
 VUE_APP_TRANSAK_API_KEY=
 VUE_APP_TRANSAK_ENV=
+VUE_APP_TRANSAK_PUSHER_ID=
 VUE_APP_RAMP_API_KEY=
 VUE_APP_RAMP_ENV=
 VUE_APP_DKG_RPC_URL=
 VUE_APP_DKG_CONTRACT_ADDRESS=
-VUE_APP_ANKR_PREMIUM_API_URL=
-VUE_APP_SOURCEMAPS=

package.json

@@ -17,16 +17,19 @@
   },
   "dependencies": {
     "@arcana/auth": "^0.1.3",
-    "@arcana/auth-core": "2.0.0-alpha.16",
+    "@arcana/auth-core": "2.0.0-alpha.21",
     "@arcana/key-helper": "^2.0.0-beta.4",
-    "@arcana/scw": "^0.0.30",
+    "@arcana/scw": "^0.0.35",
     "@ethereumjs/tx": "^3.4.0",
     "@fontsource/montserrat": "^4.5.14",
     "@fontsource/sora": "^4.5.12",
     "@headlessui/vue": "^1.7.2",
     "@metaplex-foundation/mpl-token-metadata": "^3.1.0",
     "@metaplex-foundation/umi": "^0.8.10",
     "@metaplex-foundation/umi-bundle-defaults": "^0.8.10",
+    "@multiversx/sdk-core": "^12.15.0",
+    "@multiversx/sdk-network-providers": "^2.2.0",
+    "@multiversx/sdk-wallet": "^4.2.0",
     "@noble/ed25519": "^2.0.0",
     "@noble/hashes": "^1.3.2",
     "@ramp-network/ramp-instant-sdk": "^4.0.1",

src/App.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { AppMode } from '@arcana/auth'
-import { computed, toRefs, watch, defineAsyncComponent } from 'vue'
+import { computed, toRefs, watch, defineAsyncComponent, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import BaseModal from '@/components/BaseModal.vue'
 import type { Theme } from '@/models/Theme'
+import { useActivitiesStore } from '@/store/activities'
 import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
 import { useParentConnectionStore } from '@/store/parentConnection'
 import { useRequestStore } from '@/store/request'
 import { useStarterTipsStore } from '@/store/starterTips'
 import { AUTH_NETWORK } from '@/utils/constants'
 import { getImage } from '@/utils/getImage'
+import {
+  TransakStatus,
+  subscribeTransakOrderId,
+  unsubscribeTransakOrderId,
+} from '@/utils/transak'
 
 import '@/index.css'
 
@@ -33,6 +39,7 @@ const starterTipsStore = useStarterTipsStore()
 const router = useRouter()
 const { theme, expandWallet, showWallet, compactMode, sdkVersion } = toRefs(app)
 const route = useRoute()
+const activitiesStore = useActivitiesStore()
 
 if (app.sdkVersion !== 'v3') {
   app.expandWallet = true
@@ -94,6 +101,7 @@ const showFooter = computed(() => {
       'MFARestore',
       'SendTokens',
       'SendNfts',
+      'TransakSell',
     ].includes(route.name as string) ||
       (route.name === 'requests' && !requestStore.pendingRequest)) &&
     !app.compactMode
@@ -122,9 +130,78 @@ const canShowCollapseButton = computed(
 
 const showHeader = computed(() => {
   const routeName = route.name
-  const routes = ['requests', 'PermissionRequest']
+  const routes = ['requests', 'PermissionRequest', 'TransakSell']
   return !routes.includes(routeName as string)
 })
+
+onMounted(() => {
+  window.addEventListener('message', (ev) => {
+    const response = ev.data.response
+    if (ev.data.type === 'sell_token_init') {
+      const existingActivities = activitiesStore.activities(response.chainId)
+      const existingActivity = existingActivities?.find((activity) => {
+        return (
+          activity.operation === 'Sell' &&
+          activity.sellDetails?.orderId === response.orderId
+        )
+      })
+      if (!existingActivity) {
+        activitiesStore.saveActivity(response.chainId, {
+          txHash: response.txHash,
+          status: TransakStatus[response.status],
+          transaction: response.transaction || undefined,
+          operation: 'Sell',
+          date: new Date(),
+          address: {
+            from: response.partnerCustomerId,
+            to: response.walletAddress,
+          },
+          customToken:
+            response.contractAddress !== 'NATIVE'
+              ? {
+                  operation: 'Sell',
+                  amount: response.cryptoAmount,
+                  symbol: response.cryptoCurrency,
+                  decimals: response.tokenDecimals,
+                }
+              : undefined,
+          sellDetails: {
+            orderId: response.orderId,
+            provider: response.provider,
+            crypto: {
+              amount: response.cryptoAmount,
+              currency: response.cryptoCurrency,
+              contractAddress: response.contractAddress,
+              decimals: response.tokenDecimals,
+              logo: response.tokenLogo,
+            },
+            fiat: {
+              amount: response.fiatAmount,
+              currency: response.fiatCurrency,
+              fee: response.totalFeeInFiat,
+            },
+          },
+        })
+        subscribeTransakOrderId(response.orderId, response.chainId)
+      }
+    } else if (ev.data.type === 'sell_token_reject') {
+      const activityIndex = activitiesStore
+        .activities(Number(response.chainId))
+        .findIndex((activity) => {
+          return (
+            activity.operation === 'Sell' &&
+            activity.sellDetails?.orderId === response.orderId
+          )
+        })
+      if (activityIndex !== -1) {
+        activitiesStore.activitiesByChainId[Number(response.chainId)][
+          activityIndex
+        ].status = 'Rejected'
+        unsubscribeTransakOrderId(response.orderId)
+      }
+    }
+  })
+})
 </script>
 
 <template>