Merge branch 'develop' into mochi-web-preview

.changeset/dirty-berries-try.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/pagination": minor
+---
+
+Add custom items per page & hide on single page

.changeset/twelve-dolphins-add.md

@@ -0,0 +1,5 @@
+---
+"@mochi-ui/pagination": minor
+---
+
+Add custom page input

apps/mochi-web/components/Profile/RecapSection.tsx

@@ -256,7 +256,7 @@ export const RecapSection = () => {
     total_spending = 0,
     total_volume = 0,
   } = exchange || {}
-  const totalExchange = total_spending + total_receive + total_volume
+  const totalExchange = total_spending + total_receive + mochiBalance
   const receive_pnl = getPnl(exchange?.receive_pnl)
   const spending_pnl = getPnl(exchange?.spending_pnl)
 
@@ -309,7 +309,7 @@ export const RecapSection = () => {
         <Separator />
         <div className="flex items-center justify-between py-2">
           <div className="flex items-center space-x-2">
-            <Typography level="h8">Mochi Exchange Flow</Typography>
+            <Typography level="h8">Exchange Flow Recap</Typography>
             <Tooltip
               className="max-w-xs"
               content="Overview of token balances, including daily sent and received on Mochi wallet."
@@ -356,25 +356,32 @@ export const RecapSection = () => {
                 : 0,
             }}
           />
