Merge branch 'feature/FRONT-362-refactor-vue-example' into develop

neonlabsorg · Jan 30, 2025 · 628dd66 · 628dd66
2 parents 6b4ebb5 + 6b1b42d
commit 628dd66
Show file tree

Hide file tree

Showing 8 changed files with 343 additions and 232 deletions.
diff --git a/examples/neon-transfer-vue/src/App.vue b/examples/neon-transfer-vue/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted } from 'vue';
+import { onBeforeMount, onMounted, toRaw } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useFormStore, useTransactionStore, useWalletsStore, useWeb3Store } from '@/stores';
 import { networkUrls, stringShort } from '@/utils';
@@ -26,11 +26,7 @@ const {
   tokenList
 } = storeToRefs(formStore);
 
-const {
-  signature,
-  solanaSignature,
-  neonSignature
-} = storeToRefs(transactionStore);
+const { signature, solanaSignature, neonSignature } = storeToRefs(transactionStore);
 
 const { initNeonWallet } = useNeonWallet();
 
@@ -40,16 +36,23 @@ const handleEvmNetworkSelect = (event: any): any => {
   formStore.setTokenList();
   formStore.setCurrentSplToken('');
   transactionStore.setSignature({});
-  walletsStore.setTokenBalance();
 };
 const handleTransferDirection = () => {
   const isSolanaDirection = transferDirection.value.direction === 'solana';
   const changeDirection: TransferDirection = {
     direction: isSolanaDirection ? 'neon' : 'solana',
-    from: isSolanaDirection ? neonWallet.value.address.toString() : solanaWallet.value.publicKey.toBase58(),
-    to: isSolanaDirection ? solanaWallet.value.publicKey.toBase58() : neonWallet.value.address.toString()
+    from: isSolanaDirection
+      ? neonWallet.value.address.toString()
+      : solanaWallet.value.publicKey.toBase58(),
+    to: isSolanaDirection
+      ? solanaWallet.value.publicKey.toBase58()
+      : neonWallet.value.address.toString()
   };
-  formStore.setTrtansferDirection(changeDirection);
+  formStore.setTransferDirection(changeDirection);
+
+  if (formStore.currentSplToken) {
+    walletsStore.getTokenBalance(formStore.currentSplToken);
+  }
   transactionStore.setSignature({});
 };
 const handleSelect = (event: Event) => {
@@ -80,7 +83,7 @@ onBeforeMount(async () => {
 
 onMounted(() => {
   initNeonWallet();
-})
+});
 </script>
 
 <template>
@@ -91,7 +94,7 @@ onMounted(() => {
     <h1 className="title-1">
       <i className="logo"></i>
       <div className="flex flex-row items-center justify-between w-full">
-        <select @change='handleEvmNetworkSelect' className="evm-select" :disabled="isTransfering">
+        <select @change="handleEvmNetworkSelect" className="evm-select" :disabled="isTransfering">
           <option v-for="url in networkUrls" :key="url.id" :value="url.id">
             {{ url.token }} transfer
           </option>
@@ -100,7 +103,9 @@ onMounted(() => {
       </div>
       <a
         href="https://github.com/neonlabsorg/neon-client-transfer/tree/master/examples/neon-transfer-react"
-        target="_blank" rel="noreferrer">
+        target="_blank"
+        rel="noreferrer"
+      >
         <i className="github"></i>
       </a>
     </h1>
@@ -112,24 +117,28 @@ onMounted(() => {
               <span>From</span>
               <span>{{ directionBalance('from') }}</span>
             </label>
-            <input :value='transferDirection.from' className="form-input text-ellipsis" disabled />
+            <input :value="transferDirection.from" className="form-input text-ellipsis" disabled />
           </div>
           <div>
-            <button className="icon-button" type="button" @click='handleTransferDirection'></button>
+            <button className="icon-button" type="button" @click="handleTransferDirection"></button>
           </div>
           <div>
             <label htmlFor="select" className="form-label flax flex-row justify-between">
               <span>To</span>
               <span>{{ directionBalance('to') }}</span>
             </label>
-            <input :value='transferDirection.to' className="form-input text-ellipsis" disabled />
+            <input :value="transferDirection.to" className="form-input text-ellipsis" disabled />
           </div>
         </div>
       </div>
       <div className="form-field">
         <label htmlFor="select" className="form-label">Select token</label>
-        <select :value="currentSplToken?.symbol" @change="handleSelect" className="form-select"
-                :disabled="isTransfering">
+        <select
+          :value="currentSplToken?.symbol"
+          @change="handleSelect"
+          className="form-select"
+          :disabled="isTransfering"
+        >
           <option value="" disabled>Select Token</option>
           <option v-for="token in tokenList" :value="token.symbol" :key="token.name">
             {{ `${token.symbol}` }}
@@ -141,21 +150,34 @@ onMounted(() => {
           <span>Amount</span>
           <span>{{ totalAmount }}</span>
         </label>
-        <input type="number" :value="inputAmount" @input="handleAmountChange" className="form-input"
-               placeholder="0" />
+        <input
+          type="number"
+          :value="inputAmount"
+          @input="handleAmountChange"
+          className="form-input"
+          placeholder="0"
+        />
       </div>
-      <button type="button" className="form-button" @click="handleSubmit"
-              :disabled="isSubmitDisabled">
+      <button
+        type="button"
+        className="form-button"
+        @click="handleSubmit"
+        :disabled="isSubmitDisabled"
+      >
         <span v-if="!isSubmitting">Transfer</span>
         <span v-if="isSubmitting" className="icon-loader"></span>
       </button>
     </form>
-    <div v-show="signature.solana || signature.neon"
-         className="flex flex-col gap-[10px] p-[12px] bg-[#282230] rounded-[12px] truncate">
-      <a v-show="signature.solana" :href="solanaSignature" target="_blank"
-         rel="noreferrer">Solana: {{ stringShort(signature.solana, 40) }}</a>
-      <a v-show="signature.neon" :href="neonSignature" target="_blank"
-         rel="noreferrer">Neon: {{ stringShort(signature.neon, 40) }}</a>
+    <div
+      v-show="signature.solana || signature.neon"
+      className="flex flex-col gap-[10px] p-[12px] bg-[#282230] rounded-[12px] truncate"
+    >
+      <a v-show="signature.solana" :href="solanaSignature" target="_blank" rel="noreferrer"
+        >Solana: {{ stringShort(signature.solana, 40) }}</a
+      >
+      <a v-show="signature.neon" :href="neonSignature" target="_blank" rel="noreferrer"
+        >Neon: {{ stringShort(signature.neon, 40) }}</a
+      >
     </div>
   </div>
 </template>
diff --git a/examples/neon-transfer-vue/src/composables/useNeonWallet.ts b/examples/neon-transfer-vue/src/composables/useNeonWallet.ts
@@ -11,7 +11,7 @@ export default () => {
     const ethersProvider = new JsonRpcProvider(web3Store.networkUrl.neonProxy);
     neonWallet = new Wallet(NEON_PRIVATE, ethersProvider); //This helps to avoid wrapped in Proxy wallet props
     walletStore.setNeonWallet(neonWallet);
-  }
+  };
 
-  return { initNeonWallet }
-}
+  return { initNeonWallet };
+};