feat: add rootstock staking

Author: ahsan-javaiid

src/assets/pic/rootstock.png

@@ -1,13 +1,13 @@
 <template>
   <div class="account-select" v-if="account">
     <a ref="toggle" class="account-select__block" @click="toggleAction" href="javascript:void(0)">
-      <img :src="wallet.wallet.value?.adapter.icon" />
+      <img :src="walletIcon" />
       <span>{{ $filters.replaceWithEllipsis(account.address, 4, 4) }}</span>
       <arrow-down />
     </a>
     <div v-show="isOpen" ref="dropdown" class="account-select__dropdown">
       <div class="account-select__info">
-        <img :src="wallet.wallet.value?.adapter.icon" />
+        <img :src="walletIcon" />
         <span>{{ $filters.replaceWithEllipsis(account.address, 4, 4) }}</span>
         <a class="account-select__info-action" @click="onCopyClicked" href="javascript:void(0)">
           <copy-icon />
@@ -17,7 +17,7 @@
         </a>
       </div>
       <div class="account-select__amount">
-        {{ $filters.cryptoCurrencyFormat(walletBalance) }} <span>sol</span>
+        {{ $filters.cryptoCurrencyFormat(walletBalance) }} <span>{{ balanceSymbol }}</span>
       </div>
       <a @click="disconnectAction" class="account-select__disconnect" href="javascript:void(0)">
         <logout-icon />
@@ -37,25 +37,33 @@ import CopyIcon from "@/icons/common/copy-icon.vue";
 import LinkIcon from "@/icons/common/link-icon.vue";
 import LogoutIcon from "@/icons/common/logout-icon.vue";
 import { SharedTypes } from "@/store/shared/consts";
-import { copyToClipboard, openSolscanExplorerAddress } from "@/utils/browser";
+import { copyToClipboard, openExplorerAddress } from "@/utils/browser";
 import { useWallet } from "solana-wallets-vue";
+import { Chains } from "@/core/interfaces";
+import { BASE_TOKENS } from "@/core/constants/index";
 
 const wallet = useWallet();
 const isOpen = ref<boolean>(false);
 const dropdown = ref(null);
 const toggle = ref(null);
 const store = useStore();
 
-const walletBalance = computed(() => store.getters[SharedTypes.WALLET_BALANCE_GETTER]);
-const network = computed(() => store.getters[SharedTypes.NETWORK_GETTER]);
-
 const props = defineProps({
   account: {
     type: Object as PropType<Account>,
     default: null,
   },
 });
 