-          <div className="h-8 bg-primary-solid-disable flex-1" />
+          <div className="h-8 bg-success-plain-active flex-1" />
         </div>
         {[
           {
-            label: 'Received',
+            label: 'Income',
             value: total_receive,
             pnl: receive_pnl,
             icon: (
               <div className="w-2.5 h-2.5 rounded-full mr-2 bg-primary-solid" />
             ),
           },
           {
-            label: 'Sent',
+            label: 'Expense',
             value: total_spending,
             pnl: spending_pnl,
             icon: (
               <div className="w-2.5 h-2.5 rounded-full mr-2 bg-primary-outline-border" />
             ),
           },
+          {
+            label: 'Current balance',
+            value: mochiBalance,
+            icon: (
+              <div className="w-2.5 h-2.5 rounded-full mr-2 bg-success-plain-active" />
+            ),
+          },
         ].map((item) => (
           <div key={item.label} className="py-2 space-y-2">
             <div className="flex items-center justify-between">
@@ -383,34 +390,30 @@ export const RecapSection = () => {
                 {item.label}
               </Typography>
               <Typography level="p5" fontWeight="md">
-                {`$${mochiUtils.formatDigit({
-                  value: item.value || 0,
-                  fractionDigits: 2,
-                })}`}
+                {`${mochiUtils.formatUsdDigit(item.value || 0)}`}
               </Typography>
             </div>
-            <div className="flex items-center justify-between">
-              <Typography level="p5">Compare with last period</Typography>
-              <ValueChange trend={Number(item.pnl) < 0 ? 'down' : 'up'}>
-                <ValueChangeIndicator />
-                {mochiUtils.formatPercentDigit(
-                  Number.isNaN(Number(item.pnl)) || item.pnl === ''
-                    ? 0
-                    : Math.abs(Number(item.pnl)),
-                )}
-              </ValueChange>
-            </div>
+            {!!item.pnl && (
+              <div className="flex items-center justify-between">
+                <Typography level="p5">Compare with last period</Typography>
+                <ValueChange trend={Number(item.pnl) < 0 ? 'down' : 'up'}>
+                  <ValueChangeIndicator />
+                  {mochiUtils.formatPercentDigit(
+                    Number.isNaN(Number(item.pnl)) || item.pnl === ''
+                      ? 0
+                      : Math.abs(Number(item.pnl)),
+                  )}
+                </ValueChange>
+              </div>
+            )}
           </div>
         ))}
         <Separator className="my-2" />
         <div className="flex items-center justify-between py-2">
           <Typography level="h8">Net Worth</Typography>
-          <Typography level="p5" fontWeight="md">
-            {`$${mochiUtils.formatDigit({
-              value: total_volume || 0,
-              fractionDigits: 2,
-            })}`}
-          </Typography>
+          <ValueChange trend={total_volume < 0 ? 'down' : 'up'}>
+            {`${mochiUtils.formatUsdDigit(total_volume || 0)}`}
+          </ValueChange>
         </div>
       </div>
     </Card>

apps/mochi-web/components/Profile/TransactionSection.tsx

@@ -95,6 +95,7 @@ export const TransactionOverviewSection = () => {
                 onItemPerPageChange: setSize,
                 onPageChange: setPage,
                 className: 'px-4',
+                allowCustomPage: true,
               },
             }}
             onRow={(tx) => {

apps/mochi-web/components/ProfileDropdown.tsx

@@ -101,7 +101,7 @@ export default function ProfileDropdown({
             rightExtra={
               <Switch
                 disabled={theme === 'system'}
-                checked={activeTheme === 'dark'}
+                checked={theme !== 'system' && activeTheme === 'dark'}
               />
             }
             onClick={(e) => {
@@ -119,7 +119,7 @@ export default function ProfileDropdown({
             }
             onClick={(e) => {
               e.preventDefault()
-              setTheme(theme === 'system' ? activeTheme ?? 'light' : 'system')
+              setTheme(theme === 'system' ? 'light' : 'system')
             }}
           >
             System Theme

apps/mochi-web/components/TokenTableList.tsx

@@ -176,7 +176,7 @@ export const TokenTableList = ({
   const [sort, setSort] = useState('')
 
   return (
-    <ScrollArea className="h-[430px]">
+    <ScrollArea className="h-[480px]">
       <ScrollAreaViewport>
         <Table
           {...props}

apps/mochi-web/components/explore/index/sections/TransactionSection.tsx

@@ -61,6 +61,7 @@ export const TransactionSection = () => {
           totalItems: total,
           onItemPerPageChange: setSize,
           onPageChange: setPage,
+          allowCustomPage: true,
         },
       }}
       className="px-6"

apps/mochi-web/components/settings/general/AddNewWalletModal.tsx

@@ -1,3 +1,4 @@
+import { Profile } from '@consolelabs/mochi-rest'
 import {
   Modal,
   ModalContent,
@@ -9,6 +10,8 @@ import { LoginWidget } from '@mochi-web3/login-widget'
 import { useState } from 'react'
 import { WretchError } from 'wretch/resolver'
 import { API } from '~constants/api'
+import { useWalletStore } from '~store'
+import { truncateWallet } from '~utils/string'
 
 interface Props {
   code?: string
@@ -18,6 +21,7 @@ interface Props {
 
 export const AddNewWalletModal = ({ code, isOpen, onOpenChange }: Props) => {
   const [loading, setLoading] = useState(false)
+  const { setWallets } = useWalletStore()
 
   return (
     <Modal open={isOpen} onOpenChange={onOpenChange}>
@@ -59,7 +63,15 @@ export const AddNewWalletModal = ({ code, isOpen, onOpenChange }: Props) => {
                     scheme: 'danger',
                   }),
                 ])
-                .json()
+                .json((r: Profile) => {
+                  setWallets(r)
+                  toast({
+                    description: `Your ${truncateWallet(
+                      address,
+                    )} wallet is now connected to Mochi.`,
+                    scheme: 'success',
+                  })
+                })
                 .finally(() => {
                   setLoading(false)
                   onOpenChange(false)

apps/mochi-web/components/settings/general/MoneySource.tsx

@@ -1,6 +1,10 @@
 import {
   Button,
   FormControl,
+  ScrollArea,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
   SectionHeader,
   SectionHeaderActions,
   SectionHeaderDescription,
@@ -32,6 +36,17 @@ export const MoneySource = () => {
   const { isOpen, onOpenChange } = useDisclosure()
   const [code, setCode] = useState('')
 
+  const sortedWallets = [...wallets].sort((a, b) => {
+    if (a.id === defaultMoneySource.platform) return -1
+    if (b.id === defaultMoneySource.platform) return 1
+    if (a.chainSymbol === 'SOL' && b.chainSymbol !== 'SOL') return -1
+    if (a.chainSymbol !== 'SOL' && b.chainSymbol === 'SOL') return 1
+    return (
+      Number(b.usd_amount.slice(b.usd_amount.indexOf('$') + 1)) -
+      Number(a.usd_amount.slice(a.usd_amount.indexOf('$') + 1))
+    )
+  })
+
   const onAddNewWallet = async () => {
     if (!profile?.id) return
     const res = await api.profile.connect.requestCode(profile.id)
@@ -96,50 +111,61 @@ export const MoneySource = () => {
                       </div>
                     </SelectTrigger>
                     <SelectContent align="end">
-                      {wallets.map((each) =>
-                        each.id === defaultMoneySource.platform ? (
-                          <SelectItem
-                            key={defaultMoneySource.platform_identifier}
-                            value={defaultMoneySource.platform_identifier}
-                            leftIcon={<Mochi className="w-6 h-6" />}
-                            subTitle={
-                              <span className="font-normal">
-                                {each.usd_amount}
-                              </span>
-                            }
-                          >
-                            {each.title}
-                          </SelectItem>
-                        ) : (
-                          <SelectItem
-                            key={each.id}
-                            value={each.id}
-                            leftIcon={
-                              <TokenAvatar
-                                src={each.icon}
-                                name={each.chainSymbol}
-                              />
-                            }
-                            subTitle={
-                              <span className="font-normal">
-                                {each.usd_amount}
-                              </span>
-                            }
-                            disabled={!each.balances.length}
-                          >
-                            {each.title}
-                          </SelectItem>
-                        ),
-                      )}
-                      <SelectSeparator />
-                      <Button
-                        variant="ghost"
-                        className="pr-2 pl-2 w-full h-9"
-                        onClick={onAddNewWallet}
+                      <ScrollArea
+                        className={
+                          wallets.length > 5 ? 'h-96 max-h-[40vh]' : ''
+                        }
                       >
-                        <PlusLine className="w-4 h-4" />
-                        Add new wallet
-                      </Button>
+                        <ScrollAreaViewport>
+                          {sortedWallets.map((each) =>
+                            each.id === defaultMoneySource.platform ? (
+                              <SelectItem
+                                key={defaultMoneySource.platform_identifier}
+                                value={defaultMoneySource.platform_identifier}
+                                leftIcon={<Mochi className="w-6 h-6" />}
+                                subTitle={
+                                  <span className="font-normal">
+                                    {each.usd_amount}
+                                  </span>
+                                }
+                              >
+                                {each.title}
+                              </SelectItem>
+                            ) : (
+                              <SelectItem
+                                key={each.id}
+                                value={each.id}
+                                leftIcon={
+                                  <TokenAvatar
+                                    src={each.icon}
+                                    name={each.chainSymbol}
+                                  />
+                                }
+                                subTitle={
+                                  <span className="font-normal">
+                                    {each.usd_amount}
+                                  </span>
+                                }
+                                disabled={!each.balances.length}
+                              >
+                                {each.title}
+                              </SelectItem>
+                            ),
+                          )}
+                          <SelectSeparator />
+                          <Button
+                            variant="ghost"
+                            className="pr-2 pl-2 w-full h-9"
+                            onClick={onAddNewWallet}
+                          >
+                            <PlusLine className="w-4 h-4" />
+                            Add new wallet
+                          </Button>
+                        </ScrollAreaViewport>
+                        <ScrollAreaScrollbar>
+                          <ScrollAreaThumb />
+                        </ScrollAreaScrollbar>
+                      </ScrollArea>
                     </SelectContent>
                   </Select>
                 </SectionHeaderActions>

apps/mochi-web/constants/api.ts

@@ -86,7 +86,7 @@ export const GET_PATHS = {
   GET_TOTAL_BALANCES: (profileId: string) => `/users/${profileId}/balances`,
   GET_MONTHLY_STATS: (profileId: string) =>
     `/profile/${profileId}/monthly-stats`,
-  CHANGELOGS: '/product-metadata/changelogs/',
+  CHANGELOGS: '/product-metadata/changelogs',
   CHANGELOG_DETAIL: (version: string) =>
     `/product-metadata/changelogs/${version}`,
   CHANGELOGS_LATEST: '/product-metadata/changelogs/latest',

apps/mochi-web/hooks/changelog/useFetchChangelogs.ts

@@ -0,0 +1,24 @@
+import useSWR from 'swr'
+import { API, GET_PATHS } from '~constants/api'
+import { ResponseProductChangelogs } from '~types/mochi-schema'
+
+export const SWR_KEY_FETCH_CHANGELOGS = 'SWR_KEY_FETCH_CHANGELOGS'
+
+export const useFetchChangelogs = (
+  query: { page?: number; size?: number } = {},
+) => {
+  const { data } = useSWR<ResponseProductChangelogs>(
+    [SWR_KEY_FETCH_CHANGELOGS, query],
+    async ([_, id]: [any, string]) => {
+      if (!id) return {}
+      return API.MOCHI.query(query)
+        .get(GET_PATHS.CHANGELOGS)
+        .json((r) => r ?? {})
+    },
+  )
+
+  return {
+    data: data?.data,
+    pagination: data?.pagination,
+  }
+}

apps/mochi-web/hooks/useTheme.ts

@@ -5,7 +5,7 @@ export type ActiveThemeValue = 'light' | 'dark' | undefined
 export type ThemeValue = 'light' | 'dark' | 'system' | undefined
 
 export const useTheme = () => {
-  const { theme, systemTheme, ...rest } = useInternalTheme()
+  const { theme = 'system', systemTheme, ...rest } = useInternalTheme()
   const [mounted, setMounted] = useState(false)
   useEffect(() => {
     setMounted(true)