added frontend code (#6)

2026-01-25 06:08:03 -05:00 · 2020-05-02 00:57:58 +05:30
parent 545b243f87
commit e2b3691259
31 changed files with 11639 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.env
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.9.12",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@walletconnect/web3-provider": "^1.0.0-beta.47",
+    "bulma": "^0.8.2",
+    "fortmatic": "^2.0.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "web3": "^1.2.7",
+    "web3modal": "^1.5.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "node-sass": "^4.14.0"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta
+			name="description"
+			content="Web site created using create-react-app"
+		/>
+		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+		<!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+		<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
+			integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
+			crossorigin="anonymous"
+		/>
+		<title>React App</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    --></body>
+</html>
--- a/frontend/public/logo192.png
+++ b/frontend/public/logo192.png
--- a/frontend/public/logo512.png
+++ b/frontend/public/logo512.png
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,18 @@
+.main {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.connect {
+	position: absolute;
+	top: 50%;
+}
+
+@media only screen and (max-width: 770px) {
+	.main {
+		height: 100%;
+	}
+}
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import Web3 from 'web3';
+import Web3Modal from 'web3modal';
+import WalletConnectProvider from '@walletconnect/web3-provider';
+import Fortmatic from 'fortmatic';
+
+import 'bulma';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+
+import './App.css';
+
+import Profile from './pages/profile/profile';
+
+const THEME = createMuiTheme({
+	typography: {
+		fontFamily: "'Manrope', sans-serif;",
+	},
+});
+
+const providerOptions = {
+	walletconnect: {
+		package: WalletConnectProvider,
+		options: {
+			infuraId: process.env.REACT_APP_INFURA_ID,
+		},
+	},
+	fortmatic: {
+		package: Fortmatic,
+		options: {
+			key: process.env.REACT_APP_FORTMATIC_ID,
+		},
+	},
+};
+
+const web3Modal = new Web3Modal({
+	network: 'ropsten',
+	cacheProvider: false,
+	providerOptions,
+});
+
+class App extends React.Component {
+	constructor() {
+		super();
+		this.state = {};
+	}
+
+	loginHandler = async () => {
+		web3Modal.clearCachedProvider();
+		const provider = await web3Modal.connect();
+		const web3 = new Web3(provider);
+		const accounts = await web3.eth.getAccounts();
+
+		this.setState({ provider, web3, account: accounts[0] });
+	};
+
+	render() {
+		return (
+			<ThemeProvider theme={THEME}>
+				<div className='main'>
+					{this.state.account ? (
+						<Profile account={this.state.account} />
+					) : (
+						<button
+							className='button is-primary is-medium is-rounded connect'
+							onClick={this.loginHandler}
+						>
+							Connect
+						</button>
+					)}
+				</div>
+			</ThemeProvider>
+		);
+	}
+}
+
+export default App;
--- a/frontend/src/assets/pushpin.png
+++ b/frontend/src/assets/pushpin.png
--- a/frontend/src/assets/star.png
+++ b/frontend/src/assets/star.png
--- a/frontend/src/components/achievements/achievements.css
+++ b/frontend/src/components/achievements/achievements.css
@@ -0,0 +1,10 @@
+.achievements {
+	max-height: 48.5vh;
+	overflow-y: scroll;
+}
+
+.achievements-panel {
+	height: 100%;
+	max-height: 100%;
+	overflow-y: scroll;
+}
--- a/frontend/src/components/achievements/achievements.js
+++ b/frontend/src/components/achievements/achievements.js
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import 'bulma';
+
+import { makeStyles } from '@material-ui/core/styles';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
+
+import Star from '../../assets/star.png';
+
+import './achievements.css';
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: '100%',
+		maxWidth: '100%',
+	},
+	heading: {
+		color: '#fe346e',
+		fontFamily: "'Share Tech Mono', monospace",
+		fontSize: 15,
+		flexShrink: 0,
+		maxWidth: '100%',
+	},
+	description: {
+		fontFamily: "'Share Tech Mono', monospace",
+		fontSize: 13,
+	},
+}));
+
+const dummy = [
+	{
+		title:
+			'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
+	},
+	{
+		title: 'qui est esse',
+	},
+	{
+		title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
+	},
+	{
+		title: 'eum et est occaecati',
+	},
+	{
+		title: 'nesciunt quas odio',
+	},
+];
+
+const Achievements = () => {
+	const classes = useStyles();
+	return (
+		<div className='tile is-child box achievements'>
+			<div className={`${classes.root} achievements-panel`}>
+				<p>Honors & Achievemnts</p>
+				<br></br>
+				{dummy.map((item, index) => (
+					<ListItem key={index}>
+						<ListItemAvatar>
+							<Avatar src={Star}></Avatar>
+						</ListItemAvatar>
+						<ListItemText
+							primary={item.title}
+							secondary='20-04-2020'
+						/>
+					</ListItem>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default Achievements;
--- a/frontend/src/components/activities/activities.css
+++ b/frontend/src/components/activities/activities.css
@@ -0,0 +1,10 @@
+.activities {
+	max-height: 45vh;
+	overflow-y: scroll;
+}
+
+.activities-panel {
+	height: 100%;
+	max-height: 100%;
+	overflow-y: scroll;
+}
--- a/frontend/src/components/activities/activities.js
+++ b/frontend/src/components/activities/activities.js
@@ -0,0 +1,109 @@
+import React from 'react';
+
+import 'bulma';
+
+import { makeStyles } from '@material-ui/core/styles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import Typography from '@material-ui/core/Typography';
+
+import './activities.css';
+
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: '100%',
+		maxWidth: '100%',
+	},
+	heading: {
+		color: '#fe346e',
+		fontFamily: "'Share Tech Mono', monospace",
+		fontSize: 15,
+		flexShrink: 0,
+		maxWidth: '100%',
+	},
+	description: {
+		fontFamily: "'Share Tech Mono', monospace",
+		fontSize: 13,
+	},
+}));
+
+const dummy = [
+	{
+		userId: 1,
+		id: 1,
+		title:
+			'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
+		body:
+			'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
+	},
+	{
+		userId: 1,
+		id: 2,
+		title: 'qui est esse',
+		body:
+			'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
+	},
+	{
+		userId: 1,
+		id: 3,
+		title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
+		body:
+			'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
+	},
+	{
+		userId: 1,
+		id: 4,
+		title: 'eum et est occaecati',
+		body:
+			'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
+	},
+	{
+		userId: 1,
+		id: 5,
+		title: 'nesciunt quas odio',
+		body:
+			'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque',
+	},
+];
+
+const Activities = () => {
+	const classes = useStyles();
+	const [expanded, setExpanded] = React.useState(false);
+
+	const handleChange = (panel) => (event, isExpanded) => {
+		setExpanded(isExpanded ? panel : false);
+	};
+
+	return (
+		<div className='tile is-child box activities'>
+			<div className={`${classes.root} activities-panel`}>
+				<p>Recent Activities</p>
+				<br></br>
+				{dummy.map((item, index) => (
+					<ExpansionPanel
+						key={index}
+						expanded={expanded === index}
+						onChange={handleChange(index)}
+					>
+						<ExpansionPanelSummary
+							aria-controls='panel1bh-content'
+							id='panel1bh-header'
+						>
+							<Typography className={classes.heading}>
+								{item.title}
+							</Typography>
+						</ExpansionPanelSummary>
+						<ExpansionPanelDetails>
+							<Typography className={classes.description}>
+								{item.body}
+							</Typography>
+						</ExpansionPanelDetails>
+					</ExpansionPanel>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default Activities;
--- a/frontend/src/components/bio/bio.css
+++ b/frontend/src/components/bio/bio.css
@@ -0,0 +1,5 @@
+.bio {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
--- a/frontend/src/components/bio/bio.js
+++ b/frontend/src/components/bio/bio.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import 'bulma';
+import { TextField } from '@material-ui/core';
+
+import './bio.css';
+
+class Bio extends React.Component {
+	render() {
+		return (
+			<div className='tile is-child box bio'>
+				<figure className='image is-128x128'>
+					<img
+						className='is-rounded'
+						src='https://bulma.io/images/placeholders/128x128.png'
+						alt=''
+					/>
+				</figure>
+				<TextField
+					id='standard-required'
+					label='Name'
+					defaultValue='Saimano'
+				/>
+				<br></br>
+				<TextField
+					id='outlined-multiline-static'
+					label='Bio'
+					multiline
+					rows={3}
+					defaultValue='Am Awesome!'
+					variant='outlined'
+				/>
+				<br></br>
+				<button className='button is-rounded is-small'>Save</button>
+			</div>
+		);
+	}
+}
+
+export default Bio;
--- a/frontend/src/components/game/game.css
+++ b/frontend/src/components/game/game.css
@@ -0,0 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap');
+
+.game {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-family: 'Manrope', sans-serif;
+}
+
+.game .role-stat {
+	display: flex;
+	flex-direction: row;
+}
+
+.game .role {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.game .player-stat {
+	margin-top: 15px;
+}
+
+.game .skills {
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: 20px;
+}
+
+.game .buttons {
+	display: flex;
+	flex-direction: row;
+	margin-top: 25px;
+}
+
+.skills .tag {
+	margin: 2px;
+}
--- a/frontend/src/components/game/game.js
+++ b/frontend/src/components/game/game.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import 'bulma';
+
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Badge from '@material-ui/core/Badge';
+
+import './game.css';
+
+class Game extends React.Component {
+	render() {
+		return (
+			<div className='tile is-child box game'>
+				<div className='role-stat'>
+					<div className='role'>
+						<figure className='image is-128x128'>
+							<img
+								src='https://github.com/gemwise-invests/Meta-Skill/raw/master/asset/img/mage.png'
+								alt=''
+							/>
+						</figure>
+
+						<Badge badgeContent={4} color='primary'>
+							<span className='tag is-primary is-light medium'>
+								Developer
+							</span>
+						</Badge>
+					</div>
+					<div className='player-stat'>
+						<ListItem>
+							<ListItemText
+								primary='Experience'
+								secondary='2012 XP'
+							/>
+						</ListItem>
+						<ListItem>
+							<ListItemText
+								primary='Reputation'
+								secondary='Diamond'
+							/>
+						</ListItem>
+					</div>
+				</div>
+				<div className='skills'>
+					<span className='tag is-success'>
+						ReactJs
+						<button className='delete is-small'></button>
+					</span>
+					<span className='tag is-success'>
+						NodeJs
+						<button className='delete is-small'></button>
+					</span>
+					<span className='tag is-success'>
+						Web3
+						<button className='delete is-small'></button>
+					</span>
+					<span className='tag is-success'>
+						ExpressJs
+						<button className='delete is-small'></button>
+					</span>
+					<span className='tag is-danger'>
+						Solidity
+						<button className='delete is-small'></button>
+					</span>
+				</div>
+				<div className='buttons'>
+					<button className='button is-small is-rounded'>
+						Trust
+					</button>
+					<button className='button is-small is-rounded'>
+						Message
+					</button>
+					<button className='button is-small is-rounded'>
+						Contract
+					</button>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Game;
--- a/frontend/src/components/nft/nft.css
+++ b/frontend/src/components/nft/nft.css
@@ -0,0 +1,20 @@
+.nft {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.nft .image {
+	margin-bottom: 15px;
+}
+
+@media only screen and (max-width: 770px) {
+	.nft {
+		flex-direction: row;
+		overflow-x: scroll;
+	}
+	.nft .image {
+		margin-bottom: 0;
+		margin-right: 15px;
+	}
+}
--- a/frontend/src/components/nft/nft.js
+++ b/frontend/src/components/nft/nft.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import 'bulma';
+
+import Tooltip from '@material-ui/core/Tooltip';
+
+import './nft.css';
+
+const dummy = [
+	{
+		url: 'https://gitcoin.co/dynamic/kudos/60/collaboration_machine',
+		title: 'Collaboration Machine',
+	},
+	{
+		url: 'https://gitcoin.co/dynamic/kudos/10864/sustain_web3_winner',
+		title: 'Sustain Web3 Winner',
+	},
+	{
+		url: 'https://gitcoin.co/dynamic/kudos/17049/stop_covid_winner',
+		title: 'Stop Covid Winner',
+	},
+	{
+		url: 'https://gitcoin.co/dynamic/kudos/17033/cosmos',
+		title: 'Cosmos',
+	},
+];
+
+class NFT extends React.Component {
+	render() {
+		return (
+			<div className='tile is-child box nft'>
+				{dummy.map((item, index) => (
+					<Tooltip title={item.title} placement='left' key={index}>
+						<figure className='image is-32x32'>
+							<img className='is-rounded' src={item.url} alt='' />
+						</figure>
+					</Tooltip>
+				))}
+			</div>
+		);
+	}
+}
+
+export default NFT;
--- a/frontend/src/components/quick/quick.css
+++ b/frontend/src/components/quick/quick.css
@@ -0,0 +1,20 @@
+.quick {
+	display: flex;
+	flex-direction: column;
+}
+
+#add {
+	margin-top: auto;
+}
+
+@media only screen and (max-width: 770px) {
+	.quick {
+		flex-direction: row;
+		overflow-x: scroll;
+	}
+	#add {
+		margin-left: auto;
+		max-height: 25px;
+		max-width: 25px;
+	}
+}
--- a/frontend/src/components/quick/quick.js
+++ b/frontend/src/components/quick/quick.js
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import 'bulma';
+
+import './quick.css';
+
+import PushPin from '../../assets/pushpin.png';
+import { IconButton } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+
+class Quick extends React.Component {
+	render() {
+		return (
+			<div className='tile is-child box quick'>
+				<span className='tag is-light'>
+					<img src={PushPin} alt='' />
+					<button className='delete is-small'></button>
+				</span>
+				<span className='tag is-light'>
+					<img src={PushPin} alt='' />
+					<button className='delete is-small'></button>
+				</span>
+				<span className='tag is-light'>
+					<img src={PushPin} alt='' />
+					<button className='delete is-small'></button>
+				</span>
+				<span className='tag is-light'>
+					<img src={PushPin} alt='' />
+					<button className='delete is-small'></button>
+				</span>
+				<span className='tag is-light'>
+					<img src={PushPin} alt='' />
+					<button className='delete is-small'></button>
+				</span>
+				<div id='add'>
+					<IconButton aria-label='Add'>
+						<AddIcon fontSize='small' />
+					</IconButton>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Quick;
--- a/frontend/src/components/social/social.css
+++ b/frontend/src/components/social/social.css
@@ -0,0 +1,23 @@
+.container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-evenly;
+}
+
+.token {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.social {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.social a {
+	margin: 5px;
+}
--- a/frontend/src/components/social/social.js
+++ b/frontend/src/components/social/social.js
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import 'bulma';
+
+import { TextField } from '@material-ui/core';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
+
+import './social.css';
+
+class Token extends React.Component {
+	render() {
+		return (
+			<div className='tile is-child container box'>
+				<div className='dao'>
+					<ListItem>
+						<ListItemAvatar>
+							<Avatar src='https://handbook.raidguild.org/img/rg-icon.png'></Avatar>
+						</ListItemAvatar>
+						<ListItemText
+							primary='RaidGuild'
+							secondary='20 Shares'
+						/>
+					</ListItem>
+					<ListItem>
+						<ListItemAvatar>
+							<Avatar src='https://cdn-images-1.medium.com/max/326/1*1rMv9dd9Rk7F7U8mLlovyQ@2x.jpeg'></Avatar>
+						</ListItemAvatar>
+						<ListItemText
+							primary='MetaCartel'
+							secondary='10 Shares'
+						/>
+					</ListItem>
+					<ListItem>
+						<ListItemAvatar>
+							<Avatar src='https://avatars3.githubusercontent.com/u/58242757?s=200&v=4'></Avatar>
+						</ListItemAvatar>
+						<ListItemText primary='MetaGame' secondary='20 Seeds' />
+					</ListItem>
+				</div>
+				<div className='token'>
+					<span className='tag'>$SAIMANO</span>
+					<br></br>
+					<TextField
+						id='outlined-number'
+						label='0.012 ETH/$SAIMANO'
+						type='number'
+						InputLabelProps={{
+							shrink: true,
+						}}
+						variant='outlined'
+					/>
+					<br></br>
+					<button className='button is-small is-rounded'>Buy</button>
+					<br></br>
+					<div className='social'>
+						<a href='#' target='_blank'>
+							<i className='fab fa-twitter fa-2x'></i>
+						</a>
+						<a href='#' target='_blank'>
+							<i className='fab fa-facebook fa-2x'></i>
+						</a>
+						<a href='#' target='_blank'>
+							<i className='fab fa-github fa-2x'></i>
+						</a>
+						<a href='#' target='_blank'>
+							<i className='fab fa-linkedin fa-2x'></i>
+						</a>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Token;
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400&display=swap');
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: 'Manrope', sans-serif;
+}
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('root')
+);
--- a/frontend/src/pages/profile/profile.css
+++ b/frontend/src/pages/profile/profile.css
@@ -0,0 +1,16 @@
+.is-ancestor {
+	height: 100%;
+	width: 100%;
+}
+
+.chips {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	margin: 20px 0 0 0;
+}
+
+.dashboard {
+	display: flex;
+	flex-direction: row;
+}
--- a/frontend/src/pages/profile/profile.js
+++ b/frontend/src/pages/profile/profile.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import 'bulma';
+import { Chip, Badge } from '@material-ui/core';
+
+import Bio from '../../components/bio/bio';
+import Game from '../../components/game/game';
+import Quick from '../../components/quick/quick';
+import Activities from '../../components/activities/activities';
+import Achievements from '../../components/achievements/achievements';
+import NFT from '../../components/nft/nft';
+import Social from '../../components/social/social';
+
+import './profile.css';
+
+class Profile extends React.Component {
+	render() {
+		return (
+			<div class='tile is-ancestor'>
+				<div class='tile is-1 is-vertical is-parent'>
+					<Quick />
+				</div>
+				<div class='tile is-3 is-vertical is-parent'>
+					<Bio account={this.props.account} />
+					<Game />
+				</div>
+
+				<div class='tile is-7 is-vertical'>
+					<div className='chips'>
+						<Badge color='secondary' variant='dot'>
+							<Chip label='Quests' clickable color='primary' />
+						</Badge>
+						<Chip label='Skill Tree' clickable color='primary' />
+						<Chip label='Raids' clickable color='primary' />
+					</div>
+
+					<div className='tile'>
+						{/* <div class='tile is-parent'>
+							<Dao />
+						</div> */}
+						<div class='tile is-parent'>
+							<Social />
+						</div>
+					</div>
+
+					<div class='tile'>
+						<div class='tile is-parent'>
+							<Achievements />
+						</div>
+						<div class='tile is-parent'>
+							<Activities />
+						</div>
+					</div>
+				</div>
+				<div class='tile is-1 is-vertical is-parent'>
+					<NFT />
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Profile;
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock