123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <script setup>
- /* Import modules. */
- import numeral from 'numeral'
- import { reverseHex } from '@nexajs/utils'
- /* Initialize stores. */
- import { useProfileStore } from '@/stores/profile'
- import { useWalletStore } from '@/stores/wallet'
- const Profile = useProfileStore()
- const Wallet = useWalletStore()
- const isShowingDeposit = ref(false)
- const isShowingHistory = ref(false)
- const isShowingCashout = ref(false)
- const displayBalance = computed(() => {
- /* Validate asset. */
- if (!Wallet.asset || !Wallet.asset.amount) {
- return '0.00'
- }
- let decimalValue
- let bigIntValue
- if (Wallet.asset.group === '0') {
- decimalValue = Wallet.asset.satoshis * BigInt(1e4)
- } else {
- decimalValue = Wallet.asset.amount * BigInt(1e4)
- }
- if (Wallet.asset.decimal_places > 0) {
- bigIntValue = decimalValue / BigInt(10**Wallet.asset.decimal_places)
- } else {
- bigIntValue = decimalValue
- }
- return numeral(parseFloat(bigIntValue) / 1e4).format('0,0[.]00[0000]')
- })
- const displayBalanceUsd = computed(() => {
- /* Validate asset. */
- if (!Wallet.asset || !Wallet.asset.fiat || !Wallet.asset.fiat.USD) {
- return '0.00'
- }
- /* Initialize locals. */
- let balanceUsd
- /* Set balance. */
- balanceUsd = Wallet.asset.fiat.USD || 0.00
- /* Return formatted value. */
- return numeral(balanceUsd).format('$0,0.00[0000]')
- })
- // const displayBalance = computed(() => {
- // if (!Wallet.coins) {
- // return '0.00'
- // }
- //
- // const satoshis = Wallet.coins.reduce(
- // (totalSatoshis, coin) => (totalSatoshis + coin.satoshis), BigInt(0)
- // )
- //
- // /* Calculate (NEX) total. */
- // const nex = (parseInt(satoshis) / 100.0)
- //
- // /* Return formatted value. */
- // return numeral(nex).format('0,0.00')
- // })
- // const displayBalanceUsd = computed(() => {
- // if (!Wallet.coins) {
- // return '0.00'
- // }
- //
- // const satoshis = Wallet.coins.reduce(
- // (totalSatoshis, coin) => (totalSatoshis + coin.satoshis), BigInt(0)
- // )
- //
- // /* Calculate (NEX) total. */
- // const mex = (parseInt(satoshis) / 10**8)
- //
- // const mexUsd = mex * System.usd
- //
- // /* Return formatted value. */
- // return numeral(mexUsd).format('$0,0.00')
- // })
- /**
- * Set Tab
- */
- const setTab = (_tab) => {
- /* Clear all tabs. */
- isShowingDeposit.value = false
- isShowingHistory.value = false
- isShowingCashout.value = false
- if (_tab === 'deposit') {
- isShowingDeposit.value = true
- }
- if (_tab === 'history') {
- isShowingHistory.value = true
- }
- if (_tab === 'withdraw') {
- isShowingCashout.value = true
- }
- }
- onMounted(() => {
- setTab('deposit')
- })
- // onBeforeUnmount(() => {
- // console.log('Before Unmount!')
- // })
- </script>
- <template>
- <main v-if="!Wallet.isReady" class="flex flex-col gap-5">
- <p class="px-3 py-2 bg-yellow-100 text-base font-medium border-2 border-yellow-200 rounded-lg shadow-md">
- Welcome to your Wally Dice game wallet.
- Click the button below to create a new wallet and begin playing.
- </p>
- <button @click="Wallet.createWallet" class="px-3 py-2 text-2xl text-blue-100 font-medium bg-blue-500 border-2 border-blue-700 rounded-lg shadow hover:bg-blue-400">
- Create New Wallet
- </button>
- </main>
- <main v-else class="">
- <section class="px-5 py-3 bg-yellow-200 border-2 border-yellow-400 rounded-lg shadow">
- <h3 class="text-sm text-yellow-700 font-medium uppercase">
- Available Balance
- </h3>
- <h2 class="text-3xl font-medium">
- {{displayBalance}}
- {{displayBalanceUsd}}
- </h2>
- </section>
- <div class="mt-10">
- <div class="block">
- <nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
- <!-- Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700" -->
- <button @click="setTab('deposit')" class="bg-gray-700 text-gray-100 rounded-l-lg group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-lg font-medium hover:bg-gray-50 hover:text-gray-600 focus:z-10" aria-current="page">
- <span>Deposit</span>
- <span aria-hidden="true" class="bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
- </button>
- <button @click="setTab('withdraw')" class="bg-gray-700 text-gray-400 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-lg font-medium hover:bg-gray-50 hover:text-gray-600 focus:z-10">
- <span>Cashout</span>
- <span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
- </button>
- <button @click="setTab('history')" class="bg-gray-700 text-gray-400 hover:text-gray-700 rounded-r-lg group relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-lg font-medium hover:bg-gray-50 hover:text-gray-600 focus:z-10">
- <span>History</span>
- <span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
- </button>
- </nav>
- </div>
- </div>
- <div class="my-5">
- <MenuWalletDeposit v-if="isShowingDeposit" />
- <MenuWalletHistory v-if="isShowingHistory" />
- <MenuWalletCashout v-if="isShowingCashout" />
- </div>
- </main>
- </template>
|