Feature/send page (#5)

* feat: Breakdown balance when clicking on account in account page.

* fix: Display correct staked and bonded values

* Add countdown to vested unlock

* feat: Load accounts and balance info on send page

* fix: wip market price to display usd value

* Price loading on Accounts and Send pages

* Remove unused files

* fix: fee calculation and refactor some components and types

* Send values to verify route

* feature: check existential deposit and display warning accordingly

* fix: name of local storage, order of value setting

* fix: fix mainnet endpoints

* fix: fee symbol changes on network change

* feat: account balances on send screen

* fix: dot decimals

* fix: remove balances from verify send page

* fix: send button goes to correct send account page

* fix: top send button goes to send screen

Co-authored-by: eliasmpw <eliasmpw@hotmail.com>

package.json

@@ -12,15 +12,20 @@
     "publish": "git push origin `git subtree split --prefix dist main`:gh-pages --force"
   },
   "dependencies": {
+    "@chenfengyuan/vue-countdown": "2",
     "@polkadot/api": "^9.4.1",
     "@substrate/connect": "^0.7.13",
     "@vueuse/core": "^9.1.1",
+    "bignumber.js": "^9.1.0",
+    "localforage": "^1.10.0",
     "moment": "^2.29.4",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3",
     "web3-utils": "^1.8.0"
   },
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@polkadot/api-derive": "^9.4.1",
     "@polkadot/extension-inject": "^0.44.6",
     "@polkadot/keyring": "^10.1.8",
     "@polkadot/types": "^9.4.1",

src/components/amount-input/index.vue

@@ -2,28 +2,31 @@
   <div class="amount-input" :class="{ error: isError }">
     <img :src="token.image" class="amount-input__icon" />
     <base-button
+      :stroke="true"
       class="amount-input__max"
+      :class="{ error: !hasEnoughBalance }"
       title="Max"
-      :stroke="true"
       :small="true"
+      @click="setMaxValue"
     />
     <div class="amount-input__wrapper">
       <input
         ref="inputRef"
-        v-model="textValue"
-        type="text"
+        v-model="amountValue"
+        type="number"
         class="amount-input__input"
-        placeholder="0 DOT"
+        placeholder="0"
+        :class="{ error: !hasEnoughBalance }"
         :style="{ width: size + 'ch' }"
       />
       <span v-show="props.value != '0'" @click="focus">{{ token.symbol }}</span>
     </div>
 
-    <p v-if="props.value == '0'" class="amount-input__fiat">
-      {{ $filters.currencyFormat(0, "USD") }}
+    <p v-if="props.value" class="amount-input__fiat">
+      ~{{ $filters.currencyFormat(amountInFiat, "USD") }}
     </p>
     <p v-else class="amount-input__fiat">
-      ~{{ $filters.currencyFormat(3.1, "USD") }}
+      {{ $filters.currencyFormat(0, "USD") }}
     </p>
   </div>
 </template>
@@ -32,36 +35,53 @@
 import { PropType, computed, ref, ComponentPublicInstance } from "vue";
 import { Token } from "@/types/token";
 import BaseButton from "@/components/base-button/index.vue";
+import { nativeToken } from "@/stores";
+import BigNumber from "bignumber.js";
 
 const inputRef = ref<ComponentPublicInstance<HTMLInputElement>>();
 defineExpose({ inputRef });
 
 const props = defineProps({
   token: {
     type: Object as PropType<Token>,
-    default: null,
+    default: nativeToken,
+  },
+  hasEnoughBalance: {
+    type: Boolean,
+    default: false,
   },
   isError: {
     type: Boolean,
     default: false,
   },
   value: {
     type: String,
-    default: () => {
-      return "";
-    },
+    default: "",
+  },
+  maxValue: {
+    type: Object as PropType<BigNumber>,
+    default: new BigNumber(0),
   },
 });
 
 const emit = defineEmits(["update:amount"]);
 
