move fetchJupiterTokens to zustand actions

components/wallet/WalletListener.tsx

@@ -14,6 +14,7 @@ const WalletListener = () => {
       await actions.fetchMangoAccount(wallet.adapter as unknown as Wallet)
       actions.fetchMangoAccounts(wallet.adapter as unknown as Wallet)
       actions.fetchProfilePicture(wallet.adapter as unknown as Wallet)
+      actions.fetchWalletTokens(wallet.adapter as unknown as Wallet)
     }
     console.log('connected', connected)
 

pages/_app.tsx

@@ -11,11 +11,10 @@ import { clusterApiUrl } from '@solana/web3.js'
 
 import '../styles/globals.css'
 import WalletListener from '../components/wallet/WalletListener'
-import mangoStore, { CLUSTER } from '../store/state'
+import mangoStore from '../store/state'
 import useInterval from '../components/shared/useInterval'
 import Notifications from '../components/shared/Notification'
 import { ThemeProvider } from 'next-themes'
-import { TOKEN_LIST_URL } from '@jup-ag/core'
 import { appWithTranslation } from 'next-i18next'
 import Layout from '../components/Layout'
 import { ViewportProvider } from '../hooks/useViewport'
@@ -23,25 +22,9 @@ import { WalletProvider } from '../components/wallet/WalletProvider'
 
 const hydrateStore = async () => {
   const actions = mangoStore.getState().actions
-  actions.fetchGroup()
-}
-
-const loadJupTokens = async () => {
-  const set = mangoStore.getState().set
-
-  fetch(TOKEN_LIST_URL[CLUSTER])
-    .then((response) => response.json())
-    .then((result) => {
-      set((s) => {
-        s.jupiterTokens = result
-      })
-      const inputTokenInfo = result.find((t: any) => t.symbol === 'SOL')
-      const outputTokenInfo = result.find((t: any) => t.symbol === 'USDC')
-      set((s) => {
-        s.swap.inputTokenInfo = inputTokenInfo
-        s.swap.outputTokenInfo = outputTokenInfo
-      })
-    })
+  actions.fetchGroup().then(() => {
+    actions.fetchJupiterTokens()
+  })
 }
 
 const HydrateStore = () => {
@@ -51,7 +34,6 @@ const HydrateStore = () => {
 
   useEffect(() => {
     hydrateStore()
-    loadJupTokens()
   }, [])
 
   return null

store/state.ts

@@ -20,6 +20,7 @@ import {
 } from '../utils/tokens'
 import { Token } from '../types/jupiter'
 import { getProfilePicture, ProfilePicture } from '@solflare-wallet/pfp'
+import { TOKEN_LIST_URL } from '@jup-ag/core'
 
 const DEVNET_GROUP = new PublicKey(
   'A9XhGqUUjV992cD36qWDY8wDiZnGuCaUWtSE3NGXjDCb'
@@ -86,9 +87,11 @@ export type MangoStore = {
     fetchMangoAccounts: (wallet: Wallet) => Promise<void>
     fetchNfts: (connection: Connection, walletPk: PublicKey) => void
     fetchProfilePicture: (wallet: Wallet) => void
-    loadSerumMarket: () => Promise<void>
+    fetchJupiterTokens: () => Promise<void>
+    fetchWalletTokens: (wallet: Wallet) => Promise<void>
     reloadAccount: () => Promise<void>
     reloadGroup: () => Promise<void>
+    loadSerumMarket: () => Promise<void>
   }
 }
 
@@ -258,6 +261,25 @@ const mangoStore = create<MangoStore>(
             })
           }
         },
+        fetchJupiterTokens: async () => {
+          const set = mangoStore.getState().set
+
+          fetch(TOKEN_LIST_URL[CLUSTER])
+            .then((response) => response.json())
+            .then((result) => {
+              set((s) => {
+                s.jupiterTokens = result
+              })
+              const inputTokenInfo = result.find((t: any) => t.symbol === 'SOL')
+              const outputTokenInfo = result.find(
+                (t: any) => t.symbol === 'USDC'
+              )
+              set((s) => {
+                s.swap.inputTokenInfo = inputTokenInfo
+                s.swap.outputTokenInfo = outputTokenInfo
+              })
+            })
+        },
         reloadGroup: async () => {
           try {
             const set = get().set