This repository has been archived by the owner on Jun 24, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'claim' into claim-investment-flow-2
- Loading branch information
Showing
7 changed files
with
289 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { ProgressBarWrap, ProgressContainer, Progress, Label, FlexWrap, HiddenRange, ProgressVal } from './styled' | ||
|
|
||
| interface ProgressBarProps { | ||
| percentage: number // between 0 - 100 | ||
| onPercentageClick: (percentage: number) => void | ||
| } | ||
|
|
||
| export function ProgressBar({ percentage, onPercentageClick }: ProgressBarProps) { | ||
| const statPercentages = [ | ||
| { | ||
| value: 0, | ||
| label: '0%', | ||
| }, | ||
| { | ||
| value: 25, | ||
| label: '25%', | ||
| }, | ||
| { | ||
| value: 50, | ||
| label: '50%', | ||
| }, | ||
| { | ||
| value: 75, | ||
| label: '75%', | ||
| }, | ||
| { | ||
| value: 100, | ||
| label: '100%', | ||
| }, | ||
| ] | ||
| const minVal = statPercentages[0].value | ||
| const maxVal = statPercentages[statPercentages.length - 1].value | ||
|
|
||
| if (percentage > 100) { | ||
| percentage = 100 | ||
| } else if (percentage < 0) { | ||
| percentage = 0 | ||
| } | ||
|
|
||
| return ( | ||
| <FlexWrap> | ||
| <ProgressBarWrap> | ||
| {statPercentages.map((item, index) => ( | ||
| <Label position={item.value} onClick={() => onPercentageClick(item.value)} key={`${item.value}-${index}`}> | ||
| {item.label} | ||
| </Label> | ||
| ))} | ||
| <ProgressContainer> | ||
| <HiddenRange | ||
| onChange={(e) => onPercentageClick(parseFloat(e.target.value))} | ||
| min={minVal} | ||
| max={maxVal} | ||
| value={percentage} | ||
| type="range" | ||
| /> | ||
| <Progress percentage={percentage} /> | ||
| <ProgressVal>{percentage}%</ProgressVal> | ||
| </ProgressContainer> | ||
| </ProgressBarWrap> | ||
| </FlexWrap> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import styled from 'styled-components/macro' | ||
| import * as CSS from 'csstype' | ||
| import { FlexWrap as FlexWrapMod } from 'pages/Profile/styled' | ||
| import { transparentize } from 'polished' | ||
|
|
||
| export const FlexWrap = styled(FlexWrapMod)` | ||
| max-width: 100%; | ||
| align-items: flex-end; | ||
| ` | ||
|
|
||
| export const ProgressBarWrap = styled(FlexWrapMod)` | ||
| max-width: 500px; //optional | ||
| padding-top: 40px; | ||
| position: relative; | ||
| ` | ||
|
|
||
| export const ProgressContainer = styled.div` | ||
| background-color: ${({ theme }) => transparentize(0.61, theme.text1)}; | ||
| height: 24px; | ||
| width: 100% !important; | ||
| position: relative; | ||
| overflow: hidden; | ||
| border-radius: 10px; | ||
| ` | ||
|
|
||
| export const HiddenRange = styled.input` | ||
| width: 100%; | ||
| background-color: transparent; | ||
| z-index: 3; | ||
| position: relative; | ||
| opacity: 0; | ||
| ` | ||
|
|
||
| export const Progress = styled.div<Partial<CSS.Properties & { percentage: number }>>` | ||
| background-color: ${({ theme }) => theme.primary1}; | ||
| width: 100%; | ||
| max-width: ${(props) => props.percentage}%; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| transition: max-width 0.2s; | ||
| ` | ||
|
|
||
| export const ProgressVal = styled.span` | ||
| display: inline-block; | ||
| color: ${({ theme }) => theme.text1}; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translateX(-50%) translateY(-50%); | ||
| font-weight: bold; | ||
| font-size: 16px; | ||
| ` | ||
|
|
||
| export const Label = styled.a<Partial<CSS.Properties & { position: any }>>` | ||
| cursor: pointer; | ||
| position: absolute; | ||
| font-size: 12px; | ||
| color: ${({ theme }) => theme.text1}; | ||
| top: 10px; | ||
| left: ${(props) => props.position}%; | ||
| transform: translateX(-50%); | ||
| font-weight: bold; | ||
| text-decoration: underline; | ||
| &:first-child { | ||
| transform: none; | ||
| } | ||
| &:nth-last-child(2) { | ||
| transform: translateX(-100%); | ||
| } | ||
| &:hover { | ||
| text-decoration: none; | ||
| } | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| // Sort of a mod of but not quite from src/pages/Earn/Countdown.tsx | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| const MINUTE = 60 | ||
| const HOUR = MINUTE * 60 | ||
| const DAY = HOUR * 24 | ||
|
|
||
| export type Props = { | ||
| start: number | ||
| end: number | ||
| } | ||
|
|
||
| /** | ||
| * Copied over from src/pages/Earn/Countdown.tsx and heavily modified it | ||
| * | ||
| * If current time is past end time, returns null | ||
| * | ||
| * @param start start time in ms | ||
| * @param end end time in ms | ||
| */ | ||
| export function Countdown({ start, end }: Props) { | ||
| // get current time, store as seconds because 🤷 | ||
| const [time, setTime] = useState(() => Math.floor(Date.now() / 1000)) | ||
|
|
||
| useEffect((): (() => void) | void => { | ||
| // we only need to tick if not ended yet | ||
| if (time <= end / 1000) { | ||
| const timeout = setTimeout(() => setTime(Math.floor(Date.now() / 1000)), 1000) | ||
| return () => { | ||
| clearTimeout(timeout) | ||
| } | ||
| } | ||
| }, [time, end]) | ||
|
|
||
| const timeUntilGenesis = start / 1000 - time | ||
| const timeUntilEnd = end / 1000 - time | ||
|
|
||
| let timeRemaining: number | ||
| if (timeUntilGenesis >= 0) { | ||
| timeRemaining = timeUntilGenesis | ||
| } else { | ||
| const ongoing = timeUntilEnd >= 0 | ||
| if (ongoing) { | ||
| timeRemaining = timeUntilEnd | ||
| } else { | ||
| timeRemaining = Infinity | ||
| } | ||
| } | ||
|
|
||
| const days = (timeRemaining - (timeRemaining % DAY)) / DAY | ||
| timeRemaining -= days * DAY | ||
| const hours = (timeRemaining - (timeRemaining % HOUR)) / HOUR | ||
| timeRemaining -= hours * HOUR | ||
| const minutes = (timeRemaining - (timeRemaining % MINUTE)) / MINUTE | ||
| timeRemaining -= minutes * MINUTE | ||
| const seconds = timeRemaining | ||
|
|
||
| return ( | ||
| <> | ||
| {Number.isFinite(timeRemaining) | ||
| ? `${days} days, ${hours.toString().padStart(2, '0')}h, ${minutes.toString().padStart(2, '0')}m, ${seconds | ||
| .toString() | ||
| .padStart(2, '0')}s` | ||
| : 'No longer claimable'} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.