Skip to content

Commit

Permalink
fix ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@YongZL
YongZL committed Jan 12, 2024
1 parent e5a127b commit d9aedbf
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 45 deletions.
99 changes: 56 additions & 43 deletions app/blob-TX/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ const BlobTX = () => {
// const receipt = await blobClient.getTxReceipt(hash)
}

const onSwitchTo = () => {
window.open('https://www.eip4844.com', '_blank')
}

return (
<div className=' font-[Montserrat] '>
<Header
Expand All @@ -92,10 +96,11 @@ const BlobTX = () => {
<div className='mo:w-full mo:px-[30px] mx-auto w-container md:w-full md:px-[30px] '>
<div className=' flex flex-row items-center mo:justify-between mo:h-[102px]'>
<div className='mo:hidden w-full h-[120px] mo:h-[42px] items-center flex text-2xl md:text-lg font-normal'>
Experience EIP-4844 <img src='/share3.svg' className=' mx-2' /> blob-carrying transactions (Blob TX)
<button onClick={onSwitchTo}> Experience EIP-4844</button> <img src='/share3.svg' className=' mx-2' /> blob-carrying
transactions (Blob TX)
</div>
<div className='rounded-lg border-[#FC7823] md:text-sm border h-[42px] items-center flex text-[#FC7823] px-[15px]'>
{address}
{address?.replace('••••', '.....')}
</div>
<div className='flex mr-10 mo:mr-0 gap-[13px] items-center'>
<img className='ml-5 mo:h-[32px]' src='deal.svg' />
Expand All @@ -108,10 +113,11 @@ const BlobTX = () => {
<div className='flex mo:gap-10 gap-[100px] md:gap-[50px] mt-[30px] mo:mt-10 mo:flex mo:flex-wrap mo:w-full'>
<div className='w-[440px] md:w-[400px] h-full mo:flex mo:flex-wrap mo:w-full mo:flex-col '>
<div className='sm:hidden w-full h-[120px] mo:h-auto items-center flex text-2xl mo:text-3xl md:text-lg font-normal mo:flex-wrap mo:flex-row'>
Experience EIP-4844 <img src='/share3.svg' className=' mx-2' /> blob-carrying transactions (Blob TX)
<button onClick={onSwitchTo}> Experience EIP-4844 </button>
<img src='/share3.svg' className=' mx-2' /> blob-carrying transactions (Blob TX)
</div>
<div className=' text-2xl font-normal mo:mt-10'>Input</div>
<div className=' mt-[50px] mo:mt-10 font-medium md:text-sm mb-5'>Type text here</div>
<div className=' text-2xl mo:text-[26px] font-normal mo:mt-10'>Input</div>
<div className=' mt-[50px] mo:mt-10 font-medium mo:text-lg md:text-sm mb-5'>Type text here</div>

<DivBox className=' w-full h-[68px] px-2'>
<input
Expand All @@ -122,25 +128,29 @@ const BlobTX = () => {
/>
</DivBox>

<div className=' text-base md:text-sm font-medium mt-[27px] mo:mt-10'>Attach an image,not exceeding 128KB</div>
<DivBox className=' mt-5 w-full h-[290px] md:h-[295px] border-[#000000] mo:mt-10 '>
<div className=' flex items-center justify-center h-full flex-col '>
<input type='file' hidden ref={inputImgRef} accept='image/*' onChange={onFileChange} />
<div
onClick={handleFileSelect}
className=' cursor-pointer w-[100px] h-[100px] bg-[#FFF8F4] border-2 border-dashed rounded-[5px] border-[#FC7823] flex items-center justify-center'
>
<img src='chooseAnyImg.svg'></img>
</div>
<div className=' mt-5 mo:mt-[30px] text-center flex flex-col'>
<span>{file?.name}</span>
<button className=' text-base font-semibold' onClick={handleFileSelect}>
Browse
</button>
<div className=' text-base md:text-sm font-medium mt-[27px] mo:text-lg mo:mt-10'>
Attach an image,not exceeding 128KB
</div>
<div className=' mo:px-[50px]'>
<DivBox className=' mt-5 w-full h-[290px] md:h-[295px] border-[#000000] mo:mt-10 '>
<div className=' flex items-center justify-center h-full flex-col '>
<input type='file' hidden ref={inputImgRef} accept='image/*' onChange={onFileChange} />
<div
onClick={handleFileSelect}
className=' cursor-pointer w-[100px] h-[100px] bg-[#FFF8F4] border-2 border-dashed rounded-[5px] border-[#FC7823] flex items-center justify-center'
>
<img src='chooseAnyImg.svg'></img>
</div>
<div className=' mt-5 mo:mt-[30px] text-center flex flex-col'>
<span>{file?.name}</span>
<button className=' text-base font-semibold' onClick={handleFileSelect}>
Browse
</button>
</div>
</div>
</div>
</DivBox>
<div className='mt-5 mo:mt-10 flex justify-center'>
</DivBox>
</div>
<div className='mt-5 mo:mt-10 flex justify-center mb-5'>
<button
onClick={onTranscode}
className={` ${
Expand All @@ -152,28 +162,28 @@ const BlobTX = () => {
</div>
</div>
<div className='w-full h-full '>
<div className=' text-2xl'> Blob Data</div>
<div className=' text-2xl mo:text-[26px]'> Blob Data</div>
<div className='flex gap-[14px] '>
<button
onClick={() => handleBlobClick(true)}
className={`w-[195px] md:w-[180px] h-[50px] flex border-[#000000] ${
selectedBlob && 'custom-background'
} items-center justify-center mt-[30px] md:text-sm text-base font-medium `}
} items-center justify-center mo:text-lg mt-[30px] md:text-sm text-base font-medium `}
>
Blob1(Text data)
</button>
<button
onClick={() => handleBlobClick(false)}
className={` w-[195px] md:w-[180px] h-[50px] flex ${
className={`w-[195px] md:w-[180px] h-[50px] flex ${
!selectedBlob && 'custom-background'
} items-center border-[#000000] justify-center mt-[30px] md:text-sm border-dashed text-base font-medium `}
} items-center border-[#000000] mo:text-lg justify-center mt-[30px] md:text-sm border-dashed text-base font-medium `}
>
Blob2(Image data)
</button>
</div>

<ContentBox className=' overflow-y-auto h-[442px] pl-5 py-5 '>2</ContentBox>
<div className='mt-5 mo:mt-[37px] flex justify-center '>
<ContentBox className=' overflow-y-auto h-[442px] pl-5 py-5 '>2</ContentBox>
<div className='mt-5 mo:mt-[37px] flex justify-center mb-5 '>
<button
className={`border mo:w-full bg-[#BABABA] cursor-not-allowed px-6 text-base font-semibold items-center flex rounded-xl text-[#FFFFFF] justify-center h-12 text-center`}
>
Expand All @@ -186,17 +196,20 @@ const BlobTX = () => {
</div>
) : (
<div className='mo:w-full mx-auto w-container md:w-full md:px-[30px] mo:px-[30px]'>
<div className='flex justify-center pt-[119px] mo:flex-wrap mo:items-center'>
<span className='font-medium text-[54px] mo:text-[26px] mo:font-bold mr-3'>Experience</span>
<span className=' font-semibold text-[54px] mo:text-[26px] mo:font-bold underline mr-3'> EIP-4844</span>
<div
onClick={onSwitchTo}
className=' cursor-pointer flex justify-center pt-[119px] mo:flex-wrap mo:items-center text-[54px] mo:text-[26px] md:text-[46px]'
>
<span className='font-medium mo:font-bold mr-3'>Experience</span>
<span className=' font-semibold mo:font-bold underline mr-3'> EIP-4844</span>
<img className=' w-[30px] ' src='/share.svg'></img>
</div>
<div className=' flex justify-center mo:flex-wrap font-medium text-[54px] capitalize mo:text-[26px] mo:font-bold'>
<div className=' md:text-[46px] cursor-default flex justify-center mo:flex-wrap font-medium text-[54px] capitalize mo:text-[26px] mo:font-bold'>
<div className=''>blob-carrying transactions</div>
<div>(Blob TX)</div>
</div>
<div className=' mt-[34px] mo:mt-5 justify-center text-center mo:flex flex-wrap mo:flex-row '>
<span className='font-medium text-xl mo:text-[18px] mo:font-light '>
<div className='cursor-default mt-[34px] mo:mt-5 justify-center text-center mo:flex flex-wrap mo:flex-row '>
<span className='font-medium text-xl mo:text-[18px] mo:font-light '>
Store a piece of text or an image fully on-chain with EthDA to understand the changes
</span>
<div>
Expand All @@ -212,14 +225,14 @@ const BlobTX = () => {
<div className='mt-[60px] mo:mt-[130px] flex justify-center'>
<ConnectKitButton.Custom>
{({ isConnected, show, truncatedAddress, ensName }) => {
if (isConnected) {
setIsClickStart(true)
setAddress(truncatedAddress)
}
// if (isConnected) {
// setIsClickStart(true)
// setAddress(truncatedAddress)
// }

return (
<StyledButton onClick={show}>
<span className=' ml-[17px] mo:ml-5 mo:text-lg pr-[17px] text-base font-medium'>Connect wallet to start</span>
<span className=' ml-[17px] mo:ml-5 pr-[17px] text-base font-medium'>Connect wallet to start</span>
<div className=' rounded-lg bg-white w-[38px] h-[38px] flex items-center justify-center'>
<img src='/share2.svg'></img>
</div>
Expand All @@ -228,9 +241,9 @@ const BlobTX = () => {
}}
</ConnectKitButton.Custom>
</div>
<div className=' mt-[128px] mo:mt-[142px] flex mo:text-center mo:justify-center justify-between mo:flex-wrap mo:w-full'>
<span className='mo:w-full text-base underline mo:text-2xl '>Add EthDA Devnet to wallet</span>
<span className='mo:mt-[70px] mo:text-2xl text-base underline'> Gas Faucet</span>
<div className=' mt-[128px] mo:mt-[142px] flex mo:mx-0 md:mx-[100px] mx-[200px] mo:text-center mo:justify-center justify-between mo:flex-wrap mo:w-full'>
<button className='mo:w-full text-base underline mo:text-2xl '>Add EthDA Devnet to wallet</button>
<button className='mo:mt-[70px] mo:text-2xl text-base underline'> Gas Faucet</button>
</div>
</div>
)}
Expand Down
7 changes: 6 additions & 1 deletion components/FullModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,12 @@ const FullModal: FC<FullModalProps> = ({ menus, keys = 'text', onChooseItem, cho
>
{item[keys]}
</span>
<RiArrowRightUpLine size={22} />
<RiArrowRightUpLine
className={classNames({
'text-[#FC7823]': pathname === item.to.split('/')[1],
})}
size={22}
/>
</div>
</div>
</Fragment>
Expand Down
2 changes: 1 addition & 1 deletion components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const Header: FC<HeaderType> = ({
push(address)
}
return (
<header className={classNames('py-5 border-b border-b-[rgba(255,255,255,.2)]', className)}>
<header className={classNames('py-5 border-b border-b-[rgba(255,255,255,.2)] mo:bg-[#FCE1D6] mo:border-b-[#FCE1D6]', className)}>
<div className=' mo:mx-[30px] '>
<div className={classNames('flex justify-between items-center', containerClassName)}>
<Image src={logo} alt={'logo.svg'} width={119} height={26} />
Expand Down

0 comments on commit d9aedbf

Please sign in to comment.