-const textValue = computed({
-  get: () => (props.value != "0" ? props.value.replace(/[^0-9.-]+/g, "") : ""),
-  set: (value) => emit("update:amount", value.replace(/[^0-9.-]+/g, "")),
-});
+const setMaxValue = () => {
+  emit("update:amount", props.maxValue?.toString() || "0");
+};
 
+const amountValue = computed({
+  get: () => props.value,
+  set: (value) => {
+    emit("update:amount", value ? new BigNumber(value).toFixed() : "");
+  },
+});
 const size = computed(() => {
-  return textValue.value.length == 0 ? 70 : textValue.value.length;
+  return amountValue.value.length == 0 ? 70 : amountValue.value.length;
+});
+
+const amountInFiat = computed(() => {
+  return new BigNumber(props.value || 0).times(props.token.price);
 });
 
 const focus = () => {
@@ -114,6 +134,15 @@ const focus = () => {
     margin-bottom: 4px;
     max-width: 100%;
 
+    &[type="number"]::-webkit-outer-spin-button,
+    &[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+
     &::placeholder {
       color: @tertiaryLabel;
     }
@@ -144,5 +173,9 @@ const focus = () => {
     color: @tertiaryLabel;
     margin: 0;
   }
+
+  .error {
+    color: @error !important;
+  }
 }
 </style>

src/components/fee-info/index.vue

@@ -1,14 +1,34 @@
 <template>
   <div class="fee-info">
     <p class="fee-info__title">Network fee:</p>
-    <p class="fee-info__fiat">{{ $filters.currencyFormat(0.34, "USD") }}</p>
+    <p class="fee-info__fiat">
+      {{ $filters.currencyFormat(fee.fiatValue, fee.fiatSymbol) }}
+    </p>
     <p class="fee-info__amount">
-      {{ $filters.cryptoCurrencyFormat(0.037) }} <span>dot</span>
+      {{ $filters.cryptoCurrencyFormat(fee.nativeValue) }}
+      <span>{{ nativeToken.symbol }}</span>
     </p>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { GasFeeInfo } from "@/types/transaction";
+import BigNumber from "bignumber.js";
+import { PropType } from "vue";
+import { nativeToken } from "@/stores";
+
+defineProps({
+  fee: {
+    type: Object as PropType<GasFeeInfo>,
+    default: () => ({
+      nativeValue: new BigNumber(0),
+      fiatValue: new BigNumber(0),
+      nativeSymbol: "dot",
+      fiatSymbol: "USD",
+    }),
+  },
+});
+</script>
 
 <style lang="less" scoped>
 @import "@/assets/styles/theme.less";

src/components/search-account-input/index.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="search-account-input">
+  <div ref="container" class="search-account-input">
     <div class="search-account-input__info">
-      <img v-if="account" :src="account.image" />
+      <img v-if="account?.image" :src="account.image" />
       <div v-else class="search-account-input__info-icon"></div>
       <div class="search-account-input__info-name">
         <h5 class="search-account-input__title">To</h5>
         <input
           ref="inputRef"
+          v-model="addressValue"
           type="text"
           class="search-account-input__input"
           :class="{ sized: size != 1 && !isFocus }"
           placeholder="Search or paste Polkadot address"
-          :value="value"
+          :style="{ color: !isAddress ? 'red' : 'black' }"
           :size="size"
           @focus="changeFocus"
           @blur="changeFocus"
@@ -42,9 +43,12 @@ import AccountSelect from "@/components/account-select/index.vue";
 import { Account } from "@/types/account";
 import { PropType, ref, computed, ComponentPublicInstance } from "vue";
 import { onClickOutside } from "@vueuse/core";
-
+import { formatAddress } from "@/utils/filters";
+import createIcon from "@/libs/polkadot-identicon";
+import { encodeSubstrateAddress } from "@/utils";
 const isOpenDropdown = ref<boolean>(false);
 const isFocus = ref<boolean>(false);
+const container = ref(null);
 const dropdown = ref(null);
 const inputRef = ref<ComponentPublicInstance<HTMLInputElement>>();
 defineExpose({ inputRef });
@@ -68,10 +72,41 @@ const props = defineProps({
   },
 });
 
-const value = computed(() => {
-  if (props.account == null) return null;
-  if (isFocus.value) return props.account.address;
-  return props.account.name ? props.account.name : props.account.address;
+const addressValue = computed({
+  get: () => {
+    try {
+      const auxAddress = props.account?.address || "";
+      if (isFocus.value && isAddress.value) {
+        return auxAddress;
+      } else if (isAddress.value) {
+        return props.account?.name ? props.account.name : auxAddress;
+      }
+
+      return auxAddress;
+    } catch {
+      return props.account?.address || "";
+    }
+  },
+  set: (value) => {
+    if (value) {
+      const isValidAddress = encodeSubstrateAddress(value);
+      const formatted = isValidAddress ? formatAddress(value) : value;
+      const name =
+        props.accounts.find((item) => item.address === formatted)?.name || "";
+
+      emit("update:select", {
+        id: Number.MAX_SAFE_INTEGER,
+        name,
+        address: formatted,
+        image: isValidAddress ? createIcon(value) : undefined,
+        isLedger: false,
+      });
+    }
+  },
+});
+
+const isAddress = computed(() => {
+  return !!encodeSubstrateAddress(props.account?.address);
 });
 
 const size = computed(() => {
@@ -101,7 +136,7 @@ const focus = () => {
   if (inputRef.value) inputRef.value.focus();
 };
 
-onClickOutside(dropdown, () => {
+onClickOutside(container, () => {
   isFocus.value = false;
   closeAccounts();
 });

src/components/select-account-input/index.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="select-account-input">
     <a ref="toggle" class="select-account-input__info" @click="toggleAccounts">
-      <img v-if="account.image" :src="account.image" />
+      <img v-if="account?.image" :src="account.image" />
       <div v-else class="select-account-input__info-icon"></div>
       <div class="select-account-input__info-name">
         <h5 class="select-account-input__title">{{ title }}</h5>
-        <p>
-          {{ account.name }}
+        <p v-if="account">
+          {{ account?.name }}
           <span>
-            {{ $filters.replaceWithEllipsis(account.address, 6, 6) }}
+            {{ $filters.replaceWithEllipsis(account?.address, 6, 6) }}
           </span>
-          <span v-if="isAmount">
-            {{ $filters.cryptoCurrencyFormat(15.9) }} <span>dot</span>
+          <span v-if="isAmount && availableBalance">
+            {{ $filters.cryptoCurrencyFormat(availableBalance) }}
+            <span>dot</span>
           </span>
         </p>
+        <p v-else>Select an account to send from</p>
       </div>
       <chevron-small-down />
     </a>
@@ -32,8 +34,9 @@ import ChevronSmallDown from "@/icons/common/chevron-small-down.vue";
 import DropdownWrapper from "@/components/dropdown-wrapper/index.vue";
 import AccountSelect from "@/components/account-select/index.vue";
 import { Account } from "@/types/account";
-import { PropType, ref } from "vue";
+import { PropType, ref, computed } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import { nativeBalances } from "@/stores";
 
 const isOpenDropdown = ref<boolean>(false);
 const dropdown = ref(null);
@@ -43,7 +46,7 @@ const emit = defineEmits<{
   (e: "update:select", account: Account): void;
 }>();
 
-defineProps({
+const props = defineProps({
   account: {
     type: Object as PropType<Account>,
     default: null,
@@ -62,6 +65,16 @@ defineProps({
   },
 });
 
+const availableBalance = computed(() => {
+  if (props.account) {
+    const balance = nativeBalances.value[props.account.address];
+
+    if (balance) return balance.available.toString();
+  }
+
+  return null;
+});
+
 const toggleAccounts = () => {
   isOpenDropdown.value = !isOpenDropdown.value;
 };

src/components/wallet-select/index.vue

@@ -74,7 +74,7 @@ const connectToWallet = async (wallet: WalletItem) => {
       isLedger: false,
     }));
 
-  return accounts;
+  return accounts.value;
 };
 </script>