Merge pull request #2440 from BibliothecaDAO/bridge

Bridge styling + dojo sync
BibliothecaDAO · Dec 12, 2024 · e7c3dee · e7c3dee
2 parents 2eae96c + f0a0e2a
commit e7c3dee
Show file tree

Hide file tree

Showing 21 changed files with 423 additions and 197 deletions.
diff --git a/landing/dojoConfig.ts b/landing/dojoConfig.ts
@@ -19,9 +19,13 @@ const {
 // const isLocal = VITE_PUBLIC_CHAIN === "local" || VITE_PUBLIC_CHAIN === "testnet";
 // const manifest = VITE_PUBLIC_DEV === true && isLocal ? devManifest : productionManifest;
 
-let manifest = VITE_PUBLIC_DEV === true ? devManifest : sepoliaManifest;
+const manifestMap = {
+  'local': devManifest,
+  'mainnet': productionManifest,
+  'sepolia': sepoliaManifest
+} as const;
 
-manifest = VITE_PUBLIC_CHAIN === "mainnet" ? productionManifest : manifest;
+const manifest = manifestMap[VITE_PUBLIC_CHAIN as keyof typeof manifestMap] ?? sepoliaManifest;
 
 export const getManifest = () => {
   return manifest;

diff --git a/landing/package.json b/landing/package.json
@@ -19,13 +19,13 @@
     "@bibliothecadao/eternum": "workspace:^",
     "@cartridge/connector": "^0.5.3",
     "@cartridge/controller": "^0.5.3",
-    "@dojoengine/core": "1.0.1",
-    "@dojoengine/create-burner": "1.0.1",
-    "@dojoengine/react": "1.0.1",
+    "@dojoengine/core": "1.0.3-alpha.1",
+    "@dojoengine/create-burner": "1.0.3-alpha.1",
+    "@dojoengine/react": "1.0.3-alpha.1",
     "@dojoengine/recs": "^2.0.13",
-    "@dojoengine/state": "1.0.1",
-    "@dojoengine/torii-client": "1.0.1",
-    "@dojoengine/utils": "1.0.1",
+    "@dojoengine/state": "1.0.3-alpha.1",
+    "@dojoengine/torii-client": "1.0.3-alpha.1",
+    "@dojoengine/utils": "1.0.3-alpha.1",
     "@graphql-codegen/schema-ast": "^4.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@headlessui/react": "^1.7.18",

diff --git a/landing/src/components/modules/app-sidebar.tsx b/landing/src/components/modules/app-sidebar.tsx
@@ -57,10 +57,12 @@ export function AppSidebar() {
   return (
     <Sidebar>
       <SidebarContent>
-        <div className="flex flex-col items-center">
-          <EternumLogo className="w-24 h-24 fill-gold mx-auto pt-8" />
-          <TypeH2 className="p-3">Eternum</TypeH2>
-        </div>
+        <a href="/">
+          <div className="flex flex-col items-center">
+            <EternumLogo className="w-24 h-24 fill-gold mx-auto pt-8" />
+            <TypeH2 className="p-3">Eternum</TypeH2>
+          </div>
+        </a>
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>

diff --git a/landing/src/components/modules/bridge-fees.tsx b/landing/src/components/modules/bridge-fees.tsx
@@ -86,11 +86,11 @@ export const BridgeFees = ({
           <div>{formatFee(feesForAllResources.reduce((sum, fees) => sum + Number(fees.totalFee), 0))} units</div>
         </Button>
       </CollapsibleTrigger>
-      <CollapsibleContent className="flex flex-col gap-4 py-4">
+      <CollapsibleContent className="flex flex-col ">
         {feesForAllResources.map((fees) => {
           const resourceName = ResourcesIds[fees.id as keyof typeof ResourcesIds];
           return (
-            <div key={fees.id} className="flex flex-col gap-2">
+            <div key={fees.id} className="flex flex-col gap-2 py-4 border-b border-gold/15">
               <div className="font-semibold text-sm">
                 <div className="flex justify-between w-full">
                   <span>{resourceName} </span>
@@ -114,11 +114,10 @@ export const BridgeFees = ({
                 </div>
                 <div>{fees.seasonPoolFee}</div>
               </div>
-              <div className="flex justify-between text-xs mb-3">
+              <div className="flex justify-between text-xs">
                 <div>Client Fees ({calculateBridgeFeeDisplayPercent(bridgeConfig.client_fee_on_dpt_percent)}%)</div>
                 <div>{fees.clientFee}</div>
               </div>
-              <hr />
             </div>
           );
         })}

diff --git a/landing/src/components/modules/bridge-in.tsx b/landing/src/components/modules/bridge-in.tsx
@@ -149,9 +149,11 @@ export const BridgeIn = () => {
         throw new Error("No valid resources selected");
       }
 
-      await bridgeIntoRealm(validResources, ADMIN_BANK_ENTITY_ID, BigInt(realmEntityId!));
-      setSelectedResourceIds([]);
-      setSelectedResourceAmounts({});
+      const resp = await bridgeIntoRealm(validResources, ADMIN_BANK_ENTITY_ID, BigInt(realmEntityId!));
+      if (resp) {
+        setSelectedResourceIds([]);
+        setSelectedResourceAmounts({});
+      }
     } catch (error) {
       console.error("Bridge into realm error:", error);
       toast.error("Failed to transfer resources");
@@ -180,10 +182,10 @@ export const BridgeIn = () => {
             <div>{displayAddress(address || "")}</div>
           </div>
           <div>
-            <div className="text-xs uppercase mb-1">To Realm</div>
+            <div className="text-xs text-slate-500 uppercase mb-1">To Realm</div>
 
             <Select onValueChange={(value) => setRealmEntityId(Number(value))}>
-              <SelectTrigger className="w-full border-gold/15">
+              <SelectTrigger className="w-full bg-dark-brown [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">
                 <SelectValue placeholder="Select Realm To Transfer" />
               </SelectTrigger>
               <SelectContent>
@@ -256,17 +258,17 @@ export const BridgeIn = () => {
             setResourceFees={setResourceFees}
             type="deposit"
           />
-          <div className="flex flex-col gap-2 font-bold mt-3">
+          <div className="flex flex-col gap-2 font-bold mt-5">
             <div className="flex justify-between">
-              <div>Total Amount Received</div>
+              <div>Resources 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}
+                    <ResourceIcon resource={resourceName} size="sm" className="md:w-5 md:h-5" withTooltip={false} /> {resourceName}
                   </div>
                   <div>{(amount - Number(resourceFees.find((fee) => fee.id === id)?.totalFee ?? 0)).toFixed(2)}</div>
                 </div>
@@ -281,7 +283,7 @@ export const BridgeIn = () => {
           disabled={
             isLoading ||
             !realmEntityId ||
-            donkeyBalance.balance <= donkeysNeeded ||
+            donkeyBalance.balance < donkeysNeeded ||
             !Object.values(selectedResourceAmounts).some((amount) => amount > 0)
           }
           onClick={() => onBridgeIntoRealm()}
@@ -337,7 +339,7 @@ const ResourceInputRow = ({
         : "0";
 
   return (
-    <div className="rounded-lg p-3 border border-gold/15 shadow-lg bg-dark-brown flex gap-3 items-center">
+    <div key={id} className="rounded-lg p-3 border border-gold/15 shadow-lg bg-dark-brown flex gap-3 items-center">
       <div className="relative  w-full">
         <Input
           type="text"
@@ -390,7 +392,7 @@ const ResourceInputRow = ({
             <>
               {res?.id && (
                 <SelectItem
-                  key={res?.id}
+                  key={res.id}
                   disabled={Object.keys(selectedResourceAmounts).includes(res?.id.toString() ?? "")}
                   value={res?.id.toString() ?? ""}
                 >

diff --git a/landing/src/components/modules/bridge-out-step-1.tsx b/landing/src/components/modules/bridge-out-step-1.tsx
@@ -136,11 +136,11 @@ export const BridgeOutStep1 = () => {
               };
             }),
         );
-        console.log(validResources);
-        await bridgeStartWithdrawFromRealm(validResources, ADMIN_BANK_ENTITY_ID, BigInt(realmEntityId!));
-
-        setSelectedResourceIds([]);
-        setSelectedResourceAmounts({});
+        const tx = await bridgeStartWithdrawFromRealm(validResources, ADMIN_BANK_ENTITY_ID, BigInt(realmEntityId!));
+        if (tx) {
+          setSelectedResourceIds([]);
+          setSelectedResourceAmounts({});
+        }
       } finally {
         setIsLoading(false);
       }
@@ -161,7 +161,7 @@ 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 border-gold/15">
+              <SelectTrigger className="w-full bg-dark-brown [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">
                 <SelectValue placeholder="Select Settled Realm" />
               </SelectTrigger>
               <SelectContent>