From b1ea59fa38825f2f18273b0c72dccddc8187c57e Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Sat, 24 Feb 2024 01:14:18 +0000
Subject: [PATCH] spin the wheel

---
 components/StakeForm.tsx          | 11 +++++++++--
 components/SunburstBackground.tsx |  7 ++++++-
 store/mangoStore.ts               |  2 ++
 styles/globals.css                | 22 +++++++++++++++++-----
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/components/StakeForm.tsx b/components/StakeForm.tsx
index 4b16a40..532e643 100644
--- a/components/StakeForm.tsx
+++ b/components/StakeForm.tsx
@@ -93,6 +93,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
   const { maxSolDeposit } = useSolBalance()
   const { ipAllowed } = useIpAddress()
 
+  const storedLeverage = mangoStore((s) => s.leverage);
   const { usedTokens, totalTokens } = useMangoAccountAccounts()
   const { group } = useMangoGroup()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
@@ -263,9 +264,15 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
       ? Number(inputAmount) > tokenDepositLimitLeftUi
       : false
 
-  const changeLeverage = useCallback((v: number) => {
+  const changeLeverage = (v: number) => {
     setLeverage(v * 1)
-  }, [])
+
+    if (Math.round(v) != storedLeverage) {
+      set((state) => {
+        state.leverage = Math.round(v)
+      });
+    }
+  };
 
   useEffect(() => {
     const group = mangoStore.getState().group
diff --git a/components/SunburstBackground.tsx b/components/SunburstBackground.tsx
index 5820734..25f9c86 100644
--- a/components/SunburstBackground.tsx
+++ b/components/SunburstBackground.tsx
@@ -1,8 +1,13 @@
+import mangoStore from "@store/mangoStore";
+
 const SunburstBackground = ({ className }: { className?: string }) => {
+
+  const storedLeverage = mangoStore((s) => s.leverage);
+
   return (
     <div className="fixed inset-0 flex w-[200%] -translate-x-1/4 items-center justify-center overflow-hidden">
       <svg
-        className={`${className} rotate-bg-slow`}
+        className={`${className} rotate-bg-${storedLeverage}x`}
         height="3000"
         width="3000"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index cfdfd89..9f584ab 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -160,6 +160,7 @@ export type MangoStore = {
   groupLoaded: boolean
   client: MangoClient
   showUserSetup: boolean
+  leverage: number
   mangoAccount: {
     current: MangoAccount | undefined
     initialLoad: boolean
@@ -324,6 +325,7 @@ const mangoStore = create<MangoStore>()(
       groupLoaded: false,
       client,
       showUserSetup: false,
+      leverage: 1,
       mangoAccount: {
         current: undefined,
         initialLoad: true,
diff --git a/styles/globals.css b/styles/globals.css
index 7dd5786..8151fe6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -439,10 +439,22 @@ table p {
   }
 }
 
-.rotate-bg-fast {
-  animation: rotate-bg 25s linear infinite;
-}
-
-.rotate-bg-slow {
+.rotate-bg-1x {
   animation: rotate-bg 720s linear infinite;
 }
+
+.rotate-bg-2x {
+  animation: rotate-bg 40s linear infinite;
+}
+
+.rotate-bg-3x {
+  animation: rotate-bg 20s linear infinite;
+}
+
+.rotate-bg-4x {
+  animation: rotate-bg 7s linear infinite;
+}
+
+.rotate-bg-5x {
+  animation: rotate-bg 3s linear infinite;
+}
\ No newline at end of file