wally-dice/web/components/menu/Wallet.vue

<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>