new progressbar component of claim branch && more values available (#…

…2060)

# Summary

Fixes #2008 

New Progress Bar component was created, values can be set by clicking the numbers at the top of the bar or via dragging the bar or clicking at any bar point.
![image](https://user-images.githubusercontent.com/25584298/148546035-98851851-a95b-41a3-a611-4a2b5a31d461.png)


  # To Test

1. Open the page `Profile`
The bar is at the bottom of the form

src/custom/components/ProgressBar/index.tsx

@@ -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>
+  )
+}

src/custom/components/ProgressBar/styled.tsx

@@ -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;
+  }
+`

src/custom/pages/Profile/index.tsx

@@ -33,6 +33,8 @@ import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { Title } from 'components/Page'
+import { ProgressBar } from 'components/ProgressBar'
+import { useState } from 'react'
 import { useTokenBalance } from 'state/wallet/hooks'
 import { V_COW } from 'constants/tokens'
 import { AMOUNT_PRECISION } from 'constants/index'
@@ -44,6 +46,7 @@ export default function Profile() {
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
   const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades
   const hasOrders = useHasOrders(account)
+  const [percentage, setPercentage] = useState(0)
 
   const vCowBalance = useTokenBalance(account || undefined, chainId ? V_COW[chainId] : undefined)
 
@@ -217,6 +220,7 @@ export default function Profile() {
           </GridWrap>
           {!account && <Web3Status openOrdersPanel={() => console.log('TODO')} />}
         </GridWrap>
+        <ProgressBar onPercentageClick={setPercentage} percentage={percentage} />
       </Wrapper>
     </Container>
   )