Skip to content
Permalink
Browse files

Merge branch 'develop' into feature/ddw-867-implement-block-details-p…

…age-design
  • Loading branch information...
rhyslbw committed Oct 9, 2019
2 parents 9bc4dab + 6ddc104 commit 77242a6f2c9765302743b8ee5773e6bead5fa4c0
Showing with 5,626 additions and 77 deletions.
  1. +1 −0 .storybook/addons.js
  2. +4 −2 .storybook/config.js
  3. +1 −1 next.config.js
  4. +3 −0 package.json
  5. +1 −0 source/features/epochs/components/EpochInfo.scss
  6. +21 −0 source/features/stake-pools/api.ts
  7. +78 −0 source/features/stake-pools/components/StakePoolThumbnail.scss
  8. +45 −0 source/features/stake-pools/components/StakePoolThumbnail.tsx
  9. +206 −0 source/features/stake-pools/components/StakePoolTooltip.scss
  10. +138 −0 source/features/stake-pools/components/StakePoolTooltip.tsx
  11. +3 −0 source/features/stake-pools/components/StakePools.scss
  12. +67 −0 source/features/stake-pools/components/StakePools.tsx
  13. +7 −0 source/features/stake-pools/components/StakePoolsList.scss
  14. +57 −0 source/features/stake-pools/components/StakePoolsList.tsx
  15. +3 −0 source/features/stake-pools/components/StakePoolsSearch.scss
  16. +17 −0 source/features/stake-pools/components/StakePoolsSearch.tsx
  17. +14 −0 source/features/stake-pools/containers/StakePoolsComponentContainer.tsx
  18. +13 −0 source/features/stake-pools/containers/StakePoolsContainer.tsx
  19. +6 −0 source/features/stake-pools/contexts.ts
  20. +34 −0 source/features/stake-pools/helpers.ts
  21. +10 −0 source/features/stake-pools/hooks.ts
  22. +13 −0 source/features/stake-pools/index.ts
  23. +4,202 −0 source/features/stake-pools/stakingStakePools.dummy.json
  24. +27 −0 source/features/stake-pools/store.ts
  25. +57 −0 source/features/stake-pools/types.ts
  26. +21 −1 source/features/widgets/header/components/Header.scss
  27. +17 −0 source/features/widgets/header/components/Header.tsx
  28. +42 −0 source/pages/stake-pools.tsx
  29. +9 −0 source/static/assets/images/stake-pools/clock-icon.svg
  30. +10 −0 source/static/assets/images/stake-pools/close-cross.svg
  31. +5 −0 source/static/assets/images/stake-pools/link-ic.svg
  32. +6 −43 source/styles/global/_fonts.scss
  33. +0 −1 source/styles/resources/mixins/.gitkeep
  34. +10 −0 source/styles/resources/mixins/font-face.scss
  35. +1 −0 source/styles/resources/variables-common/variables-common.scss
  36. +1 −0 source/styles/resources/variables-themes/variables-theme-incentivized-testnet.scss
  37. +1 −0 source/styles/resources/variables-themes/variables-theme-testnet.scss
  38. +48 −0 source/utils/colors.ts
  39. +0 −3 stories/epochs.stories.tsx
  40. +3 −4 stories/footer.stories.tsx
  41. +5 −9 stories/header.stories.tsx
  42. +0 −2 stories/search.stories.tsx
  43. +92 −0 stories/stake-pools.stories.tsx
  44. +6 −0 stories/support/ThemeDecorator.scss
  45. +1 −0 stories/support/ThemeDecorator.tsx
  46. +320 −11 yarn.lock
@@ -1,2 +1,3 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
@@ -1,9 +1,11 @@
import { configure } from '@storybook/react';
import { configure, addDecorator } from '@storybook/react';
import { ThemeDecorator } from '../stories/support/ThemeDecorator';

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /\.stories\.tsx$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}

addDecorator(story => <ThemeDecorator>{story()}</ThemeDecorator>);

configure(loadStories, module);
@@ -8,7 +8,7 @@ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const Dotenv = require('dotenv-webpack');

