Skip to content

Commit

Permalink
feat: ui design updates / fixes (#182)
Browse files Browse the repository at this point in the history 
* bug fixes

* added coinbase wallet + grid responsive fixes

* supported batch requests from the lounge

* designs update

* fix build

* modal text updated

* added gas notification + withdraw error

* added missing file

* changed error log

* testnet / mainnet support
  • Loading branch information
@YohanTz
YohanTz authored Apr 9, 2024
1 parent eba6759 commit 2985a28
Show file tree
Hide file tree
Showing 30 changed files with 522 additions and 212 deletions.
Binary file modified apps/web/public/medias/quest_banner.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.
71 changes: 50 additions & 21 deletions apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import clsx from "clsx";
import { Button, Typography } from "design-system";
import {
Button,
ClockIcon,
GasIcon,
Notification,
Typography,
} from "design-system";

import useEthereumCollectionApproval from "../_hooks/useEthereumCollectionApproval";
import useEthereumNftDeposit from "../_hooks/useEthereumNftDeposit";
Expand Down Expand Up @@ -101,36 +107,59 @@ function TransferNfts() {
const disabled = totalSelectedNfts === 0 || isSigning;

return (
<Button
className={clsx(
"mt-8 h-12 flex-shrink-0 bg-galaxy-blue text-white transition-colors dark:bg-primary-source dark:text-galaxy-blue",
disabled
? "cursor-no-drop opacity-50"
: "hover:bg-space-blue-700 dark:hover:bg-primary-400"
<>
{totalSelectedNfts > 0 && (
<>
<Notification
className="mt-8"
icon={<ClockIcon />}
variant="space_blue"
>
<b>Important note: </b>You will have to wait about 4 hours before
you can claim your assets on ethereum.
</Notification>
<Notification
className="mt-4"
icon={<GasIcon />}
variant="mantis_green"
>
ArkProject will refund gas costs in Stark!
</Notification>
</>
)}
onClick={() => !disabled && depositTokens()}
size="small"
>
{isSigning ? (
<div className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent" />
<Button
className={clsx(
"mt-8 h-12 flex-shrink-0 bg-galaxy-blue text-white transition-colors dark:bg-primary-source dark:text-galaxy-blue",
disabled
? "cursor-no-drop opacity-50"
: "hover:bg-space-blue-700 dark:hover:bg-primary-400"
)}
onClick={() => !disabled && depositTokens()}
size="small"
>
{isSigning ? (
<div className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent" />
<Typography variant="button_text_s">
Confirm in your wallet
</Typography>
</div>
) : (
<Typography variant="button_text_s">
Confirm in your wallet
Confirm transfer to Starknet
</Typography>
</div>
) : (
<Typography variant="button_text_s">
Confirm transfer to Starknet
</Typography>
)}
</Button>
)}
</Button>
</>
);
}

export default function TransferEthereumNftsAction() {
const { totalSelectedNfts } = useNftSelection();
const { isApprovedForAll } = useEthereumCollectionApproval();

return <TransferNfts />;

return isApprovedForAll || totalSelectedNfts === 0 ? (
<TransferNfts />
) : (
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function TransferNftsList() {
}

return (
<div className="mt-8 flex w-full flex-col gap-4 overflow-y-auto">
<div className="mt-8 flex min-h-[3.25rem] w-full flex-col gap-4 overflow-y-auto">
{selectedNfts.map((selectedNft) => {
return (
<div className="flex justify-between" key={selectedNft.tokenId}>
Expand Down
2 changes: 0 additions & 2 deletions apps/web/src/app/(routes)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,6 @@ function RootLayout({ children }: { children: React.ReactNode }) {
<Providers>
<Header />
<div className="hidden min-h-screen md:block">{children}</div>
{/* <EthereumSwitchNetwork />
<StarknetSwitchNetwork /> */}
</Providers>
<div className="block h-screen md:hidden">
<MobilePlaceholder />
Expand Down
140 changes: 27 additions & 113 deletions apps/web/src/app/(routes)/lounge/_components/CongratsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import clsx from "clsx";
import {
ArrowIcon,
Dialog,
DialogContent,
DialogDescription,
Expand All @@ -13,6 +12,8 @@ import Image from "next/image";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

import { api } from "~/utils/api";

interface ArkQuestsBannerProps {
className?: string;
}
Expand All @@ -22,7 +23,7 @@ function ArkQuestsBanner({ className }: ArkQuestsBannerProps) {
<div
className={clsx(
className,
"relative flex h-40 flex-col items-center justify-center gap-2 overflow-hidden rounded-2xl"
"relative flex h-[11.875rem] flex-col items-center justify-center gap-4 overflow-hidden rounded-2xl"
)}
>
<Image
Expand Down Expand Up @@ -56,19 +57,27 @@ function ArkQuestsBanner({ className }: ArkQuestsBannerProps) {
/>
</svg>
</div>

<Typography className="text-white" variant="body_text_16">
You just completed a quest on ArkQuests
</Typography>

<a
className="flex h-[2.625rem] items-center justify-center rounded-full bg-sunshine-yellow-source px-6"
href="/"
>
<Typography className="text-void-black" variant="button_text_s">
Join now
Check your progress
</Typography>
</a>
</div>
);
}

function EveraiCards() {
const { data: totalTokensBridgeOnStarknet } =
api.stats.getEveraiBridgeNumber.useQuery();

return (
<div className="relative flex-shrink-0">
<div className="absolute inset-0 mx-5 my-3 w-40 rotate-12 rounded-xl border border-space-blue-600 bg-space-blue-900 p-2.5 dark:border-space-blue-700 dark:bg-space-blue-800" />
Expand Down Expand Up @@ -144,7 +153,7 @@ function EveraiCards() {
component="p"
variant="heading_light_s"
>
123
{totalTokensBridgeOnStarknet ?? 0}
</Typography>
<Typography
className="text-white"
Expand Down Expand Up @@ -175,6 +184,8 @@ export default function CongratsModal({ isFromTransfer }: CongratsModalProps) {
const [open, setOpen] = useState(isFromTransfer);

const router = useRouter();
const { data: totalTokensBridgeOnStarknet } =
api.stats.getEveraiBridgeNumber.useQuery();

useEffect(() => {
router.push("/lounge");
Expand All @@ -194,9 +205,16 @@ export default function CongratsModal({ isFromTransfer }: CongratsModalProps) {
component={DialogDescription}
variant="body_text_16"
>
Your Everai(s) have joined <b>356</b> others Everais on Starknet!
Check now your eligibility and achievements on{" "}
<a className="text-space-blue-source underline">Ark Quests</a>.
In a few minutes, your Everai(s) will join the{" "}
<b>{totalTokensBridgeOnStarknet}</b> others Everais on Starknet!
<br />
<br />
<button
className="text-space-blue-source underline"
onClick={() => setOpen(false)}
>
Follow your transaction status here
</button>
</Typography>
<a
className="mt-6 flex h-12 items-center rounded-full bg-space-blue-source px-5 text-white transition-colors hover:bg-space-blue-500 dark:text-galaxy-blue"
Expand All @@ -221,112 +239,8 @@ export default function CongratsModal({ isFromTransfer }: CongratsModalProps) {
</a>
</div>
</div>
<Typography className="mt-6" variant="heading_light_xs">
Check the collection on Starknet marketplaces
</Typography>
<div className="mt-2 grid grid-cols-2 gap-4">
<a
className="flex h-14 items-center justify-between rounded-xl border border-galaxy-blue pl-2 pr-4 transition-colors hover:bg-space-blue-100 dark:bg-space-blue-800 dark:hover:bg-space-blue-700"
href="/"
>
<Image
alt="Element"
className="hidden h-7 w-auto dark:block"
height={97}
src="/logos/dark/element.svg"
width={399}
/>
<Image
alt="Element"
className="h-7 w-auto dark:hidden"
height={97}
src="/logos/element.svg"
width={399}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-14 items-center justify-between rounded-xl border border-galaxy-blue pl-2 pr-4 transition-colors hover:bg-space-blue-100 dark:bg-space-blue-800 dark:hover:bg-space-blue-700"
href="/"
>
<Image
alt="Unframed"
className="hidden h-9 w-auto dark:block"
height={97}
src="/logos/dark/unframed.svg"
width={389}
/>
<Image
alt="Unframed"
className="h-9 w-auto dark:hidden"
height={97}
src="/logos/unframed.svg"
width={389}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-14 items-center justify-between rounded-xl border border-galaxy-blue pl-2 pr-4 transition-colors hover:bg-space-blue-100 dark:bg-space-blue-800 dark:hover:bg-space-blue-700"
href="/"
>
<Image
alt="Pyramid"
className="h-7 w-auto dark:hidden"
height={108}
src="/logos/pyramid.png"
width={390}
/>
<Image
alt="Pyramid"
className="hidden h-7 w-auto dark:block"
height={108}
src="/logos/dark/pyramid.png"
width={390}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-14 items-center justify-between rounded-xl border border-galaxy-blue pl-2 pr-4 transition-colors hover:bg-space-blue-100 dark:bg-space-blue-800 dark:hover:bg-space-blue-700"
href="/"
>
<Image
alt="Flex"
className="mb-1 h-9 w-auto dark:hidden"
height={138}
src="/logos/flex.png"
width={189}
/>
<Image
alt="Flex"
className="mb-1 hidden h-9 w-auto dark:block"
height={138}
src="/logos/dark/flex.png"
width={189}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-14 items-center justify-between rounded-xl border border-galaxy-blue pl-2 pr-4 transition-colors hover:bg-space-blue-100 dark:bg-space-blue-800 dark:hover:bg-space-blue-700"
href="/"
>
<Image
alt="Ventory"
className="h-9 w-auto dark:hidden"
height={97}
src="/logos/ventory.png"
width={389}
/>
<Image
alt="Ventory"
className="hidden h-9 w-auto dark:block"
height={97}
src="/logos/dark/ventory.png"
width={389}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
</div>
<ArkQuestsBanner className="mt-2" />

<ArkQuestsBanner className="mt-4" />
</DialogContent>
</Dialog>
);
Expand Down
Loading

0 comments on commit 2985a28

Please sign in to comment.