From f0a0e2a5836567bb96a2235d43e5b6d74aea2c0d Mon Sep 17 00:00:00 2001
From: RedBeardEth <90423049+RedBeardEth@users.noreply.github.com>
Date: Thu, 12 Dec 2024 21:32:57 +1100
Subject: [PATCH] add realm select border animation

---
 landing/src/components/modules/bridge-in.tsx         |  4 ++--
 landing/src/components/modules/bridge-out-step-1.tsx |  2 +-
 landing/src/dojo/setup.ts                            | 10 +++++++---
 landing/src/index.css                                |  6 ++++++
 landing/tailwind.config.js                           |  8 ++++++++
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/landing/src/components/modules/bridge-in.tsx b/landing/src/components/modules/bridge-in.tsx
index 483df7697..2c0a36ab0 100644
--- a/landing/src/components/modules/bridge-in.tsx
+++ b/landing/src/components/modules/bridge-in.tsx
@@ -182,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>
diff --git a/landing/src/components/modules/bridge-out-step-1.tsx b/landing/src/components/modules/bridge-out-step-1.tsx
index be6372648..64a59a56a 100644
--- a/landing/src/components/modules/bridge-out-step-1.tsx
+++ b/landing/src/components/modules/bridge-out-step-1.tsx
@@ -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>
diff --git a/landing/src/dojo/setup.ts b/landing/src/dojo/setup.ts
index 6640be7f0..0efd65ea0 100644
--- a/landing/src/dojo/setup.ts
+++ b/landing/src/dojo/setup.ts
@@ -62,7 +62,6 @@ export async function setup({ ...config }: DojoConfig) {
     "FragmentMineDiscovered",
   ]) as any;
   const clauses: Clause[] = [
-
     {
       Keys: {
         keys: [undefined],
@@ -86,7 +85,13 @@ export async function setup({ ...config }: DojoConfig) {
     },
   ];
   // fetch all existing entities from torii with optional component filtering
- await getSyncEntities(network.toriiClient, filteredComponents,     { Composite: { operator: "Or", clauses } } , [], 10_000);
+  await getSyncEntities(
+    network.toriiClient,
+    filteredComponents,
+    { Composite: { operator: "Or", clauses } },
+    [],
+    10_000,
+  );
 
   const sync = await syncEntities(network.toriiClient, filteredComponents, [], false);
 
@@ -94,7 +99,6 @@ export async function setup({ ...config }: DojoConfig) {
 
   const eventSync = getSyncEvents(network.toriiClient, filteredEvents, undefined, [], 20_000, false, false);
 
-
   return {
     network,
     components,
diff --git a/landing/src/index.css b/landing/src/index.css
index 05ff390c0..88c37949b 100644
--- a/landing/src/index.css
+++ b/landing/src/index.css
@@ -107,3 +107,9 @@
   /* border: 2px solid var(--gray-gold, #776756); */
   @apply bg-gold;
 }
+
+@property --border-angle {
+  inherits: false;
+  initial-value: 0deg;
+  syntax: '<angle>';
+}
\ No newline at end of file
diff --git a/landing/tailwind.config.js b/landing/tailwind.config.js
index 8b87a38be..27e40196b 100644
--- a/landing/tailwind.config.js
+++ b/landing/tailwind.config.js
@@ -76,6 +76,14 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      animation: {
+        border: "border 4s linear infinite",
+      },
+      keyframes: {
+        border: {
+          to: { "--border-angle": "360deg" },
+        },
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",