Add slider (#27)

* Add slider

* Add state for slider amount

* Add onChange

* Change OnChange

* Add input style

* Add style input

* Improve SNT input

Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>

src/components/Card.tsx

@@ -47,6 +47,7 @@ interface CardVoteProps {
   votesForText: string
   timeLeft: string
   voteWinner?: number
+  availableAmount: number
 }
 
 export const CardVote = ({
@@ -59,6 +60,7 @@ export const CardVote = ({
   votesForText,
   timeLeft,
   voteWinner,
+  availableAmount,
 }: CardVoteProps) => {
   const [showModal, setShowModal] = useState(false)
   const [votesModalText, setVotesModalText] = useState('')
@@ -102,6 +104,7 @@ export const CardVote = ({
                 votesForIcon={votesForIcon}
                 timeLeft={timeLeft}
                 votesText={votesModalText}
+                availableAmount={availableAmount}
               />{' '}
             </Modal>
           )}

src/components/card/CardModal.tsx

@@ -4,6 +4,7 @@ import { Colors } from '../../constants/styles'
 import { VoteChart } from '../votes/VoteChart'
 import { Input } from '../Input'
 import { ButtonSecondary } from '../Button'
+import { addCommas } from '../../helpers/addCommas'
 
 export interface CardModalProps {
   voteType: string
@@ -13,6 +14,7 @@ export interface CardModalProps {
   votesForIcon: string
   timeLeft: string
   votesText: string
+  availableAmount: number
 }
 
 export function CardModal({
@@ -23,7 +25,26 @@ export function CardModal({
   votesForIcon,
   timeLeft,
   votesText,
+  availableAmount,
 }: CardModalProps) {
+  const [proposingAmount, setProposingAmount] = useState(0)
+  const [displayAmount, setDisplayAmount] = useState('0 SNT')
+
+  let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2)
+  if (availableAmount < 100) {
+    step = 1
+  }
+
+  const sliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (Number(e.target.value) == step * Math.floor(availableAmount / step)) {
+      setProposingAmount(availableAmount)
+      setDisplayAmount(addCommas(availableAmount) + ' SNT')
+    } else {
+      setProposingAmount(Number(e.target.value))
+      setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT')
+    }
+  }
+
   return (
     <CardProposing>
       <VoteChart
@@ -36,9 +57,27 @@ export function CardModal({
       <VoteProposing>
         <VoteProposingInfo>
           <p>My vote</p>
-          <span>Available 65,245,346 SNT</span>
+          <span>Available {addCommas(availableAmount)} SNT</span>
         </VoteProposingInfo>
-        <VoteProposingAmount defaultValue="1,500,000 SNT" />
+        <VoteProposingAmount
+          value={displayAmount}
+          onInput={(e) => {
+            setProposingAmount(Number(e.currentTarget.value))
+            setDisplayAmount(e.currentTarget.value)
+          }}
+          onBlur={() => setDisplayAmount(addCommas(proposingAmount) + ' SNT')}
+          onFocus={() => setDisplayAmount(proposingAmount.toString())}
+        />
+        <VoteProposingRangeWrap>
+          <VoteProposingRange
+            type="range"
+            min={0}
+            max={availableAmount}
+            step={step}
+            value={proposingAmount}
+            onChange={sliderChange}
+          />
+        </VoteProposingRangeWrap>
       </VoteProposing>
       <VoteConfirmBtn>
         {votesText} <span>{voteType === 'for' ? votesForIcon : votesAgainstIcon}</span>
@@ -75,8 +114,46 @@ const VoteProposingInfo = styled.div`
 
 const VoteProposingAmount = styled(Input)`
   width: 100%;
-  margin-bottom: 26px;
+  margin-bottom: 16px;
+  font-size: 15px;
+  line-height: 22px;
 `
+
+const VoteProposingRangeWrap = styled.div`
+  width: 294px;
+  margin-bottom: 32px;
+`
+
+const VoteProposingRange = styled.input`
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  padding: 0;
+  margin: 10px 0;
+  border-radius: 2px;
+  outline: none;
+  background: ${Colors.VioletSecondary};
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: ${Colors.Violet};
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: #bd5de2;
+    border: 0.5px solid rgba(0, 0, 0, 0);
+    border-radius: 50px;
+    cursor: pointer;
+  }
+`
+
 const VoteConfirmBtn = styled(ButtonSecondary)`
   width: 100%;
   padding: 11px 0;

src/components/votes/VotingCards.tsx

@@ -40,6 +40,7 @@ function VotingCard({ community }: VotingCardProps) {
         votesAgainstText={community.currentVoting?.type === 'Add' ? "Don't add" : 'Keep'}
         votesForText={community.currentVoting?.type === 'Add' ? 'Add' : 'Remove'}
         timeLeft={(community.currentVoting?.timeLeft || 0) / 3600 + ' hours left'}
+        availableAmount={65245346}
       />
     </Card>
   )