From ae09bbedb3673163e3af26a417c71589dbdd9d0c Mon Sep 17 00:00:00 2001 From: imhson Date: Fri, 22 Mar 2024 17:35:20 +0700 Subject: [PATCH] update --- app/(private)/jackpot/page.tsx | 445 ++++++++++++++++++++------------- app/(private)/page.tsx | 2 +- services/index.ts | 9 + 3 files changed, 288 insertions(+), 168 deletions(-) diff --git a/app/(private)/jackpot/page.tsx b/app/(private)/jackpot/page.tsx index e2a57f5..81dd88f 100644 --- a/app/(private)/jackpot/page.tsx +++ b/app/(private)/jackpot/page.tsx @@ -8,16 +8,19 @@ import IconClose from '@/assets/ic_close.svg' import FilledButton from '@/components/button/filled' import Gem from '@/components/gem' import GemWithFrame from '@/components/gem/gemWithFrame' +import NoBackgroundModal from '@/components/modal/giftModal' import { Bangkok, Context } from '@/provider' -import { GET_JACKPOT, wish } from '@/services' +import { GET_JACKPOT, GET_USER_JACKPOT, wish } from '@/services' import { useQuery } from '@apollo/client' -import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react' +import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, useDisclosure } from '@nextui-org/react' import { Map } from 'immutable' import moment from 'moment' import Image from 'next/image' import { useContext, useEffect, useMemo, useState } from 'react' -import Countdown from 'react-countdown' import { toast } from 'react-toastify' +import GoldRing from '../assets/gold-ring.png' +import getConfig from 'next/config' +import { useChain } from '@cosmos-kit/react' const initList = { w1: 0, w2: 0, @@ -50,7 +53,9 @@ const initList = { shield: 0, } export default function Page() { - const { assets, lastAssetsUpdate, fetchAssets } = useContext(Context) + const config = getConfig() + const { address, chain, getSigningCosmWasmClient } = useChain(config.COSMOSKIT_CHAINKEY) + const { assets, lastAssetsUpdate, fetchAssets, account } = useContext(Context) const [selectedColorKey, setSelectedColorKey] = useState(new Set(['all_colors'])) const selectedColorValue = useMemo( () => Array.from(selectedColorKey).join(', ').replaceAll('_', ' '), @@ -62,10 +67,17 @@ export default function Page() { [selectedRankKey] ) const [selectedGems, setSelectedGems] = useState<(string | undefined)[]>([]) + const [submittedGems, setSubmittedGems] = useState<(string | undefined)[]>([]) const [gems, setGems] = useState(Map(initList)) const { data: jackpotData } = useQuery(GET_JACKPOT) + const { data: userJackpotData } = useQuery(GET_USER_JACKPOT, { + variables: { + user_id: account?.id, + }, + }) const [loading, setLoading] = useState(false) - + const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure() + const submissionDisclosure = useDisclosure() useEffect(() => { const gemList = assets.reduce( (total, current) => { @@ -102,14 +114,38 @@ export default function Page() { try { setLoading(true) const tokens = [] + const msgs = [] for (let i = 0; i < jackpotData?.jackpots?.[0]?.slot; i++) { const asset = assets.find((asset) => asset.type == selectedGems[i]) tokens.push({ token_id: asset?.token_id as string, contract_address: asset?.cw721_contract.smart_contract.address as string, }) + msgs.push({ + contract: asset?.cw721_contract.smart_contract.address, + msg: { + approve: { + spender: config.OPERATOR_CONTRACT_ADDRESS, + token_id: asset?.token_id, + }, + }, + }) } + const client = await getSigningCosmWasmClient() + await client.executeMultiple( + address as string, + msgs.map((msg) => ({ + contractAddress: msg.contract as string, + msg: msg.msg, + })), + 'auto' + ) const res = await wish(tokens) + if (res.data) { + setSubmittedGems(selectedGems) + setSelectedGems([]) + onOpen() + } setLoading(false) } catch (error: any) { setLoading(false) @@ -121,180 +157,255 @@ export default function Page() { } return ( -
-
- -
-
- + <> + +
+
Your wish has been sent to the Dragon
+
+ The Dragon will respond to your +
wishes at 12 am, 24th Mar 2024
-
-
- -
-
- {`The Dragon will appear and fulfill your wish at ${moment() - .add(14, 'd') - .format('h a, Do MMM YYYY')} (UTC +7)`} -
- {!!jackpotData?.jackpots?.[0] && ( -
- {[...(Array(jackpotData.jackpots?.[0]?.slot).keys() as any)].map((index) => ( -
- - {selectedGems[index] && ( -
{ - const newData = [...selectedGems] - newData[index] = undefined - setSelectedGems(newData) - }}> -
-
- +
+ {submittedGems.map((gem, index) => ( +
+ +
+ +
+
+ ))} +
+
+ +
+
+ + +
+
Submission history
+
+ {userJackpotData?.jackpot_users.map((d: any) => ( +
+
+ {moment(d.updated_at).format('h a, Do MMM YYYY')} +
+
+ {d.purchased_line.split('-').map((d: any) => ( + + ))} +
+
+ ))} +
+
+ +
+
+ +
+
+ +
+ {!!jackpotData?.jackpots && !!userJackpotData?.jackpot_users && ( + <> +
+ +
+
+
+ +
+
+ {`The Dragon will appear and fulfill your wish at ${moment() + .add(14, 'd') + .format('h a, Do MMM YYYY')} (UTC +7)`} +
+ +
+ {[...(Array(jackpotData.jackpots?.[0]?.slot).keys() as any)].map((index) => ( +
+ + {selectedGems[index] && ( +
{ + const newData = [...selectedGems] + newData[index] = undefined + setSelectedGems(newData) + }}> +
+
+ +
+
+
-
- + )}
- )} + ))}
- ))} -
+ + g).length != jackpotData?.jackpots?.[0]?.slot} + onClick={wishHandler} + isLoading={loading}> + Wish + +
+ )} - g).length != jackpotData.jackpots?.[0]?.slot} - onClick={wishHandler} - isLoading={loading}> - Wish -
-
-
- -
-
Your Gems
-
Select gems here to wish
-
-
- - -
- {selectedColorValue} - - - -
- - - All colors - White - Blue - Gold - Red - - + +
+ +
+
+
Your Gems
+ +
+ Submission History + + + + +
+
-
- - -
- {selectedRankValue} - - - -
- - - All rank - 1-Star - 2-Star - 3-Star - 4-Star - 5-Star - 6-Star - 7-Star - - +
Select gems here to wish
+
+
+ + +
+ {selectedColorValue} + + + +
+ + + All colors + White + Blue + Gold + Red + + +
+
+ + +
+ {selectedRankValue} + + + +
+ + + All rank + 1-Star + 2-Star + 3-Star + 4-Star + 5-Star + 6-Star + 7-Star + + +
-
-
- {['w', 'b', 'g', 'r'] - .filter((c) => Array.from(selectedColorKey)[0] == 'all_colors' || Array.from(selectedColorKey)[0][0] == c) - .map((color: string) => { - return ['1', '2', '3', '4', '5', '6', '7'] - .filter((s) => Array.from(selectedRankKey)[0] == 'all_rank' || Array.from(selectedRankKey)[0][0] == s) - .map((star: string) => { - if (gems.get(color + star) != 0) { - return ( -
addGemHandler(color + star)}> -
- +
+ {['w', 'b', 'g', 'r'] + .filter( + (c) => Array.from(selectedColorKey)[0] == 'all_colors' || Array.from(selectedColorKey)[0][0] == c + ) + .map((color: string) => { + return ['1', '2', '3', '4', '5', '6', '7'] + .filter( + (s) => Array.from(selectedRankKey)[0] == 'all_rank' || Array.from(selectedRankKey)[0][0] == s + ) + .map((star: string) => { + if (gems.get(color + star) != 0) { + return ( +
addGemHandler(color + star)}> +
+ +
+
{gems.get(color + star)}
-
{gems.get(color + star)}
-
- ) - } - }) - })} -
-
- {lastAssetsUpdate ? `Last update: ${moment(lastAssetsUpdate).format('HH:mm DD/MM/yyyy')}.` : ''} - - - Refresh ⟳ - - + ) + } + }) + })} +
+
+ {lastAssetsUpdate ? `Last update: ${moment(lastAssetsUpdate).format('HH:mm DD/MM/yyyy')}.` : ''} + + + Refresh ⟳ + + +
-
+ ) } diff --git a/app/(private)/page.tsx b/app/(private)/page.tsx index 13b3f1a..5e2a9c3 100644 --- a/app/(private)/page.tsx +++ b/app/(private)/page.tsx @@ -397,7 +397,7 @@ export default function Home() { assets.filter((asset) => asset.type == 'shield').length ? '' : 'opacity-50 pointer-events-none' }`} onClick={() => - assets.filter((asset) => asset.type == 'shield').length ? setUseShield(!useShield) : undefined + assets.filter((asset) => asset.type == 'shield').length && !loading ? setUseShield(!useShield) : undefined }>
Activate the Eternal Shield
diff --git a/services/index.ts b/services/index.ts index df861d6..a37e2f0 100644 --- a/services/index.ts +++ b/services/index.ts @@ -93,6 +93,15 @@ export const GET_JACKPOT = gql` } } ` +export const GET_USER_JACKPOT = gql` + query GET_USER_JACKPOT($user_id: Int) { + jackpot_users(where: { user_id: { _eq: $user_id } }) { + jackpot_id + purchased_line + id + } + } +` export const GET_USER_CODE = (id: string) => gql` query GET_USER_CODE { task_referrals(where: { referee_id: { _eq: ${id} } }) {