Merge branch 'realm-trade' of https://github.com/BibliothecaDAO/eternum…

… into realm-trade

client/package.json

@@ -20,17 +20,18 @@
     "@cartridge/connector": "0.5.5",
     "@cartridge/controller": "0.5.5",
     "@dojoengine/core": "1.0.3-alpha.2",
-    "@dojoengine/torii-wasm": "1.0.3-alpha.2",
     "@dojoengine/create-burner": "1.0.3-alpha.2",
     "@dojoengine/react": "1.0.3-alpha.2",
     "@dojoengine/recs": "^2.0.13",
     "@dojoengine/state": "1.0.3-alpha.2",
     "@dojoengine/torii-client": "1.0.3-alpha.2",
+    "@dojoengine/torii-wasm": "1.0.3-alpha.2",
     "@dojoengine/utils": "1.0.3-alpha.2",
     "@headlessui/react": "^1.7.18",
     "@latticexyz/utils": "^2.0.0-next.12",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-three/drei": "^9.101.0",
     "@react-three/fiber": "^8.16.1",

client/src/ui/components/resources/realm-transfer.tsx

@@ -3,14 +3,14 @@ import { PlayerStructure, useEntities } from "@/hooks/helpers/useEntities";
 import { useResourceManager } from "@/hooks/helpers/useResources";
 import useUIStore from "@/hooks/store/useUIStore";
 import Button from "@/ui/elements/Button";
-import { Checkbox } from "@/ui/elements/Checkbox";
 import { NumberInput } from "@/ui/elements/NumberInput";
 import { ResourceIcon } from "@/ui/elements/ResourceIcon";
 import { calculateDonkeysNeeded, currencyFormat, getTotalResourceWeight, multiplyByPrecision } from "@/ui/utils/utils";
 import { ResourcesIds, findResourceById } from "@bibliothecadao/eternum";
 import { Dispatch, SetStateAction, memo, useCallback, useEffect, useMemo, useState } from "react";
 
 import { ID } from "@bibliothecadao/eternum";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { num } from "starknet";
 import { OSWindow } from "../navigation/OSWindow";
 
@@ -82,13 +82,14 @@ export const RealmTransfer = memo(
         show={isOpen}
       >
         <div className="p-1">
-          <div
-            className="flex space-x-2 items-center cursor-pointer"
+          <Button
+            variant={type === "send" ? "outline" : "secondary"}
             onClick={() => setType((prev) => (prev === "send" ? "receive" : "send"))}
           >
-            <Checkbox enabled={type === "send"} />
-            <div>{type === "send" ? "Send Resources" : "Receive Resources"}</div>
-          </div>
+            {type === "receive" && <ArrowLeftIcon className="w-4 h-4" />}
+            {type === "send" ? "Send Resources" : "Receive Resources"}
+            {type === "send" && <ArrowRightIcon className="w-4 h-4" />}
+          </Button>
         </div>
         <div className="p-4">
           <div>
@@ -115,10 +116,10 @@ export const RealmTransfer = memo(
           ))}
 
           <div className="pt-2 border-t border-gold/20">
-            <div className="uppercase font-bold text-sm flex items-center gap-1">
-              Transfers ({calls.length}
-              <ResourceIcon resource={findResourceById(ResourcesIds.Donkey)?.trait as string} size="sm" />
-              {neededDonkeys.toString()})
+            <div className="uppercase font-bold text-sm flex gap-3">
+              Transfers {calls.length} |
+              <ResourceIcon resource={findResourceById(ResourcesIds.Donkey)?.trait as string} size="sm" />{" "}
+              {neededDonkeys.toString()}
             </div>
 
             <div className="flex flex-col gap-2">
@@ -139,7 +140,7 @@ export const RealmTransfer = memo(
             </div>
           </div>
 
-          <div className="pt-2 border-t border-gold/20">
+          <div className="pt-2 border-t border-gold/20 flex flex-row justify-end">
             <Button
               disabled={calls.length === 0}
               isLoading={isLoading}

client/src/ui/elements/Switch.tsx

@@ -0,0 +1,27 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "./lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };