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

Bridge UX #2401

Merged
merged 6 commits into from
Dec 11, 2024
Merged

Bridge UX #2401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
163cbc0
add wallet balance to bridge in
RedBeardEth Dec 11, 2024
3a4f397
Merge remote-tracking branch 'origin/next' into bridge
RedBeardEth Dec 11, 2024
fd975b9
Merge remote-tracking branch 'origin/next' into bridge
RedBeardEth Dec 11, 2024
5f39b34
udpate prize pool calculation
RedBeardEth Dec 11, 2024
7e62c0d
bridge UX
RedBeardEth Dec 11, 2024
c1f7bf0
prettier
RedBeardEth Dec 11, 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
4 changes: 2 additions & 2 deletions client/.env.production
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ VITE_PUBLIC_WORLD_ADDRESS="0x5013b17c43a2b664ec2a38aa45f6d891db1188622ec7cf32041
VITE_PUBLIC_ACCOUNT_CLASS_HASH="0x07dc7899aa655b0aae51eadff6d801a58e97dd99cf4666ee59e704249e51adf2"
VITE_PUBLIC_FEE_TOKEN_ADDRESS=0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7

VITE_PUBLIC_TORII=https://api.cartridge.gg/x/eternum-mainnet/torii
VITE_PUBLIC_TORII=https://api.cartridge.gg/x/realms-world-5/torii
VITE_PUBLIC_NODE_URL=https://api.cartridge.gg/x/starknet/mainnet
VITE_PUBLIC_DEV=false
VITE_PUBLIC_GAME_VERSION="v1.0.0"
VITE_PUBLIC_SHOW_FPS=false
VITE_PUBLIC_GRAPHICS_DEV=false
VITE_PUBLIC_TORII_RELAY=/dns4/api.cartridge.gg/tcp/443/x-parity-wss/%2Fx%2Feternum-mainnet%2Ftorii%2Fwss
VITE_PUBLIC_TORII_RELAY=/dns4/api.cartridge.gg/tcp/443/x-parity-wss/%2Fx%2Frealms-world-5%2Ftorii%2Fwss

VITE_SEASON_PASS_ADDRESS=0x057675b9c0bd62b096a2e15502a37b290fa766ead21c33eda42993e48a714b80
VITE_REALMS_ADDRESS=0x07ae27a31bb6526e3de9cf02f081f6ce0615ac12a6d7b85ee58b8ad7947a2809
Expand Down
433 changes: 256 additions & 177 deletions landing/src/components/modules/bridge-in.tsx
View file
Open in desktop

Large diffs are not rendered by default.

193 changes: 94 additions & 99 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 @@ -9,18 +9,18 @@ import {
ADMIN_BANK_ENTITY_ID,
DONKEY_ENTITY_TYPE,
RESOURCE_PRECISION,
resources,
ResourcesIds,
resources,
} from "@bibliothecadao/eternum";
import { TooltipContent, TooltipTrigger } from "@radix-ui/react-tooltip";
import { useAccount } from "@starknet-react/core";
import { InfoIcon, Loader, Plus } from "lucide-react";
import { useMemo, useState } from "react";
import { TypeP } from "../typography/type-p";
import { SelectSingleResource } from "../ui/SelectResources";
import { Button } from "../ui/button";
import { ResourceIcon } from "../ui/elements/ResourceIcon";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { SelectSingleResource } from "../ui/SelectResources";
import { Tooltip, TooltipProvider } from "../ui/tooltip";
import { calculateDonkeysNeeded, getSeasonAddresses, getTotalResourceWeight } from "../ui/utils/utils";
import { BridgeFees } from "./bridge-fees";
Expand Down Expand Up @@ -58,16 +58,6 @@ export const BridgeOutStep1 = () => {
}[]
>([]);

