-
Notifications
You must be signed in to change notification settings - Fork 1
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 #25 from nguyenvanhuan243/Integrate-crypto-wallet-…
…user Integrate wallet page
- Loading branch information
Showing
6 changed files
with
230 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /** | ||
| * Asynchronously loads the component for NotFoundPage | ||
| */ | ||
| import Loadable from 'react-loadable'; | ||
|
|
||
| export default Loadable({ | ||
| loader: () => import('./index'), | ||
| loading: () => null, | ||
| }); |
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,85 @@ | ||
| import React, { useState } from 'react'; | ||
| import Header from 'components/Header/Loadable'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import Swal from 'sweetalert2/dist/sweetalert2'; | ||
| import 'sweetalert2/src/sweetalert2.scss'; | ||
| import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
| import MovieAPI from '../../api/backend/movies'; | ||
| import UserUtils from '../../utils/user/UserUtils'; | ||
| export default function WalletPage() { | ||
| const [movieUrl, setMovieUrl] = useState("") | ||
| const onSubmit = e => { | ||
| e.preventDefault(); | ||
| const params = { | ||
| url: movieUrl | ||
| }; | ||
| MovieAPI.create(params, UserUtils.getAccessToken()).then(res => { | ||
| if (res.status === 201) Swal(res.statusText, 'Success.', 'success'); | ||
| }).catch(e => Swal(e.response.statusText, e.message, 'warning')); | ||
| } | ||
| return ( | ||
| <React.Fragment> | ||
| <Header /> | ||
| <div className="WalletPage-container container"> | ||
| <div className="col-md-9"> | ||
| <div className="WalletPage-content"> | ||
| <div className="layout_container___Dq4R"> | ||
| <div className="spot_wrapper__ATz3a"> | ||
| <div className="asset-overview_wrapper__ZvHi9"> | ||
| <div className="asset-overview_head__wVm1a"> | ||
| <h1> | ||
| Crypto Wallet | ||
| </h1> | ||
| <div className="asset-overview_right__XFuMn"> | ||
| <button type="button" className="ant-btn ant-btn-primary"> | ||
| <span>Deposit</span> | ||
| </button> | ||
| <button type="button" className="ant-btn ant-btn-default"> | ||
| <span>Withdraw</span></button><button type="button" className="ant-btn ant-btn-default"> | ||
| <span>Send</span> | ||
| </button> | ||
| <span className="undefined MBiz__transfetFill___D60r6"> | ||
| <button type="button" className="ant-btn ant-btn-default"> | ||
| <span>Transfer</span> | ||
| </button> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div className="asset-overview_asset__MCWHh"> | ||
| <div> | ||
| <div className="asset-overview_title__yJgwU"> | ||
| <span>Estimated Balance </span> | ||
| <svg className="sc-eqUAAy cMqsAc mx-icon" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024" data-icon="EyeFilled"> | ||
| <path d="M378.94053807 503.95578476a130.64915101 130.64915101 0 1 0 261.29830205 0 130.64915101 130.64915101 0 0 0-261.29830205 0z m637.10184727-30.12419915C905.47603376 240.88220762 738.32278873 123.65857446 514.24978618 123.65857446 290.06582896 123.65857446 123.02353863 240.88220762 12.34623236 473.9425403a70.34527536 70.34527536 0 0 0 0 60.08196627c110.62182893 232.94937797 277.77507395 350.17301114 501.84807649 350.17301112 224.12847988 0 391.22624756-117.22363318 501.79259915-350.28396582 8.98733013-18.86229781 8.98733013-40.83132702 0-60.08196626z m-506.50817359 235.39038121a205.26618207 205.26618207 0 1 1 0-410.58784147 205.26618207 205.26618207 0 0 1 0 410.58784147z" /> | ||
| </svg> | ||
| </div> | ||
| <div className="asset-overview_total__C3nmE"> | ||
| <div className="asset-overview_totalSymbol__CwWhp"> | ||
| <strong data-testid="total">0 USDT</strong> | ||
| <div className="ant-dropdown-trigger asset-overview_assetDropdown__6yJjC"> | ||
| <svg className="sc-eqUAAy cMqsAc mx-icon" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024" data-icon="CaretDownOutlined"> | ||
| <path d="M929.1776 203.1616a61.44 61.44 0 0 1 46.8992 100.9664L559.104 799.0272a61.44 61.44 0 0 1-94.0032 0L47.9232 304.128a61.44 61.44 0 0 1 46.8992-100.9664h834.3552z" /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| <div className="asset-overview_fiat__LKJ3G"> | ||
| <span className><span style={{ marginInlineEnd: '4px' }}>≈</span><span dir="ltr"><span dir="ltr">0.00</span></span></span> <span className="asset-overview_baseFiat__pvfSb">USD</span> | ||
| <div className="ant-dropdown-trigger select-fiat_dropdown__Xx_oK"> | ||
| <svg className="sc-eqUAAy cMqsAc mx-icon" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024" data-icon="CaretDownOutlined"> | ||
| <path d="M929.1776 203.1616a61.44 61.44 0 0 1 46.8992 100.9664L559.104 799.0272a61.44 61.44 0 0 1-94.0032 0L47.9232 304.128a61.44 61.44 0 0 1 46.8992-100.9664h834.3552z" /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </React.Fragment> | ||
| ); | ||
| } |
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,123 @@ | ||
| /* styles.scss */ | ||
|
|
||
| .WalletPage-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| background-color: #f5f5f5; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
|
|
||
| .col-md-9 { | ||
| background-color: #ffffff; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| width: 80%; | ||
| max-width: 900px; | ||
| } | ||
|
|
||
| .WalletPage-title h1 { | ||
| font-size: 28px; | ||
| color: #333; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .asset-overview_head__wVm1a { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .asset-overview_head__wVm1a h1 { | ||
| font-size: 24px; | ||
| color: #007bff; /* Updated to use #007bff (blue) */ | ||
| } | ||
|
|
||
| .ant-btn { | ||
| margin-right: 10px; | ||
| font-size: 14px; | ||
| padding: 10px 16px; | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .ant-btn-primary { | ||
| background-color: #007bff; /* Updated to use #007bff (blue) */ | ||
| border-color: #007bff; /* Updated to use #007bff (blue) */ | ||
| color: #fff; | ||
| } | ||
|
|
||
| .ant-btn-default { | ||
| background-color: #f0f0f0; | ||
| border-color: #d9d9d9; | ||
| color: #333; | ||
| } | ||
|
|
||
| .asset-overview_total__C3nmE { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .asset-overview_total__C3nmE strong { | ||
| font-size: 24px; | ||
| color: #007bff; /* Updated to use #007bff (blue) */ | ||
| } | ||
|
|
||
| .pnl_wrapper__dH_1J { | ||
| margin-top: 20px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .pnl_pnlTitle__6CSkb { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .pnl_pnlPrice__THufQ { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .pnl_upColor__ytWK7 { | ||
| color: #007bff; /* Updated to use #007bff (blue) */ | ||
| } | ||
|
|
||
| .discount_head__i_Rsc h3 { | ||
| font-size: 20px; | ||
| color: #333; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .discount_feebtn__J6dGF span { | ||
| color: #007bff; /* Updated to use #007bff (blue) */ | ||
| cursor: pointer; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .discount_icon__mcplf { | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .discount_rate__CPhAt { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .discount_maker__DlHSg, | ||
| .discount_taker__i3J7K { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .discount_maker__DlHSg label, | ||
| .discount_taker__i3J7K label { | ||
| margin-right: 8px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .col-md-9 { | ||
| width: 90%; | ||
| } | ||
| } | ||
|
|