Merge branch 'marketplace-v2' into feature/15-add-buy-button

mgguild · Nov 30, 2023 · 0f13411 · 0f13411
2 parents a9b9224 + a1ccd92
commit 0f13411
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 38 deletions.
diff --git a/public/favicon-v2.ico b/public/favicon-v2.ico
diff --git a/src/views/MarketplaceV2/Views/User/UserStyle.css b/src/views/MarketplaceV2/Views/User/UserStyle.css
@@ -0,0 +1,7 @@
+.user-input {
+  width: 100%;
+  background-color: transparent;
+  color: #ffff;
+  border: none;
+  border-bottom: 1px solid #3898b8;
+}
diff --git a/src/views/MarketplaceV2/Views/User/Usermain.tsx b/src/views/MarketplaceV2/Views/User/Usermain.tsx
@@ -21,11 +21,15 @@ const UserMain = (props) => {
   const {
     txHistory: { coin, nft },
     activityHistory,
-    stats,
+    userInfo,
     tabController: { active },
+    handleFunctions: { handleUserInfo },
   } = props
   const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft])
-
+  const [enableEdit, setEnableEdit] = useState<boolean>(false)
+  const handleEdit = () => {
+    setEnableEdit(!enableEdit)
+  }
   const boxInfo = (name: string, tooltip: string) => {
     return (
       <Flex alignItems="center" justifyContent="space-between">
@@ -52,24 +56,32 @@ const UserMain = (props) => {
         <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]
+              {Object.entries(userInfo).map((info) => {
+                const field = FIELD_INFO[`${info[0]}`]
+                const val = info[1].toString()
                 return (
                   <>
                     <Grid item xs={5} sm={5}>
-                      <H5 fsize="0.9em">{field}</H5>
+                      <H5 fsize="0.9em">{field}:</H5>
                     </Grid>
                     <Grid item xs={7} sm={7}>
-                      <P fsize="0.9em">: {val}</P>
+                      {enableEdit ? (
+                        <input
+                          className='user-input'
+                          value={val}
+                          onChange={(e) => handleUserInfo({ field: info[0], value: e.target.value })}
+                        />
+                      ) : (
+                        <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">
+            <IconButton variant="text" className="icon-button" onClick={handleEdit}>
               <MiniBox>
                 <Iconloader type="fa" name="Edit" fontSize="1em" />
               </MiniBox>

diff --git a/src/views/MarketplaceV2/Views/User/index.tsx b/src/views/MarketplaceV2/Views/User/index.tsx
@@ -6,15 +6,14 @@ import withGridLayout from './withGridLayout'
 import Main from '../Main'
 import UserMain from './Usermain'
 import NftCollection from './NftCollection'
+import './UserStyle.css'
 
 // Tempdata collection
 
-const tempStats = {
-  basicInfo: {
-    email: '[email protected]',
-    wallet: '0x0000',
-    credit: 'NA',
-  },
+const tempUserInfo = {
+  email: '[email protected]',
+  wallet: '0x0000',
+  credit: 'NA',
 }
 
 const tempActivityData = [
@@ -69,6 +68,12 @@ const WrappedNftList = withGridLayout(NftCollection)
 
 const User = () => {
   const [active, setActive] = useState(0)
+  // TODO: Replace with actual data
+  const [userInfo, setUserInfo] = useState(tempUserInfo)
+  const handleUserInfo = (payload: { field: string, value: string }) => {
+    setUserInfo({ ...userInfo, [`${payload.field}`]: payload.value })
+    console.log(userInfo)
+  }
   return (
     <Main>
       <TextWrapper>
@@ -80,7 +85,8 @@ const User = () => {
                 tabController: { active, setActive },
                 txHistory: { ...tempTx },
                 activityHistory: tempActivityData,
-                stats: tempStats,
+                userInfo,
+                handleFunctions: { handleUserInfo },
               }}
             />
             <WrappedNftList {...{ mediaQ: { xs: 12, md: 6, lg: 7 } }} />

diff --git a/src/views/MarketplaceV2/components/Card/Display.tsx b/src/views/MarketplaceV2/components/Card/Display.tsx
@@ -1,17 +1,20 @@
 import React from 'react'
+import { Flex } from '@metagg/mgg-uikit'
 import { GoogleDriveLink } from 'views/MarketplaceV2/constants/config'
 import { QueryType, useQueryAsset } from 'hooks/useMarketplaceV2'
 import { Display } from './styled'
 import SvgIcon from '../Foundation/SvgIcon'
 
+
 type Props = {
   spriteName: string
   width?: number
   height?: number
   style?: any
+  hideBg?: boolean
 }
 
-const SpriteDisplay = ({ spriteName, width, height, style }: Props) => {
+const SpriteDisplay = ({ spriteName, width, height, style, hideBg }: Props) => {
   const spriteId = useQueryAsset({
     name: spriteName,
     type: QueryType.SPRITES,
@@ -20,10 +23,14 @@ const SpriteDisplay = ({ spriteName, width, height, style }: Props) => {
   const h = height ?? 130
   const src = GoogleDriveLink + spriteId
   const Img = <img alt="logo" src={src} />
-  return (
+  return !hideBg ? (
     <Display bg={src} style={style}>
       <SvgIcon Img={Img} width={w} height={h} />
     </Display>
+  ) : (
+    <Flex alignItems='center' justifyContent='center' style={style}>
+      <SvgIcon Img={Img} width={w} height={h} />
+    </Flex>
   )
 }
 
@@ -33,4 +40,5 @@ SpriteDisplay.defaultProps = {
   width: 130,
   height: 130,
   style: {},
+  hideBg: false,
 }
diff --git a/src/views/MarketplaceV2/components/Card/index.tsx b/src/views/MarketplaceV2/components/Card/index.tsx
@@ -31,7 +31,7 @@ export default function Card(props: Props) {
     <>
       <CardContainer className="secondary-drop-shadow" onClick={handleNav}>
         <Header {...{ name, rarity, badge }} />
-        <SpriteDisplay {...{ spriteName }} />
+        <SpriteDisplay {...{ spriteName }} style={{margin: '0 10px'}} />
         <Details>
           <TextBox>
             <H5 fsize="0.8em">Current Price</H5>

diff --git a/src/views/MarketplaceV2/components/Featured/Cards.tsx b/src/views/MarketplaceV2/components/Featured/Cards.tsx
@@ -1,42 +1,57 @@
 import React from 'react'
-import { Grid } from '@mui/material'
+import Carousel from 'react-multi-carousel'
+import 'react-multi-carousel/lib/styles.css'
 import styled from 'styled-components'
 import Card from '../Card'
 import './style.css'
 
 const Cards = (props) => {
   const { items } = props
+
   return (
-    <Grid
-      className="scrollable-container"
-      container
-      wrap="nowrap"
-      mt={5}
-      pb={5}
-      columnSpacing={{ xs: 2 }}
-      sx={{
-        overflowX: 'scroll',
-        overflowY: 'hidden',
-        overflow: 'auto',
-      }}
+    <Carousel
+      responsive={responsive}
+      infinite
+      showDots
+      autoPlay
+      removeArrowOnDeviceType={['tablet', 'mobile']}
+      containerClass="carousel-container"
+      dotListClass="custom-dot-list-style"
     >
       {items.map((item, ind) => {
         const id = ind + 1
         return (
-          <Grid key={id} item alignItems="center" xs={12}>
-            <StyledDiv>
-              <Card {...item} />
-            </StyledDiv>
-          </Grid>
+          <StyledDiv>
+            <Card {...item} />
+          </StyledDiv>
         )
       })}
-    </Grid>
+    </Carousel>
   )
 }
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 3,
+    slidesToSlide: 3, // optional, default to 1.
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 464 },
+    items: 2,
+    slidesToSlide: 2, // optional, default to 1.
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1,
+    slidesToSlide: 1, // optional, default to 1.
+  },
+}
 
 export default Cards
 
 const StyledDiv = styled.div`
+  margin: 5vh 0px;
+  padding: 2vh;
   min-width: 220px;
   ${({ theme }) => `
     ${theme.mediaQueries.xl} {

diff --git a/src/views/MarketplaceV2/components/Featured/style.css b/src/views/MarketplaceV2/components/Featured/style.css
@@ -12,3 +12,12 @@
     width: 24px;
   }
 }
+
+.custom-dot-list-style .react-multi-carousel-dot button {
+  background-color: #fff;
+  border: 1px solid #3898b8;
+}
+
+.custom-dot-list-style .react-multi-carousel-dot--active button {
+  background-color: #4bdefd;
+}
diff --git a/src/views/MarketplaceV2/constants/config.ts b/src/views/MarketplaceV2/constants/config.ts
@@ -1,6 +1,6 @@
 import { SocialProp, Links } from './config.d'
 
-export const marketplaceURL = '/marketplace'
+export const marketplaceURL = 'https://metasagawarriors.com/'
 export const socials: SocialProp[] = [
   {
     name: 'Twitter',