diff --git a/src/v2/components/TourDeSol/Table/styles.js b/src/v2/components/TourDeSol/Table/styles.js
index 4dc2e62b..c52545ea 100644
--- a/src/v2/components/TourDeSol/Table/styles.js
+++ b/src/v2/components/TourDeSol/Table/styles.js
@@ -101,6 +101,6 @@ export default makeStyles(theme => ({
textTransform: 'uppercase',
color: '#C4C4C4',
letterSpacing: 2,
- fontWight: 'bold',
+ fontWeight: 'bold',
},
}));
diff --git a/src/v2/components/Transactions/Detail/Application/index.jsx b/src/v2/components/Transactions/Detail/Application/index.jsx
new file mode 100644
index 00000000..c6238f26
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Application/index.jsx
@@ -0,0 +1,53 @@
+// @flow
+import React from 'react';
+import {map} from 'lodash/fp';
+import {Grid} from '@material-ui/core';
+import Label from 'v2/components/UI/Label';
+import Avatar from 'v2/components/UI/Avatar';
+import TypeLabel from 'v2/components/UI/TypeLabel';
+
+import useStyles from './styles';
+
+type TApplication = {
+ id: string,
+ accounts: string[],
+};
+
+const Application = ({id, accounts}: TApplication) => {
+ const classes = useStyles();
+ const renderAccount = account => (
+
+
+
+
+ 0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8
+
+
+ );
+ return (
+
+
+
+
+
+
+
+ {map(renderAccount)(accounts)}
+ {renderAccount()}
+
+
+
+ );
+};
+
+export default Application;
diff --git a/src/v2/components/Transactions/Detail/Application/styles.js b/src/v2/components/Transactions/Detail/Application/styles.js
new file mode 100644
index 00000000..499118f2
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Application/styles.js
@@ -0,0 +1,48 @@
+import {makeStyles} from '@material-ui/core';
+import {fade} from '@material-ui/core/styles';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+ root: {
+ borderBottom: `1px solid ${fade(getColor('grey3')(theme), 0.5)}`,
+ paddingBottom: 34,
+ },
+ account: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ marginBottom: 40,
+ '& > div:first-child': {
+ marginRight: 25,
+ },
+ '& > div:nth-child(2)': {
+ [theme.breakpoints.down('xs')]: {
+ display: 'none',
+ },
+ },
+
+ '& > div:last-child': {
+ marginLeft: 25,
+ [theme.breakpoints.down('xs')]: {
+ marginLeft: 0,
+ },
+ },
+ [theme.breakpoints.down('xs')]: {
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ },
+ },
+ address: {
+ color: getColor('main')(theme),
+ lineHeight: '29px',
+ },
+ id: {
+ marginTop: 28,
+ '& > div:not(:first-child)': {
+ marginRight: 5,
+ },
+ [theme.breakpoints.down('sm')]: {
+ marginTop: 0,
+ },
+ },
+}));
diff --git a/src/v2/components/Transactions/Detail/ApplicationsTab.jsx b/src/v2/components/Transactions/Detail/ApplicationsTab.jsx
new file mode 100644
index 00000000..652b199d
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/ApplicationsTab.jsx
@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+
+import Application from './Application';
+
+const ApplicationsTab = ({applications}) => {
+ return (
+
+ );
+};
+
+export default ApplicationsTab;
diff --git a/src/v2/components/Transactions/Detail/Status/index.jsx b/src/v2/components/Transactions/Detail/Status/index.jsx
new file mode 100644
index 00000000..a93039ba
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Status/index.jsx
@@ -0,0 +1,45 @@
+// @flow
+import {map} from 'lodash/fp';
+import React from 'react';
+import {Grid} from '@material-ui/core';
+import Label from 'v2/components/UI/Label';
+
+import useStyles from './styles';
+
+const ApplicationStatus = () => {
+ const classes = useStyles();
+ const specs = [
+ {
+ label: 'status',
+ value: 'success',
+ },
+ {
+ label: 'confirmations',
+ value: '5',
+ },
+ ];
+ const renderSpec = ({label, value}: {label: string, value: string}) => (
+
+
+
+ {typeof value === 'function' ? value() : value}
+
+
+ );
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ApplicationStatus;
diff --git a/src/v2/components/Transactions/Detail/Status/styles.js b/src/v2/components/Transactions/Detail/Status/styles.js
new file mode 100644
index 00000000..3e99f84b
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Status/styles.js
@@ -0,0 +1,70 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+ spec: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ padding: 0,
+ [theme.breakpoints.down('xs')]: {
+ flexDirection: 'column',
+ },
+ '& li': {
+ display: 'flex',
+ marginBottom: 48,
+ width: '100%',
+ '& > div:first-child': {
+ width: 150,
+ marginRight: 40,
+ },
+ [theme.breakpoints.down('sm')]: {
+ marginBottom: 32,
+ flexDirection: 'column',
+ },
+ '&:nth-child(odd)': {
+ marginRight: 80,
+ [theme.breakpoints.down('xs')]: {
+ marginRight: 0,
+ },
+ },
+ },
+ },
+ value: {
+ fontSize: 15,
+ lineHeight: '29px',
+ overflow: 'hidden',
+ textTransform: 'uppercase',
+ textOverflow: 'ellipsis',
+ '& a': {
+ color: getColor('main')(theme),
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline',
+ },
+ },
+ },
+ circle: {
+ width: 130,
+ height: 130,
+ borderRadius: '50%',
+ overflow: 'hidden',
+ border: `3px solid ${getColor('grey4')(theme)}`,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ position: 'relative',
+ color: getColor('dark')(theme),
+ zIndex: 1,
+ fontSize: 24,
+ marginTop: 57,
+ '& div': {
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ background: getColor('main')(theme),
+ left: 0,
+ top: 30,
+ zIndex: -1,
+ },
+ },
+}));
diff --git a/src/v2/components/Transactions/Detail/index.jsx b/src/v2/components/Transactions/Detail/index.jsx
new file mode 100644
index 00000000..09f65f2b
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/index.jsx
@@ -0,0 +1,117 @@
+// @flow
+import {Container, Tabs, Tab, useTheme} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
+import {map, eq} from 'lodash/fp';
+import React, {useState} from 'react';
+import arrowIcon from 'v2/assets/icons/arrow-right-green.png';
+import arrowDarkIcon from 'v2/assets/icons/arrow-right-dark.png';
+import SectionHeader from 'v2/components/UI/SectionHeader';
+
+import HelpLink from 'v2/components/HelpLink';
+import QRPopup from 'v2/components/QRPopup';
+import CopyBtn from '../../UI/CopyBtn';
+
+import ApplicationsTab from './ApplicationsTab';
+import ApplicationStatus from './Status';
+import useStyles from './styles';
+
+const TransactionDetail = () => {
+ const classes = useStyles();
+ const [tab, setTab] = useState(0);
+ const theme = useTheme();
+ const verticalTabs = useMediaQuery(theme.breakpoints.down('sm'));
+ const handleTabChange = (event, tab) => setTab(tab);
+
+ const specs = [
+ {
+ label: 'Time',
+ hint: '',
+ value: '06/05/2019 11:27AM',
+ },
+ {
+ label: 'Fee',
+ hint: '',
+ value: '0.006 SOL | $0.60',
+ },
+ {
+ label: 'Block',
+ hint: '',
+ value: '7887219',
+ },
+ {
+ label: 'Confirmations',
+ hint: '',
+ value: '1,245',
+ },
+ {
+ label: 'Value',
+ hint: '',
+ value: '0.006 SOL | $0.60',
+ },
+ ];
+
+ const renderSpec = ({label, value}: {label: string, value: string}) => (
+
+
+ {label}
+
+
+
+ {typeof value === 'function' ? value() : value}
+
+
+ );
+
+ const tabNav = ['Applications: 3', 'status: success', 'code/course'];
+
+ const renderTabNav = label => (
+
{
+ return (
+
+ {label}
+
+
+ );
+ }}
+ />
+ );
+
+ return (
+
+
+
+
+
+ 0x03e125a40b39a637028bce780af3544e51cfa2f61abbe7c8ec8059f7178bce74
+
+
+
+
+
+
+
+ {map(renderTabNav)(tabNav)}
+
+ {eq(0, tab) &&
}
+ {eq(1, tab) &&
}
+
+
+ );
+};
+
+export default TransactionDetail;
diff --git a/src/v2/components/Transactions/Detail/styles.js b/src/v2/components/Transactions/Detail/styles.js
new file mode 100644
index 00000000..919bbbb1
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/styles.js
@@ -0,0 +1,111 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+ blockTitle: {
+ display: 'flex',
+ alignItems: 'center',
+ marginLeft: 100,
+ marginRight: 'auto',
+ overflow: 'hidden',
+ '& div': {
+ marginLeft: 15,
+ display: 'flex',
+ alignItems: 'center',
+ },
+ '& span': {
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ },
+ [theme.breakpoints.down('md')]: {
+ flexWrap: 'wrap',
+ marginLeft: 0,
+ },
+ [theme.breakpoints.down('sm')]: {
+ '& span': {
+ width: '100%',
+ marginBottom: 3,
+ },
+ },
+ },
+ qrBtn: {
+ color: getColor('main')(theme),
+ border: `1px solid ${getColor('main')(theme)}`,
+ fontSize: 10,
+ textTransform: 'uppercase',
+ height: 18,
+ width: 55,
+ background: 'transparent',
+ padding: 0,
+ marginLeft: 15,
+ },
+ spec: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ padding: 0,
+ '& li': {
+ width: '50%',
+ display: 'flex',
+ marginBottom: 48,
+ [theme.breakpoints.down('sm')]: {
+ marginBottom: 32,
+ flexDirection: 'column',
+ },
+ '&:nth-child(odd)': {
+ width: 'calc(50% - 80px)',
+ marginRight: 80,
+ [theme.breakpoints.down('xs')]: {
+ marginRight: 40,
+ width: 'calc(50% - 40px)',
+ },
+ },
+ },
+ },
+ label: {
+ textTransform: 'uppercase',
+ fontSize: 15,
+ fontWeight: 'bold',
+ letterSpacing: 2,
+ width: 150,
+ flexShrink: 0,
+ marginRight: 40,
+ color: getColor('grey4')(theme),
+ display: 'flex',
+ alignItems: 'center',
+ [theme.breakpoints.down('md')]: {
+ marginRight: 20,
+ },
+ [theme.breakpoints.down('sm')]: {
+ width: '100%',
+ marginRight: 0,
+ },
+ },
+ value: {
+ fontSize: 15,
+ lineHeight: '29px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ '& a': {
+ color: getColor('main')(theme),
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline',
+ },
+ },
+ },
+ tabs: {
+ marginBottom: 50,
+ },
+ indicator: {
+ display: 'none',
+ },
+ tab: {
+ border: `1px solid ${getColor('main')(theme)}`,
+ color: getColor('main')(theme),
+ opacity: 1,
+ },
+ tabSelected: {
+ backgroundColor: getColor('main')(theme),
+ color: getColor('dark')(theme),
+ },
+}));
diff --git a/src/v2/components/Transactions/Table/index.jsx b/src/v2/components/Transactions/Table/index.jsx
index 86709a08..eb43600f 100644
--- a/src/v2/components/Transactions/Table/index.jsx
+++ b/src/v2/components/Transactions/Table/index.jsx
@@ -119,7 +119,7 @@ const TransactionsTable = ({
{map(renderRow)(transactions)}
-
+
5CpdpKwKUBJgD4Bd...
diff --git a/src/v2/components/Transactions/index.jsx b/src/v2/components/Transactions/index.jsx
new file mode 100644
index 00000000..dd331b5e
--- /dev/null
+++ b/src/v2/components/Transactions/index.jsx
@@ -0,0 +1,23 @@
+// @flow
+import {Container} from '@material-ui/core';
+import React from 'react';
+import HelpLink from 'v2/components/HelpLink';
+import SectionHeader from 'v2/components/UI/SectionHeader';
+
+import Table from './Table';
+import useStyles from './styles';
+
+const TransactionsPage = () => {
+ const classes = useStyles();
+ return (
+
+
+
+ 234,654
+
+
+
+ );
+};
+
+export default TransactionsPage;
diff --git a/src/v2/components/Transactions/styles.js b/src/v2/components/Transactions/styles.js
new file mode 100644
index 00000000..0fe6c45e
--- /dev/null
+++ b/src/v2/components/Transactions/styles.js
@@ -0,0 +1,8 @@
+import {makeStyles} from '@material-ui/core';
+
+export default makeStyles({
+ total: {
+ marginRight: 'auto',
+ marginLeft: 25,
+ },
+});
diff --git a/src/v2/components/UI/Label/index.jsx b/src/v2/components/UI/Label/index.jsx
new file mode 100644
index 00000000..bbfd9faa
--- /dev/null
+++ b/src/v2/components/UI/Label/index.jsx
@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+import HelpLink from 'v2/components/HelpLink';
+
+import useStyles from './styles';
+
+const Label = ({text, hint}: {text: string, hint: string}) => {
+ const classes = useStyles();
+ return (
+
+ );
+};
+
+export default Label;
diff --git a/src/v2/components/UI/Label/styles.js b/src/v2/components/UI/Label/styles.js
new file mode 100644
index 00000000..bb8c622d
--- /dev/null
+++ b/src/v2/components/UI/Label/styles.js
@@ -0,0 +1,17 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ text: {
+ textTransform: 'uppercase',
+ color: getColor('grey4')(theme),
+ fontSize: 15,
+ letterSpacing: 2,
+ fontWeight: 'bold',
+ whiteSpace: 'nowrap',
+ },
+}));
diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
index c4336fb4..1ec3c648 100644
--- a/src/v2/components/Validators/Table/styles.js
+++ b/src/v2/components/Validators/Table/styles.js
@@ -102,6 +102,6 @@ export default makeStyles(theme => ({
textTransform: 'uppercase',
color: '#C4C4C4',
letterSpacing: 2,
- fontWight: 'bold',
+ fontWeight: 'bold',
},
}));
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
index 3a3aae42..a68fe437 100644
--- a/src/v2/components/Validators/index.jsx
+++ b/src/v2/components/Validators/index.jsx
@@ -6,9 +6,9 @@ import {map} from 'lodash/fp';
import Card from 'v2/components/UI/StatCard';
import SectionHeader from 'v2/components/UI/SectionHeader';
import NodesStore from 'v2/stores/nodes';
+import Mixpanel from 'v2/mixpanel';
+import Button from 'v2/components/UI/Button';
-import Mixpanel from '../../mixpanel';
-import Button from '../UI/Button';
import ValidatorsMap from './ValidatorsMap';
import ValidatorsTable from './Table';
import useStyles from './styles';