/*const totalFeeOnWithdrawal = useMemo(
() =>
formatFee(
Number(velordsFeeOnWithdrawal) +
Number(seasonPoolFeeOnWithdrawal) +
Number(clientFeeOnWithdrawal) +
Number(bankFeeOnWithdrawal),
),
[velordsFeeOnWithdrawal, seasonPoolFeeOnWithdrawal, clientFeeOnWithdrawal, bankFeeOnWithdrawal],
);*/
const { getBalance } = getResourceBalance();
const donkeyBalance = useMemo(() => {
if (realmEntityId) {
Expand Down Expand Up @@ -160,99 +150,104 @@ export const BridgeOutStep1 = () => {
};

return (
<div className="max-w-md flex flex-col gap-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.
</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 border-gold/15">
<SelectValue placeholder="Select Settled Realm" />
</SelectTrigger>
<SelectContent>
{playerRealmsIdAndName.map((realm) => {
return (
<SelectItem key={realm.realmId} value={realm.entityId.toString()}>
#{realm.realmId} - {realm.name}
</SelectItem>
);
})}
</SelectContent>
</Select>
</div>
<div>
<div className="text-xs uppercase mb-1">To Wallet</div>
<div>{displayAddress(address || "")}</div>
</div>
</div>

{Boolean(realmEntityId) && (
<SelectResourceRow
realmEntityId={Number(realmEntityId)}
selectedResourceIds={selectedResourceIds}
setSelectedResourceIds={(value: number[]) => setSelectedResourceIds(value as unknown as never[])}
selectedResourceAmounts={selectedResourceAmounts}
setSelectedResourceAmounts={setSelectedResourceAmounts}
/>
)}
<div className="flex flex-col gap-1">
<>
<div className="max-w-md 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.
</TypeP>
<hr />
<div className="flex justify-between">
<div>Arrives in Bank</div>
<div>{travelTimeInHoursAndMinutes(travelTime ?? 0)}</div>
</div>
<div className="flex justify-between">
<div>
Donkeys Burnt
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 w-4 h-4" />
</TooltipTrigger>
<TooltipContent className="bg-background border rounded p-2 max-w-56">
Donkeys are required to transport the resources to the bank
</TooltipContent>
</Tooltip>
</TooltipProvider>
<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 border-gold/15">
<SelectValue placeholder="Select Settled Realm" />
</SelectTrigger>
<SelectContent>
{playerRealmsIdAndName.map((realm) => {
return (
<SelectItem key={realm.realmId} value={realm.entityId.toString()}>
#{realm.realmId} - {realm.name}
</SelectItem>
);
})}
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
{donkeysNeeded} / {donkeyBalance.balance} <ResourceIcon resource={"Donkey"} size="md" />
<div>
<div className="text-xs uppercase mb-1">To Wallet</div>
<div>{displayAddress(address || "")}</div>
</div>
</div>
<BridgeFees
isOpen={isFeesOpen}
onOpenChange={setIsFeesOpen}
resourceSelections={selectedResourceAmounts}
setResourceFees={setResourceFees}
type="withdrawal"
/>
<div className="flex justify-between font-bold mt-3">
<div>Total Amount Received</div>
</div>
{Object.entries(selectedResourceAmounts).map(([id, amount]) => {
if (amount === 0) return null;
const resourceName = ResourcesIds[id as keyof typeof ResourcesIds];
return (
<div key={id} className="flex justify-between text-sm font-normal">
<div className="flex items-center gap-2">
<ResourceIcon resource={resourceName} size="md" /> {resourceName}
</div>
<div>{(amount - Number(resourceFees.find((fee) => fee.id === id)?.totalFee ?? 0)).toFixed(2)}</div>

{Boolean(realmEntityId) && (
<SelectResourceRow
realmEntityId={Number(realmEntityId)}
selectedResourceIds={selectedResourceIds}
setSelectedResourceIds={(value: number[]) => setSelectedResourceIds(value as unknown as never[])}
selectedResourceAmounts={selectedResourceAmounts}
setSelectedResourceAmounts={setSelectedResourceAmounts}
/>
)}
<div className="flex flex-col gap-1">
<div className="flex justify-between">
<div>Arrives in Bank</div>
<div>{travelTimeInHoursAndMinutes(travelTime ?? 0)}</div>
</div>
<div className="flex justify-between mb-3">
<div>
Donkeys Burnt
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="ml-2 w-4 h-4" />
</TooltipTrigger>
<TooltipContent className="bg-background border rounded p-2 max-w-56">
Donkeys are required to transport the resources to the bank
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div className="flex items-center gap-2">
{donkeysNeeded} / {donkeyBalance.balance} <ResourceIcon resource={"Donkey"} size="md" />
</div>
);
})}
</div>
<BridgeFees
isOpen={isFeesOpen}
onOpenChange={setIsFeesOpen}
resourceSelections={selectedResourceAmounts}
setResourceFees={setResourceFees}
type="withdrawal"
/>
<div className="flex justify-between font-bold mt-3">
<div>Total Amount Received</div>
</div>
{Object.entries(selectedResourceAmounts).map(([id, amount]) => {
if (amount === 0) return null;
const resourceName = ResourcesIds[id as keyof typeof ResourcesIds];
return (
<div key={id} className="flex justify-between text-sm font-normal">
<div className="flex items-center gap-2">
<ResourceIcon resource={resourceName} size="md" /> {resourceName}
</div>
<div>{(amount - Number(resourceFees.find((fee) => fee.id === id)?.totalFee ?? 0)).toFixed(2)}</div>
</div>
);
})}
</div>
</div>
<Button
disabled={(!selectedResourceAmount && !selectedResourceId && !realmEntityId) || isLoading}
onClick={() => onSendToBank()}
>
{isLoading && <Loader className="animate-spin pr-2" />}
{isLoading ? "Sending to Bank..." : !realmEntityId ? "Select a Realm" : "Send to Bank (Step 1)"}
</Button>
</div>
<div className="sticky bottom-0 rounded-b-xl bg-background p-4 mt-auto border-t border-gold/15">
<Button
disabled={(!selectedResourceAmount && !selectedResourceId && !realmEntityId) || isLoading}
className="w-full"
onClick={() => onSendToBank()}
>
{isLoading && <Loader className="animate-spin pr-2" />}
{isLoading ? "Sending to Bank..." : !realmEntityId ? "Select a Realm" : "Send to Bank (Step 1)"}
</Button>
</div>
</>
);
};

Expand Down
Loading
Loading