-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #423 from djeck1432/feature/add-deposit
wip: deposit page
- Loading branch information
Showing
12 changed files
with
651 additions
and
115 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
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
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
155 changes: 155 additions & 0 deletions
155
frontend/src/components/ui/token-selector/tokenSelector.css
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,155 @@ | ||
| .token-selector-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 8px; | ||
| } | ||
|
|
||
| .token-options { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 8px; | ||
| } | ||
|
|
||
| .token-card-btn { | ||
| width: 100%; | ||
| text-align: center; | ||
| border: 1px solid var(--secondary); | ||
| border-radius: 8px; | ||
| padding: 8px; | ||
| } | ||
|
|
||
| .token-card-btn.selected { | ||
| border-image: linear-gradient(to right, #74d6fd, #e01dee) 1; | ||
| } | ||
|
|
||
| .token-container-deposit { | ||
| background: var(--dark-purple); | ||
| transition: background 1.3s ease; | ||
| padding: 1px; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .token-container:has(input[type='radio']:checked) { | ||
| background: var(--button-gradient); | ||
| } | ||
|
|
||
| .token-icon-deposit { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 5px; | ||
| border-radius: 100px; | ||
| background-color: hsla(261, 49%, 15%, 1); | ||
| } | ||
|
|
||
| .token-label { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 5px; | ||
| margin-top: 60px; | ||
| } | ||
|
|
||
| .token-label input { | ||
| background-color: transparent; | ||
| border: 1px solid var(--light-purple); | ||
| border-radius: 50px; | ||
| padding: 20px 30px; | ||
| color: var(--gray); | ||
| } | ||
|
|
||
| .token-select { | ||
| margin: 8px 0 8px 0; | ||
| } | ||
|
|
||
| .token-amount { | ||
| margin: 20px 0 12px 0; | ||
| } | ||
|
|
||
| .token-card-btn h5 { | ||
| margin-top: 9px; | ||
| font-size: 16px; | ||
| font-size: 16px; | ||
| color: var(--primary); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 6px; | ||
| } | ||
|
|
||
| .token-card-btn svg { | ||
| width: 20px; | ||
| height: 20px; | ||
| width: 20px; | ||
| height: 20px; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .token-card-btn label { | ||
| width: 79.5px; | ||
| height: 36px; | ||
| padding: 4px 8px; | ||
| } | ||
| } | ||
|
|
||
| .token-icon { | ||
| display: grid; | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .token-icon-deposit { | ||
| margin-right: 5px; | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .token-card-btn { | ||
| width: auto; | ||
| height: auto; | ||
| } | ||
|
|
||
| .token-card-btn h5 { | ||
| margin: 0; | ||
| font-size: 14px; | ||
| gap: 0; | ||
| } | ||
|
|
||
| .token-card-btn svg { | ||
| width: 15px; | ||
| height: 15px; | ||
| } | ||
|
|
||
| .token-label input { | ||
| border-radius: 16px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .token-container { | ||
| max-width: fit-content; | ||
| position: relative; | ||
| } | ||
|
|
||
| .token-label { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .token-amount { | ||
| margin: 25px 0 12px 0; | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| .token-card-btn label { | ||
| width: 208.67px; | ||
| height: 40px; | ||
| padding: 4px 8px; | ||
| } | ||
| } | ||
|
|
||
| input[type='radio'] { | ||
| display: none; | ||
| padding: 2px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } |
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,30 @@ | ||
| import { useMutation } from '@tanstack/react-query'; | ||
| import { axiosInstance } from 'utils/axios'; | ||
| import { notify } from 'components/layout/notifier/Notifier'; | ||
| import useDashboardData from './useDashboardData'; | ||
|
|
||
| export const useAddDeposit = () => { | ||
| const { data: dashboardData } = useDashboardData(); | ||
| const mutation = useMutation({ | ||
| mutationFn: async ({ positionId, amount, tokenSymbol }) => { | ||
| if (!dashboardData?.position_id) { | ||
| return notify('No position found', 'error'); | ||
| } | ||
|
|
||
| const { data } = await axiosInstance.post(`/api/add-extra-deposit/${positionId}`, { | ||
| position_id: dashboardData.position_id, | ||
| amount: parseFloat(amount), | ||
| token_symbol: tokenSymbol, | ||
| }); | ||
| return data; | ||
| }, | ||
| onSuccess: () => { | ||
| notify('Successfully deposited!', 'success'); | ||
| }, | ||
| onError: (error) => { | ||
| notify(error.response?.data?.message || 'Failed to process deposit', 'error'); | ||
| }, | ||
| }); | ||
|
|
||
| return mutation; | ||
| }; |
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,84 @@ | ||
| import React, { useState } from 'react'; | ||
| import { ReactComponent as HealthIcon } from 'assets/icons/health.svg'; | ||
| import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg'; | ||
| import { useAddDeposit } from 'hooks/useAddDeposit'; | ||
| import './addDeposit.css'; | ||
| import Card from 'components/ui/card/Card'; | ||
| import TokenSelector from 'components/ui/token-selector/TokenSelector'; | ||
| import { NUMBER_REGEX } from 'utils/regex'; | ||
|
|
||
| export const AddDeposit = () => { | ||
| const [amount, setAmount] = useState('0'); | ||
| const [selectedToken, setSelectedToken] = useState('STRK'); | ||
|
|
||
| const { mutate: addDeposit, isLoading } = useAddDeposit(); | ||
|
|
||
| const handleAmountChange = (e) => { | ||
| const value = e.target.value; | ||
| if (NUMBER_REGEX.test(value)) { | ||
| setAmount(value); | ||
| } | ||
| }; | ||
|
|
||
| const handleCancel = () => { | ||
| setAmount('0'); | ||
| setSelectedToken('STRK'); | ||
| }; | ||
|
|
||
| const handleDeposit = () => { | ||
| addDeposit( | ||
| { | ||
| amount, | ||
| tokenSymbol: selectedToken, | ||
| }, | ||
| { | ||
| onSuccess: () => { | ||
| setAmount('0'); | ||
| setSelectedToken('STRK'); | ||
| }, | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="deposit-wrapper"> | ||
| <div className="deposit-container"> | ||
| <h1 className="deposit-title1">zkLend Deposit</h1> | ||
| <div className="main-container-deposit"> | ||
| <div className="top-cards-deposit"> | ||
| <Card label="Health Factor" value="1.47570678" icon={<HealthIcon className="icon" />} /> | ||
| <Card label="Borrow Balance" value="$-55.832665" icon={<EthIcon className="icon" />} /> | ||
| </div> | ||
| </div> | ||
| <h1 className="deposit-title2">Pls make a deposit</h1> | ||
| <TokenSelector selectedToken={selectedToken} setSelectedToken={setSelectedToken} /> | ||
|
|
||
| <div className="amount-input-deposit" aria-labelledby="amount-input-label"> | ||
| <input | ||
| type="text" | ||
| id="amount-field" | ||
| value={amount} | ||
| onChange={handleAmountChange} | ||
| pattern="^\d*\.?\d*$" | ||
| className="amount-field-deposit" | ||
| aria-describedby="currency-symbol" | ||
| placeholder="0.00" | ||
| disabled={isLoading} | ||
| /> | ||
| <span id="currency-symbol" className="currency-deposit"> | ||
| {selectedToken} | ||
| </span> | ||
| </div> | ||
|
|
||
| <div className="dep-button"> | ||
| <button className="deposit-cancel-button" onClick={handleCancel} disabled={isLoading}> | ||
| Cancel | ||
| </button> | ||
| <button className="deposit-button" onClick={handleDeposit} disabled={isLoading || amount === '0'}> | ||
| {isLoading ? 'Processing...' : 'Deposit'} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.