Merge pull request #331 from arcana-network/testnet

PR to merge Testnet with Main

package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@arcana/auth": "^0.1.3",
-    "@arcana/auth-core": "^1.0.0-beta.6",
+    "@arcana/auth-core": "^1.0.0-beta.7",
     "@arcana/key-helper": "^1.0.0-beta.7",
     "@ethereumjs/tx": "^3.4.0",
     "@fontsource/montserrat": "^4.5.14",
@@ -27,7 +27,6 @@
     "@ramp-network/ramp-instant-sdk": "^4.0.1",
     "@sentry/tracing": "^7.5.1",
     "@sentry/vue": "^7.5.1",
-    "@transak/transak-sdk": "^1.2.3",
     "assert": "^2.0.0",
     "axios": "^0.27.2",
     "bignumber.js": "^9.1.0",

src/App.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import { toRefs, ref, watch, computed, onBeforeMount } from 'vue'
+import { AppMode } from '@arcana/auth'
+import { toRefs, watch, computed, onBeforeMount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import WalletFooter from '@/components/AppFooter.vue'
 import BaseModal from '@/components/BaseModal.vue'
+import WalletButton from '@/components/WalletButton.vue'
+import WalletHeader from '@/components/WalletHeader.vue'
 import type { Theme } from '@/models/Theme'
 import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
+import { useParentConnectionStore } from '@/store/parentConnection'
 import { useRequestStore } from '@/store/request'
+import { initializeOnRampMoney } from '@/utils/onrampmoney.ramp'
 import { fetchTransakNetworks } from '@/utils/transak'
 
 import '@/index.css'
 
 const app = useAppStore()
 const modal = useModalStore()
 const requestStore = useRequestStore()
+const parentConnectionStore = useParentConnectionStore()
 const router = useRouter()
-const { theme } = toRefs(app)
-const isLoading = ref(false)
+const { theme, expandWallet, showWallet, compactMode, sdkVersion } = toRefs(app)
 const route = useRoute()
 
 const url = new URL(window.location.href)
@@ -29,35 +34,90 @@ const showRequestPage = computed(() => {
   return requestStore.areRequestsPendingForApproval
 })
 
+const showWalletButton = computed(() => {
+  return !app.expandWallet && app.validAppMode !== AppMode.Widget
+})
+
 onBeforeMount(async () => {
-  await fetchTransakNetworks()
+  try {
+    await Promise.all([fetchTransakNetworks(), initializeOnRampMoney()])
+  } catch (e) {
+    console.error('Failed to initialize one or more on-ramps:', e)
+  }
+})
+
+async function setIframeStyle() {
+  const parentConnectionInstance = await parentConnectionStore.parentConnection
+    ?.promise
+  await parentConnectionInstance?.setIframeStyle(app.iframeStyle)
+}
+
+watch(showWallet, async (newValue) => {
+  if (newValue) app.expandWallet = false
+  setIframeStyle()
 })
 
-watch(showRequestPage, () => {
-  if (showRequestPage.value) {
+watch(expandWallet, setIframeStyle)
+
+watch(compactMode, setIframeStyle)
+
+watch(showRequestPage, (newValue) => {
+  if (newValue) {
     modal.show = false
     router.push({ name: 'requests', params: { appId: app.id } })
   }
 })
 
 const showFooter = computed(() => {
   return (
-    !['requests', 'MFARequired', 'MFARestore'].includes(route.name as string) ||
-    (route.name === 'requests' && !requestStore.pendingRequest)
+    (!['requests', 'MFARequired', 'MFARestore'].includes(
+      route.name as string
+    ) ||
+      (route.name === 'requests' && !requestStore.pendingRequest)) &&
+    !app.compactMode
   )
 })
+
+function onClickOfHeader() {
+  if (app.compactMode) app.compactMode = false
+  else app.expandWallet = false
+}
 </script>
 
 <template>
-  <div v-if="isLoading" class="flex col justify-center items-center h-full">
-    <div>Loading...</div>
+  <div v-if="sdkVersion === 'v3'" class="flex flex-col h-full">
+    <div
+      v-show="expandWallet"
+      class="flex flex-col h-full"
+      :class="[theme === 'dark' ? 'dark-mode' : 'light-mode']"
+    >
+      <WalletHeader @click="onClickOfHeader" />
+      <div
+        class="flex-grow wallet__container p-4"
+        :class="{ 'rounded-b-xl p-0': compactMode }"
+      >
+        <RouterView class="min-h-full" />
+        <BaseModal v-if="modal.show" />
+      </div>
+      <WalletFooter v-if="showFooter" />
+    </div>
+    <div
+      v-show="showWalletButton"
+      class="h-full"
+      :class="[theme === 'dark' ? 'dark-mode' : 'light-mode']"
+    >
+      <WalletButton />
+    </div>
   </div>
   <div
     v-else
     class="flex flex-col h-full"
     :class="[theme === 'dark' ? 'dark-mode' : 'light-mode']"
   >
-    <div class="flex-grow wallet__container">
+    <div
+      class="flex-grow wallet__container p-4"
+      :class="{ 'rounded-b-xl p-0': compactMode }"
+    >
       <RouterView class="min-h-full" />
       <BaseModal v-if="modal.show" />
     </div>
@@ -230,7 +290,6 @@ button {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  padding: var(--p-400);
   overflow-x: hidden;
   color: var(--fg-color);
   background: var(--container-bg-color);

src/components/AddNetwork.vue

@@ -37,44 +37,48 @@ function isExistingChain(chainId) {
 }
 
 async function handleSubmit() {
-  const rpcUrl = rpcConfig.value.rpcUrl
-  const chainId = rpcConfig.value.chainId
-  const existingChain = isExistingChain(chainId)
-  if (isExistingRpcUrl(rpcUrl)) {
-    return toast.error(
-      `RPC URL - ${rpcUrl} already exists, please use different one`
-    )
-  } else {
-    const provider = new ethers.providers.JsonRpcProvider(
-      rpcConfig.value.rpcUrl
-    )
-    const chainId = await provider.getNetwork()
-    if (Number(chainId.chainId) !== Number(rpcConfig.value.chainId)) {
-      return toast(`Incorrect combination of chainId and rpcUrl`)
-    }
-    if (existingChain) {
-      rpcStore.setRpcConfig({
-        ...existingChain,
-        rpcUrls: [rpcConfig.value.rpcUrl],
-      })
-      rpcStore.setSelectedChainId(existingChain.chainId)
+  try {
+    const rpcUrl = rpcConfig.value.rpcUrl
+    const chainId = rpcConfig.value.chainId
+    const existingChain = isExistingChain(chainId)
+    if (isExistingRpcUrl(rpcUrl)) {
+      return toast.error(
+        `RPC URL - ${rpcUrl} already exists, please use different one`
+      )
     } else {
-      const payload = {
-        chainName: rpcConfig.value.networkName,
-        chainId: rpcConfig.value.chainId,
-        blockExplorerUrls: [rpcConfig.value.explorerUrl],
-        rpcUrls: [rpcConfig.value.rpcUrl],
-        favicon: 'blockchain-icon',
-        nativeCurrency: {
-          symbol: rpcConfig.value.currencySymbol,
-          decimals: 18,
-        },
-        isCustom: true,
+      const provider = new ethers.providers.StaticJsonRpcProvider(
+        rpcConfig.value.rpcUrl
+      )
+      const chainId = await provider.getNetwork()
+      if (Number(chainId.chainId) !== Number(rpcConfig.value.chainId)) {
+        return toast(`Incorrect combination of chain Id and RPC URL`)
+      }
+      if (existingChain) {
+        rpcStore.setRpcConfig({
+          ...existingChain,
+          rpcUrls: [rpcConfig.value.rpcUrl],
+        })
+        rpcStore.setSelectedChainId(existingChain.chainId)
+      } else {
+        const payload = {
+          chainName: rpcConfig.value.networkName,
+          chainId: rpcConfig.value.chainId,
+          blockExplorerUrls: [rpcConfig.value.explorerUrl],
+          rpcUrls: [rpcConfig.value.rpcUrl],
+          favicon: 'blockchain-icon',
+          nativeCurrency: {
+            symbol: rpcConfig.value.currencySymbol,
+            decimals: 18,
+          },
+          isCustom: true,
+        }
+        rpcStore.addNetwork(payload)
+        rpcStore.setSelectedChainId(payload.chainId)
       }
-      rpcStore.addNetwork(payload)
-      rpcStore.setSelectedChainId(payload.chainId)
+      emit('close')
     }
-    emit('close')
+  } catch (e) {
+    toast.error('Invalid RPC URL')
   }
 }
 </script>

src/components/AppFooter.vue

@@ -29,7 +29,7 @@ function getAppropriateIcon(iconName, pathName) {
 
 <template>
   <footer
-    class="flex items-center justify-end py-4"
+    class="flex items-center justify-end py-4 rounded-b-xl"
     :class="{ 'justify-between': userStore.isLoggedIn }"
   >
     <div v-if="userStore.isLoggedIn" class="flex space-x-4">

src/components/AssetsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ethers } from 'ethers'
 import { onMounted, reactive, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -33,10 +34,7 @@ function fetchNativeAsset() {
   return {
     address: 'native',
     name: rpcStore.nativeCurrency.name,
-    balance: formatTokenDecimals(
-      rpcStore.walletBalance,
-      rpcStore.nativeCurrency.decimals
-    ),
+    balance: Number(ethers.utils.formatEther(rpcStore.walletBalance)),
     decimals: rpcStore.nativeCurrency.decimals,
     symbol: rpcStore.nativeCurrency.symbol,
     logo:
@@ -92,6 +90,10 @@ function handleAddToken() {
   router.push({ name: 'AddToken' })
 }
 
+function isNative(asset: Asset) {
+  return asset.address === 'native'
+}
+
 onMounted(async () => {
   await getAssetsBalance()
   assetsPolling = setInterval(updateAssetsBalance, 4000)
@@ -127,7 +129,11 @@ rpcStore.$subscribe(getAssetsBalance)
         </div>
         <div
           class="assets-view__asset-balance flex flex-wrap leading-none text-right overflow-hidden whitespace-nowrap text-ellipsis"
-          :title="`${asset.balance.toFixed(asset.decimals)} ${asset.symbol}`"
+          :title="`${
+            isNative(asset)
+              ? ethers.utils.formatEther(rpcStore.walletBalance)
+              : asset.balance.toFixed(asset.decimals)
+          } ${asset.symbol}`"
         >
           {{ beautifyBalance(asset.balance) }}
           {{ asset.symbol }}

src/components/BuyTokens.vue

@@ -2,20 +2,22 @@
 import { ref, type Ref } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { openOnRampMoneyHostedUI } from '@/utils/onrampmoney.ramp'
 import { openRampSdk } from '@/utils/rampsdk'
 import { openTransak } from '@/utils/transak'
 import { useImage } from '@/utils/useImage'
 
 type BuyTokenProps = {
   transakNetwork?: string
   rampNetwork?: string
+  onRampMoney: number | false | undefined
 }
 
 const props = defineProps<BuyTokenProps>()
 
 const emit = defineEmits(['close'])
 const getImage = useImage()
-const selectedProvider: Ref<'transak' | 'ramp' | ''> = ref('')
+const selectedProvider: Ref<'transak' | 'ramp' | 'onramp.money' | ''> = ref('')
 const isLoading = ref(false)
 const showStatusModal: Ref<'success' | 'failed' | 'cancelled' | ''> = ref('')
 const statusText = ref({
@@ -29,7 +31,7 @@ function handleTransak() {
   handleStatusModalText('Transak')
 }
 
-function handleStatusModalText(provider: 'Transak' | 'Ramp') {
+function handleStatusModalText(provider: 'Transak' | 'Ramp' | 'onramp.money') {
   setTimeout(() => {
     isLoading.value = false
   }, 1500)
@@ -47,11 +49,22 @@ function handleRamp() {
   handleStatusModalText('Ramp')
 }
 
+function handleOnRampMoney() {
+  if (props.onRampMoney === undefined || props.onRampMoney === false) {
+    throw new Error('!!!')
+  }
+  isLoading.value = true
+  openOnRampMoneyHostedUI(props.onRampMoney)
+  handleStatusModalText('onramp.money')
+}
+
 function handleBuy() {
   if (selectedProvider.value === 'transak') {
     handleTransak()
   } else if (selectedProvider.value === 'ramp') {
     handleRamp()
+  } else if (selectedProvider.value === 'onramp.money') {
+    handleOnRampMoney()
   }
 }
 
@@ -142,6 +155,25 @@ function handleDone() {
             <span class="text-base">Ramp</span>
           </label>
         </div>
+        <div class="flex gap-3 items-center">
+          <input
+            id="OnRampMoney"
+            v-model="selectedProvider"
+            type="radio"
+            value="onramp.money"
+            name="provider"
+            :disabled="props.onRampMoney === false"
+            :class="{ 'opacity-80': !props.onRampMoney }"
+          />
+          <label
+            for="OnRampMoney"
+            class="flex gap-2 items-center cursor-pointer"
+            :class="{ 'opacity-50': props.onRampMoney === false }"
+          >
+            <img src="@/assets/images/ramp.png" class="h-7 w-7" />
+            <span class="text-base">onramp.money</span>
+          </label>
+        </div>
         <div class="flex">
           <button
             class="flex-1 text-sm sm:text-xs rounded-xl text-white dark:bg-white bg-black dark:text-black h-9 sm:h-8 uppercase disabled:opacity-50 transition-opacity duration-300"