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