Merge pull request #2512 from BibliothecaDAO/bridge

resources box fix
BibliothecaDAO · Dec 14, 2024 · 4a025e0 · 4a025e0
2 parents c57642b + a74c7f8
commit 4a025e0
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 48 deletions.
diff --git a/landing/.env.production b/landing/.env.production
@@ -4,7 +4,7 @@ VITE_PUBLIC_WORLD_ADDRESS="0x5013b17c43a2b664ec2a38aa45f6d891db1188622ec7cf32041
 VITE_PUBLIC_ACCOUNT_CLASS_HASH="0x07dc7899aa655b0aae51eadff6d801a58e97dd99cf4666ee59e704249e51adf2"
 VITE_PUBLIC_FEE_TOKEN_ADDRESS=0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7
 
-VITE_PUBLIC_TORII=https://eternum.glihm.xyz/
+VITE_PUBLIC_TORII=https://eternum.glihm.xyz
 VITE_PUBLIC_NODE_URL=https://api.cartridge.gg/x/starknet/mainnet
 VITE_PUBLIC_DEV=false
 VITE_PUBLIC_GAME_VERSION="v1.0.0-rc0"

diff --git a/landing/package.json b/landing/package.json
@@ -28,7 +28,7 @@
     "@dojoengine/utils": "1.0.3-alpha.2",
     "@graphql-codegen/schema-ast": "^4.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^2.2.0",
     "@parcel/watcher": "^2.4.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",

