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 ( + + +

+ Digger +

+ +

4

+ + + ) +} + +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/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 ( + + + + Balance + Withdrawal + + + + + MGG + 0.00 + + 0.00   + + + + + + + + + USDT + 0.00 + + 0.00   + + + + + + + + + + ) +} + +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/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 ( + +
+ + + ) +} + +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..e99dd6b --- /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 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' +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 }) => ( + + + setActive(0)}> + + + + + setActive(1)}> + + + + +) + +const DisplayNft = ({ data }) => { + return ( + + {data.map((d) => ( + + + + ))} + + ) +} + +const NftCollection = (props) => { + // TODO: Update to display user owned NFTs + const { data } = useMarketplaceV2FetchData() + const [active, setActive] = useState(0) + return ( + + + +

OWNED CHARACTERS/ITEMS

+ + + + + + + + + + + + + + + + + + ) +} + +export default NftCollection + +const Content = styled.div`` 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 ( + + + {data.map((d) => { + return ( + + {Object.values(d).map((i) => ( + {i} + ))} + + ) + })} + + + ) +} + +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..e8cf474 --- /dev/null +++ b/src/views/MarketplaceV2/Views/User/TxTab.tsx @@ -0,0 +1,41 @@ +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> } +}) => { + const handleChange = (newValue) => { + tabController.setActive(newValue) + } + return ( +
+ handleChange(0)} variant="text"> + COIN + + handleChange(1)} variant="text"> + NFT + +
+ ) +} + +export default TxTab + +const Tabbutton = styled(Button)<{ activeIndex?: boolean }>` + color: white; + border: ${DEFAULT_BORDERS}; + 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/Usermain.tsx b/src/views/MarketplaceV2/Views/User/Usermain.tsx new file mode 100644 index 0000000..7b57acd --- /dev/null +++ b/src/views/MarketplaceV2/Views/User/Usermain.tsx @@ -0,0 +1,158 @@ +import React, { useState, useEffect } from 'react' +import { Flex, IconButton } from '@metagg/mgg-uikit' +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 { 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 { + controllers: { modal }, + } = useMarketplaceV2() + + const { + txHistory: { coin, nft }, + activityHistory, + stats, + tabController: { active }, + } = props + const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft]) + + const boxInfo = (name: string, tooltip: string) => { + return ( + +

{name}

+ + + + + + + + + + + + + + ) + } + + const renderInfo = () => { + return ( + + + + + {Object.entries(stats.basicInfo).map((stat) => { + const field = FIELD_INFO[`${stat[0]}`] + const val = stat[1] + return ( + <> + +
{field}
+ + +

: {val}

+ + + ) + })} + + + + + + + + + + + + ) + } + + const renderPoint = () => { + return ( + + {boxInfo('point', 'Access point')} + + + +

123456 MGG | 0.00

+ + + + + + + + ) + } + + const renderCoin = () => ( + + {boxInfo('coin', 'Access coin')} + + + + + + +

WITHDRAW

+ + + + + + ) + + const renderActivityHistory = () => ( + + +

Activity History

+ + + + + + + ) + + const renderTxHistory = () => ( + + +

Transaction History

+ + + + +
+ + + ) + + return ( + + {renderInfo()} + {renderPoint()} + {renderCoin()} + {renderActivityHistory()} + {renderTxHistory()} + + ) +} + +export default UserMain diff --git a/src/views/MarketplaceV2/Views/User/index.d.ts b/src/views/MarketplaceV2/Views/User/index.d.ts index 6155a42..3595f07 100644 --- a/src/views/MarketplaceV2/Views/User/index.d.ts +++ b/src/views/MarketplaceV2/Views/User/index.d.ts @@ -1,5 +1,23 @@ +import { CardType } from "contexts/index.d"; + export enum FIELD_INFO { email = 'EMAIL ADDRESS', 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 +} + +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 47dc113..cd58358 100644 --- a/src/views/MarketplaceV2/Views/User/index.tsx +++ b/src/views/MarketplaceV2/Views/User/index.tsx @@ -1,14 +1,13 @@ -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 { H2, H5, P, TextWrapper } from 'views/MarketplaceV2/components/Foundation/Text' -import Box, { 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 { ContentWrapper } from './styled' +import UserMain from './Usermain' +import NftCollection from './NftCollection' + +// Tempdata collection const tempStats = { basicInfo: { @@ -18,68 +17,73 @@ const tempStats = { }, } -const UserMain = (props) => { - const renderInfo = () => { - return ( - - - - - {Object.entries(tempStats.basicInfo).map((stat) => { - const field = FIELD_INFO[`${stat[0]}`] - const val = stat[1] - return ( - <> - -
{field}
- - -

: {val}

- - - ) - })} - - - - - - - - - - - - ) - } - - const renderPoint = () => { - return ( - - -

POINT

- - - ) - } +const tempActivityData = [ + { + 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', + }, +] - return ( - - {renderInfo()} - {renderPoint()} - - ) +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', + }, + ], } +// Tempdata collection -- end + const WrappedMain = withGridLayout(UserMain) +const WrappedNftList = withGridLayout(NftCollection) const User = () => { + const [active, setActive] = useState(0) return (
- + + @@ -95,6 +99,3 @@ const StyledDiv = styled.div` margin: 15px 0; padding: 15px 0px; ` -const StyledBox = styled(Box).attrs({ className: 'secondary-drop-shadow' })` - word-wrap: break-word; -` diff --git a/src/views/MarketplaceV2/Views/User/styled.tsx b/src/views/MarketplaceV2/Views/User/styled.tsx index 0c96090..cff6d04 100644 --- a/src/views/MarketplaceV2/Views/User/styled.tsx +++ b/src/views/MarketplaceV2/Views/User/styled.tsx @@ -1,4 +1,8 @@ +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%; @@ -7,6 +11,41 @@ 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}; + `} +` +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}; +` + +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/Card/styled.tsx b/src/views/MarketplaceV2/components/Card/styled.tsx index 6d0e13f..8279fcc 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 = () => { -