feat: marketplace order book history (#3241)

crates/rooch-open-rpc-spec/schemas/openrpc.json

@@ -12,7 +12,7 @@
       "name": "Apache-2.0",
       "url": "https://raw.githubusercontent.com/rooch-network/rooch/main/LICENSE"
     },
-    "version": "0.8.8"
+    "version": "0.8.9"
   },
   "methods": [
     {

infra/rooch-portal-v2/src/app/history/[tick]/page.tsx

@@ -0,0 +1,11 @@
+import MarketPlaceHistoryView from 'src/sections/history/view';
+
+// ----------------------------------------------------------------------
+
+export const metadata = {
+  title: 'Market | History',
+};
+
+export default function Page({ params }: { params: { tick: string } }) {
+  return <MarketPlaceHistoryView tick={params.tick} />;
+}

infra/rooch-portal-v2/src/components/iconify copy/iconify.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import { Icon } from '@iconify/react';
+
+import Box, { BoxProps } from '@mui/material/Box';
+
+import { IconifyProps } from './types';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  icon: IconifyProps;
+}
+
+const Iconify = forwardRef<SVGElement, Props>(({ icon, width = 20, sx, ...other }, ref) => (
+  <Box
+    ref={ref}
+    component={Icon}
+    className="component-iconify"
+    icon={icon}
+    sx={{ width, height: width, ...sx }}
+    {...other}
+  />
+));
+
+export default Iconify;

infra/rooch-portal-v2/src/components/iconify copy/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export { default } from './iconify';

infra/rooch-portal-v2/src/components/iconify copy/types.ts

@@ -0,0 +1,5 @@
+import { IconifyIcon } from '@iconify/react';
+
+// ----------------------------------------------------------------------
+
+export type IconifyProps = IconifyIcon | string;

infra/rooch-portal-v2/src/components/market/inscription-shop-card.tsx

@@ -113,24 +113,24 @@ export default function InscriptionShopCard({
             }}
           />
         ) : (
-            <Chip
-              size="small"
-              label={
-                seller === account?.toStr()
-                  ? '#Your Order'
-                  : `#${objectId.slice(objectId.length - 7, objectId.length)}`
-              }
-              variant="soft"
-              color={seller === account?.toStr() ? 'success' : 'info'}
-              sx={{
-                '& .MuiChip-label': {
-                  fontSize: {
-                    xs: '0.75rem',
-                    sm: '0.8125rem',
-                  },
+          <Chip
+            size="small"
+            label={
+              seller === account?.toStr()
+                ? '#Your Order'
+                : `#${objectId.slice(objectId.length - 7, objectId.length)}`
+            }
+            variant="soft"
+            color={seller === account?.toStr() ? 'success' : 'info'}
+            sx={{
+              '& .MuiChip-label': {
+                fontSize: {
+                  xs: '0.75rem',
+                  sm: '0.8125rem',
                 },
-              }}
-            />
+              },
+            }}
+          />
         )}
       </Stack>
       <Typography
@@ -164,7 +164,6 @@ export default function InscriptionShopCard({
         </Typography>
         {fromCoinBalanceInfo.symbol.toUpperCase()}/{toCoinBalanceInfo.symbol.toUpperCase()}
       </Typography>
-      {/* <Typography>{mrcItem.content.fields.tick}</Typography> */}
 
       <Typography
         sx={{

infra/rooch-portal-v2/src/routes/paths.ts

@@ -12,6 +12,7 @@ export const paths = {
     market: `${ROOTS.DASHBOARD}/trade/market`,
     liquidity: `${ROOTS.DASHBOARD}/trade/liquidity`,
     swap: `${ROOTS.DASHBOARD}/trade/swap`,
+    history: `${ROOTS.DASHBOARD}/history`,
     apps: `${ROOTS.DASHBOARD}/apps`,
     settings: `${ROOTS.DASHBOARD}/settings`,
     search: `${ROOTS.DASHBOARD}/search`,

infra/rooch-portal-v2/src/sections/history/components/empty-content.tsx

@@ -0,0 +1,68 @@
+import Box from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Stack, { StackProps } from '@mui/material/Stack';
+
+// ----------------------------------------------------------------------
+
+type EmptyContentProps = StackProps & {
+  title?: string;
+  imgUrl?: string;
+  filled?: boolean;
+  description?: string;
+  action?: React.ReactNode;
+};
+
+export default function EmptyContent({
+  title,
+  imgUrl,
+  action,
+  filled,
+  description,
+  sx,
+  ...other
+}: EmptyContentProps) {
+  return (
+    <Stack
+      flexGrow={1}
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        px: 3,
+        height: 1,
+        ...(filled && {
+          borderRadius: 2,
+          bgcolor: (theme) => alpha(theme.palette.grey[500], 0.04),
+          border: (theme) => `dashed 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+        }),
+        ...sx,
+      }}
+      {...other}
+    >
+      <Box
+        component="img"
+        alt="empty content"
+        src={imgUrl || '/assets/icons/empty/ic_content.svg'}
+        sx={{ width: 1, maxWidth: 160 }}
+      />
+
+      {title && (
+        <Typography
+          variant="h6"
+          component="span"
+          sx={{ mt: 1, color: 'text.disabled', textAlign: 'center' }}
+        >
+          {title}
+        </Typography>
+      )}
+
+      {description && (
+        <Typography variant="caption" sx={{ mt: 1, color: 'text.disabled', textAlign: 'center' }}>
+          {description}
+        </Typography>
+      )}
+
+      {action && action}
+    </Stack>
+  );
+}