Skip to content

Commit

Permalink
[landing]: bridge UI Improvement (#2484)
Browse files Browse the repository at this point in the history 
* landing: select lords by default for bridge in

* landing: add connect wallet msgs

* landing: update bridge section description

* landing: update collection not found pages

* landing: update collection not found pages
  • Loading branch information
@credence0x
credence0x authored Dec 13, 2024
1 parent 0f6fcc3 commit 742995a
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 22 deletions.
67 changes: 56 additions & 11 deletions landing/src/components/modules/bridge-in.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,10 @@ export const BridgeIn = () => {
const { computeTravelTime } = useTravel();
const { getRealmNameById } = useRealm();
const [isLoading, setIsLoading] = useState(false);
const [selectedResourceIds, setSelectedResourceIds] = useState<number[]>([]);
const [selectedResourceAmounts, setSelectedResourceAmounts] = useState<{ [key: string]: number }>({});
const [selectedResourceIds, setSelectedResourceIds] = useState<number[]>([ResourcesIds.Lords]);
const [selectedResourceAmounts, setSelectedResourceAmounts] = useState<{ [key: string]: number }>({
[ResourcesIds.Lords]: 0,
});
const [resourceAddresses, setResourceAddresses] = useState<{ [key: string]: string }>({});
const unselectedResources = useMemo(
() => resources.filter((res) => !selectedResourceIds.includes(res.id)),
Expand Down Expand Up @@ -151,8 +153,10 @@ export const BridgeIn = () => {

const resp = await bridgeIntoRealm(validResources, ADMIN_BANK_ENTITY_ID, BigInt(realmEntityId!));
if (resp) {
setSelectedResourceIds([]);
setSelectedResourceAmounts({});
setSelectedResourceIds([ResourcesIds.Lords]);
setSelectedResourceAmounts({
[ResourcesIds.Lords]: 0,
});
}
} catch (error) {
console.error("Bridge into realm error:", error);
Expand All @@ -168,12 +172,49 @@ export const BridgeIn = () => {
<>
<div className="max-w-md flex flex-col bg-background gap-3 relative max-h-[calc(75vh-100px)] overflow-y-auto p-3">
<TypeP>
Bridge resources and lords from your Starknet wallet into the Eternum game. You will have to complete the
claim on your Realm in the{" "}
<a href="https://eternum.realms.world/" target="_blank" className="text-gold underline">
game
</a>
.
<div className="space-y-4">
<h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
Bridge Resources Into Your Realm
</h2>

<div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
1
</span>
</div>
<div className="space-y-1">
<h3 className="font-semibold text-gold/90">Bridge Assets into the Game</h3>
<p className="text-sm opacity-80">
Bridge your ERC20 assets, resources and lords from your Starknet wallet into the Eternum game.
</p>
</div>
</div>

<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
2
</span>
</div>
<div className="space-y-1">
<h3 className="font-semibold text-gold/90">Complete Claim</h3>
<p className="text-sm opacity-80">
Complete the claim on your Realm in the{" "}
<a
href="https://eternum.realms.world/"
target="_blank"
className="text-gold underline hover:text-gold/80 transition-colors"
>
<span className="font-bold">game</span>
</a>{" "}
by checking the <span className="font-bold">Resource Arrivals (Donkeys)</span> tab in the game.
</p>
</div>
</div>
</div>
</div>
</TypeP>
<hr />
<div className="flex justify-between">
Expand All @@ -186,7 +227,11 @@ export const BridgeIn = () => {

<Select onValueChange={(value) => setRealmEntityId(Number(value))}>
<SelectTrigger className="w-full dark:[background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] light:[background:linear-gradient(45deg,#ffffff,#ffffff)_padding-box,conic-gradient(from_var(--border-angle),#b08c4f_80%,_#daa520_86%,_#ffd700_90%,_#daa520_94%,_#b08c4f)_border-box] border border-transparent animate-border">
<SelectValue placeholder="Select Realm To Transfer" />
{address ? (
<SelectValue placeholder="Select Realm To Transfer" />
) : (
<div> -- Connect your wallet --</div>
)}
</SelectTrigger>
<SelectContent>
{playerRealmsIdAndName.length
Expand Down
55 changes: 52 additions & 3 deletions landing/src/components/modules/bridge-out-step-1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,16 +153,65 @@ export const BridgeOutStep1 = () => {
<>
<div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
<TypeP>
Bridge resources from your Realms balance in game to tradeable ERC20 assets in your Starknet wallet. This will
require a second step to send the resources to your wallet once the donkeys have arrived at the bank.
<div className="space-y-4">
<h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
Bridge Resources to Wallet
</h2>

<div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
1
</span>
</div>
<div className="space-y-1">
<h3 className="font-semibold text-gold/90">Bridge Resources</h3>
<p className="text-sm opacity-80">
Bridge resources from your Realms balance in-game to tradeable ERC20 assets in your Starknet wallet.
The first step is to send it to the bank.
</p>
</div>
</div>

<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
2
</span>
</div>
<div className="space-y-1">
<h3 className="font-semibold text-gold/90">Complete Transfer</h3>
<p className="text-sm opacity-80">
Once the donkeys arrive at the bank, complete the second step ( the next section ) to receive
resources in your wallet.
</p>
</div>
</div>

<div className="flex items-start space-x-3">
<div className="flex-shrink-0 mt-1">
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold font-semibold text-sm">
ℹ️
</span>
</div>
<div className="space-y-1">
<h3 className="font-semibold text-gold/90">Important Note</h3>
<p className="text-sm opacity-80">
This bridge will only be available for withdrawals for up to 48 hours after the Season ends.
</p>
</div>
</div>
</div>
</div>
</TypeP>
<hr />
<div className="flex justify-between">
<div className="flex flex-col min-w-40">
<div className="text-xs uppercase mb-1 ">From Realm</div>
<Select onValueChange={(value) => setRealmEntityId(value)}>
<SelectTrigger className="w-full bg-background dark:[background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] light:[background:linear-gradient(45deg,#ffffff,#ffffff)_padding-box,conic-gradient(from_var(--border-angle),#d4b17d_80%,_#e8c088_86%,_#f5d4a3_90%,_#e8c088_94%,_#d4b17d)_border-box] border border-transparent animate-border">
<SelectValue placeholder="Select Settled Realm" />
{address ? <SelectValue placeholder="Select Settled Realm" /> : <div> -- Connect your wallet --</div>}
</SelectTrigger>
<SelectContent>
{playerRealmsIdAndName.map((realm) => {
Expand Down
40 changes: 36 additions & 4 deletions landing/src/components/modules/bridge-out-step-2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,45 @@ export const BridgeOutStep2 = () => {
<>
<div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
<TypeP>
Finalise the withdrawal of resources from your Realm in Eternum to your Starknet wallet. The bridge will close
and you will be unable to withdraw 48 hours after the Season is won.
<div className="space-y-4">
<h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
Finalize Bridge Withdrawal
</h2>

<div className="flex flex-col gap-4 bg-gold/5 p-4 rounded-lg border border-gold/10">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-gold/20 text-gold">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M20 6L9 17l-5-5" />
</svg>
</span>
</div>
<div className="space-y-1">
<h3 className="font-semibold text-gold/90">Complete Withdrawal</h3>
<p className="text-sm opacity-80">
Finalize the withdrawal of resources from your Realm in Eternum to your Starknet wallet. Select a
donkey to withdraw resources from.
</p>
</div>
</div>
</div>
</div>
</TypeP>
<hr />
<div className="mb-2">
<div className="text-xs uppercase mb-1">Withdraw To</div>
<div>{displayAddress(address || "")}</div>
<div>{address ? displayAddress(address || "") : " -- Connect your wallet --"}</div>
</div>
<Collapsible open={isTableOpen} onOpenChange={setIsTableOpen}>
<CollapsibleTrigger className="flex w-full items-center justify-between p-2 hover:bg-gold/5 rounded-lg">
Expand Down Expand Up @@ -308,7 +340,7 @@ export const BridgeOutStep2 = () => {
className="w-full"
>
{isLoading && <Loader className="animate-spin pr-2" />}
{isLoading ? "Sending to Wallet..." : "Send to Wallet (Final Step)"}
{isLoading ? "Sending to Wallet..." : "Send to Wallet"}
</Button>
</div>
</>
Expand Down
37 changes: 35 additions & 2 deletions landing/src/components/modules/realms-grid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button } from "@/components/ui/button";
import { GetRealmsQuery } from "@/hooks/gql/graphql";
import { Grid2X2, Grid3X3 } from "lucide-react";
import { Castle, Grid2X2, Grid3X3 } from "lucide-react";
import { useState } from "react";
import { AnimatedGrid } from "./animated-grid";
import { RealmCard } from "./realm-card";
Expand Down Expand Up @@ -30,8 +30,41 @@ export const RealmsGrid = ({
}: SeasonPassRowProps) => {
const [isCompactGrid, setIsCompactGrid] = useState(false);

if (!realms?.length) return <div>No Realms found</div>;

if (!realms?.length) {
return (
<div className="relative flex flex-col items-center justify-center p-16 text-center space-y-6 min-h-[500px] rounded-xl border-2 border-dashed border-gray-200 bg-gradient-to-b from-gray-50/50 to-gray-100/50">
{/* Decorative elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-4 -left-4 w-24 h-24 bg-primary/5 rounded-full blur-xl" />
<div className="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/5 rounded-full blur-xl" />
</div>
<Castle className="w-20 h-20 text-primary/60 animate-pulse" />

<div className="relative">
<h3 className="text-2xl font-bold text-gray-900 tracking-tight mt-6">
No Realms Yet
</h3>

<p className="text-gray-600 max-w-md leading-relaxed">
Your collection of realms will appear here once you acquire them.

Get your realm to start your journey into Realms World!
</p>

<a href={`https://market.realms.world/collection/0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809`} target="_blank">
<Button
variant="outline"
className="mt-6 group hover:border-primary/50 transition-all duration-300"
>
<Castle className="w-4 h-4 mr-2 group-hover:text-primary transition-colors" />
Get Your Realm
</Button>
</a>
</div>
</div>
);
}
const gridItems: RealmGridItem[] = realms.map((realm) => ({
colSpan: isCompactGrid ? { sm: 3, md: 2, lg: 2 } : { sm: 5, md: 3, lg: 3 },
data: realm!,
Expand Down
48 changes: 46 additions & 2 deletions landing/src/components/modules/season-passes-grid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button } from "@/components/ui/button";
import { GetRealmsQuery } from "@/hooks/gql/graphql";
import { Grid2X2, Grid3X3 } from "lucide-react";
import { Crown, Grid2X2, Grid3X3 } from "lucide-react";
import { useState } from "react";
import { AnimatedGrid } from "./animated-grid";
import { SeasonPassCard } from "./season-pass-card";
Expand All @@ -23,7 +23,51 @@ interface SeasonPassRowProps {
export const SeasonPassesGrid = ({ toggleNftSelection, isNftSelected, seasonPasses }: SeasonPassRowProps) => {
const [isCompactGrid, setIsCompactGrid] = useState(false);

if (!seasonPasses?.length) return <div>No Season Pass Found</div>;
if (!seasonPasses?.length) {
return (
<div className="relative flex flex-col items-center justify-center p-16 text-center space-y-8 min-h-[600px] rounded-xl border-2 border-dashed border-gray-200/70 bg-gradient-to-b from-gray-50/50 to-gray-100/50">
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-4 -left-4 w-32 h-32 bg-primary/10 rounded-full blur-2xl animate-pulse" />
<div className="absolute -bottom-4 -right-4 w-32 h-32 bg-primary/10 rounded-full blur-2xl animate-pulse" />
</div>

<Crown className="w-24 h-24 text-primary/70 animate-pulse drop-shadow-lg" />

<div className="relative space-y-6">
<h3 className="text-3xl font-bold text-gray-900 tracking-tight">
No Season Passes Yet
</h3>

<div className="space-y-4">
<p className="text-gray-600 max-w-lg mx-auto leading-relaxed">
Your collection of season passes will appear here until you burn them to mint a realm in the game.
</p>
<p className="text-gray-500 max-w-lg mx-auto leading-relaxed">
Once you burn a pass, it will be removed from this view.
</p>

<p className="text-primary/80 font-medium text-lg mt-6">
Get your pass to join the game and start your journey into Eternum!
</p>
</div>

<a
href="https://market.realms.world/collection/0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
className="mt-8 group hover:border-primary/50 hover:bg-primary/5 transition-all duration-300"
>
<Crown className="w-5 h-5 mr-2 group-hover:text-primary transition-colors" />
Get Your Season Pass
</Button>
</a>
</div>
</div>
);
}

const gridItems: RealmGridItem[] = seasonPasses.map((pass) => ({
colSpan: isCompactGrid ? { sm: 3, md: 2, lg: 2 } : { sm: 5, md: 3, lg: 3 },
Expand Down

0 comments on commit 742995a

Please sign in to comment.