// TODO: get these variables
let themeResource = 'testnet';
let themeResource = 'incentivized-testnet';
const resourcesDir = path.join(__dirname, 'source/styles/resources');
const resources = [
`${resourcesDir}/mixins/**/*.scss`,
@@ -34,6 +34,7 @@
},
"dependencies": {
"@svgr/webpack": "^4.3.2",
"@types/chroma-js": "^1.4.3",
"@types/classnames": "2.2.9",
"@types/color": "3.0.0",
"@types/qrcode.react": "^0.9.0",
@@ -45,6 +46,7 @@
"apollo-link-http": "1.5.15",
"apollo-link-ws": "1.0.17",
"array-sync": "4.0.0",
"chroma-js": "^2.0.6",
"classnames": "2.2.6",
"color": "3.1.2",
"debug": "4.1.1",
@@ -75,6 +77,7 @@
"@graphql-codegen/typescript-operations": "1.2.0",
"@storybook/addon-actions": "5.1.11",
"@storybook/addon-info": "5.1.11",
"@storybook/addon-knobs": "^5.2.3",
"@storybook/addon-links": "5.1.11",
"@storybook/addons": "5.1.11",
"@storybook/react": "5.1.11",
@@ -1,5 +1,6 @@
.epochInfoContainer {
margin: 61.5px 0;
font-family: ProximaNova;

.header {
margin-bottom: 41px;
@@ -0,0 +1,21 @@
// import ApolloClient from 'apollo-client';

// import {
// GetBlocksQuery,
// GetBlocksQueryVariables,
// } from '../../../generated/typings/graphql-schema';
// import { GraphQLRequest } from '../../utils/graphql/GraphQLRequest';
// import getBlocksQuery from './graphql/getBlocks.graphql';

export class StakePoolsApi {
// public getBlocksByIdsQuery: GraphQLRequest<
// GetBlocksQuery,
// GetBlocksQueryVariables
// >;
// constructor(client: ApolloClient<any>) {
// // this.getBlocksByIdsQuery = new GraphQLRequest<
// // GetBlocksQuery,
// // GetBlocksQueryVariables
// // >(client, getBlocksQuery);
// }
}
@@ -0,0 +1,78 @@
.stakePoolThumbnailContainer {
background-color: #2a2b3c;
border-radius: 4px;
height: 71px;
position: relative;
width: 80px;

&:hover {
@extend .isHighlighted;
}

> button {
background: transparent;
border: none;
cursor: pointer;
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
&:focus {
outline: none;
}
}
}

.content {
cursor: pointer;
height: 100%;
padding: 12px 0 0;
width: 100%;
}

.isHighlighted {
background-color: $popup-bg;
}

.ticker {
color: $solid-text;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1;
margin: 0 0 4px;
text-align: center;
}

.ranking {
font-size: 20px;
font-weight: bold;
text-align: center;
}

.clock {
border-radius: 0 2px 0 4px;
height: 18px;
margin: 1px 0 0;
position: absolute;
right: 0;
top: 0;
width: 18px;
svg {
height: 18px;
width: 18px;
> g > path {
fill: $secondary-half-color;
}
}
}

.colorBand {
border-radius: 0 0 4px 4px;
bottom: 0;
display: block;
height: 5px;
left: 0;
position: absolute;
width: 100%;
}
@@ -0,0 +1,45 @@
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { IStakePoolThumbnailProps } from '../types';
import styles from './StakePoolThumbnail.scss';

const ClockIcon = require('../../../static/assets/images/stake-pools/clock-icon.svg');

const StakePoolThumbnail = ({
isSelected,
onSelect,
stakePool,
color,
children,
}: IStakePoolThumbnailProps) => {
const { ranking, ticker, retiring, id } = stakePool;
const containerStyles = classnames([
styles.stakePoolThumbnailContainer,
isSelected ? styles.isHighlighted : null,
]);
return (
<div className={containerStyles}>
<button onClick={onSelect} />
<div className={styles.content}>
<div className={styles.ticker}>{ticker}</div>
<div className={styles.ranking} style={{ color }}>
{ranking}
</div>
{retiring && (
<div className={styles.clock}>
<ClockIcon className={styles.clockIcon} />
</div>
)}
<div
className={styles.colorBand}
style={{
background: color,
}}
/>
</div>
{children}
</div>
);
};
export default observer(StakePoolThumbnail);

0 comments on commit 77242a6

Please sign in to comment.
You can’t perform that action at this time.