Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[landing]: bridge UI Improvement #2484

Merged
merged 5 commits into from
Dec 13, 2024
Merged

[landing]: bridge UI Improvement #2484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3025501
landing: select lords by default for bridge in
credence0x Dec 13, 2024
a7849cd
landing: add connect wallet msgs
credence0x Dec 13, 2024
50753b5
landing: update bridge section description
credence0x Dec 13, 2024
3f51571
landing: update collection not found pages
credence0x Dec 13, 2024
067697d
landing: update collection not found pages
credence0x Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 56 additions & 11 deletions landing/src/components/modules/bridge-in.tsx
View file
Open in desktop
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>
Comment on lines +175 to +217
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add security attribute to external link

The new UI layout provides clear instructions with well-organized steps. However, the external link to the game should include the rel="noopener noreferrer" security attribute when using target="_blank".

 <a
   href="https://eternum.realms.world/"
   target="_blank"
+  rel="noopener noreferrer"
   className="text-gold underline hover:text-gold/80 transition-colors"
 >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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>
<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"
rel="noopener noreferrer"
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading