Merge branch 'develop' into mochi-web-preview

consolelabs · Feb 26, 2024 · 996dbbb · 996dbbb
2 parents 5bfe2ee + 929303b
commit 996dbbb
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 73 deletions.
diff --git a/apps/mochi-web/components/BottomSheet/index.tsx b/apps/mochi-web/components/BottomSheet/index.tsx
@@ -9,9 +9,7 @@ import {
 import clsx from 'clsx'
 import { createContext } from '@dwarvesf/react-utils'
 import {
-  Button,
   Drawer,
-  DrawerClose,
   DrawerContent,
   DrawerOverlay,
   DrawerPortal,
@@ -99,37 +97,33 @@ function BottomSheet({
             className,
           )}
         >
-          <div
-            className="flex justify-between items-center self-stretch mb-2"
-            ref={sheetRef}
-          >
-            <div className="flex-1">
-              <DrawerClose asChild>
-                <Button
-                  color="neutral"
-                  variant="link"
-                  size="sm"
-                  type="button"
-                  className="!p-0"
-                >
-                  Close
-                </Button>
-              </DrawerClose>
+          {isLoggedIn && (
+            <div
+              className="flex justify-between items-center self-stretch mb-2"
+              ref={sheetRef}
+            >
+              <div className="flex-1" />
+              {title && isLoggedIn ? (
+                <span className="flex-1 text-sm font-semibold text-center">
+                  {title}
+                </span>
+              ) : (
+                <>&#8203;</>
+              )}
+              <div className="flex-1" />
             </div>
-            {title && isLoggedIn ? (
-              <span className="flex-1 text-sm font-semibold text-center">
-                {title}
-              </span>
-            ) : (
-              <>&#8203;</>
-            )}
-            <div className="flex-1" />
-          </div>
+          )}
           {isLoggedIn ? (
             children
           ) : (
             <div className="flex justify-center">
-              <LoginWidget raw {...loginWidgetProps} />
+              <LoginWidget
+                onClose={() =>
+                  setOpenSheets(openSheets.filter((s) => s !== name))
+                }
+                raw
+                {...loginWidgetProps}
+              />
             </div>
           )}
         </DrawerContent>

diff --git a/apps/mochi-web/components/Header/Header.tsx b/apps/mochi-web/components/Header/Header.tsx
@@ -84,7 +84,7 @@ const LoginPopover = () => {
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent className="!p-3" sideOffset={10} collisionPadding={20}>
-          <LoginWidget raw />
+          <LoginWidget onClose={() => setIsOpen(false)} raw />
         </PopoverContent>
       </PopoverPortal>
     </Popover>

diff --git a/apps/mochi-web/components/Profile/TransactionSection.tsx b/apps/mochi-web/components/Profile/TransactionSection.tsx
@@ -65,7 +65,18 @@ export const TransactionOverviewSection = () => {
       <Card className="mt-1 !p-0 !rounded-lg !bg-background-level1">
         {ready && (
           <TransactionTable
-            cellClassName={() => 'h-[60px]'}
+            headerCellClassName={(i) =>
+              clsx({
+                'pl-4': i === 0,
+                'pr-4': i === 8,
+              })
+            }
+            cellClassName={(_r, _ri, ci) =>
+              clsx('h-[60px]', {
+                'pl-4': ci === 0,
+                'pr-4': ci === 8,
+              })
+            }
             className={clsx('!w-auto', {
               'min-h-[344px]': txnsCurrentPage?.length,
             })}

diff --git a/apps/mochi-web/components/ProfileDropdown.tsx b/apps/mochi-web/components/ProfileDropdown.tsx
@@ -1,7 +1,3 @@
-import { useFetchChangelogLatest } from '~hooks/app/useFetchChangelogLatest'
-import { useRouter } from 'next/router'
-import clsx from 'clsx'
-import { isMobile } from '~utils/isMobile'
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -44,11 +40,9 @@ export default function ProfileDropdown({
   children?: ReactNode
   className?: string
 }) {
-  const { pathname } = useRouter()
   const { setIsNavOpen } = useIsNavOpenStore()
   const { isLoggedIn, profile } = useLoginWidget()
   const { activeTheme, setTheme, theme } = useTheme()
-  const { data: changelogData } = useFetchChangelogLatest()
 
   let triggerRender = null
   if (children) {
@@ -66,24 +60,19 @@ export default function ProfileDropdown({
 
   return (
     <DropdownMenu
-      onOpenChange={(b) =>
-        isMobile() && window.innerWidth <= 1024 && setIsNavOpen(b)
-      }
+      onOpenChange={(b) => {
+        if (window.innerWidth > 1024) return
+
+        setIsNavOpen(b)
+      }}
     >
       <DropdownMenuTrigger className={className} asChild>
         {triggerRender}
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent
           wrapperClassName="z-[60]"
-          className={clsx(
-            'overflow-y-auto w-screen flex flex-col rounded-none lg:m-0 lg:block lg:w-auto lg:h-auto lg:rounded-lg lg:max-h-[calc(100vh-100px)]',
-            {
-              'h-[calc(100vh-112px)]':
-                pathname === ROUTES.HOME && !!changelogData,
-              'h-[calc(100vh-56px)]': pathname !== ROUTES.HOME,
-            },
-          )}
+          className="overflow-y-auto w-screen flex flex-col rounded-none h-[calc(100vh-56px)] lg:m-0 lg:block lg:w-auto lg:h-auto lg:rounded-lg lg:max-h-[calc(100vh-100px)]"
           sideOffset={9}
           collisionPadding={{
             right: 32,

diff --git a/apps/mochi-web/components/TransactionTable/TransactionStatusIcon.tsx b/apps/mochi-web/components/TransactionTable/TransactionStatusIcon.tsx
@@ -19,14 +19,20 @@ export const TransactionStatusIcon = (props: TransactionStatusIconProps) => {
     switch (tx.status) {
       case 'submitted':
       case 'pending': {
-        return <ClockCircleArrowColoredLine width={size} />
+        return <ClockCircleArrowColoredLine width={size} height={size} />
       }
       case 'failed':
       case 'expired': {
-        return <InfoCircleOutlined width={size} className="text-danger-solid" />
+        return (
+          <InfoCircleOutlined
+            width={size}
+            height={size}
+            className="text-danger-solid"
+          />
+        )
       }
       case 'success': {
-        return <CheckCircleHalfColoredLine width={size} />
+        return <CheckCircleHalfColoredLine width={size} height={size} />
       }
       default: {
         return null

diff --git a/apps/mochi-web/package.json b/apps/mochi-web/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@bonfida/spl-name-service": "^0.1.67",
-    "@consolelabs/mochi-formatter": "^20.0.0",
+    "@consolelabs/mochi-formatter": "^20.0.1",
     "@consolelabs/mochi-rest": "^5.3.0",
     "@dwarvesf/react-hooks": "^0.8.2",
     "@dwarvesf/react-utils": "^0.4.2",

diff --git a/packages/components/table/src/table.tsx b/packages/components/table/src/table.tsx
@@ -19,7 +19,7 @@ export interface TableProps<T> {
   className?: string
   wrapperClassName?: string
   rowClassName?: (record: T, index: number) => string
-  headerCellClassName?: string
+  headerCellClassName?: ((headerIndex: number) => string) | string
   cellClassName?: (
     record: T | null,
     rowIndex: number,
@@ -116,7 +116,10 @@ export default function Table<T extends RowData>({
                   className={tableHeaderClsx({
                     stickyHeader,
                     size,
-                    className: headerCellClassName,
+                    className:
+                      typeof headerCellClassName === 'string'
+                        ? headerCellClassName
+                        : headerCellClassName?.(header.index),
                   })}
                   colSpan={header.colSpan}
                   key={header.id}

diff --git a/packages/components/top-bar/src/mobile-nav.tsx b/packages/components/top-bar/src/mobile-nav.tsx
@@ -43,7 +43,8 @@ export const MobileNav = (props: MobileNavProps) => {
   useEffect(() => {
     if (!hasMounted) return
     onNavStateChanged?.(openMobileNav)
-  }, [hasMounted, onNavStateChanged, openMobileNav])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openMobileNav])
 
   return (
     <>

diff --git a/packages/web3/connect-wallet-widget/src/providers/evm-provider.ts b/packages/web3/connect-wallet-widget/src/providers/evm-provider.ts
@@ -110,6 +110,17 @@ export class ProviderEVM extends ChainProvider {
         return await this.connectMobile()
       }
 
+      if (['app.phantom'].every((id) => id !== this.id)) {
+        await this.provider.request({
+          method: 'wallet_requestPermissions',
+          params: [
+            {
+              eth_accounts: {},
+            },
+          ],
+        })
+      }
+
       const accounts = await this.provider.request({
         method: 'eth_requestAccounts',
       })

diff --git a/packages/web3/connect-wallet-widget/src/providers/ron-provider.ts b/packages/web3/connect-wallet-widget/src/providers/ron-provider.ts
@@ -111,6 +111,15 @@ export class ProviderRON extends ChainProvider {
         return await this.connectMobile()
       }
 
+      await this.provider.request({
+        method: 'wallet_requestPermissions',
+        params: [
+          {
+            eth_accounts: {},
+          },
+        ],
+      })
+
       const accounts = await this.provider.request({
         method: 'eth_requestAccounts',
       })

diff --git a/packages/web3/connect-wallet-widget/src/providers/sol-provider.ts b/packages/web3/connect-wallet-widget/src/providers/sol-provider.ts
@@ -62,6 +62,8 @@ export class ProviderSOL extends ChainProvider {
         return await this.connectMobile()
       }
 
+      await this.provider.connect()
+
       const signResult = await this.provider.signMessage(hexedMsg)
       let signature
       let pb = this.provider.publicKey

diff --git a/packages/web3/login-widget/src/login-content.tsx b/packages/web3/login-widget/src/login-content.tsx
@@ -200,14 +200,18 @@ export default function LoginContent({
                 >
                   Connect Options
                 </Typography>
-                <IconButton
-                  onClick={onClose}
-                  label="close"
-                  variant="link"
-                  color="neutral"
-                >
-                  <CloseLgLine className={loginIntroHeaderIconClsx()} />
-                </IconButton>
+                {onClose ? (
+                  <IconButton
+                    onClick={onClose}
+                    label="close"
+                    variant="link"
+                    color="neutral"
+                  >
+                    <CloseLgLine className={loginIntroHeaderIconClsx()} />
+                  </IconButton>
+                ) : (
+                  <div className={loginIntroHeaderIconClsx()} />
+                )}
               </div>
               <div className={loginIntroBodyClsx()}>
                 <Button

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml