From bedd8c95df4bd37cb826ab9eef8e5f94973c53d3 Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Mon, 23 Oct 2023 19:04:06 +0800
Subject: [PATCH 1/5] WIP: User page

---
 src/views/MarketplaceV2/Views/User/index.tsx  | 65 ++++++++++++++++---
 src/views/MarketplaceV2/Views/User/styled.tsx | 17 ++++-
 .../MarketplaceV2/components/Card/styled.tsx  |  4 +-
 .../components/Filters/index.tsx              |  2 +-
 .../components/Foundation/Accordion/index.tsx |  2 +-
 .../components/Foundation/Box/index.tsx       |  4 +-
 .../components/Foundation/Button/index.d.ts   |  2 +
 .../components/Foundation/Button/index.tsx    |  4 +-
 .../components/Foundation/Button/styled.ts    | 10 ++-
 .../components/Foundation/Drawer/index.tsx    |  8 +++
 .../components/UserHighlight/index.tsx        |  6 +-
 .../components/UserHighlight/styled.ts        |  6 +-
 .../MarketplaceV2/styles/Marketplace.css      |  4 ++
 13 files changed, 108 insertions(+), 26 deletions(-)

diff --git a/src/views/MarketplaceV2/Views/User/index.tsx b/src/views/MarketplaceV2/Views/User/index.tsx
index 47dc113..344fccc 100644
--- a/src/views/MarketplaceV2/Views/User/index.tsx
+++ b/src/views/MarketplaceV2/Views/User/index.tsx
@@ -3,12 +3,13 @@ import { Flex, IconButton } from '@metagg/mgg-uikit'
 import styled from 'styled-components'
 import { Grid } from '@mui/material'
 import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
