From 57dcb2b09a00cf10d14e05969c3dc401e0478684 Mon Sep 17 00:00:00 2001 From: Paul Ccari Date: Mon, 22 Feb 2021 21:46:29 -0500 Subject: [PATCH 01/17] move Credit section to layout and trim spaces --- src/components/layout/Layout.js | 23 ++++++++++++++++++++++ src/containers/Home.js | 34 ++++++--------------------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/components/layout/Layout.js b/src/components/layout/Layout.js index b21ee2c..e46f05c 100644 --- a/src/components/layout/Layout.js +++ b/src/components/layout/Layout.js @@ -3,6 +3,7 @@ import React from 'react'; import type { Node } from 'react'; import styled from 'styled-components'; +import adapoolIcon from '../../assets/adapool-logo-extend.svg'; const Container = styled.div` max-width: 1200px; @@ -17,12 +18,34 @@ const Background = styled.div` box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06); `; +const CreditSection = styled.div` + display: flex; + align-items: center; + justify-content: flex-end; + margin: 24px 0 0; + color: #676970; + font-size: 14px; + img { + background: #012b51; + margin-left: 10px; + padding: 2px 6px; + border-radius: 4px; + height: 27px; + } +`; + function Layout({ children }: {| children?: ?Node |}): Node { return ( {children} + + Powered by + + adapool-logo + + ); } diff --git a/src/containers/Home.js b/src/containers/Home.js index 645dfc2..df2fc22 100644 --- a/src/containers/Home.js +++ b/src/containers/Home.js @@ -18,7 +18,6 @@ import type { QueryState } from '../utils/types'; import Modal from '../components/common/Modal'; import SaturatedPoolAlert from '../components/SaturatedPoolAlert'; -import adapoolIcon from '../assets/adapool-logo-extend.svg' // k = 500 const SATURATION_LIMIT = 63600000000000; @@ -50,21 +49,6 @@ const Header = styled.div` // } // `; -const CreditSection = styled.div` - display: flex; - align-items: center; - justify-content: flex-end; - margin: 24px 0 0; - color: #676970; - font-size: 14px; - img { - background: #012b51; - margin-left: 10px; - padding: 2px 6px; - border-radius: 4px; - height: 27px; - } -`; export type UrlParams = {| chromeId: ?string, mozId: ?string, @@ -167,8 +151,7 @@ function Home(props: HomeProps): Node { setDelegationModalData({ ...delegation, totalAda }) setConfirmDelegationModal(true) setOpenModal(true) - } - else { + } else { confirmedDelegateFunction(delegation.id) } }; @@ -194,7 +177,7 @@ function Home(props: HomeProps): Node { Number(item.total_stake) + lovelaceDelegation < SATURATION_LIMIT )); } - + const { urlParams: { selectedPoolIds, totalAda } } = props return ( @@ -207,18 +190,18 @@ function Home(props: HomeProps): Node { {/* */} - - )} - Powered by - - adapool-logo - - ); } From 62aef2e3f435f7d3636326f9495d707ddaac1dba Mon Sep 17 00:00:00 2001 From: Paul Ccari Date: Mon, 22 Feb 2021 21:46:59 -0500 Subject: [PATCH 02/17] add flow type for provider view --- src/API/api.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/API/api.js b/src/API/api.js index fe6a6f8..986e4c8 100644 --- a/src/API/api.js +++ b/src/API/api.js @@ -65,8 +65,15 @@ export const Sorting = Object.freeze({ TICKER: 'ticker', SCORE: 'score', }); +export const Provider = Object.freeze({ + ADAPOOLS: 'adapools', + POOLTOOL: 'pooltool', + DAEDALUS_SIMPLE: 'daedalus_simple', + DAEDALUS_ADVANCED: 'daedalus_advanced', +}); export type SortingEnum = $Values; +export type ProviderEnum = $Values; export type SearchParams = {| limit?: number, From a63ae4c4cf2b2a5b47aeb5395497a8f060cc7d32 Mon Sep 17 00:00:00 2001 From: Paul Ccari Date: Mon, 22 Feb 2021 22:01:18 -0500 Subject: [PATCH 03/17] refactor select input and create provider select --- src/components/ProviderSelect.js | 53 ++++++++++++++++++++++++++++++++ src/components/SortSelect.js | 32 ++----------------- src/components/common/Inputs.js | 33 ++++++++++++++++++++ 3 files changed, 88 insertions(+), 30 deletions(-) create mode 100644 src/components/ProviderSelect.js create mode 100644 src/components/common/Inputs.js diff --git a/src/components/ProviderSelect.js b/src/components/ProviderSelect.js new file mode 100644 index 0000000..9375f33 --- /dev/null +++ b/src/components/ProviderSelect.js @@ -0,0 +1,53 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import type { ProviderEnum } from '../API/api'; +import { SelectInput, SelectLabel } from './common/Inputs'; + +const WrapperSelectInput = styled.div` + display: flex; + flex-direction: column; + margin-left: 40px; + @media (max-width: 1125px) { + margin-left: 0; + } +`; + +type Props = {| + setProvider: Function, +|}; + +const selectData = [ + { + label: 'Adapools (Advanced)', + value: 'adapools', + }, + { + label: 'Daedalus Official (Simple)', + value: 'daedalus-simple', + }, +]; + +function ProviderSelect({ setProvider }: Props): React$Node { + const [selectValue, setSelectValue] = React.useState('adapools'); + + const handleChange = (e) => { + setSelectValue(e.currentTarget.value); + setProvider(e.currentTarget.value); + }; + + return ( + + Provider: + + {selectData.map(({ value, label }) => ( + + ))} + + + ); +} + +export default ProviderSelect; diff --git a/src/components/SortSelect.js b/src/components/SortSelect.js index 8077dae..5700bc2 100644 --- a/src/components/SortSelect.js +++ b/src/components/SortSelect.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import type { SortingEnum } from '../API/api'; -import arrowDownIcon from '../assets/arrow-select-down.svg' +import { SelectInput, SelectLabel } from './common/Inputs'; const WrapperSelectInput = styled.div` display: flex; @@ -11,34 +11,6 @@ const WrapperSelectInput = styled.div` @media (max-width: 1125px) { margin-left: 0; } - label { - color: #676970; - font-size: 12px; - line-height: 20px; - margin-bottom: 6px; - } -`; - -const SelectInput = styled.select` - height: 40px; - display: block; - font-size: 14px; - line-height: 22px; - color: #2b2c32; - line-height: 1.3; - padding: 0.6em 1.4em 0.5em 0.8em; - width: 322px; - margin: 0; - border: none; - border-radius: 8px; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - background-color: #f0f3f5; - background-image: url(${arrowDownIcon}); - background-repeat: no-repeat, repeat; - background-position: right 0.7em top 50%, 0 0; - background-size: 24px auto, 100%; `; type Props = {| @@ -78,7 +50,7 @@ function SortSelect({ filter }: Props): React$Node { return ( - + Sort by: {selectData.map(({ value, label }) => (