diff --git a/landing/src/components/modules/bridge-in.tsx b/landing/src/components/modules/bridge-in.tsx
@@ -170,7 +170,7 @@ export const BridgeIn = () => {
 
   return (
     <>
-      <div className="max-w-md flex flex-col bg-background gap-3 relative max-h-[calc(75vh-100px)] overflow-y-auto p-3">
+      <div className="max-w-md flex flex-col gap-3 relative max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
           <div className="space-y-4">
             <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
@@ -226,7 +226,7 @@ export const BridgeIn = () => {
             <div className="text-xs text-slate-500 uppercase mb-1">To Realm</div>
 
             <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">
+              <SelectTrigger className={"w-full " + (!realmEntityId ? "bg-dark-brown 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] border border-transparent animate-border [background:linear-gradient(45deg,#ffffff,#ffffff)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box]" : "border-gold/15")}>
                 {address ? (
                   <SelectValue placeholder="Select Realm To Transfer" />
                 ) : (

diff --git a/landing/src/components/modules/bridge-out-step-1.tsx b/landing/src/components/modules/bridge-out-step-1.tsx
@@ -156,7 +156,7 @@ export const BridgeOutStep1 = () => {
 
   return (
     <>
-      <div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
+      <div className="max-w-md flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
           <div className="space-y-4">
             <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">
@@ -215,7 +215,14 @@ export const BridgeOutStep1 = () => {
           <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">
+              <SelectTrigger
+                className={
+                  "w-full " +
+                  (!realmEntityId
+                    ? "dark:bg-dark-brown 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] border border-transparent animate-border [background:linear-gradient(45deg,#ffffff,#ffffff)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box]"
+                    : "border-gold/40")
+                }
+              >
                 {address ? <SelectValue placeholder="Select Settled Realm" /> : <div> -- Connect your wallet --</div>}
               </SelectTrigger>
               <SelectContent>

diff --git a/landing/src/components/modules/bridge-out-step-2.tsx b/landing/src/components/modules/bridge-out-step-2.tsx
@@ -134,7 +134,7 @@ export const BridgeOutStep2 = () => {
 
   return (
     <>
-      <div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
+      <div className="max-w-md flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
           <div className="space-y-4">
             <h2 className="text-2xl font-bold mb-4 text-gold border-b border-gold/20 pb-2">

diff --git a/landing/src/components/modules/swap-panel.tsx b/landing/src/components/modules/swap-panel.tsx
@@ -21,13 +21,13 @@ export const SwapPanel = () => {
             Bridge Out (Finish)
           </TabsTrigger>
         </TabsList>
-        <TabsContent className="border-2 rounded-xl bg-brown border-gold/15 round-tr-none" value="in">
+        <TabsContent className="border-2 rounded-xl border-opacity-15 round-tr-none" value="in">
           <BridgeIn />
         </TabsContent>
-        <TabsContent className="border-2 rounded-xl bg-brown border-gold/15 round-tr-none" value="out-start">
+        <TabsContent className="border-2 rounded-xl border-opacity-15 round-tr-none" value="out-start">
           <BridgeOutStep1 />
         </TabsContent>
-        <TabsContent className="border-2 rounded-xl bg-brown border-gold/15 round-tr-none" value="out-finish">
+        <TabsContent className="border-2 rounded-xl border-opacity-15 round-tr-none" value="out-finish">
           <BridgeOutStep2 />
         </TabsContent>
       </Tabs>

diff --git a/landing/src/components/modules/top-navigation-view.tsx b/landing/src/components/modules/top-navigation-view.tsx
@@ -56,7 +56,7 @@ export const TopNavigationView = ({
           onClick={() => {
             window.open("https://eternum.realms.world", "_blank");
           }}
-          className="gap-2"
+          className="gap-2 hidden sm:flex"
         >
           <PlayIcon className="!w-4 h-2" />
           Play Eternum
@@ -92,7 +92,7 @@ export const TopNavigationView = ({
         {isConnected ? (
           <Button
             variant="outline"
-            className="gap-2"
+            className="px-1"
             size={"default"}
             onClick={() => {
               onDisconnect();

diff --git a/landing/src/components/ui/SelectResources.tsx b/landing/src/components/ui/SelectResources.tsx
@@ -158,8 +158,6 @@ export const SelectSingleResource = ({
                 value={selectedResourceIds[index]}
                 onChange={(value) => {
                   const updatedResourceIds = [...selectedResourceIds];
-                  console.log(updatedResourceIds);
-                  console.log(index);
                   updatedResourceIds[index] = value;
                   setSelectedResourceIds(updatedResourceIds);
 

diff --git a/landing/src/components/ui/elements/ListSelect.tsx b/landing/src/components/ui/elements/ListSelect.tsx
@@ -1,6 +1,6 @@
 import { ReactComponent as CaretDown } from "@/assets/icons/common/caret-down-fill.svg";
 import { ReactComponent as Checkmark } from "@/assets/icons/common/checkmark.svg";
-import { Listbox, Transition } from "@headlessui/react";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import { Fragment, ReactNode, useMemo } from "react";
 
@@ -30,8 +30,8 @@ function ListSelect(props: ListSelectProps) {
     <div className={clsx("w-full", props.className, "z-100")}>
       <Listbox value={props.value} onChange={props.onChange} disabled={props.disabled}>
         {({ open }) => (
-          <div className="relative  ">
-            <Listbox.Button
+          <div>
+            <ListboxButton
               className={clsx(
                 "flex items-center relative  cursor-pointer text-xs py-1 min-h-[32px] z-0 w-full bg-gold/10 hover:bg-gold/20 px-2",
               )}
@@ -45,7 +45,7 @@ function ListSelect(props: ListSelectProps) {
                   />
                 </div>
               </span>
-            </Listbox.Button>
+            </ListboxButton>
             <Transition
               as={Fragment}
               show={open}
@@ -58,14 +58,15 @@ function ListSelect(props: ListSelectProps) {
               leaveTo="opacity-0"
             >
               <div className="fixed z-50 w-min text-xs">
-                <Listbox.Options
+                <ListboxOptions
+                  anchor="bottom start"
                   className={clsx(
-                    "z-50 w-full rounded-md py-1 max-h-72 overflow-scroll z-100 border border-gold/10 no-scrollbar",
+                    "z-50 rounded-md py-1 max-h-72 overflow-scroll z-100 border border-gold/10 no-scrollbar",
                     props.style === "black" ? "bg-brown" : " bg-brown",
                   )}
                 >
                   {props.options.map((option) => (
-                    <Listbox.Option
+                    <ListboxOption
                       key={option.id}
                       className={({ active }) =>
                         `overflow-visible relative cursor-pointer z-50 select-none py-2 flex items-center pl-8 text-gold ${
@@ -90,9 +91,9 @@ function ListSelect(props: ListSelectProps) {
                           ) : null}
                         </>
                       )}
-                    </Listbox.Option>
+                    </ListboxOption>
                   ))}
-                </Listbox.Options>
+                </ListboxOptions>
               </div>
             </Transition>
           </div>