diff --git a/.gitignore b/.gitignore index 7ff30cc..0b86d23 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,4 @@ node_modules .vscode package-lock.json .firebase -.env \ No newline at end of file +.env diff --git a/.travis.yml b/.travis.yml index a5cbce3..5ca19ed 100644 --- a/.travis.yml +++ b/.travis.yml @@ -16,4 +16,4 @@ deploy: skip_cleanup: true provider: firebase token: - secure: Zs/oGX6gHQ3jtsp11dm66hMgcrA9bj2am2evWNlWMHliz3ey0rhO6njwL/Xsduw2azq5yD+LmH8Qj7IGBu30Oj0480W5YOXWhqKT7eANVkV21yBjehOhhWl7FeiJKLqBXIlSE7BwDAJqKMcttFyBj8PKM7gq2RKnT3T51cC9IJ52qOwA4Y6M4VT/UMIdnon7Pjvgruvno+jdEHewY0zUkOeQbUIO1rJLegMu6GQ0SBUs6opmo/hX6e+GPvPhMDEb1Aj6Gqo6pbjHTOyojrphc3NfWz+Ks/1+WgoFHLjqy+q6Ta8dVklyLEnaFWiXnDiUhsZ/6XmEadk8fK/FTJHWizbs11yU6UefSbFq35N5ZyTeMj6jjE4lj0g3Y6zdCDVhzlAJoVLE5vMgXb8ebUwHEhBz50/3H3LWSxoyQGB579iTz3thS01Lb8jl9NHkx09EZ4mUYv47ZLtG+EirX376JVTcF7yls7Frh0uYbxwNephqWq3m8Jhho5LwUUSGodOgOebWSOHzSh2FgYO8JxN/NrhnnPR2L/iiNRCxELW+vorzOCjstj6M+veeIqkNMKMH7qPJfwnahlAraI+bw74HMY9cF5KdVU4OTBzQlxDEImwFRw20bO6P2lr0e/YUfZeYtgJZzqNrCpv+zhy+GcRs6Dw1o/xvrtb4Y2Tw8nJlHqM= + - secure: Zs/oGX6gHQ3jtsp11dm66hMgcrA9bj2am2evWNlWMHliz3ey0rhO6njwL/Xsduw2azq5yD+LmH8Qj7IGBu30Oj0480W5YOXWhqKT7eANVkV21yBjehOhhWl7FeiJKLqBXIlSE7BwDAJqKMcttFyBj8PKM7gq2RKnT3T51cC9IJ52qOwA4Y6M4VT/UMIdnon7Pjvgruvno+jdEHewY0zUkOeQbUIO1rJLegMu6GQ0SBUs6opmo/hX6e+GPvPhMDEb1Aj6Gqo6pbjHTOyojrphc3NfWz+Ks/1+WgoFHLjqy+q6Ta8dVklyLEnaFWiXnDiUhsZ/6XmEadk8fK/FTJHWizbs11yU6UefSbFq35N5ZyTeMj6jjE4lj0g3Y6zdCDVhzlAJoVLE5vMgXb8ebUwHEhBz50/3H3LWSxoyQGB579iTz3thS01Lb8jl9NHkx09EZ4mUYv47ZLtG+EirX376JVTcF7yls7Frh0uYbxwNephqWq3m8Jhho5LwUUSGodOgOebWSOHzSh2FgYO8JxN/NrhnnPR2L/iiNRCxELW+vorzOCjstj6M+veeIqkNMKMH7qPJfwnahlAraI+bw74HMY9cF5KdVU4OTBzQlxDEImwFRw20bO6P2lr0e/YUfZeYtgJZzqNrCpv+zhy+GcRs6Dw1o/xvrtb4Y2Tw8nJlHqM= diff --git a/package.json b/package.json index 4d3e55a..bf2facc 100644 --- a/package.json +++ b/package.json @@ -4,18 +4,18 @@ "version": "0.0.1", "description": "Personal economy platform", "license": "AGPL-3.0", - "homepage": "https://github.com/convergentcx/Arena#readme", + "homepage": "https://proto.convergent.cx", "dependencies": { "@material-ui/core": "3.6.1", "@material-ui/icons": "3.0.1", "d3": "4.10.0", - "d3-scale": "^2.1.2", + "d3-scale": "2.1.2", "downshift": "3.1.5", "drizzle": "1.2.4", "drizzle-react": "1.2.0", "ethereum-blockies-base64": "1.0.2", "ganache-cli": "6.1.8", - "notistack": "^0.4.0", + "notistack": "0.4.0", "react": "^16.6.0", "react-dom": "^16.6.3", "react-router-dom": "4.3.1", @@ -23,7 +23,7 @@ "react-scripts": "2.0.5", "react-toastify": "4.4.3", "recharts": "1.3.5", - "styled-components": "^4.1.2", + "styled-components": "4.1.2", "web3": "1.0.0-beta.36" }, "devDependencies": { @@ -42,7 +42,7 @@ }, "scripts": { "start": "react-scripts start", - "build": "GENERATE_SOURCEMAP=false react-scripts build --max-old-size=4096", + "build": "react-scripts build --max-old-size=4096", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint 'src/**/*.js' 'src/**/*.jsx'", diff --git a/src/App.jsx b/src/App.jsx index 7dfd9c4..c1a5eca 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,38 +7,51 @@ import { Landing, Launch, Leaderboard, Profile } from './pages'; /// MUI Theme import { MuiThemeProvider } from '@material-ui/core/styles'; -import { hackerTheme, slateTheme } from './themes'; +import { slateTheme, achillTheme } from './themes'; /// Notistack import { SnackbarProvider } from 'notistack'; export default class App extends Component { - state= { - lights: true, - } + state = { + lights: false + }; toggleLights = () => { this.setState({ lights: !this.state.lights }); - } + }; render() { return ( - - - - - - - } /> - - - - - - - + + + + + + + ( + + )} + /> + + + + + + + ); } } diff --git a/src/assets/logo_white.png b/src/assets/logo_white.png new file mode 100644 index 0000000..052c8c5 Binary files /dev/null and b/src/assets/logo_white.png differ diff --git a/src/components/AppContainer/TopNavbar/MetamaskLogin.jsx b/src/components/AppContainer/TopNavbar/MetamaskLogin.jsx index 4a3422b..c91bf5d 100644 --- a/src/components/AppContainer/TopNavbar/MetamaskLogin.jsx +++ b/src/components/AppContainer/TopNavbar/MetamaskLogin.jsx @@ -13,7 +13,7 @@ const styles = theme => { let bg = '#464646'; if (theme.palette.type === 'dark') { - bg = '#FFFFFF' + bg = '#FFFFFF'; } return { @@ -31,8 +31,8 @@ const styles = theme => { height: '1em', '&::before': { borderWidth: '0 1em 1em 1em', - borderColor: `transparent transparent ${bg} transparent`, - }, + borderColor: `transparent transparent ${bg} transparent` + } }, '&[x-placement*="top"] $arrowArrow': { bottom: 0, @@ -42,8 +42,8 @@ const styles = theme => { height: '1em', '&::before': { borderWidth: '1em 1em 0 1em', - borderColor: `${bg} transparent transparent transparent`, - }, + borderColor: `${bg} transparent transparent transparent` + } }, '&[x-placement*="right"] $arrowArrow': { left: 0, @@ -52,8 +52,8 @@ const styles = theme => { width: '1em', '&::before': { borderWidth: '1em 1em 1em 0', - borderColor: `transparent ${bg} transparent transparent`, - }, + borderColor: `transparent ${bg} transparent transparent` + } }, '&[x-placement*="left"] $arrowArrow': { right: 0, @@ -62,9 +62,9 @@ const styles = theme => { width: '1em', '&::before': { borderWidth: '1em 0 1em 1em', - borderColor: `transparent transparent transparent ${bg}`, - }, - }, + borderColor: `transparent transparent transparent ${bg}` + } + } }, arrowArrow: { position: 'absolute', @@ -77,20 +77,20 @@ const styles = theme => { display: 'block', width: 0, height: 0, - borderStyle: 'solid', - }, - }, - } + borderStyle: 'solid' + } + } + }; }; class MetamaskLogin extends Component { state = { - arrowRef: null, + arrowRef: null }; handleArrowRef = node => { this.setState({ - arrowRef: node, + arrowRef: node }); }; @@ -108,12 +108,10 @@ class MetamaskLogin extends Component { const blockie = makeBlockie(drizzleState.accounts[0]); - const shortenAddress = address => ( - address.slice(0,8) + '...' + address.slice(-6) - ); + const shortenAddress = address => address.slice(0, 8) + '...' + address.slice(-6); let contrastText = '#FFFFFF'; - if (theme.palette.type === 'dark' ) { + if (theme.palette.type === 'dark') { contrastText = '#232323'; } @@ -128,16 +126,26 @@ class MetamaskLogin extends Component { - + {shortenAddress(drizzleState.accounts[0])} - + Balance: {removeDecimals(balance)} ETH - + + + Your Story + + {this.state.loading ? ( + + + + + + ) : ( + + )} + + - ) + ); } } diff --git a/src/components/Dashboard/DashboardInterface/EditDetails/index.jsx b/src/components/Dashboard/DashboardInterface/EditDetails/index.jsx index 49032c1..4c8c969 100644 --- a/src/components/Dashboard/DashboardInterface/EditDetails/index.jsx +++ b/src/components/Dashboard/DashboardInterface/EditDetails/index.jsx @@ -7,7 +7,7 @@ export default class EditDetails extends Component { multiline: 'Whoever pays me in token will get my full attention I am very good at listening to peoples problems and helping', editingProfile: false, - displayName: this.props.jsonData.name, + displayName: this.props.jsonData.name }; async componentDidMount() { @@ -31,9 +31,11 @@ export default class EditDetails extends Component { }; render() { - const chips = this.props.jsonData.tags.map((tag, index)=> { - return ; - }); + const chips = + this.props.jsonData.tags && + this.props.jsonData.tags.map((tag, index) => { + return ; + }); return ( @@ -52,7 +54,16 @@ export default class EditDetails extends Component { }} /> - + {chips} diff --git a/src/components/Dashboard/DashboardInterface/EditServices/index.jsx b/src/components/Dashboard/DashboardInterface/EditServices/index.jsx index 65158aa..4ad0121 100644 --- a/src/components/Dashboard/DashboardInterface/EditServices/index.jsx +++ b/src/components/Dashboard/DashboardInterface/EditServices/index.jsx @@ -3,7 +3,7 @@ import { CircularProgress, Grid, Paper, TextField, Typography } from '@material- class Services extends Component { state = { - dataJson: this.props.dataJson, + dataJson: this.props.dataJson }; render() { @@ -12,7 +12,7 @@ class Services extends Component { Your Services - {this.props.loading - ? - + {this.props.loading ? ( + + Saving to IPFS - - - - - : items - } + + + + + ) : ( + items + )} ); diff --git a/src/components/Dashboard/DashboardInterface/Events/Events.jsx b/src/components/Dashboard/DashboardInterface/Events/Events.jsx index 359ee0a..9696874 100644 --- a/src/components/Dashboard/DashboardInterface/Events/Events.jsx +++ b/src/components/Dashboard/DashboardInterface/Events/Events.jsx @@ -58,8 +58,7 @@ class Events extends React.Component { ); - } - ); + }); return ( diff --git a/src/components/Dashboard/DashboardInterface/Stats/MainStats/index.jsx b/src/components/Dashboard/DashboardInterface/Stats/MainStats/index.jsx index c0798e6..c4a7c3e 100644 --- a/src/components/Dashboard/DashboardInterface/Stats/MainStats/index.jsx +++ b/src/components/Dashboard/DashboardInterface/Stats/MainStats/index.jsx @@ -14,7 +14,12 @@ class MainStats extends Component { item xs={12} md={6} - style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', textAlign: 'center' }} + style={{ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + textAlign: 'center' + }} > @@ -26,7 +31,8 @@ class MainStats extends Component { {removeDecimals(yourBalance)} {this.props.symbol} - Current Value: {(removeDecimals(yourBalance) * removeDecimals(currentPrice) * 100).toFixed(2)} $ + Current Value:{' '} + {(removeDecimals(yourBalance) * removeDecimals(currentPrice) * 100).toFixed(2)} $ @@ -42,7 +48,8 @@ class MainStats extends Component { {(removeDecimals(currentPrice) * removeDecimals(totalSupply)).toFixed(6)} Ξ - Current Value: {(removeDecimals(currentPrice) * removeDecimals(totalSupply) * 100).toFixed(2)} $ + Current Value:{' '} + {(removeDecimals(currentPrice) * removeDecimals(totalSupply) * 100).toFixed(2)} $ diff --git a/src/components/Dashboard/DashboardInterface/index.jsx b/src/components/Dashboard/DashboardInterface/index.jsx index 6eb1ecc..0f91752 100644 --- a/src/components/Dashboard/DashboardInterface/index.jsx +++ b/src/components/Dashboard/DashboardInterface/index.jsx @@ -82,7 +82,7 @@ class Interface extends Component { poolBalance: '', symbol: '', popover: false, - value: 0, + value: 0 }; async componentDidMount() { @@ -146,7 +146,7 @@ class Interface extends Component { updateData = newData => { this.setState({ dataJson: newData }); - } + }; render() { const { classes } = this.props; @@ -198,17 +198,22 @@ class Interface extends Component { - {this.state.value === 0 && + {this.state.value === 0 && ( Requests and Transactions - } - {this.state.value === 1 && + )} + {this.state.value === 1 && ( - + Bonding curve
@@ -245,22 +250,31 @@ class Interface extends Component { symbol={this.state.symbol} /> - } - {this.state.value === 2 && + )} + {this.state.value === 2 && ( - - - Lights - - + + + Lights + + - - } + + )} ); diff --git a/src/components/Dashboard/TopTabs/index.jsx b/src/components/Dashboard/TopTabs/index.jsx index 5b89704..8690b34 100644 --- a/src/components/Dashboard/TopTabs/index.jsx +++ b/src/components/Dashboard/TopTabs/index.jsx @@ -17,7 +17,11 @@ class TopTabs extends Component { this.props.tokens && this.props.tokens.map((token, index) => { return ( - this.props.history.push(`/dashboard/${token.address}`)} /> + this.props.history.push(`/dashboard/${token.address}`)} + /> ); }); @@ -36,4 +40,4 @@ class TopTabs extends Component { } } -export default withRouter(TopTabs); \ No newline at end of file +export default withRouter(TopTabs); diff --git a/src/components/Dashboard/index.jsx b/src/components/Dashboard/index.jsx index fd9720e..0206c77 100644 --- a/src/components/Dashboard/index.jsx +++ b/src/components/Dashboard/index.jsx @@ -10,7 +10,7 @@ import TopTabs from './TopTabs'; class Dashboard extends Component { state = { - tokens: null, + tokens: null }; componentDidMount = () => { @@ -21,26 +21,28 @@ class Dashboard extends Component { const filter = { owner_address: drizzleState.accounts[0] }; const tokens = []; - this._asyncRequest = makeCancelable(factoryContract.getPastEvents( - 'Created', - { fromBlock: 0, toBlock: 'latest', filter }, - (_, events) => { - events.forEach(token => { - const address = token.returnValues.token_address; - const date = token.returnValues.time; - const name = token.returnValues.name; - tokens.push({ address, date, name }); - this.setState({ tokens }); - }); - } - )); + this._asyncRequest = makeCancelable( + factoryContract.getPastEvents( + 'Created', + { fromBlock: 0, toBlock: 'latest', filter }, + (_, events) => { + events.forEach(token => { + const address = token.returnValues.token_address; + const date = token.returnValues.time; + const name = token.returnValues.name; + tokens.push({ address, date, name }); + this.setState({ tokens }); + }); + } + ) + ); }; componentWillUnmount = () => { if (this._asyncRequest) { this._asyncRequest.cancel(); } - } + }; render() { return ( diff --git a/src/components/Profile/BuyAndSellButtons.jsx b/src/components/Profile/BuyAndSellButtons.jsx index ecbe7ce..286eed0 100644 --- a/src/components/Profile/BuyAndSellButtons.jsx +++ b/src/components/Profile/BuyAndSellButtons.jsx @@ -17,8 +17,10 @@ class BuyAndSellButtons extends Component { } buyHandler = () => { - if (!this.state.buyAmt) { return; } - + if (!this.state.buyAmt) { + return; + } + const buyStackId = this.props.contract.methods.mint.cacheSend(addDecimals(this.state.buyAmt), { from: this.props.drizzleState.accounts[0], value: this.state.priceInEther @@ -54,9 +56,7 @@ class BuyAndSellButtons extends Component { if (name === 'sellAmt') { let rewardInEther = 0; if (Number(value) !== 0) { - rewardInEther = await this.props.contract.methods - .rewardForBurn(addDecimals(value)) - .call(); + rewardInEther = await this.props.contract.methods.rewardForBurn(addDecimals(value)).call(); } this.setState({ rewardInEther @@ -65,7 +65,9 @@ class BuyAndSellButtons extends Component { }; sellHandler = () => { - if (!this.state.sellAmt) { return; } + if (!this.state.sellAmt) { + return; + } const sellStackId = this.props.contract.methods.burn.cacheSend( addDecimals(this.state.sellAmt), @@ -77,7 +79,7 @@ class BuyAndSellButtons extends Component { }; waitForMined = stackId => { - const { enqueueSnackbar } = this.props; + const { enqueueSnackbar } = this.props; const interval = setInterval(() => { const status = this.getStatus(stackId); if (status === 'pending' && this.state.txStatus !== 'pending') { @@ -117,7 +119,7 @@ class BuyAndSellButtons extends Component { />    -
@@ -117,12 +139,13 @@ class ServicePanel extends Component { }); return ( - - - - Quick Services - - + + + my services + {serviceBoxes} ); diff --git a/src/pages/Landing/index.jsx b/src/pages/Landing/index.jsx index ffc1f95..4544dfa 100644 --- a/src/pages/Landing/index.jsx +++ b/src/pages/Landing/index.jsx @@ -13,15 +13,15 @@ const heroStyle = { height: '100vh', margin: '0', padding: '10%', - paddingTop: '2%', + paddingTop: '2%' }; const Hero = () => (
- Unlock your personal economy -
- Launch your own cryptocurrency, tokenize your future, and regain your freedom. -
+ Unlock your personal economy +
+ Launch your own cryptocurrency, tokenize your work. +
- + +
- ) + ); } } GroupingPicker.propTypes = { onChanged: PropTypes.func.isRequired, - active: PropTypes.oneOf(['all', 'year']).isRequired, -} + active: PropTypes.oneOf(['all', 'year']).isRequired +}; diff --git a/src/pages/Leaderboard/BubbleChart/components/Tooltip.js b/src/pages/Leaderboard/BubbleChart/components/Tooltip.js index 6cc7e5c..288e431 100644 --- a/src/pages/Leaderboard/BubbleChart/components/Tooltip.js +++ b/src/pages/Leaderboard/BubbleChart/components/Tooltip.js @@ -1,6 +1,6 @@ /* eslint-disable */ -import * as d3 from 'd3' -import './Tooltip.css' +import * as d3 from 'd3'; +import './Tooltip.css'; /* * Creates tooltip with provided id that @@ -11,19 +11,20 @@ import './Tooltip.css' function floatingTooltip(tooltipId, width) { // Local variable to hold tooltip div for // manipulation in other functions. - const tt = d3.select('body') + const tt = d3 + .select('body') .append('div') .attr('class', 'tooltip') .attr('id', tooltipId) - .style('pointer-events', 'none') + .style('pointer-events', 'none'); // Set a width if it is provided. if (width) { - tt.style('width', width) + tt.style('width', width); } // Initially it is hidden. - hideTooltip() + hideTooltip(); /* * Display tooltip with provided content. @@ -33,17 +34,16 @@ function floatingTooltip(tooltipId, width) { * event is d3.event for positioning. */ function showTooltip(content, event) { - tt.style('opacity', 1.0) - .html(content) + tt.style('opacity', 1.0).html(content); - updatePosition(event) + updatePosition(event); } /* * Hide the tooltip div. */ function hideTooltip() { - tt.style('opacity', 0.0) + tt.style('opacity', 0.0); } /* @@ -51,42 +51,44 @@ function floatingTooltip(tooltipId, width) { * based on d3 mouse event. */ function updatePosition(event) { - const xOffset = 20 - const yOffset = 10 + const xOffset = 20; + const yOffset = 10; - const ttw = tt.style('width') - const tth = tt.style('height') + const ttw = tt.style('width'); + const tth = tt.style('height'); - const wscrY = window.scrollY - const wscrX = window.scrollX + const wscrY = window.scrollY; + const wscrX = window.scrollX; - const curX = (document.all) ? event.clientX + wscrX : event.pageX - const curY = (document.all) ? event.clientY + wscrY : event.pageY - let ttleft = ((curX - wscrX + xOffset * 2 + ttw) > window.innerWidth) ? - curX - ttw - xOffset * 2 : curX + xOffset + const curX = document.all ? event.clientX + wscrX : event.pageX; + const curY = document.all ? event.clientY + wscrY : event.pageY; + let ttleft = + curX - wscrX + xOffset * 2 + ttw > window.innerWidth + ? curX - ttw - xOffset * 2 + : curX + xOffset; if (ttleft < wscrX + xOffset) { - ttleft = wscrX + xOffset + ttleft = wscrX + xOffset; } - let tttop = ((curY - wscrY + yOffset * 2 + tth) > window.innerHeight) ? - curY - tth - yOffset * 2 : curY + yOffset + let tttop = + curY - wscrY + yOffset * 2 + tth > window.innerHeight + ? curY - tth - yOffset * 2 + : curY + yOffset; if (tttop < wscrY + yOffset) { - tttop = curY + yOffset + tttop = curY + yOffset; } - tt - .style('top', `${tttop}px`) - .style('left', `${ttleft}px`) + tt.style('top', `${tttop}px`).style('left', `${ttleft}px`); } return { showTooltip, hideTooltip, - updatePosition, - } + updatePosition + }; } -const tooltip = floatingTooltip('gates_tooltip', 240) -export default tooltip +const tooltip = floatingTooltip('gates_tooltip', 240); +export default tooltip; diff --git a/src/pages/Leaderboard/BubbleChart/components/YearsTitles.js b/src/pages/Leaderboard/BubbleChart/components/YearsTitles.js index d3b4475..55efccd 100644 --- a/src/pages/Leaderboard/BubbleChart/components/YearsTitles.js +++ b/src/pages/Leaderboard/BubbleChart/components/YearsTitles.js @@ -4,28 +4,27 @@ import PropTypes from 'prop-types'; export default function YearsTitles({ yearCenters }) { return ( - { - Object.keys(yearCenters).map(year => - - { - `< ${year} Ξ` - } - ) - } + {Object.keys(yearCenters).map(year => ( + + {`< ${year} Ξ`} + + ))} - ) + ); } YearsTitles.propTypes = { - yearCenters: PropTypes.objectOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - }).isRequired).isRequired, -} + yearCenters: PropTypes.objectOf( + PropTypes.shape({ + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired + }).isRequired + ).isRequired +}; diff --git a/src/pages/Leaderboard/BubbleChart/constants.js b/src/pages/Leaderboard/BubbleChart/constants.js index ed49a8c..c63c6f3 100644 --- a/src/pages/Leaderboard/BubbleChart/constants.js +++ b/src/pages/Leaderboard/BubbleChart/constants.js @@ -1,11 +1,10 @@ -export const width = 960 -export const height = 640 +export const width = 960; +export const height = 640; -export const center = { x: width / 2, y: height / 2 } +export const center = { x: width / 2, y: height / 2 }; export const yearCenters = { 1: { x: width / 4, y: height / 2 }, 5: { x: width / 2, y: height / 2 }, - 10: { x: (3 / 4) * width, y: height / 2 }, -} - + 10: { x: (3 / 4) * width, y: height / 2 } +}; diff --git a/src/pages/Leaderboard/BubbleChart/utils.js b/src/pages/Leaderboard/BubbleChart/utils.js index 372c52f..772f720 100644 --- a/src/pages/Leaderboard/BubbleChart/utils.js +++ b/src/pages/Leaderboard/BubbleChart/utils.js @@ -1,56 +1,59 @@ -import * as d3 from 'd3' +import * as d3 from 'd3'; /* - * This data manipulation function takes the raw data from - * the CSV file and converts it into an array of node objects. - * Each node will store data and visualization values to visualize - * a bubble. - * - * rawData is expected to be an array of data objects, read in from - * one of d3's loading functions like d3.csv. - * - * This function returns the new node array, with a node in that - * array for each element in the rawData input. - */ + * This data manipulation function takes the raw data from + * the CSV file and converts it into an array of node objects. + * Each node will store data and visualization values to visualize + * a bubble. + * + * rawData is expected to be an array of data objects, read in from + * one of d3's loading functions like d3.csv. + * + * This function returns the new node array, with a node in that + * array for each element in the rawData input. + */ export function createNodes(rawData) { - // Use the max total_amount in the data as the max in the scale's domain - // note we have to ensure the total_amount is a number. + // Use the max total_amount in the data as the max in the scale's domain + // note we have to ensure the total_amount is a number. // const maxAmount = d3.max(rawData, d => +d.total_amount) - const maxAmount = d3.max(rawData, d => +d.marketCap) + const maxAmount = d3.max(rawData, d => +d.marketCap); + // Sizes bubbles based on area. + // @v4: new flattened scale names. + const radiusScale = d3 + .scalePow() + .exponent(0.5) + .range([2, 85]) + .domain([0, maxAmount]); - // Sizes bubbles based on area. - // @v4: new flattened scale names. - const radiusScale = d3.scalePow() - .exponent(0.5) - .range([2, 85]) - .domain([0, maxAmount]) - - // Use map() to convert raw data into node data. - // Checkout http://learnjsdata.com/ for more on - // working with data. + // Use map() to convert raw data into node data. + // Checkout http://learnjsdata.com/ for more on + // working with data. const myNodes = rawData.map(d => { - // console.log(radiusScale(Math.ceil(+d.marketCap))) - return ({ - // id: d.id, - // radius: radiusScale(+d.total_amount), - // value: +d.total_amount, - address: d.address, - radius: radiusScale(+d.marketCap), - value: +d.marketCap, - name: d.name, - // org: d.organization, - group: d.group, - tags: d.tags, - threshold: d.threshold, - x: Math.random() * 900, - y: Math.random() * 800, - })}) + return { + // id: d.id, + // radius: radiusScale(+d.total_amount), + // value: +d.total_amount, + address: d.address, + radius: radiusScale(+d.marketCap), + value: +d.marketCap, + name: d.name, + // org: d.organization, + group: d.group, + tags: d.tags, + threshold: d.threshold, + x: Math.random() * 900, + y: Math.random() * 800 + }; + }); - // sort them descending to prevent occlusion of smaller nodes. - myNodes.sort((a, b) => b.value - a.value) + // sort them descending to prevent occlusion of smaller nodes. + myNodes.sort((a, b) => b.value - a.value); - return myNodes + return myNodes; } -export const fillColor = d3.scaleOrdinal().domain(['low', 'medium', 'high']).range(['#d84b2a', '#beccae', '#7aa25c']) +export const fillColor = d3 + .scaleOrdinal() + .domain(['low', 'medium', 'high']) + .range(['#d84b2a', '#beccae', '#7aa25c']); diff --git a/src/pages/Leaderboard/index.jsx b/src/pages/Leaderboard/index.jsx index 16a134c..1272f50 100644 --- a/src/pages/Leaderboard/index.jsx +++ b/src/pages/Leaderboard/index.jsx @@ -10,7 +10,6 @@ import { getMultihashFromBytes32, getPrice, removeDecimals } from '../../util'; import { utils as w3utils } from 'web3'; - import ipfsApi from 'ipfs-api'; const ipfs = ipfsApi('ipfs.infura.io', '5001', { protocol: 'https' }); @@ -21,7 +20,7 @@ class LeaderboardList extends Component { this.state = { events: [], - personalEconomies: [], + personalEconomies: [] }; } @@ -88,16 +87,20 @@ class LeaderboardList extends Component { marketCap: Number(removeDecimals(removeDecimals(economy.marketCap.toString()))), name: economy.name, address: economy.address, - threshold: Number(removeDecimals(removeDecimals(economy.marketCap.toString()))) < 1 ? - "1" : Number(removeDecimals(removeDecimals(economy.marketCap.toString()))) < 5 ? "5" : "10", - group: "low", - tags: (economy.tags && economy.tags.join(", ")) || '', + threshold: + Number(removeDecimals(removeDecimals(economy.marketCap.toString()))) < 1 + ? '1' + : Number(removeDecimals(removeDecimals(economy.marketCap.toString()))) < 5 + ? '5' + : '10', + group: 'low', + tags: (economy.tags && economy.tags.join(', ')) || '' }); }); return ( -
- +
+
); } diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx index 68facb5..c5d992f 100644 --- a/src/pages/Profile/index.jsx +++ b/src/pages/Profile/index.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import ipfsApi from 'ipfs-api'; import Web3 from 'web3'; -import classes from './Profile.module.css' +import classes from './Profile.module.css'; import { Button, @@ -12,7 +12,8 @@ import { Paper, Popover, Tab, - Tabs + Tabs, + Typography } from '@material-ui/core'; // import { KeyboardBackspace } from '@material-ui/icons'; @@ -90,11 +91,11 @@ class ProfileDetails extends Component { const web3 = new Web3(drizzle.web3.currentProvider); const web3Contract = new web3.eth.Contract(PersonalEconomy['abi'], addr); let eventsArray = []; - + await web3Contract.getPastEvents('Minted', { fromBlock: 0, toBlock: 'latest' }, (_, event) => { event[0] && eventsArray.push(event[0].address); }); - + let unique = [...new Set(eventsArray)]; let contributors = unique.length; @@ -128,7 +129,6 @@ class ProfileDetails extends Component { }; render() { - // console.log(classes); const contract = this.props.drizzleState.contracts[this.props.addr]; if ( @@ -151,37 +151,33 @@ class ProfileDetails extends Component { return (
{/* Header */} - - - -

{this.state.name}

+ + + +

{this.state.name}
- - - - + + +
- + @@ -200,7 +196,8 @@ class ProfileDetails extends Component { > @@ -209,17 +206,12 @@ class ProfileDetails extends Component { - + - - - {/* Content */} @@ -242,7 +234,7 @@ class ProfileDetails extends Component { {this.state.value === 1 && ( -
+
@@ -288,16 +280,39 @@ class ProfileDetails extends Component { drizzleState={this.props.drizzleState} symbol={this.state.symbol} /> -
+ )} {this.state.value === 0 && ( + + + my story + + + {this.state.description} + + + )} + {this.state.value === 2 && ( -

{this.state.description}

+ coming soon )} - (
- +
); diff --git a/src/themes.js b/src/themes.js index c3511cf..b9f958f 100644 --- a/src/themes.js +++ b/src/themes.js @@ -5,7 +5,7 @@ const slateTheme = createMuiTheme({ palette: { common: { black: '#000000', - white: '#FFFFFF', + white: '#FFFFFF' }, background: { paper: '#FFFFFF', @@ -15,27 +15,27 @@ const slateTheme = createMuiTheme({ light: 'rgba(144, 19, 254, 1)', main: '#3E3E3E', dark: 'rgba(62, 0, 117, 1)', - contrastText: '#FFFFFF', + contrastText: '#FFFFFF' }, secondary: { light: 'rgba(74, 144, 226, 1)', main: 'rgba(0, 109, 200, 1)', dark: 'rgba(0, 50, 109, 1)', - contrastText: '#FFFFFF', + contrastText: '#FFFFFF' }, error: { light: '#e57373', main: '#F44336', dark: '#D32f2f', - constrastText: '#FFFFFF', + constrastText: '#FFFFFF' }, text: { primary: 'rgba(0, 0, 0, 0.87)', secondary: 'rgba(0, 0, 0, 0.54)', disabled: 'rgba(0, 0, 0, 0.38)', - hint: 'rgba(0, 0, 0, 0.38)', - }, - }, + hint: 'rgba(0, 0, 0, 0.38)' + } + } }); /// Hacker theme @@ -44,7 +44,7 @@ const hackerTheme = createMuiTheme({ type: 'dark', common: { black: '#000000', - white: '#FFFFFF', + white: '#FFFFFF' }, background: { paper: '#151515', @@ -54,30 +54,71 @@ const hackerTheme = createMuiTheme({ light: 'rgba(144, 19, 254, 1)', main: '#888888', dark: '#2cb42c', - contrastText: '#FFFFFF', + contrastText: '#FFFFFF' }, secondary: { light: 'rgba(74, 144, 226, 1)', main: 'rgba(0, 109, 200, 1)', dark: 'rgba(0, 50, 109, 1)', - contrastText: '#FFFFFF', + contrastText: '#FFFFFF' }, error: { light: '#e57373', main: '#F44336', dark: '#D32f2f', - constrastText: '#FFFFFF', + constrastText: '#FFFFFF' }, text: { primary: 'rgba(255, 255, 255, 0.87)', secondary: 'rgba(255, 255, 255, 0.54)', disabled: 'rgba(255, 255, 255, 0.38)', - hint: 'rgba(255, 255, 255, 0.38)', + hint: 'rgba(255, 255, 255, 0.38)' + } + } +}); + +const achillTheme = createMuiTheme({ + palette: { + type: 'dark', + common: { + black: '#000000', + white: '#FFFFFF' + }, + background: { + paper: '#151515', + default: '#232323' + }, + primary: { + light: 'rgba(144, 19, 254, 1)', + main: '#ffbf00', + dark: '#2cb42c', + contrastText: '#FFFFFF' }, - }, + secondary: { + light: 'rgba(74, 144, 226, 1)', + main: '#bfff00', + dark: 'rgb(20, 133, 100)', + contrastText: '#004953' + }, + bar: { + light: 'rgba(144, 19, 254, 1)', + main: '#888888', + dark: '#2cb42c', + contrastText: '#FFFFFF' + }, + error: { + light: '#e57373', + main: '#F44336', + dark: '#D32f2f', + constrastText: '#FFFFFF' + }, + text: { + primary: 'rgba(255, 255, 255, 0.87)', + secondary: 'rgba(255, 255, 255, 0.54)', + disabled: 'rgba(255, 255, 255, 0.38)', + hint: 'rgba(255, 255, 255, 0.38)' + } + } }); -export { - slateTheme, - hackerTheme, -}; +export { slateTheme, hackerTheme, achillTheme }; diff --git a/src/util/index.js b/src/util/index.js index 2a8fdac..03bf553 100644 --- a/src/util/index.js +++ b/src/util/index.js @@ -43,8 +43,8 @@ export const makeCancelable = promise => { const wrappedPromise = new Promise((resolve, reject) => { promise.then( - val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val), - error => hasCanceled_ ? reject({isCanceled: true}) : reject(error) + val => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)), + error => (hasCanceled_ ? reject({ isCanceled: true }) : reject(error)) ); }); @@ -52,7 +52,7 @@ export const makeCancelable = promise => { promise: wrappedPromise, cancel() { hasCanceled_ = true; - }, + } }; };