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

<script setup>
/* Import modules. */
import numeral from 'numeral'

/* Initialize stores. */
import { useWalletStore } from '@/stores/wallet'
const Wallet = useWalletStore()

const cashoutAddr = ref(null)
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 {
        /* Validate amount type. */
        if (typeof Wallet.asset.amount !== 'bigint') {
            decimalValue = BigInt(0)
        } else {
            decimalValue = Wallet.asset.amount * BigInt(1e4)
        }
        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]')
})

/**
 * 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
    }
}

const createWallet = () => {
    if (!cashoutAddr.value) {
        alert('Please provide a Cashout address to continue your NEW Wallet setup.')
    } else {
        /* Set cashout address. */
        Wallet.setCashoutAddr(cashoutAddr.value)
    }

    /* Create new wallet. */
    Wallet.createWallet()
}

const init = () => {
    /* Set (starting) tab. */
    setTab('deposit')

    /* Initialize the Web wallet. */
    Wallet.init()
}

onMounted(() => {
    init()
})

onBeforeUnmount(() => {
    Wallet.cleanup()
})
</script>

<template>
    <main v-if="!Wallet.isReady" class="flex flex-col gap-5">
        <p class="px-3 py-2 bg-amber-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>

        <input
            class="w-full px-3 py-1 text-xl sm:text-2xl bg-amber-200 border-2 border-yellow-400 rounded-md shadow"
            type="text"
            v-model="cashoutAddr"
            placeholder="Enter a Cashout address"
        />

        <button @click="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-amber-100 border-2 border-yellow-400 rounded-lg shadow">
            <h3 class="text-sm text-yellow-700 font-medium tracking-widest uppercase">
                Available Balance
            </h3>

            <h2 class="flex justify-between items-end text-3xl text-amber-900 font-medium">
                <span>{{displayBalance}}</span>

                <span class="text-2xl">{{displayBalanceUsd}}</span>
            </h2>

            <div class="mt-1 pt-1 text-xs text-amber-900 border-t border-amber-400">
                <span class="tracking-wide font-medium uppercase">
                    My Cashout Address
                </span>

                <NuxtLink :to="'https://explorer.nexa.org/address/' + Wallet.cashoutAddr" target="_blank" class="block tracking-tight hover:underline">
                    {{Wallet.cashoutAddr}}
                </NuxtLink>
            </div>
        </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>