get simulated values after reloading account

components/Home.tsx

@@ -12,7 +12,7 @@ const Home = () => {
   const outputTokenInfo = mangoStore((s) => s.outputTokenInfo)
 
   return (
-    <div className="mt-8">
+    <div className="mt-12">
       <div className="">
         <div className="mx-auto flex max-w-7xl justify-center space-x-6">
           <div className="flex-grow space-y-6">

components/MangoAccount.tsx

@@ -8,7 +8,7 @@ const MangoAccount = () => {
   const mangoAccount = mangoStore((s) => s.mangoAccount)
 
   return (
-    <ContentBox>
+    <ContentBox showBackground>
       <div className="flex-col space-y-2">
         <div className="flex items-center justify-between">
           <div className="text-th-fgd-4">Account Value</div>

components/shared/ContentBox.tsx

@@ -1,12 +1,23 @@
 type ContentBoxProps = {
   children: React.ReactNode
   className?: string
+  showBackground?: boolean
+  hideBorder?: boolean
+  hidePadding?: boolean
 }
 
-const ContentBox = ({ children, className = '' }: ContentBoxProps) => {
+const ContentBox = ({
+  children,
+  className = '',
+  showBackground = false,
+  hideBorder = false,
+  hidePadding = false,
+}: ContentBoxProps) => {
   return (
     <div
-      className={`rounded-xl border border-th-bkg-3 bg-th-bkg-2 p-8 ${className}`}
+      className={`rounded-xl ${hideBorder ? '' : 'border border-th-bkg-3'} ${
+        showBackground ? 'bg-th-bkg-2' : ''
+      } ${hidePadding ? '' : 'p-8'} ${className}`}
     >
       {children}
     </div>

components/swap/Swap.tsx

@@ -97,7 +97,7 @@ const Swap = () => {
   }
 
   return (
-    <ContentBox className="max-w-md">
+    <ContentBox className="max-w-md" showBackground>
       <div className="">
         <div className="mt-1 flex-col rounded-md bg-th-bkg-1 py-2 px-6">
           <div className="flex items-center justify-between">

components/swap/SwapTokenChart.tsx

@@ -142,19 +142,21 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
     : 0
 
   return (
-    <ContentBox>
+    <ContentBox hideBorder hidePadding className="p-4">
       {chartData.length && baseTokenId && quoteTokenId ? (
         <div className="">
           <div className="flex items-start justify-between">
             <div>
               {inputTokenInfo && outputTokenInfo ? (
-                <div className="text-sm text-th-fgd-3">
-                  {`${outputTokenInfo?.symbol?.toUpperCase()}/${inputTokenInfo?.symbol?.toUpperCase()}`}
+                <div className="text-th-fgd-3">
+                  {['usd-coin', 'tether'].includes(inputTokenId || '')
+                    ? `${outputTokenInfo?.symbol?.toUpperCase()}/${inputTokenInfo?.symbol?.toUpperCase()}`
+                    : `${inputTokenInfo?.symbol?.toUpperCase()}/${outputTokenInfo?.symbol?.toUpperCase()}`}
                 </div>
               ) : null}
               {mouseData ? (
                 <>
-                  <div className="text-lg font-bold text-th-fgd-1">
+                  <div className="text-3xl font-bold text-th-fgd-1">
                     {numberFormatter.format(mouseData['price'])}
                     <span
                       className={`ml-2 text-xs ${
@@ -170,7 +172,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                 </>
               ) : (
                 <>
-                  <div className="text-lg font-bold text-th-fgd-1">
+                  <div className="text-3xl font-bold text-th-fgd-1">
                     {numberFormatter.format(
                       chartData[chartData.length - 1]['price']
                     )}
@@ -231,12 +233,18 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                     }}
                     content={<></>}
                   />
-                  {/* <defs>
-                  <linearGradient id="gradientArea" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor="#ffba24" stopOpacity={0.9} />
-                    <stop offset="90%" stopColor="#ffba24" stopOpacity={0} />
-                  </linearGradient>
-                </defs> */}
+                  <defs>
+                    <linearGradient
+                      id="gradientArea"
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
+                      <stop offset="0%" stopColor="#ffba24" stopOpacity={0.3} />
+                      <stop offset="80%" stopColor="#ffba24" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
                   <Area
                     isAnimationActive={true}
                     type="monotone"

store/state.ts

@@ -182,11 +182,13 @@ const mangoStore = create<MangoStore>(
           const set = get().set
           const client = get().client
           const mangoAccount = get().mangoAccount
+          const group = get().group
 
-          if (!mangoAccount) return
+          if (!mangoAccount || !group) return
 
           try {
             const newMangoAccount = await client.getMangoAccount(mangoAccount)
+            await newMangoAccount.reloadAccountData(client, group)
 
             set((state) => {
               state.mangoAccount = newMangoAccount