-import { H2, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
+import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
+import { H2, H3, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
 import Box, { MiniBox } from '../../components/Foundation/Box'
 import withGridLayout from './withGridLayout'
 import Main from '../Main'
 import { FIELD_INFO } from './index.d'
-import { ContentWrapper } from './styled'
+import { Button, ContentWrapper } from './styled'
 
 const tempStats = {
   basicInfo: {
@@ -21,7 +22,7 @@ const tempStats = {
 const UserMain = (props) => {
   const renderInfo = () => {
     return (
-      <StyledBox>
+      <StyledBox p="1em">
         <Grid container spacing={2}>
           <Grid item xs={12} sm={10}>
             <Grid container spacing={{ xs: 1, sm: 2 }}>
@@ -31,10 +32,10 @@ const UserMain = (props) => {
                 return (
                   <>
                     <Grid item xs={12} sm={5}>
-                      <H5 fsize="0.7em">{field}</H5>
+                      <H5 fsize="0.9em">{field}</H5>
                     </Grid>
                     <Grid item xs={12} sm={7}>
-                      <P fsize="0.7em">: {val}</P>
+                      <P fsize="0.9em">: {val}</P>
                     </Grid>
                   </>
                 )
@@ -53,20 +54,64 @@ const UserMain = (props) => {
     )
   }
 
-  const renderPoint = () => {
+  const boxInfo = (name: string) => {
     return (
-      <StyledBox>
-        <Flex>
-          <H2 fsize="1.5em">POINT</H2>
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.5em">{name}</H2>
+        <Flex justifyContent="space-between" flex="0.2">
+          <IconButton variant="text" className="icon-button">
+            <MiniBox m="0">
+              <Iconloader type="fa" name="Redo" fontSize="1em" />
+            </MiniBox>
+          </IconButton>
+          <IconButton variant="text" className="icon-button">
+            <MiniBox m="0">
+              <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
+            </MiniBox>
+          </IconButton>
         </Flex>
+      </Flex>
+    )
+  }
+
+  const renderPoint = () => {
+    return (
+      <StyledBox p="1em">
+        {boxInfo('point')}
+        <Grid container columnSpacing={{ xs: 2, md: 5 }} mt={2}>
+          <Grid item xs={9}>
+            <MiniBox m="0">
+              <P>123456 MGG | 0.00</P>
+            </MiniBox>
+          </Grid>
+          <Grid item xs={3}>
+            <Button h="100%">BUY</Button>
+          </Grid>
+        </Grid>
       </StyledBox>
     )
   }
 
+  const renderCoin = () => (
+    <StyledBox p="1em">
+      {boxInfo('coin')}
+      <MiniBox>test</MiniBox>
+      <Flex justifyContent='center'>
+        <MarketPlaceButton variant="text" style={{ justifyContent: 'center', width: '100%' }}>
+          <TextWrapper>
+            <H3>WITHDRAW</H3>
+          </TextWrapper>
+        </MarketPlaceButton>
+        <Button w="20%">BUY</Button>
+      </Flex>
+    </StyledBox>
+  )
+
   return (
     <ContentWrapper>
       {renderInfo()}
       {renderPoint()}
+      {renderCoin()}
     </ContentWrapper>
   )
 }
@@ -95,6 +140,6 @@ const StyledDiv = styled.div`
   margin: 15px 0;
   padding: 15px 0px;
 `
-const StyledBox = styled(Box).attrs({ className: 'secondary-drop-shadow' })`
+const StyledBox = styled(Box).attrs({ className: 'secondary-drop-shadow' })<{ p?: string }>`
   word-wrap: break-word;
 `
diff --git a/src/views/MarketplaceV2/Views/User/styled.tsx b/src/views/MarketplaceV2/Views/User/styled.tsx
index 0c96090..a292ecf 100644
--- a/src/views/MarketplaceV2/Views/User/styled.tsx
+++ b/src/views/MarketplaceV2/Views/User/styled.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { DefaultButton } from 'views/MarketplaceV2/components/Foundation/Button/styled'
 
 export const ContentWrapper = styled.div`
   width: 100%;
@@ -7,6 +8,20 @@ export const ContentWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   & > * {
-    margin: 2em 0px;
+    margin: 1em 0px;
   }
 `
+export const Button = styled(DefaultButton)<{ w?: string; h?: string }>`
+  width: 100%;
+  font-size: 1.2em;
+  font-weight: 300;
+  padding: 0px;
+  ${({ w }) =>
+    w &&
+    `
+    width: ${w};
+  `}
+  ${({ h }) => `
+    height: ${h};
+  `}
+`
diff --git a/src/views/MarketplaceV2/components/Card/styled.tsx b/src/views/MarketplaceV2/components/Card/styled.tsx
index bec54a4..d66bd8e 100644
--- a/src/views/MarketplaceV2/components/Card/styled.tsx
+++ b/src/views/MarketplaceV2/components/Card/styled.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Button as MGGButton } from '@metagg/mgg-uikit'
 import { COLORS, DEFAULT_BORDERS } from 'views/MarketplaceV2/styles/constants'
 import { TextWrapper } from '../Foundation/Text'
 import { backgroundProp } from '../Foundation/layout'
+import { DefaultButton } from '../Foundation/Button/styled'
 
 export const CardContainer = styled.div`
   cursor: pointer;
@@ -74,7 +74,7 @@ export const Details = styled.div`
   z-index: 2;
 `
 
-export const Button = styled(MGGButton)`
+export const Button = styled(DefaultButton)`
   border-radius: 5px;
   width: 30%;
 `
diff --git a/src/views/MarketplaceV2/components/Filters/index.tsx b/src/views/MarketplaceV2/components/Filters/index.tsx
index 3ddf5ea..af377cf 100644
--- a/src/views/MarketplaceV2/components/Filters/index.tsx
+++ b/src/views/MarketplaceV2/components/Filters/index.tsx
@@ -21,7 +21,7 @@ const Filters = () => {
     <Container>
       <TextWrapper className="filter-actions">
         <Dropdown filters={filters} />
-        <Button onClick={toggleDrawer('right', true)} variant="text" iconType="fa" icon="Filter" title="Filters" />
+        <Button m='0' onClick={toggleDrawer('right', true)} variant="text" iconType="fa" icon="Filter" title="Filters" />
       </TextWrapper>
       <Filter />
     </Container>
diff --git a/src/views/MarketplaceV2/components/Foundation/Accordion/index.tsx b/src/views/MarketplaceV2/components/Foundation/Accordion/index.tsx
index e02d144..77ac483 100644
--- a/src/views/MarketplaceV2/components/Foundation/Accordion/index.tsx
+++ b/src/views/MarketplaceV2/components/Foundation/Accordion/index.tsx
@@ -10,7 +10,7 @@ const Accordion: React.FC<Props> = ({ children, ...props }) => {
   const { theme } = useTheme()
 
   return (
-    <MUIAccordion sx={{ backgroundColor: 'transparent' }}>
+    <MUIAccordion sx={{ backgroundColor: 'transparent',  boxShadow: 'none',}}>
       <AccordionSummary
         expandIcon={<ChevronDown color={theme.colors.MGG_accent2} />}
         aria-controls={`${name.toLowerCase()}-content`}
diff --git a/src/views/MarketplaceV2/components/Foundation/Box/index.tsx b/src/views/MarketplaceV2/components/Foundation/Box/index.tsx
index b96de28..e0af27d 100644
--- a/src/views/MarketplaceV2/components/Foundation/Box/index.tsx
+++ b/src/views/MarketplaceV2/components/Foundation/Box/index.tsx
@@ -13,7 +13,7 @@ const Box: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, ...prop
 
 export default Box
 
-const Container = styled.div`
+const Container = styled.div<Margins & Paddings>`
   background: ${COLORS.CARD};
   background: ${COLORS.GRADIENT_CARD};
   padding: 2em;
@@ -21,6 +21,8 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
+  ${({ p, pt, pb, pl, pr }) => customSpacingProps({ p, pt, pb, pl, pr })}
+  ${({ m, mt, mb, ml, mr }) => customSpacingProps({ m, mt, mb, ml, mr })}
 `
 const Wrapper = styled.div`
   width: 100%;
diff --git a/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts b/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts
index e7f3da2..867e985 100644
--- a/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts
+++ b/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts
@@ -4,4 +4,6 @@ export interface Props extends React.HTMLProps<HTMLButtonElement> {
   iconType?: string
   icon?: string
   variant?: any
+  p?: string;
+  m?: string;
 }
diff --git a/src/views/MarketplaceV2/components/Foundation/Button/index.tsx b/src/views/MarketplaceV2/components/Foundation/Button/index.tsx
index b78cd81..299b14d 100644
--- a/src/views/MarketplaceV2/components/Foundation/Button/index.tsx
+++ b/src/views/MarketplaceV2/components/Foundation/Button/index.tsx
@@ -6,9 +6,9 @@ import { StyledButton, StyledMiniBox } from './styled'
 import { P, TextWrapper } from '../Text'
 
 const MarketPlaceButton = (props: Props) => {
-  const { title, iconType, icon, style, children, className, variant, onClick } = props
+  const { title, iconType, icon, style, children, className, variant, onClick, p, m } = props
   return (
-    <StyledButton {...{ className, variant, onClick }}>
+    <StyledButton {...{ className, variant, onClick, p, m }}>
       <StyledMiniBox style={style}>
         {children ?? (
           <TextWrapper className="with-animation-enlarge">
diff --git a/src/views/MarketplaceV2/components/Foundation/Button/styled.ts b/src/views/MarketplaceV2/components/Foundation/Button/styled.ts
index 9d20d3c..3e2f6be 100644
--- a/src/views/MarketplaceV2/components/Foundation/Button/styled.ts
+++ b/src/views/MarketplaceV2/components/Foundation/Button/styled.ts
@@ -1,8 +1,16 @@
 import styled from 'styled-components'
 import { Button } from '@metagg/mgg-uikit'
+import { customSpacingProps } from 'views/MarketplaceV2/styles/constants'
+import { Margins, Paddings } from 'views/MarketplaceV2/styles/index.d'
 import { MiniBox } from '../Box'
 
-export const StyledButton = styled(Button)`
+export const DefaultButton = styled(Button)<Margins & Paddings>`
+  font-family: 'One Splice' !important;
+  ${({ p, pt, pb, pl, pr }) => customSpacingProps({ p, pt, pb, pl, pr })}
+  ${({ m, mt, mb, ml, mr }) => customSpacingProps({ m, mt, mb, ml, mr })}
+`
+
+export const StyledButton = styled(DefaultButton)`
   color: ${({ theme }) => theme.colors.text};
   font-size: 1em;
   margin: 0 5px;
diff --git a/src/views/MarketplaceV2/components/Foundation/Drawer/index.tsx b/src/views/MarketplaceV2/components/Foundation/Drawer/index.tsx
index 5ce6f77..c25002d 100644
--- a/src/views/MarketplaceV2/components/Foundation/Drawer/index.tsx
+++ b/src/views/MarketplaceV2/components/Foundation/Drawer/index.tsx
@@ -32,9 +32,17 @@ const StyledDiv = styled.div`
   overflow-y: scroll;
   ${({ theme }) => `
     ${theme.mediaQueries.sm} {
+      width: 35vw;
+    }
+
+    ${theme.mediaQueries.md} {
       width: 25vw;
     }
   `}
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    border-radius: 0;
+  }
 `
 const MainContent = styled.div`
   padding: 1.5em;
diff --git a/src/views/MarketplaceV2/components/UserHighlight/index.tsx b/src/views/MarketplaceV2/components/UserHighlight/index.tsx
index 516b6b6..8a4bb28 100644
--- a/src/views/MarketplaceV2/components/UserHighlight/index.tsx
+++ b/src/views/MarketplaceV2/components/UserHighlight/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconButton } from '@metagg/mgg-uikit'
+import { IconButton, Flex } from '@metagg/mgg-uikit'
 import { useLocation } from 'react-router-dom'
 import useTheme from 'hooks/useTheme'
 import useFirebaseAuth from 'hooks/useFirebaseAuth'
@@ -43,11 +43,9 @@ const UserHighlight = () => {
           {/* revert this condition */}
           {!user ? (
             <>
-              <CustomBox>
-                <P fsize="0.7em">123456789 MGG</P>
-              </CustomBox>
               <IconButton variant="text" className="icon-button" onClick={() => modal.handleOpen('buy-token')}>
                 <CustomBox>
+                  <P fsize="0.7em">123456789 MGG &nbsp;</P>
                   <Iconloader type="fa" name="Coins" fontSize="0.7em" className="with-animation-enlarge" />
                 </CustomBox>
               </IconButton>
diff --git a/src/views/MarketplaceV2/components/UserHighlight/styled.ts b/src/views/MarketplaceV2/components/UserHighlight/styled.ts
index a7c71ab..94ecd40 100644
--- a/src/views/MarketplaceV2/components/UserHighlight/styled.ts
+++ b/src/views/MarketplaceV2/components/UserHighlight/styled.ts
@@ -9,9 +9,9 @@ export const StyledDiv = styled.div`
     display: flex;
     align-items: center;
 
-    & > * {
-      height: 30px;
-    }
+    // & > * {
+    //   height: 30px;
+    // }
   }
 `
 
diff --git a/src/views/MarketplaceV2/styles/Marketplace.css b/src/views/MarketplaceV2/styles/Marketplace.css
index a8d3ca3..0b94951 100644
--- a/src/views/MarketplaceV2/styles/Marketplace.css
+++ b/src/views/MarketplaceV2/styles/Marketplace.css
@@ -77,6 +77,10 @@ button.option {
   animation: tilt-n-move-shaking 0.25s infinite;
 }
 
+.icon-button {
+  width: auto;
+}
+
 .icon-button:hover {
   background-color: transparent !important;
 }

From 39c7ff7cb74bab36bb9768fb285af6abc7cc26c5 Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Tue, 24 Oct 2023 17:17:41 +0800
Subject: [PATCH 2/5] Add data on user page

---
 .../MarketplaceV2/Views/User/Cointable.tsx    | 100 +++++++++++++
 src/views/MarketplaceV2/Views/User/Table.tsx  |  37 +++++
 src/views/MarketplaceV2/Views/User/TxTab.tsx  |  33 +++++
 src/views/MarketplaceV2/Views/User/index.d.ts |  14 ++
 src/views/MarketplaceV2/Views/User/index.tsx  | 136 ++++++++++++++----
 src/views/MarketplaceV2/Views/User/styled.tsx |  12 ++
 6 files changed, 307 insertions(+), 25 deletions(-)
 create mode 100644 src/views/MarketplaceV2/Views/User/Cointable.tsx
 create mode 100644 src/views/MarketplaceV2/Views/User/Table.tsx
 create mode 100644 src/views/MarketplaceV2/Views/User/TxTab.tsx

diff --git a/src/views/MarketplaceV2/Views/User/Cointable.tsx b/src/views/MarketplaceV2/Views/User/Cointable.tsx
new file mode 100644
index 0000000..8eb4ebb
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/Cointable.tsx
@@ -0,0 +1,100 @@
+import { IconButton, Flex } from '@metagg/mgg-uikit'
+import React from 'react'
+import styled from 'styled-components'
+import { MiniBox } from 'views/MarketplaceV2/components/Foundation/Box'
+import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
+import { P } from 'views/MarketplaceV2/components/Foundation/Text'
+
+const Cointable = () => {
+  return (
+    <TableMain>
+      <thead>
+        <tr>
+          <th colSpan={2}>Balance</th>
+          <th>Withdrawal</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td className="token-name">MGG</td>
+          <td>0.00 </td>
+          <td>
+            0.00 &nbsp;
+            <IconButton variant="text" className="icon-button">
+              <MiniBox m="0" p="5px">
+                <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
+              </MiniBox>
+            </IconButton>
+          </td>
+        </tr>
+        <tr>
+          <td className="token-name">USDT</td>
+          <td>0.00 </td>
+          <td>
+            0.00 &nbsp;
+            <IconButton variant="text" className="icon-button">
+              <MiniBox m="0" p="5px">
+                <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
+              </MiniBox>
+            </IconButton>
+          </td>
+        </tr>
+      </tbody>
+    </TableMain>
+  )
+}
+
+export default Cointable
+
+const TableMain = styled.table`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0.3em;
+
+  thead > tr th,
+  tbody > tr td {
+    font-family: 'Mustica Pro';
+    font-size: 0.9em;
+  }
+  tbody > tr td {
+    padding: 0em 1em;
+    position: relative;
+    .icon-button {
+      height: auto;
+      position: absolute;
+      margin-top: -10px;
+      display: none;
+      ${({ theme }) => `
+        ${theme.mediaQueries.sm}{
+          display: inline-block;
+        }
+      `}
+    }
+  }
+  thead > tr th {
+    padding: 1em 1em;
+  }
+  tr {
+    text-align: right;
+    .token-name {
+      text-align: center;
+    }
+
+    & > td {
+      border-right: 3px solid white;
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+
+  ${({ theme }) => `
+    ${theme.mediaQueries.sm} {
+      border-spacing: 1em;
+    }
+  `}
+`
+
+const TableHeader = styled.div`
+  border: 1px solid blue;
+`
diff --git a/src/views/MarketplaceV2/Views/User/Table.tsx b/src/views/MarketplaceV2/Views/User/Table.tsx
new file mode 100644
index 0000000..450d373
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/Table.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import styled from 'styled-components'
+import { COLORS } from 'views/MarketplaceV2/styles/constants'
+import { STATUS, TableProps } from './index.d'
+
+const Table = ({ data }: { data: TableProps[] }) => {
+  return (
+    <TableMain>
+      <tbody>
+        {data.map((d) => {
+          return (
+            <tr>
+              {Object.values(d).map((i) => (
+                <td style={{color: STATUS[i.toLowerCase()]}}>{i}</td>
+              ))}
+            </tr>
+          )
+        })}
+      </tbody>
+    </TableMain>
+  )
+}
+
+export default Table
+
+const TableMain = styled.table`
+  width: 100%;
+  tbody {
+    tr td {
+      font-family: 'Mustica Pro';
+      text-align: center;
+      font-size: 0.8em;
+      padding: 5px;
+      border-bottom: 1px solid ${COLORS.BORDER};
+    }
+  }
+`
diff --git a/src/views/MarketplaceV2/Views/User/TxTab.tsx b/src/views/MarketplaceV2/Views/User/TxTab.tsx
new file mode 100644
index 0000000..90aa225
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/TxTab.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@metagg/mgg-uikit'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { MiniBox } from 'views/MarketplaceV2/components/Foundation/Box'
+import { COLORS, DEFAULT_BORDERS } from 'views/MarketplaceV2/styles/constants'
+
+const TxTab = ({
+  tabController,
+}: {
+  tabController: { active: number; setActive: React.Dispatch<React.SetStateAction<any[]>> }
+}) => {
+  const handleChange = (newValue) => {
+    tabController.setActive(newValue)
+  }
+  return (
+    <div>
+      <Tabbutton activeIndex={tabController.active === 0} onClick={() => handleChange(0)} variant="text">
+        COIN
+      </Tabbutton>
+      <Tabbutton activeIndex={tabController.active === 1} onClick={() => handleChange(1)} variant="text">
+        NFT
+      </Tabbutton>
+    </div>
+  )
+}
+
+export default TxTab
+
+const Tabbutton = styled(Button)<{ activeIndex?: boolean }>`
+  color: white;
+  border: ${DEFAULT_BORDERS};
+  background-color: ${({ activeIndex }) => (activeIndex ? COLORS.MENU : 'transparent')}; ;
+`
diff --git a/src/views/MarketplaceV2/Views/User/index.d.ts b/src/views/MarketplaceV2/Views/User/index.d.ts
index 6155a42..627049e 100644
--- a/src/views/MarketplaceV2/Views/User/index.d.ts
+++ b/src/views/MarketplaceV2/Views/User/index.d.ts
@@ -3,3 +3,17 @@ export enum FIELD_INFO {
   wallet = 'WALLET ADDRESS',
   credit = 'CREDIT CARD',
 }
+
+export enum STATUS {
+  success = '#4cae43',
+  fail = '#b93a45'
+}
+
+
+export type TableProps = {
+    date: string;
+    status: string;
+    tx: string;
+    amount: string;
+    type: string
+}
\ No newline at end of file
diff --git a/src/views/MarketplaceV2/Views/User/index.tsx b/src/views/MarketplaceV2/Views/User/index.tsx
index 344fccc..d5e7607 100644
--- a/src/views/MarketplaceV2/Views/User/index.tsx
+++ b/src/views/MarketplaceV2/Views/User/index.tsx
@@ -9,7 +9,13 @@ import Box, { MiniBox } from '../../components/Foundation/Box'
 import withGridLayout from './withGridLayout'
 import Main from '../Main'
 import { FIELD_INFO } from './index.d'
-import { Button, ContentWrapper } from './styled'
+import { Button, ContentWrapper, NavButton, NavDiv } from './styled'
+import Cointable from './Cointable'
+import Table from './Table'
+import TxTab from './TxTab'
+
+
+// Tempdata collection
 
 const tempStats = {
   basicInfo: {
@@ -19,7 +25,75 @@ const tempStats = {
   },
 }
 
+const tempData = [
+  {
+    date: '2023.07.27',
+    status: 'Success',
+    tx: 'Buy',
+    amount: '102.00',
+    type: 'Market Money',
+  },
+  {
+    date: '2023.07.27',
+    status: 'Fail',
+    tx: 'Buy',
+    amount: '102.00',
+    type: 'Market Money',
+  },
+]
+
+const tempTx = {
+  coin: [
+    {
+      date: '2023.07.27',
+      status: 'Success',
+      tx: 'Buy',
+      amount: '102.00',
+      type: 'Market Money',
+    },
+  ],
+  nft: [
+    {
+      date: '2023.07.27',
+      status: 'Success',
+      tx: 'Buy',
+      amount: '102.00',
+      type: 'Market Money',
+    },
+    {
+      date: '2023.07.27',
+      status: 'Fail',
+      tx: 'Buy',
+      amount: '102.00',
+      type: 'Market Money',
+    },
+  ],
+}
+
 const UserMain = (props) => {
+  const { txData: {coin, nft}, tabController: {active} } = props
+  const txD = React.useMemo(() => active === 0? coin : nft, [active, coin, nft])
+
+  const boxInfo = (name: string) => {
+    return (
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.5em">{name}</H2>
+        <Flex justifyContent="space-between" flex="0.2">
+          <IconButton variant="text" className="icon-button">
+            <MiniBox m="0">
+              <Iconloader type="fa" name="Redo" fontSize="1em" />
+            </MiniBox>
+          </IconButton>
+          <IconButton variant="text" className="icon-button">
+            <MiniBox m="0">
+              <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
+            </MiniBox>
+          </IconButton>
+        </Flex>
+      </Flex>
+    )
+  }
+
   const renderInfo = () => {
     return (
       <StyledBox p="1em">
@@ -54,26 +128,6 @@ const UserMain = (props) => {
     )
   }
 
-  const boxInfo = (name: string) => {
-    return (
-      <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.5em">{name}</H2>
-        <Flex justifyContent="space-between" flex="0.2">
-          <IconButton variant="text" className="icon-button">
-            <MiniBox m="0">
-              <Iconloader type="fa" name="Redo" fontSize="1em" />
-            </MiniBox>
-          </IconButton>
-          <IconButton variant="text" className="icon-button">
-            <MiniBox m="0">
-              <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
-            </MiniBox>
-          </IconButton>
-        </Flex>
-      </Flex>
-    )
-  }
-
   const renderPoint = () => {
     return (
       <StyledBox p="1em">
@@ -81,7 +135,7 @@ const UserMain = (props) => {
         <Grid container columnSpacing={{ xs: 2, md: 5 }} mt={2}>
           <Grid item xs={9}>
             <MiniBox m="0">
-              <P>123456 MGG | 0.00</P>
+              <P fsize="0.9em">123456 MGG | 0.00</P>
             </MiniBox>
           </Grid>
           <Grid item xs={3}>
@@ -95,8 +149,10 @@ const UserMain = (props) => {
   const renderCoin = () => (
     <StyledBox p="1em">
       {boxInfo('coin')}
-      <MiniBox>test</MiniBox>
-      <Flex justifyContent='center'>
+      <MiniBox p="0.5em" m="0.5em 0">
+        <Cointable />
+      </MiniBox>
+      <Flex justifyContent="center">
         <MarketPlaceButton variant="text" style={{ justifyContent: 'center', width: '100%' }}>
           <TextWrapper>
             <H3>WITHDRAW</H3>
@@ -107,11 +163,38 @@ const UserMain = (props) => {
     </StyledBox>
   )
 
+  const renderActivityHistory = () => (
+    <StyledBox p="1em">
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.5em">Activity History</H2>
+        <MarketPlaceButton title="View All" style={{ justifyContent: 'center' }} />
+      </Flex>
+      <MiniBox p="2em 0.5em" m="0.5em 0">
+        <Table data={tempData} />
+      </MiniBox>
+    </StyledBox>
+  )
+
+  const renderTxHistory = () => (
+    <StyledBox p="1em">
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.5em">Transaction History</H2>
+        <MarketPlaceButton title="View All" style={{ justifyContent: 'center' }} />
+      </Flex>
+      <TxTab tabController={props.tabController} />
+      <MiniBox p="0.5em" m="0 0 0.5em  0">
+        <Table data={txD} />
+      </MiniBox>
+    </StyledBox>
+  )
+
   return (
     <ContentWrapper>
       {renderInfo()}
       {renderPoint()}
       {renderCoin()}
+      {renderActivityHistory()}
+      {renderTxHistory()}
     </ContentWrapper>
   )
 }
@@ -119,12 +202,15 @@ const UserMain = (props) => {
 const WrappedMain = withGridLayout(UserMain)
 
 const User = () => {
+  const [active, setActive] = useState(0)
   return (
     <Main>
       <TextWrapper>
         <StyledDiv>
           <Grid container spacing={5}>
-            <WrappedMain {...{ mediaQ: { xs: 12, md: 6, lg: 5 } }} />
+            <WrappedMain
+              {...{ mediaQ: { xs: 12, md: 6, lg: 5 }, tabController: { active, setActive }, txData: { ...tempTx } }}
+            />
           </Grid>
         </StyledDiv>
       </TextWrapper>
diff --git a/src/views/MarketplaceV2/Views/User/styled.tsx b/src/views/MarketplaceV2/Views/User/styled.tsx
index a292ecf..cf19382 100644
--- a/src/views/MarketplaceV2/Views/User/styled.tsx
+++ b/src/views/MarketplaceV2/Views/User/styled.tsx
@@ -1,5 +1,7 @@
+import { Button as MGGButton } from '@metagg/mgg-uikit';
 import styled from 'styled-components'
 import { DefaultButton } from 'views/MarketplaceV2/components/Foundation/Button/styled'
+import { COLORS } from 'views/MarketplaceV2/styles/constants';
 
 export const ContentWrapper = styled.div`
   width: 100%;
@@ -25,3 +27,13 @@ export const Button = styled(DefaultButton)<{ w?: string; h?: string }>`
     height: ${h};
   `}
 `
+export const NavDiv = styled.div`
+
+`
+export const NavButton = styled(MGGButton)`
+  width: 60px;
+  height: 4vh;
+  border-radius: 0!important;
+  background-color: transparent;
+  // border: 1px solid ${COLORS.BORDER};
+`

From e4cb351a79dbc8fa17f67cbed908727b0afc309b Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Thu, 9 Nov 2023 13:46:17 +0800
Subject: [PATCH 3/5] Finish design for "user page"

---
 .../MarketplaceV2/Views/User/Cat-Box.tsx      | 43 +++++++++++
 .../MarketplaceV2/Views/User/NftCard.tsx      | 40 ++++++++++
 .../Views/User/NftCollection.tsx              | 74 +++++++++++++++++++
 src/views/MarketplaceV2/Views/User/TxTab.tsx  | 14 +++-
 src/views/MarketplaceV2/Views/User/index.d.ts |  6 +-
 src/views/MarketplaceV2/Views/User/index.tsx  | 40 +++++-----
 src/views/MarketplaceV2/Views/User/styled.tsx | 14 +++-
 .../components/Foundation/Button/index.d.ts   |  1 +
 .../components/Foundation/Button/index.tsx    |  4 +-
 .../components/Foundation/Button/styled.ts    | 10 ++-
 .../components/Sidebar/styled.ts              |  4 +-
 .../components/UserHighlight/index.tsx        |  6 +-
 12 files changed, 223 insertions(+), 33 deletions(-)
 create mode 100644 src/views/MarketplaceV2/Views/User/Cat-Box.tsx
 create mode 100644 src/views/MarketplaceV2/Views/User/NftCard.tsx
 create mode 100644 src/views/MarketplaceV2/Views/User/NftCollection.tsx

diff --git a/src/views/MarketplaceV2/Views/User/Cat-Box.tsx b/src/views/MarketplaceV2/Views/User/Cat-Box.tsx
new file mode 100644
index 0000000..2970a17
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/Cat-Box.tsx
@@ -0,0 +1,43 @@
+import { Flex } from '@metagg/mgg-uikit'
+import React from 'react'
+import styled from 'styled-components'
+import { MiniBox } from 'views/MarketplaceV2/components/Foundation/Box'
+import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
+import { P } from 'views/MarketplaceV2/components/Foundation/Text'
+import { COLORS, DEFAULT_BORDERS } from 'views/MarketplaceV2/styles/constants'
+
+const CategoryBox = (props) => {
+  const { active, ind } = props
+  return (
+    <Container activeIndex={active === ind}>
+      <Wrapper flexDirection="column" alignItems="center">
+        <P fsize="0.8em" mb="0.2em">
+          Digger
+        </P>
+        <Iconloader type="fa" name="User" style={{ fontSize: '2em' }} />
+        <P fsize="0.8em">4</P>
+      </Wrapper>
+    </Container>
+  )
+}
+
+export default CategoryBox
+
+const Container = styled.div<{ activeIndex?: boolean }>`
+  border-radius: 10px;
+  padding: 10px;
+  border: ${DEFAULT_BORDERS};
+  display: flex;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 5px 0;
+  font-size: 1em;
+  background-color: ${COLORS.MENU};
+  ${({ activeIndex, theme }) =>
+    activeIndex &&
+    `
+      background-color: ${theme.colors.primary};
+      border: none;
+  `}
+`
+
+const Wrapper = styled(Flex)``
diff --git a/src/views/MarketplaceV2/Views/User/NftCard.tsx b/src/views/MarketplaceV2/Views/User/NftCard.tsx
new file mode 100644
index 0000000..ed197f0
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/NftCard.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useHistory } from 'react-router-dom'
+import { COLORS, DEFAULT_BORDERS } from 'views/MarketplaceV2/styles/constants'
+import { CardContainer } from 'views/Marketplace/components/NFT/styled'
+import SpriteDisplay from 'views/MarketplaceV2/components/Card/Display'
+import Header from 'views/MarketplaceV2/components/Card/Header'
+import { NftProps } from './index.d'
+
+
+
+const NftCard = (props: NftProps) => {
+  const { name, spriteName, rarity, price, badge } = props
+  const history = useHistory()
+  const handleNav = (event) => {
+    event.preventDefault()
+    history.push(`/marketplace/${badge}/${name}`)
+  }
+
+  return (
+    <Container className="secondary-drop-shadow" onClick={handleNav}>
+      <Header {...{ name, rarity, badge }} />
+      <SpriteDisplay {...{ spriteName }} />
+    </Container>
+  )
+}
+
+export default NftCard
+
+const Container = styled.div`
+  border: ${DEFAULT_BORDERS};
+  border-radius: 10px;
+  padding: 0.5em 0px 2em 0px;
+  cursor: pointer;
+  outline: solid 0px ${COLORS.BORDER};
+  transition: outline 0.1s ease;
+  &:hover {
+    outline-width: 5px;
+  }
+`
\ No newline at end of file
diff --git a/src/views/MarketplaceV2/Views/User/NftCollection.tsx b/src/views/MarketplaceV2/Views/User/NftCollection.tsx
new file mode 100644
index 0000000..7bc2d27
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/NftCollection.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Grid } from '@mui/material'
+import { Flex, IconButton } from '@metagg/mgg-uikit'
+import { useMarketplaceV2FetchData } from 'hooks/useMarketplaceV2Data'
+import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
+import { P, H2, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
+import { MiniBox } from 'views/MarketplaceV2/components/Foundation/Box'
+import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
+import { StyledButton } from 'views/MarketplaceV2/components/Foundation/Button/styled'
+import { ContentWrapper, StyledBox } from './styled'
+import CategoryBox from './Cat-Box'
+import NftCard from './NftCard'
+
+const CategoryList = ({ active, setActive }) => (
+  <Grid container columnGap={3} sx={{ margin: '0.5em 0px 2em 0px' }}>
+    <Grid item className="with-animation-enlarge">
+      <IconButton onClick={() => setActive(0)}>
+        <CategoryBox active={active} ind={0} />
+      </IconButton>
+    </Grid>
+    <Grid item className="with-animation-enlarge">
+      <IconButton onClick={() => setActive(1)}>
+        <CategoryBox active={active} ind={1} />
+      </IconButton>
+    </Grid>
+  </Grid>
+)
+
+const DisplayNft = ({ data }) => {
+  return (
+    <Grid container wrap='wrap' spacing={5}>
+      {
+        data.map((d) => (
+          <Grid item xs={12} md={6}>
+            <NftCard {...d} />
+          </Grid>
+        ))
+      }
+    </Grid>
+  )
+}
+
+const NftCollection = (props) => {
+  // TODO: Update to display user owned NFTs
+  const { data } = useMarketplaceV2FetchData()
+  const [active, setActive] = useState(0)
+  return (
+    <ContentWrapper>
+      <StyledBox p="1em">
+        <Flex alignItems="center" justifyContent="space-between">
+          <H2 fsize="1.2em">OWNED CHARACTERS/ITEMS</H2>
+          <Flex justifyContent="space-between" alignItems="center" flex="0.2">
+            <IconButton variant="text" className="icon-button">
+              <MiniBox>
+                <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
+              </MiniBox>
+            </IconButton>
+           <MarketPlaceButton variant="text" title="Item List" style={{ justifyContent: 'center' }} height="50%" />
+          </Flex>
+        </Flex>
+
+        <Content>
+          <CategoryList {...{ active, setActive }} />
+          <DisplayNft data={data} />
+        </Content>
+      </StyledBox>
+    </ContentWrapper>
+  )
+}
+
+export default NftCollection
+
+const Content = styled.div``
diff --git a/src/views/MarketplaceV2/Views/User/TxTab.tsx b/src/views/MarketplaceV2/Views/User/TxTab.tsx
index 90aa225..e8cf474 100644
--- a/src/views/MarketplaceV2/Views/User/TxTab.tsx
+++ b/src/views/MarketplaceV2/Views/User/TxTab.tsx
@@ -13,7 +13,7 @@ const TxTab = ({
     tabController.setActive(newValue)
   }
   return (
-    <div>
+    <div style={{marginTop: '0.5em'}}>
       <Tabbutton activeIndex={tabController.active === 0} onClick={() => handleChange(0)} variant="text">
         COIN
       </Tabbutton>
@@ -29,5 +29,13 @@ export default TxTab
 const Tabbutton = styled(Button)<{ activeIndex?: boolean }>`
   color: white;
   border: ${DEFAULT_BORDERS};
-  background-color: ${({ activeIndex }) => (activeIndex ? COLORS.MENU : 'transparent')}; ;
-`
+  background-color: ${({ activeIndex }) => (activeIndex ? COLORS.MENU : 'transparent')};
+  height: 25px;
+  font-size: 0.8em;
+
+  ${({theme}) => `
+    ${theme.mediaQueries.sm} {
+      height: 50px;
+    }
+  `}
+  `
diff --git a/src/views/MarketplaceV2/Views/User/index.d.ts b/src/views/MarketplaceV2/Views/User/index.d.ts
index 627049e..3595f07 100644
--- a/src/views/MarketplaceV2/Views/User/index.d.ts
+++ b/src/views/MarketplaceV2/Views/User/index.d.ts
@@ -1,3 +1,5 @@
+import { CardType } from "contexts/index.d";
+
 export enum FIELD_INFO {
   email = 'EMAIL ADDRESS',
   wallet = 'WALLET ADDRESS',
@@ -16,4 +18,6 @@ export type TableProps = {
     tx: string;
     amount: string;
     type: string
-}
\ No newline at end of file
+}
+
+export type NftProps = CardType
\ No newline at end of file
diff --git a/src/views/MarketplaceV2/Views/User/index.tsx b/src/views/MarketplaceV2/Views/User/index.tsx
index d5e7607..a49490c 100644
--- a/src/views/MarketplaceV2/Views/User/index.tsx
+++ b/src/views/MarketplaceV2/Views/User/index.tsx
@@ -5,15 +5,15 @@ import { Grid } from '@mui/material'
 import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
 import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
 import { H2, H3, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
-import Box, { MiniBox } from '../../components/Foundation/Box'
+import { MiniBox } from '../../components/Foundation/Box'
 import withGridLayout from './withGridLayout'
 import Main from '../Main'
 import { FIELD_INFO } from './index.d'
-import { Button, ContentWrapper, NavButton, NavDiv } from './styled'
+import { ActionDiv, Button, ContentWrapper, NavButton, NavDiv, StyledBox } from './styled'
 import Cointable from './Cointable'
 import Table from './Table'
 import TxTab from './TxTab'
-
+import NftCollection from './NftCollection'
 
 // Tempdata collection
 
@@ -71,13 +71,16 @@ const tempTx = {
 }
 
 const UserMain = (props) => {
-  const { txData: {coin, nft}, tabController: {active} } = props
-  const txD = React.useMemo(() => active === 0? coin : nft, [active, coin, nft])
+  const {
+    txData: { coin, nft },
+    tabController: { active },
+  } = props
+  const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft])
 
   const boxInfo = (name: string) => {
     return (
       <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.5em">{name}</H2>
+        <H2 fsize="1.2em">{name}</H2>
         <Flex justifyContent="space-between" flex="0.2">
           <IconButton variant="text" className="icon-button">
             <MiniBox m="0">
@@ -105,10 +108,10 @@ const UserMain = (props) => {
                 const val = stat[1]
                 return (
                   <>
-                    <Grid item xs={12} sm={5}>
+                    <Grid item xs={5} sm={5}>
                       <H5 fsize="0.9em">{field}</H5>
                     </Grid>
-                    <Grid item xs={12} sm={7}>
+                    <Grid item xs={7} sm={7}>
                       <P fsize="0.9em">: {val}</P>
                     </Grid>
                   </>
@@ -152,22 +155,22 @@ const UserMain = (props) => {
       <MiniBox p="0.5em" m="0.5em 0">
         <Cointable />
       </MiniBox>
-      <Flex justifyContent="center">
+      <ActionDiv justifyContent="center">
         <MarketPlaceButton variant="text" style={{ justifyContent: 'center', width: '100%' }}>
-          <TextWrapper>
-            <H3>WITHDRAW</H3>
+          <TextWrapper >
+            <H3 className="with-animation-enlarge">WITHDRAW</H3>
           </TextWrapper>
         </MarketPlaceButton>
         <Button w="20%">BUY</Button>
-      </Flex>
+      </ActionDiv>
     </StyledBox>
   )
 
   const renderActivityHistory = () => (
     <StyledBox p="1em">
       <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.5em">Activity History</H2>
-        <MarketPlaceButton title="View All" style={{ justifyContent: 'center' }} />
+        <H2 fsize="1.2em">Activity History</H2>
+        <MarketPlaceButton variant="text" title="View All" style={{ justifyContent: 'center' }} height="50%" />
       </Flex>
       <MiniBox p="2em 0.5em" m="0.5em 0">
         <Table data={tempData} />
@@ -178,8 +181,8 @@ const UserMain = (props) => {
   const renderTxHistory = () => (
     <StyledBox p="1em">
       <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.5em">Transaction History</H2>
-        <MarketPlaceButton title="View All" style={{ justifyContent: 'center' }} />
+        <H2 fsize="1.2em">Transaction History</H2>
+        <MarketPlaceButton variant="text" title="View All" style={{ justifyContent: 'center' }} height="50%" />
       </Flex>
       <TxTab tabController={props.tabController} />
       <MiniBox p="0.5em" m="0 0 0.5em  0">
@@ -200,6 +203,7 @@ const UserMain = (props) => {
 }
 
 const WrappedMain = withGridLayout(UserMain)
+const WrappedNftList = withGridLayout(NftCollection)
 
 const User = () => {
   const [active, setActive] = useState(0)
@@ -211,6 +215,7 @@ const User = () => {
             <WrappedMain
               {...{ mediaQ: { xs: 12, md: 6, lg: 5 }, tabController: { active, setActive }, txData: { ...tempTx } }}
             />
+            <WrappedNftList {...{ mediaQ: { xs: 12, md: 6, lg: 7 } }} />
           </Grid>
         </StyledDiv>
       </TextWrapper>
@@ -226,6 +231,3 @@ const StyledDiv = styled.div`
   margin: 15px 0;
   padding: 15px 0px;
 `
-const StyledBox = styled(Box).attrs({ className: 'secondary-drop-shadow' })<{ p?: string }>`
-  word-wrap: break-word;
-`
diff --git a/src/views/MarketplaceV2/Views/User/styled.tsx b/src/views/MarketplaceV2/Views/User/styled.tsx
index cf19382..cff6d04 100644
--- a/src/views/MarketplaceV2/Views/User/styled.tsx
+++ b/src/views/MarketplaceV2/Views/User/styled.tsx
@@ -1,7 +1,8 @@
-import { Button as MGGButton } from '@metagg/mgg-uikit';
+import { Button as MGGButton, Flex } from '@metagg/mgg-uikit';
 import styled from 'styled-components'
 import { DefaultButton } from 'views/MarketplaceV2/components/Foundation/Button/styled'
 import { COLORS } from 'views/MarketplaceV2/styles/constants';
+import Box from '../../components/Foundation/Box'
 
 export const ContentWrapper = styled.div`
   width: 100%;
@@ -37,3 +38,14 @@ export const NavButton = styled(MGGButton)`
   background-color: transparent;
   // border: 1px solid ${COLORS.BORDER};
 `
+
+export const StyledBox = styled(Box).attrs({ className: 'secondary-drop-shadow' })<{ p?: string }>`
+  word-wrap: break-word;
+`
+
+export const ActionDiv = styled(Flex)`
+  height:4vh;
+  & > * {
+    height: 100%;
+  }
+`
\ No newline at end of file
diff --git a/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts b/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts
index 867e985..9159acf 100644
--- a/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts
+++ b/src/views/MarketplaceV2/components/Foundation/Button/index.d.ts
@@ -6,4 +6,5 @@ export interface Props extends React.HTMLProps<HTMLButtonElement> {
   variant?: any
   p?: string;
   m?: string;
+  height?: string;
 }
diff --git a/src/views/MarketplaceV2/components/Foundation/Button/index.tsx b/src/views/MarketplaceV2/components/Foundation/Button/index.tsx
index 299b14d..1f75aa1 100644
--- a/src/views/MarketplaceV2/components/Foundation/Button/index.tsx
+++ b/src/views/MarketplaceV2/components/Foundation/Button/index.tsx
@@ -6,9 +6,9 @@ import { StyledButton, StyledMiniBox } from './styled'
 import { P, TextWrapper } from '../Text'
 
 const MarketPlaceButton = (props: Props) => {
-  const { title, iconType, icon, style, children, className, variant, onClick, p, m } = props
+  const { title, iconType, icon, style, children, className, variant, onClick, p, m, height } = props
   return (
-    <StyledButton {...{ className, variant, onClick, p, m }}>
+    <StyledButton {...{ className, variant, onClick, p, m, height }}>
       <StyledMiniBox style={style}>
         {children ?? (
           <TextWrapper className="with-animation-enlarge">
diff --git a/src/views/MarketplaceV2/components/Foundation/Button/styled.ts b/src/views/MarketplaceV2/components/Foundation/Button/styled.ts
index 3e2f6be..c52e900 100644
--- a/src/views/MarketplaceV2/components/Foundation/Button/styled.ts
+++ b/src/views/MarketplaceV2/components/Foundation/Button/styled.ts
@@ -6,20 +6,24 @@ import { MiniBox } from '../Box'
 
 export const DefaultButton = styled(Button)<Margins & Paddings>`
   font-family: 'One Splice' !important;
+  font-weight: 300;
   ${({ p, pt, pb, pl, pr }) => customSpacingProps({ p, pt, pb, pl, pr })}
   ${({ m, mt, mb, ml, mr }) => customSpacingProps({ m, mt, mb, ml, mr })}
 `
 
-export const StyledButton = styled(DefaultButton)`
+export const StyledButton = styled(DefaultButton)<{height?: string}>`
   color: ${({ theme }) => theme.colors.text};
-  font-size: 1em;
+  // font-size: 1em;
   margin: 0 5px;
   padding: 0;
   border-radius: 5px;
+  ${({height}) => height && `
+    height: ${height};
+  `}
 `
 
 export const StyledMiniBox = styled(MiniBox)`
   height: 100%;
   justify-content: flex-start;
-  width: 100px;
+  // width: 100px;
 `
diff --git a/src/views/MarketplaceV2/components/Sidebar/styled.ts b/src/views/MarketplaceV2/components/Sidebar/styled.ts
index 7aabeb1..c3ff80f 100644
--- a/src/views/MarketplaceV2/components/Sidebar/styled.ts
+++ b/src/views/MarketplaceV2/components/Sidebar/styled.ts
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import { COLORS, SETTINGS_SIDEBAR, breakpointMap } from 'views/MarketplaceV2/styles/constants'
 import { CONTAINER_PROPS } from '../Foundation/layout'
 
+
 export const StyledPanel = styled.div`
   display: flex;
   flex-direction: column;
@@ -38,7 +39,7 @@ export const BodyWrapper = styled.div`
 
 export const Inner = styled.div`
   flex-grow: 1;
-  padding: 15px;
+  padding: 10px;
   ${({ theme }) => `
     ${theme.mediaQueries.sm} {
       padding: 24px;
@@ -49,3 +50,4 @@ export const Inner = styled.div`
 
   `}
 `
+
diff --git a/src/views/MarketplaceV2/components/UserHighlight/index.tsx b/src/views/MarketplaceV2/components/UserHighlight/index.tsx
index 8a4bb28..385007c 100644
--- a/src/views/MarketplaceV2/components/UserHighlight/index.tsx
+++ b/src/views/MarketplaceV2/components/UserHighlight/index.tsx
@@ -45,13 +45,13 @@ const UserHighlight = () => {
             <>
               <IconButton variant="text" className="icon-button" onClick={() => modal.handleOpen('buy-token')}>
                 <CustomBox>
-                  <P fsize="0.7em">123456789 MGG &nbsp;</P>
-                  <Iconloader type="fa" name="Coins" fontSize="0.7em" className="with-animation-enlarge" />
+                  <P fsize="0.6em">123456789 MGG &nbsp;</P>
+                  <Iconloader type="fa" name="Coins" fontSize="0.6em" className="with-animation-enlarge" />
                 </CustomBox>
               </IconButton>
               <IconButton variant="text" style={{ padding: 0 }} className="icon-button">
                 <CustomBox>
-                  <Iconloader type="fi" name="LogOut" fontSize="0.7em" className="with-animation-enlarge" />
+                  <Iconloader type="fi" name="LogOut" fontSize="0.6em" className="with-animation-enlarge" />
                 </CustomBox>
               </IconButton>
             </>

From 53baaf20590f410f5d53cc42170bca50a1548afe Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Thu, 9 Nov 2023 13:57:23 +0800
Subject: [PATCH 4/5] Minor "user-page" code cleanup

---
 .../MarketplaceV2/Views/User/Usermain.tsx     | 151 +++++++++++++++++
 src/views/MarketplaceV2/Views/User/index.tsx  | 156 ++----------------
 2 files changed, 163 insertions(+), 144 deletions(-)
 create mode 100644 src/views/MarketplaceV2/Views/User/Usermain.tsx

diff --git a/src/views/MarketplaceV2/Views/User/Usermain.tsx b/src/views/MarketplaceV2/Views/User/Usermain.tsx
new file mode 100644
index 0000000..f60fd46
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/Usermain.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react'
+import { Flex, IconButton } from '@metagg/mgg-uikit'
+import styled from 'styled-components'
+import { Grid } from '@mui/material'
+import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
+import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
+import { H2, H3, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
+import { MiniBox } from '../../components/Foundation/Box'
+import withGridLayout from './withGridLayout'
+import Main from '../Main'
+import { FIELD_INFO } from './index.d'
+import { ActionDiv, Button, ContentWrapper, NavButton, NavDiv, StyledBox } from './styled'
+import Cointable from './Cointable'
+import Table from './Table'
+import TxTab from './TxTab'
+
+const UserMain = (props) => {
+  const {
+    txHistory: { coin, nft },
+    activityHistory,
+    stats,
+    tabController: { active },
+  } = props
+  const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft])
+
+  const boxInfo = (name: string) => {
+    return (
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.2em">{name}</H2>
+        <Flex justifyContent="space-between" flex="0.2">
+          <IconButton variant="text" className="icon-button">
+            <MiniBox m="0">
+              <Iconloader type="fa" name="Redo" fontSize="1em" />
+            </MiniBox>
+          </IconButton>
+          <IconButton variant="text" className="icon-button">
+            <MiniBox m="0">
+              <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
+            </MiniBox>
+          </IconButton>
+        </Flex>
+      </Flex>
+    )
+  }
+
+  const renderInfo = () => {
+    return (
+      <StyledBox p="1em">
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={10}>
+            <Grid container spacing={{ xs: 1, sm: 2 }}>
+              {Object.entries(stats.basicInfo).map((stat) => {
+                const field = FIELD_INFO[`${stat[0]}`]
+                const val = stat[1]
+                return (
+                  <>
+                    <Grid item xs={5} sm={5}>
+                      <H5 fsize="0.9em">{field}</H5>
+                    </Grid>
+                    <Grid item xs={7} sm={7}>
+                      <P fsize="0.9em">: {val}</P>
+                    </Grid>
+                  </>
+                )
+              })}
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={2} display="flex" alignItems="center" justifyContent="center">
+            <IconButton variant="text" className="icon-button">
+              <MiniBox>
+                <Iconloader type="fa" name="Edit" fontSize="1em" />
+              </MiniBox>
+            </IconButton>
+          </Grid>
+        </Grid>
+      </StyledBox>
+    )
+  }
+
+  const renderPoint = () => {
+    return (
+      <StyledBox p="1em">
+        {boxInfo('point')}
+        <Grid container columnSpacing={{ xs: 2, md: 5 }} mt={2}>
+          <Grid item xs={9}>
+            <MiniBox m="0">
+              <P fsize="0.9em">123456 MGG | 0.00</P>
+            </MiniBox>
+          </Grid>
+          <Grid item xs={3}>
+            <Button h="100%">BUY</Button>
+          </Grid>
+        </Grid>
+      </StyledBox>
+    )
+  }
+
+  const renderCoin = () => (
+    <StyledBox p="1em">
+      {boxInfo('coin')}
+      <MiniBox p="0.5em" m="0.5em 0">
+        <Cointable />
+      </MiniBox>
+      <ActionDiv justifyContent="center">
+        <MarketPlaceButton variant="text" style={{ justifyContent: 'center', width: '100%' }}>
+          <TextWrapper>
+            <H3 className="with-animation-enlarge">WITHDRAW</H3>
+          </TextWrapper>
+        </MarketPlaceButton>
+        <Button w="20%">BUY</Button>
+      </ActionDiv>
+    </StyledBox>
+  )
+
+  const renderActivityHistory = () => (
+    <StyledBox p="1em">
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.2em">Activity History</H2>
+        <MarketPlaceButton variant="text" title="View All" style={{ justifyContent: 'center' }} height="50%" />
+      </Flex>
+      <MiniBox p="2em 0.5em" m="0.5em 0">
+        <Table data={activityHistory} />
+      </MiniBox>
+    </StyledBox>
+  )
+
+  const renderTxHistory = () => (
+    <StyledBox p="1em">
+      <Flex alignItems="center" justifyContent="space-between">
+        <H2 fsize="1.2em">Transaction History</H2>
+        <MarketPlaceButton variant="text" title="View All" style={{ justifyContent: 'center' }} height="50%" />
+      </Flex>
+      <TxTab tabController={props.tabController} />
+      <MiniBox p="0.5em" m="0 0 0.5em  0">
+        <Table data={txD} />
+      </MiniBox>
+    </StyledBox>
+  )
+
+  return (
+    <ContentWrapper>
+      {renderInfo()}
+      {renderPoint()}
+      {renderCoin()}
+      {renderActivityHistory()}
+      {renderTxHistory()}
+    </ContentWrapper>
+  )
+}
+
+export default UserMain
diff --git a/src/views/MarketplaceV2/Views/User/index.tsx b/src/views/MarketplaceV2/Views/User/index.tsx
index a49490c..cd58358 100644
--- a/src/views/MarketplaceV2/Views/User/index.tsx
+++ b/src/views/MarketplaceV2/Views/User/index.tsx
@@ -1,18 +1,10 @@
-import React, { useState, useEffect } from 'react'
-import { Flex, IconButton } from '@metagg/mgg-uikit'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Grid } from '@mui/material'
-import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
-import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
-import { H2, H3, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
-import { MiniBox } from '../../components/Foundation/Box'
+import { TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
 import withGridLayout from './withGridLayout'
 import Main from '../Main'
-import { FIELD_INFO } from './index.d'
-import { ActionDiv, Button, ContentWrapper, NavButton, NavDiv, StyledBox } from './styled'
-import Cointable from './Cointable'
-import Table from './Table'
-import TxTab from './TxTab'
+import UserMain from './Usermain'
 import NftCollection from './NftCollection'
 
 // Tempdata collection
@@ -25,7 +17,7 @@ const tempStats = {
   },
 }
 
-const tempData = [
+const tempActivityData = [
   {
     date: '2023.07.27',
     status: 'Success',
@@ -70,137 +62,7 @@ const tempTx = {
   ],
 }
 
-const UserMain = (props) => {
-  const {
-    txData: { coin, nft },
-    tabController: { active },
-  } = props
-  const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft])
-
-  const boxInfo = (name: string) => {
-    return (
-      <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.2em">{name}</H2>
-        <Flex justifyContent="space-between" flex="0.2">
-          <IconButton variant="text" className="icon-button">
-            <MiniBox m="0">
-              <Iconloader type="fa" name="Redo" fontSize="1em" />
-            </MiniBox>
-          </IconButton>
-          <IconButton variant="text" className="icon-button">
-            <MiniBox m="0">
-              <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
-            </MiniBox>
-          </IconButton>
-        </Flex>
-      </Flex>
-    )
-  }
-
-  const renderInfo = () => {
-    return (
-      <StyledBox p="1em">
-        <Grid container spacing={2}>
-          <Grid item xs={12} sm={10}>
-            <Grid container spacing={{ xs: 1, sm: 2 }}>
-              {Object.entries(tempStats.basicInfo).map((stat) => {
-                const field = FIELD_INFO[`${stat[0]}`]
-                const val = stat[1]
-                return (
-                  <>
-                    <Grid item xs={5} sm={5}>
-                      <H5 fsize="0.9em">{field}</H5>
-                    </Grid>
-                    <Grid item xs={7} sm={7}>
-                      <P fsize="0.9em">: {val}</P>
-                    </Grid>
-                  </>
-                )
-              })}
-            </Grid>
-          </Grid>
-          <Grid item xs={12} sm={2} display="flex" alignItems="center" justifyContent="center">
-            <IconButton variant="text" className="icon-button">
-              <MiniBox>
-                <Iconloader type="fa" name="Edit" fontSize="1em" />
-              </MiniBox>
-            </IconButton>
-          </Grid>
-        </Grid>
-      </StyledBox>
-    )
-  }
-
-  const renderPoint = () => {
-    return (
-      <StyledBox p="1em">
-        {boxInfo('point')}
-        <Grid container columnSpacing={{ xs: 2, md: 5 }} mt={2}>
-          <Grid item xs={9}>
-            <MiniBox m="0">
-              <P fsize="0.9em">123456 MGG | 0.00</P>
-            </MiniBox>
-          </Grid>
-          <Grid item xs={3}>
-            <Button h="100%">BUY</Button>
-          </Grid>
-        </Grid>
-      </StyledBox>
-    )
-  }
-
-  const renderCoin = () => (
-    <StyledBox p="1em">
-      {boxInfo('coin')}
-      <MiniBox p="0.5em" m="0.5em 0">
-        <Cointable />
-      </MiniBox>
-      <ActionDiv justifyContent="center">
-        <MarketPlaceButton variant="text" style={{ justifyContent: 'center', width: '100%' }}>
-          <TextWrapper >
-            <H3 className="with-animation-enlarge">WITHDRAW</H3>
-          </TextWrapper>
-        </MarketPlaceButton>
-        <Button w="20%">BUY</Button>
-      </ActionDiv>
-    </StyledBox>
-  )
-
-  const renderActivityHistory = () => (
-    <StyledBox p="1em">
-      <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.2em">Activity History</H2>
-        <MarketPlaceButton variant="text" title="View All" style={{ justifyContent: 'center' }} height="50%" />
-      </Flex>
-      <MiniBox p="2em 0.5em" m="0.5em 0">
-        <Table data={tempData} />
-      </MiniBox>
-    </StyledBox>
-  )
-
-  const renderTxHistory = () => (
-    <StyledBox p="1em">
-      <Flex alignItems="center" justifyContent="space-between">
-        <H2 fsize="1.2em">Transaction History</H2>
-        <MarketPlaceButton variant="text" title="View All" style={{ justifyContent: 'center' }} height="50%" />
-      </Flex>
-      <TxTab tabController={props.tabController} />
-      <MiniBox p="0.5em" m="0 0 0.5em  0">
-        <Table data={txD} />
-      </MiniBox>
-    </StyledBox>
-  )
-
-  return (
-    <ContentWrapper>
-      {renderInfo()}
-      {renderPoint()}
-      {renderCoin()}
-      {renderActivityHistory()}
-      {renderTxHistory()}
-    </ContentWrapper>
-  )
-}
+// Tempdata collection -- end
 
 const WrappedMain = withGridLayout(UserMain)
 const WrappedNftList = withGridLayout(NftCollection)
@@ -213,7 +75,13 @@ const User = () => {
         <StyledDiv>
           <Grid container spacing={5}>
             <WrappedMain
-              {...{ mediaQ: { xs: 12, md: 6, lg: 5 }, tabController: { active, setActive }, txData: { ...tempTx } }}
+              {...{
+                mediaQ: { xs: 12, md: 6, lg: 5 },
+                tabController: { active, setActive },
+                txHistory: { ...tempTx },
+                activityHistory: tempActivityData,
+                stats: tempStats,
+              }}
             />
             <WrappedNftList {...{ mediaQ: { xs: 12, md: 6, lg: 7 } }} />
           </Grid>

From 433e65cda25f016f398d23cb0392f53c94696d84 Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Thu, 9 Nov 2023 14:30:39 +0800
Subject: [PATCH 5/5] Finish user page

---
 .../Views/User/NftCollection.tsx              | 22 ++++++-------
 .../MarketplaceV2/Views/User/Usermain.tsx     | 31 ++++++++++++-------
 .../components/Foundation/Tooltip/index.tsx   | 12 +++++++
 3 files changed, 42 insertions(+), 23 deletions(-)
 create mode 100644 src/views/MarketplaceV2/components/Foundation/Tooltip/index.tsx

diff --git a/src/views/MarketplaceV2/Views/User/NftCollection.tsx b/src/views/MarketplaceV2/Views/User/NftCollection.tsx
index 7bc2d27..e99dd6b 100644
--- a/src/views/MarketplaceV2/Views/User/NftCollection.tsx
+++ b/src/views/MarketplaceV2/Views/User/NftCollection.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { Grid } from '@mui/material'
 import { Flex, IconButton } from '@metagg/mgg-uikit'
 import { useMarketplaceV2FetchData } from 'hooks/useMarketplaceV2Data'
+import BasicTooltip from 'views/MarketplaceV2/components/Foundation/Tooltip'
 import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
 import { P, H2, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
 import { MiniBox } from 'views/MarketplaceV2/components/Foundation/Box'
@@ -29,14 +30,12 @@ const CategoryList = ({ active, setActive }) => (
 
 const DisplayNft = ({ data }) => {
   return (
-    <Grid container wrap='wrap' spacing={5}>
-      {
-        data.map((d) => (
-          <Grid item xs={12} md={6}>
-            <NftCard {...d} />
-          </Grid>
-        ))
-      }
+    <Grid container wrap="wrap" spacing={5}>
+      {data.map((d) => (
+        <Grid item xs={12} md={6}>
+          <NftCard {...d} />
+        </Grid>
+      ))}
     </Grid>
   )
 }
@@ -51,12 +50,13 @@ const NftCollection = (props) => {
         <Flex alignItems="center" justifyContent="space-between">
           <H2 fsize="1.2em">OWNED CHARACTERS/ITEMS</H2>
           <Flex justifyContent="space-between" alignItems="center" flex="0.2">
-            <IconButton variant="text" className="icon-button">
+            <BasicTooltip title="Owned Characters or Items">
               <MiniBox>
                 <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
               </MiniBox>
-            </IconButton>
-           <MarketPlaceButton variant="text" title="Item List" style={{ justifyContent: 'center' }} height="50%" />
+            </BasicTooltip>
+
+            <MarketPlaceButton variant="text" title="Item List" style={{ justifyContent: 'center' }} height="50%" />
           </Flex>
         </Flex>
 
diff --git a/src/views/MarketplaceV2/Views/User/Usermain.tsx b/src/views/MarketplaceV2/Views/User/Usermain.tsx
index f60fd46..7b57acd 100644
--- a/src/views/MarketplaceV2/Views/User/Usermain.tsx
+++ b/src/views/MarketplaceV2/Views/User/Usermain.tsx
@@ -1,13 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import { Flex, IconButton } from '@metagg/mgg-uikit'
-import styled from 'styled-components'
 import { Grid } from '@mui/material'
 import Iconloader from 'views/MarketplaceV2/components/Foundation/Iconloader'
 import MarketPlaceButton from 'views/MarketplaceV2/components/Foundation/Button'
+import BasicTooltip from 'views/MarketplaceV2/components/Foundation/Tooltip'
 import { H2, H3, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text'
+import useMarketplaceV2 from 'hooks/useMarketplaceV2'
 import { MiniBox } from '../../components/Foundation/Box'
-import withGridLayout from './withGridLayout'
-import Main from '../Main'
 import { FIELD_INFO } from './index.d'
 import { ActionDiv, Button, ContentWrapper, NavButton, NavDiv, StyledBox } from './styled'
 import Cointable from './Cointable'
@@ -15,6 +14,10 @@ import Table from './Table'
 import TxTab from './TxTab'
 
 const UserMain = (props) => {
+  const {
+    controllers: { modal },
+  } = useMarketplaceV2()
+
   const {
     txHistory: { coin, nft },
     activityHistory,
@@ -23,21 +26,21 @@ const UserMain = (props) => {
   } = props
   const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft])
 
-  const boxInfo = (name: string) => {
+  const boxInfo = (name: string, tooltip: string) => {
     return (
       <Flex alignItems="center" justifyContent="space-between">
         <H2 fsize="1.2em">{name}</H2>
-        <Flex justifyContent="space-between" flex="0.2">
+        <Flex justifyContent="space-between" flex="0.2" alignItems="center">
           <IconButton variant="text" className="icon-button">
             <MiniBox m="0">
               <Iconloader type="fa" name="Redo" fontSize="1em" />
             </MiniBox>
           </IconButton>
-          <IconButton variant="text" className="icon-button">
-            <MiniBox m="0">
+          <BasicTooltip title={tooltip}>
+            <MiniBox m="0" style={{ height: '50%' }}>
               <Iconloader type="fa" name="InfoCircle" fontSize="1em" />
             </MiniBox>
-          </IconButton>
+          </BasicTooltip>
         </Flex>
       </Flex>
     )
@@ -80,7 +83,7 @@ const UserMain = (props) => {
   const renderPoint = () => {
     return (
       <StyledBox p="1em">
-        {boxInfo('point')}
+        {boxInfo('point', 'Access point')}
         <Grid container columnSpacing={{ xs: 2, md: 5 }} mt={2}>
           <Grid item xs={9}>
             <MiniBox m="0">
@@ -88,7 +91,9 @@ const UserMain = (props) => {
             </MiniBox>
           </Grid>
           <Grid item xs={3}>
-            <Button h="100%">BUY</Button>
+            <Button h="100%" onClick={() => modal.handleOpen('buy-token')}>
+              BUY
+            </Button>
           </Grid>
         </Grid>
       </StyledBox>
@@ -97,7 +102,7 @@ const UserMain = (props) => {
 
   const renderCoin = () => (
     <StyledBox p="1em">
-      {boxInfo('coin')}
+      {boxInfo('coin', 'Access coin')}
       <MiniBox p="0.5em" m="0.5em 0">
         <Cointable />
       </MiniBox>
@@ -107,7 +112,9 @@ const UserMain = (props) => {
             <H3 className="with-animation-enlarge">WITHDRAW</H3>
           </TextWrapper>
         </MarketPlaceButton>
-        <Button w="20%">BUY</Button>
+        <Button w="20%" onClick={() => modal.handleOpen('buy-token')}>
+          BUY
+        </Button>
       </ActionDiv>
     </StyledBox>
   )
diff --git a/src/views/MarketplaceV2/components/Foundation/Tooltip/index.tsx b/src/views/MarketplaceV2/components/Foundation/Tooltip/index.tsx
new file mode 100644
index 0000000..daca7f8
--- /dev/null
+++ b/src/views/MarketplaceV2/components/Foundation/Tooltip/index.tsx
@@ -0,0 +1,12 @@
+import { Tooltip } from '@mui/material'
+import React from 'react'
+
+const BasicTooltip: React.FC<{title: string, children: any}> = ({title, children}) => {
+  return (
+    <Tooltip title={title} arrow placement="top">
+      {children}
+    </Tooltip>
+  )
+}
+
+export default BasicTooltip
\ No newline at end of file