Skip to content

Commit

Permalink
update migrate
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Jun 20, 2024
1 parent 44d1de0 commit 1eafe77
Show file tree
Hide file tree
Showing 9 changed files with 456 additions and 128 deletions.
Binary file added assets/chest.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 8 additions & 36 deletions components/gem/gemWithFrame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,31 +44,31 @@ export default function GemWithFrame({
| 'w5'
| 'w6'
| 'w7'
| 'sw1'
| 'sw'
| 'b1'
| 'b2'
| 'b3'
| 'b4'
| 'b5'
| 'b6'
| 'b7'
| 'sb1'
| 'sb'
| 'g1'
| 'g2'
| 'g3'
| 'g4'
| 'g5'
| 'g6'
| 'g7'
| 'sg1'
| 'sg'
| 'r1'
| 'r2'
| 'r3'
| 'r4'
| 'r5'
| 'r6'
| 'r7'
| 'sr1'
| 'sr'
}) {
switch (type[0]) {
case 's':
Expand All @@ -78,29 +78,15 @@ export default function GemWithFrame({
<div
className={`bg-gradient-to-b from-[#CECECE] via-[#FFFFFF] to-[#B0B0B0] rounded-md w-[60px] h-[60px] p-[3px]`}>
<div className='bg-[radial-gradient(50%_50%_at_50%_50%,#6E6E6E63_0.07%,#11111163_100%)] w-full h-full grid place-items-center rounded-[4px] shadow-[0px_4px_10px_0px_rgba(0,0,0,0.25)_inset,0px_4px_4px_0px_rgba(0,0,0,0.25)_inset]'>
{(function () {
switch (type[2]) {
case '1':
return <Image src={SWhite1} alt='' className='w-14 h-14' />
default:
return <></>
}
})()}
<Image src={SWhite1} alt='' className='w-14 h-14' />
</div>
</div>
)
case 'b':
return (
<div className={`bg-gradient-to-b from-[#AFD4FF] to-[#00B8C4] rounded-md w-[60px] h-[60px] p-[3px]`}>
<div className='bg-[radial-gradient(50%_50%_at_50%_50%,#90E4FF_0.07%,#006576_100%)] w-full h-full grid place-items-center rounded-[4px] shadow-[0px_4px_10px_0px_rgba(0,0,0,0.25)_inset,0px_4px_4px_0px_rgba(0,0,0,0.25)_inset]'>
{(function () {
switch (type[2]) {
case '1':
return <Image src={SBlue1} alt='' className='w-14 h-14' />
default:
return <></>
}
})()}
<Image src={SBlue1} alt='' className='w-14 h-14' />
</div>
</div>
)
Expand All @@ -109,14 +95,7 @@ export default function GemWithFrame({
<div
className={`bg-gradient-to-b from-[#ECAB2C] via-[#FFEFC0] to-[#ECAB2C] rounded-md w-[60px] h-[60px] p-[3px]`}>
<div className='bg-[radial-gradient(50%_50%_at_50%_50%,#FBE1AF_0.07%,#956233_100%)] w-full h-full grid place-items-center rounded-[4px] shadow-[0px_4px_10px_0px_rgba(0,0,0,0.25)_inset,0px_4px_4px_0px_rgba(0,0,0,0.25)_inset]'>
{(function () {
switch (type[2]) {
case '1':
return <Image src={SGold1} alt='' className='w-14 h-14' />
default:
return <></>
}
})()}
<Image src={SGold1} alt='' className='w-14 h-14' />
</div>
</div>
)
Expand All @@ -125,14 +104,7 @@ export default function GemWithFrame({
<div
className={`bg-gradient-to-b from-[#952D33] via-[#FFB6D5] to-[#992229] rounded-md w-[60px] h-[60px] p-[3px]`}>
<div className='bg-[radial-gradient(50%_50%_at_50%_50%,#ED8183_0.07%,#663435_100%)] w-full h-full grid place-items-center rounded-[4px] shadow-[0px_4px_10px_0px_rgba(0,0,0,0.25)_inset,0px_4px_4px_0px_rgba(0,0,0,0.25)_inset]'>
{(function () {
switch (type[2]) {
case '1':
return <Image src={SRed1} alt='' className='w-14 h-14' />
default:
return <></>
}
})()}
<Image src={SRed1} alt='' className='w-14 h-14' />
</div>
</div>
)
Expand Down
193 changes: 103 additions & 90 deletions components/header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
'use client'

import Image from 'next/image'
import Logo from 'assets/logo.svg'
import Chest from '@/assets/chest.png'
import UserIcon from '@/assets/user-icon.svg'
import { useContext, useRef, useState } from 'react'
import { useClickOutside } from '@/hooks'
import Link from 'next/link'
import { Context } from '@/provider'
import { useRouter } from 'next/navigation'
import { formatNumber, shorten } from '@/utils'
import { useChain } from '@cosmos-kit/react'
import { Snippet, useDisclosure } from '@nextui-org/react'
import Logo from 'assets/logo.svg'
import getConfig from 'next/config'
import Image from 'next/image'
import Link from 'next/link'
import { useContext, useRef, useState } from 'react'
import FilledButton from '../button/filled'
import { formatNumber, shorten } from '@/utils'
import CopyToClipboard from 'react-copy-to-clipboard'
import { Snippet } from '@nextui-org/react'
import useSWR from 'swr'
import Modal from '../modal'
import MyChestModal from '../modal/myChestModal'
export function Header() {
const [open, setOpen] = useState(false)
const [showBalance, setShowBalance] = useState(false)
Expand All @@ -23,99 +23,112 @@ export function Header() {
const { disconnect: disconnectWallet, address } = useChain(config.COSMOSKIT_CHAINKEY)
const ref = useRef(null)
useClickOutside(ref, () => setOpen(false))
const { isOpen, onClose, onOpen, onOpenChange } = useDisclosure()
return (
<header ref={ref} className='fixed top-0 w-full z-50 '>
<div className='border-b border-[#550E0E] bg-[linear-gradient(126deg,rgba(85,5,5,0.30)_13.84%,rgba(40,3,3,0.00)_74.14%)] shadow-[0px_4px_20px_1px_rgba(0,0,0,0.20)] backdrop-blur-[20px]'>
<div className='flex justify-between items-center w-full max-w-7xl mx-auto px-4 py-3'>
<Link href='/'>
<Image src={Logo} alt='' className='w-[77px] sm:w-[108px]' />
</Link>
{account && (
<div onClick={() => setOpen(!open)} className='relative flex items-center gap-2 cursor-pointer'>
<Image src={UserIcon} alt='' className='w-[30px] h-[30px] sm:w-[38px] sm:h-[38px]' />
<span className='text-[#F7C983] text-sm'>{account.username}</span>
</div>
)}
</div>
</div>
{open && account && (
<div className='absolute top-full right-[max(16px,calc(50%-745px))] p-4 rounded-b-md flex flex-col gap-4 min-w-[288px] border-[#ECCB83] bg-[linear-gradient(180deg,rgba(76,50,36,0.50)_0%,rgba(80,49,38,0.50)_0.01%,rgba(166,123,81,0.50)_100%)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] backdrop-blur-[6px]'>
<div className='flex flex-col items-center gap-4'>
{address && (
<div className='grid grid-cols-[55px_1fr] gap-4 text-sm w-full'>
<div className='font-semibold'>Address</div>
<div className='flex justify-between items-center'>
<div>{shorten(address, 8, 8)}</div>
<Snippet
disableTooltip
classNames={{
base: 'bg-[transparent] text-[#fff] p-0',
pre: 'hidden',
copyButton: 'h-5',
}}>
{address}
</Snippet>
<>
<header ref={ref} className='fixed top-0 w-full z-50 '>
<div className='border-b border-[#550E0E] bg-[linear-gradient(126deg,rgba(85,5,5,0.30)_13.84%,rgba(40,3,3,0.00)_74.14%)] shadow-[0px_4px_20px_1px_rgba(0,0,0,0.20)] backdrop-blur-[20px]'>
<div className='flex justify-between items-center w-full max-w-7xl mx-auto px-4 py-3'>
<Link href='/'>
<Image src={Logo} alt='' className='w-[77px] sm:w-[108px]' />
</Link>
{account && (
<div className='flex gap-8'>
<div onClick={onOpen} className='relative flex items-center gap-3 cursor-pointer rounded py-1 px-[6px]'>
<Image src={Chest} alt='' className='w-[30px] h-[30px] sm:w-6 sm:h-6' />
<span className='text-[#F7C983] text-sm'>My Supreme Dragon Gem</span>
</div>
<div className='font-semibold'>Balance</div>
<div className='flex justify-between items-center'>
<div>{showBalance ? `${formatNumber(balance)} AURA` : '*******'}</div>
<div
className='w-8 grid place-items-center cursor-pointer'
onClick={() => setShowBalance(!showBalance)}>
{showBalance ? (
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'>
<path
d='M0.666504 8.00008C0.666504 8.00008 3.33317 2.66675 7.99984 2.66675C12.6665 2.66675 15.3332 8.00008 15.3332 8.00008C15.3332 8.00008 12.6665 13.3334 7.99984 13.3334C3.33317 13.3334 0.666504 8.00008 0.666504 8.00008Z'
stroke='#fff'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z'
stroke='#fff'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
) : (
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'>
<g clip-path='url(#clip0_2816_798)'>
<div
onClick={() => setOpen(!open)}
className='relative flex items-center gap-3 cursor-pointer bg-[#fff]/10 rounded py-1 px-[6px]'>
<Image src={UserIcon} alt='' className='w-[30px] h-[30px] sm:w-[18px] sm:h-[18px]' />
<span className='text-[#F7C983] text-sm'>{account.username}</span>
</div>
</div>
)}
</div>
</div>

{open && account && (
<div className='absolute top-full right-[max(16px,calc(50%-745px))] p-4 rounded-b-md flex flex-col gap-4 min-w-[288px] border-[#ECCB83] bg-[linear-gradient(180deg,rgba(76,50,36,0.50)_0%,rgba(80,49,38,0.50)_0.01%,rgba(166,123,81,0.50)_100%)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] backdrop-blur-[6px]'>
<div className='flex flex-col items-center gap-4'>
{address && (
<div className='grid grid-cols-[55px_1fr] gap-4 text-sm w-full'>
<div className='font-semibold'>Address</div>
<div className='flex justify-between items-center'>
<div>{shorten(address, 8, 8)}</div>
<Snippet
disableTooltip
classNames={{
base: 'bg-[transparent] text-[#fff] p-0',
pre: 'hidden',
copyButton: 'h-5',
}}>
{address}
</Snippet>
</div>
<div className='font-semibold'>Balance</div>
<div className='flex justify-between items-center'>
<div>{showBalance ? `${formatNumber(balance)} AURA` : '*******'}</div>
<div
className='w-8 grid place-items-center cursor-pointer'
onClick={() => setShowBalance(!showBalance)}>
{showBalance ? (
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'>
<path
d='M11.96 11.96C10.8204 12.8286 9.4327 13.3099 7.99996 13.3333C3.33329 13.3333 0.666626 7.99998 0.666626 7.99998C1.49589 6.45457 2.64605 5.10438 4.03996 4.03998M6.59996 2.82664C7.05885 2.71923 7.52867 2.66554 7.99996 2.66664C12.6666 2.66664 15.3333 7.99998 15.3333 7.99998C14.9286 8.75705 14.446 9.4698 13.8933 10.1266M9.41329 9.41331C9.23019 9.60981 9.00939 9.76741 8.76406 9.87673C8.51873 9.98604 8.25389 10.0448 7.98535 10.0496C7.71681 10.0543 7.45007 10.0049 7.20103 9.9043C6.952 9.80371 6.72577 9.654 6.53586 9.46408C6.34594 9.27416 6.19622 9.04794 6.09563 8.7989C5.99504 8.54987 5.94564 8.28312 5.95038 8.01458C5.95512 7.74604 6.0139 7.48121 6.12321 7.23587C6.23252 6.99054 6.39013 6.76974 6.58663 6.58664'
stroke='white'
d='M0.666504 8.00008C0.666504 8.00008 3.33317 2.66675 7.99984 2.66675C12.6665 2.66675 15.3332 8.00008 15.3332 8.00008C15.3332 8.00008 12.6665 13.3334 7.99984 13.3334C3.33317 13.3334 0.666504 8.00008 0.666504 8.00008Z'
stroke='#fff'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M0.666626 0.666626L15.3333 15.3333'
stroke='white'
d='M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z'
stroke='#fff'
strokeLinecap='round'
strokeLinejoin='round'
/>
</g>
<defs>
<clipPath id='clip0_2816_798'>
<rect width='16' height='16' fill='white' />
</clipPath>
</defs>
</svg>
)}
</svg>
) : (
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'>
<g clip-path='url(#clip0_2816_798)'>
<path
d='M11.96 11.96C10.8204 12.8286 9.4327 13.3099 7.99996 13.3333C3.33329 13.3333 0.666626 7.99998 0.666626 7.99998C1.49589 6.45457 2.64605 5.10438 4.03996 4.03998M6.59996 2.82664C7.05885 2.71923 7.52867 2.66554 7.99996 2.66664C12.6666 2.66664 15.3333 7.99998 15.3333 7.99998C14.9286 8.75705 14.446 9.4698 13.8933 10.1266M9.41329 9.41331C9.23019 9.60981 9.00939 9.76741 8.76406 9.87673C8.51873 9.98604 8.25389 10.0448 7.98535 10.0496C7.71681 10.0543 7.45007 10.0049 7.20103 9.9043C6.952 9.80371 6.72577 9.654 6.53586 9.46408C6.34594 9.27416 6.19622 9.04794 6.09563 8.7989C5.99504 8.54987 5.94564 8.28312 5.95038 8.01458C5.95512 7.74604 6.0139 7.48121 6.12321 7.23587C6.23252 6.99054 6.39013 6.76974 6.58663 6.58664'
stroke='white'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M0.666626 0.666626L15.3333 15.3333'
stroke='white'
strokeLinecap='round'
strokeLinejoin='round'
/>
</g>
<defs>
<clipPath id='clip0_2816_798'>
<rect width='16' height='16' fill='white' />
</clipPath>
</defs>
</svg>
)}
</div>
</div>
</div>
</div>
)}
<FilledButton
className='max-w-[156px] !py-1'
id='action_logout'
onClick={() => {
disconnect()
disconnectWallet?.()
}}>
Log out
</FilledButton>
)}
<FilledButton
className='max-w-[156px] !py-1'
id='action_logout'
onClick={() => {
disconnect()
disconnectWallet?.()
}}>
Log out
</FilledButton>
</div>
</div>
</div>
)}
</header>
)}
</header>
<MyChestModal isOpen={isOpen} onOpenChange={onOpenChange} onClose={onClose} />
</>
)
}
Loading

0 comments on commit 1eafe77

Please sign in to comment.