spin the wheel

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

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"

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,

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;
+}