+const walletBalance = computed(() => store.getters[SharedTypes.WALLET_BALANCE_GETTER]);
+const network = computed(() => store.getters[SharedTypes.NETWORK_GETTER]);
+const activeChain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const walletIcon = computed(() => props.account?.image ?? wallet.wallet.value?.adapter.icon ?? "");
+const balanceSymbol = computed(() => {
+  const chain = activeChain.value as Chains;
+  return BASE_TOKENS[chain]?.symbol?.toUpperCase?.() ?? "";
+});
+
 const emit = defineEmits(["disconnect"]);
 
 const toggleAction = () => {
@@ -73,7 +81,7 @@ const onCopyClicked = () => {
 }
 
 const onLinkClicked = () => {
-  openSolscanExplorerAddress(props.account.address, network.value);
+  openExplorerAddress(props.account.address, activeChain.value as Chains, network.value);
 }
 
 onClickOutside(

src/components/account-select/index.vue

@@ -10,7 +10,7 @@
       :small="true"
     />
     <div class="amount-input__balance" :class="{ error: !hasEnoughBalance }">
-      Balance: {{ maxValue }}
+      Balance: {{ maxValueDisplay }}
     </div>
     <div class="amount-input__wrapper">
       <input
@@ -124,6 +124,12 @@ const amountValue = computed({
 
 const prices = computed(() => store.getters[SharedTypes.PRICE_GETTER]);
 const activeChain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const maxValueDisplay = computed(() => {
+  if (activeChain.value === "rootstock") {
+    return Number(props.maxValue || 0).toFixed(2);
+  }
+  return props.maxValue;
+});
 const amountUsd = computed(() => {
   const value = parseFloat(amountValue.value || "0");
   const price = prices.value?.[BASE_TOKENS[activeChain.value].symbol] || 0;

src/components/amount-input/index.vue

@@ -17,23 +17,21 @@
             <span>Get Enkrypt</span>
           </a>
 
-          <!--
           <select-list
             v-if="!isToggleMenu"
-            :select="network"
-            :items="[chainsData[Chains.SOLANA]]"
+            :select="currentChainOption"
+            :items="chainOptions"
             :is-minify="true"
             :is-list-image="true"
             @update:select="selectNetworkAction"
           />
-          -->
 
           <account-select
-            v-if="wallet.connected.value && !isToggleMenu"
+            v-if="isWalletConnected && !isToggleMenu"
             :account="walletAccount"
             @disconnect="disconnectWallet"
           ></account-select>
-          <a v-else-if="!isToggleMenu && !wallet.connected.value" class="header__connect" @click="openWalletModal" href="javascript:void(0)">
+          <a v-else-if="!isToggleMenu" class="header__connect" @click="connectWallet" href="javascript:void(0)">
             Connect
           </a>
         </div>
@@ -70,13 +68,22 @@ const store = useStore();
 const router = useRouter();
 const isScroll = ref<boolean>(false);
 const wallet = useWallet();
-const network = ref<ChainDataItem>(chainsData[Chains.SOLANA]);
 const walletAccount = computed(() => store.getters[SharedTypes.WALLET_ACCOUNT_GETTER]);
 const isWalletModalOpen = computed(() => store.getters[SharedTypes.IS_CONNECT_MODAL_VISIBLE_GETTER]);
+const activeChain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const isWalletConnected = computed(() => store.getters[SharedTypes.IS_WALLET_CONNECTED_GETTER]);
+const chainOptions = computed<ChainDataItem[]>(() => [
+  chainsData[Chains.SOLANA],
+  chainsData[Chains.ROOTSTOCK],
+]);
+const currentChainOption = computed<ChainDataItem>(() => chainsData[activeChain.value]);
 
 watch(
   () => wallet.publicKey?.value,
   (newVal, oldVal) => {
+    if (activeChain.value !== Chains.SOLANA) {
+      return;
+    }
     if (newVal) {
       if (oldVal && newVal.toString() !== oldVal.toString()) {
         store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
@@ -89,9 +96,13 @@ watch(
   { immediate: true }
 );
 
-const openWalletModal = () => {
+const connectWallet = async () => {
   trackButtonsEvents(ButtonsActionEventType.MainScreenConnectButtonClicked);
-  store.dispatch(SharedTypes.CONNECT_MODAL_ACTION, true);
+  if (activeChain.value === Chains.SOLANA) {
+    store.dispatch(SharedTypes.CONNECT_MODAL_ACTION, true);
+  } else {
+    await store.dispatch(SharedTypes.CONNECT_EVM_WALLET_ACTION);
+  }
 };
 
 const updateWalletModalVisibility = (visible: boolean) => {
@@ -101,10 +112,13 @@ const updateWalletModalVisibility = (visible: boolean) => {
 const disconnectWallet = async () => {
   trackButtonsEvents(ButtonsActionEventType.MainScreenDisconnectButtonClicked);
   try {
-    if (wallet.connected.value) {
+    if (activeChain.value === Chains.SOLANA && wallet.connected.value) {
       await store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
       await wallet.disconnect();
       router.push('/');
+    } else if (activeChain.value === Chains.ROOTSTOCK) {
+      await store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
+      router.push('/');
     }
   } catch (err) {
     console.error('Failed to disconnect:', err);
@@ -140,8 +154,17 @@ const onScroll = () => {
   }
 };
 
-const selectNetworkAction = (item: ChainDataItem) => {
-  network.value = item;
+const selectNetworkAction = async (item: ChainDataItem) => {
+  if (item.id === activeChain.value) {
+    return;
+  }
+
+  if (activeChain.value === Chains.SOLANA && wallet.connected.value) {
+    await store.dispatch(SharedTypes.DISCONNECT_WALLET_ACTION);
+    await wallet.disconnect();
+  }
+
+  await store.dispatch(SharedTypes.SWITCH_CHAIN_ACTION, item.id as Chains);
 };
 
 const toggleMenu = () => {

src/components/app-header/index.vue

@@ -18,11 +18,19 @@
         >
           <span>Stake Solana</span>
         </router-link>
+        <router-link 
+          :to="{ name: 'stake' }" 
+          class="stake"
+          :class="{ disabled: !isStakeRootstockEnabled }"
+          :disabled="!isStakeRootstockEnabled"
+        >
+          <span>Stake Rootstock</span>
+        </router-link>
         <router-link 
           :to="{ name: 'portfolio' }" 
           class="portfolio"
-          :class="{ disabled: !wallet.connected.value }"
-          :disabled="!wallet.connected.value"
+          :class="{ disabled: !isPortfolioEnabled }"
+          :disabled="!isPortfolioEnabled"
         >
           <portfolio-icon />
           <span>My staking portfolio</span>
@@ -61,10 +69,53 @@
 import HomeIcon from "@/icons/menu/home-icon.vue";
 import PortfolioIcon from "@/icons/menu/portfolio-icon.vue";
 import BuyIcon from "@/icons/menu/buy-icon.vue";
+import { computed, ref, watch } from "vue";
+import { useStore } from "vuex";
 import { useWallet } from "solana-wallets-vue";
 import { openContactSupport } from "@/utils/browser";
+import { SharedTypes } from "@/store/shared/consts";
+import { Chains } from "@/core/interfaces";
+import { ROOTSTOCK_STRIF_TOKEN_ADDRESS, STRIF_TOKEN_ABI } from "@/core/constants";
+import EvmWalletService from "@/core/services/evmWalletService";
+import { ethers } from "ethers";
 
 const wallet = useWallet();
+const store = useStore();
+const evmWalletService = EvmWalletService.getInstance();
+const rootstockStakedBalance = ref(0);
+const chain = computed(() => store.getters[SharedTypes.CHAIN_GETTER]);
+const account = computed(() => store.getters[SharedTypes.WALLET_ACCOUNT_GETTER]);
+const rootstockBalance = computed(() => store.getters[SharedTypes.WALLET_BALANCE_GETTER]);
+const isPortfolioEnabled = computed(() => {
+  if (chain.value === Chains.ROOTSTOCK) {
+    return rootstockStakedBalance.value > 0;
+  }
+  return wallet.connected.value;
+});
+const isStakeRootstockEnabled = computed(() => {
+  return chain.value === Chains.ROOTSTOCK && !!account.value?.address && rootstockBalance.value > 0;
+});
+
+watch([chain, account], async () => {
+  if (chain.value !== Chains.ROOTSTOCK || !account.value?.address) {
+    rootstockStakedBalance.value = 0;
+    return;
+  }
+
+  try {
+    const provider = evmWalletService.getRpcProvider();
+    if (!provider) {
+      rootstockStakedBalance.value = 0;
+      return;
+    }
+
+    const stRifContract = new ethers.Contract(ROOTSTOCK_STRIF_TOKEN_ADDRESS, STRIF_TOKEN_ABI, provider);
+    const balance = await stRifContract.balanceOf(account.value.address);
+    rootstockStakedBalance.value = Number(ethers.utils.formatEther(balance));
+  } catch {
+    rootstockStakedBalance.value = 0;
+  }
+}, { immediate: true });
 
 defineProps({
   isToggleMenu: {

src/components/app-menu/index.vue

@@ -1,16 +1,16 @@
 import { makeRequest } from "@/utils/request";
-import { SolanaPriceResponse, SolanaPriceRequest } from "../interfaces/price";
+import { TokenMarketDataResponse, TokenMarketDataRequest } from "../interfaces/price";
 
-export async function getSolanaPrice(): Promise<SolanaPriceResponse> {
-  return makeRequest<SolanaPriceRequest, SolanaPriceResponse>({
+export async function getTokenMarketData(tokenId: string): Promise<TokenMarketDataResponse> {
+  return makeRequest<TokenMarketDataRequest, TokenMarketDataResponse>({
     route: "",
     externalLink: `https://api-v3.ethvm.dev/`,
     method: "POST",
     body: {
       operationName: null,
       variables: {},
       query:
-        '{\n  getCoinGeckoTokenMarketDataByIds(coinGeckoTokenIds: ["solana"]) {\n    id\n    symbol\n    name\n    image\n    market_cap\n    market_cap_rank\n    high_24h\n    low_24h\n    price_change_24h\n    price_change_percentage_24h\n    sparkline_in_24h {\n      price\n    }\n    price_change_percentage_24h_in_currency\n    current_price\n  }\n}\n',
+        `{\n  getCoinGeckoTokenMarketDataByIds(coinGeckoTokenIds: ["${tokenId}"]) {\n    id\n    symbol\n    name\n    image\n    market_cap\n    market_cap_rank\n    high_24h\n    low_24h\n    price_change_24h\n    price_change_percentage_24h\n    sparkline_in_24h {\n      price\n    }\n    price_change_percentage_24h_in_currency\n    current_price\n  }\n}\n`,
     },
   });
 }

src/core/api/price.ts

@@ -15,6 +15,7 @@ import {
   GetValidatorSummaryResponse,
   GetDelegatorApyResponse,
   getDelegatorRewardsResponse,
+  RootstockAbiResponse,
 } from "@/core/interfaces";
 import { makeRequest } from "@/utils/request";
 import { P2P_VALIDATOR } from "@/core/constants"
@@ -142,3 +143,11 @@ export async function getDelegatorApy(
     method: "GET",
   });
 };
+
+export async function getRootstockAbi(): Promise<RootstockAbiResponse> {
+  return makeRequest<void, RootstockAbiResponse>({
+    route: ``,
+    externalLink: "https://metrics-api.rootstockcollective.xyz/api/rc-abi",
+    method: "GET",
+  });
+};