Skip to content

Commit

Permalink
designs update
Browse files Browse the repository at this point in the history
  • Loading branch information
@YohanTz
YohanTz committed Apr 8, 2024
1 parent a4169ef commit 928a06c
Show file tree
Hide file tree
Showing 13 changed files with 292 additions and 162 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.
53 changes: 32 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,5 @@
import clsx from "clsx";
import { Button, Typography } from "design-system";
import { Button, GasIcon, Notification, Typography } from "design-system";

import useEthereumCollectionApproval from "../_hooks/useEthereumCollectionApproval";
import useEthereumNftDeposit from "../_hooks/useEthereumNftDeposit";
Expand Down Expand Up @@ -101,29 +101,40 @@ 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={<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>
</>
);
}

Expand Down
126 changes: 13 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 @@ -24,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 @@ -58,12 +57,17 @@ 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>
Expand Down Expand Up @@ -149,7 +153,7 @@ function EveraiCards() {
component="p"
variant="heading_light_s"
>
{totalTokensBridgeOnStarknet}
{totalTokensBridgeOnStarknet ?? 0}
</Typography>
<Typography
className="text-white"
Expand Down Expand Up @@ -201,9 +205,9 @@ export default function CongratsModal({ isFromTransfer }: CongratsModalProps) {
component={DialogDescription}
variant="body_text_16"
>
Your Everai(s) have joined <b>{totalTokensBridgeOnStarknet}</b>{" "}
others Everais on Starknet! Check now your eligibility and
achievements on{" "}
Your Everai(s) have joined{" "}
<b>{totalTokensBridgeOnStarknet ?? 0}</b> others Everais on
Starknet! Check now your eligibility and achievements on{" "}
<a className="text-space-blue-source underline">Ark Quests</a>.
</Typography>
<a
Expand All @@ -229,112 +233,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
118 changes: 118 additions & 0 deletions apps/web/src/app/(routes)/lounge/_components/MarketplacesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { ArrowIcon, Typography } from "design-system";
import Image from "next/image";

export default function MarketplacesList() {
return (
<div className="mb-16">
<Typography
className="mb-8 text-left"
component="h3"
variant="heading_light_s"
>
Discover Everai on Starknet Marketplaces
</Typography>
<div className="mt-2 grid grid-cols-4 gap-6">
<a
className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
href="/"
>
<Image
alt="Element"
className="mx-auto hidden h-8 w-auto dark:block"
height={32}
src="/logos/dark/element.svg"
width={136}
/>
<Image
alt="Element"
className="mx-auto h-8 w-auto dark:hidden"
height={32}
src="/logos/element.svg"
width={136}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
href="/"
>
<Image
alt="Unframed"
className="mx-auto hidden w-auto dark:block"
height={42}
src="/logos/dark/unframed.svg"
width={144}
/>
<Image
alt="Unframed"
className="mx-auto w-auto dark:hidden"
height={42}
src="/logos/unframed.svg"
width={144}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
href="/"
>
<Image
alt="Pyramid"
className="mx-auto h-8 w-auto dark:hidden"
height={32}
src="/logos/pyramid.png"
width={140}
/>
<Image
alt="Pyramid"
className="mx-auto hidden h-8 w-auto dark:block"
height={32}
src="/logos/dark/pyramid.png"
width={140}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
href="/"
>
<Image
alt="Flex"
className="mx-auto h-12 w-auto dark:hidden"
height={46}
src="/logos/flex.png"
width={68}
/>
<Image
alt="Flex"
className="mx-auto mb-1 hidden h-12 w-auto dark:block"
height={46}
src="/logos/dark/flex.png"
width={68}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
<a
className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
href="/"
>
<Image
alt="Ventory"
className="mx-auto h-[2.625rem] w-auto dark:hidden"
height={42}
src="/logos/ventory.png"
width={146}
/>
<Image
alt="Ventory"
className="mx-auto hidden h-[2.625rem] w-auto dark:block"
height={42}
src="/logos/dark/ventory.png"
width={146}
/>
<ArrowIcon className="flex-shrink-0" />
</a>
</div>
</div>
);
}
6 changes: 6 additions & 0 deletions apps/web/src/app/(routes)/lounge/_components/NftTransferList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import useCurrentChain from "~/app/_hooks/useCurrentChain";
import useIsFullyConnected from "~/app/_hooks/useIsFullyConnected";
import { api } from "~/utils/api";

import MarketplacesList from "./MarketplacesList";
import NftTransferItem from "./NftTransferItem";
import NftTransferListLoadingState from "./NftTransferListLoadingState";
import SuccessWithdrawModal from "./SuccessWithdrawModal.tsx";
Expand Down Expand Up @@ -118,6 +119,9 @@ export default function NftTransferList({
sourceBridgeRequests.past.totalCount
: targetBridgeRequests.past.totalCount;

const showMarketplacesLinks =
variant === "lounge" || targetChain === "Starknet";

return (
<div className={className}>
{inTransitRequests.length > 0 && variant !== "lounge" && (
Expand Down Expand Up @@ -149,6 +153,8 @@ export default function NftTransferList({
</>
)}

{showMarketplacesLinks && <MarketplacesList />}

{pastRequests.length > 0 && (
<>
<Typography
Expand Down
Loading

0 comments on commit 928a06c

Please sign in to comment.