send form finished
This commit is contained in:
Alex
parent
58c041b65e
commit
bcbd01e64f
25 changed files with 358 additions and 293 deletions
108
src/app/App.js
108
src/app/App.js
|
|
@ -1,68 +1,70 @@
|
|||
import { useContext } from "react";
|
||||
import { useContext, useEffect } from "react";
|
||||
import { Router } from "react-chrome-extension-router";
|
||||
import { getWalletData } from "../background/wallet";
|
||||
import AppPlug from "./components/AppPlug/AppPlug";
|
||||
import Header from "./components/Header/Header";
|
||||
import TokensTabs from "./components/TokensTabs/TokensTabs";
|
||||
import Wallet from "./components/Wallet/Wallet";
|
||||
import { updateWalletConnected, updateWalletData } from "./store/actions";
|
||||
import { Store } from "./store/store-reducer";
|
||||
import "./styles/App.scss";
|
||||
|
||||
function App() {
|
||||
const { state, dispatch } = useContext(Store);
|
||||
|
||||
// useEffect(() => {
|
||||
// const checkConnection = async () => {
|
||||
// // eslint-disable-next-line no-undef
|
||||
// if (chrome.runtime.sendMessage) {
|
||||
// // eslint-disable-next-line no-undef
|
||||
// chrome.runtime.sendMessage(
|
||||
// { message: "GET_WALLET_BALANCE" },
|
||||
// (response) => {
|
||||
// if (response.data) {
|
||||
// updateWalletConnected(dispatch, true);
|
||||
// } else {
|
||||
// updateWalletConnected(dispatch, false);
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
//
|
||||
// const getWalletData = async () => {
|
||||
// // eslint-disable-next-line no-undef
|
||||
// if (chrome.runtime.sendMessage) {
|
||||
// // eslint-disable-next-line no-undef
|
||||
// chrome.runtime.sendMessage(
|
||||
// { message: "GET_WALLET_DATA" },
|
||||
// (response) => {
|
||||
// if (response.data) {
|
||||
// const { address, balance, transactions, assets } = response.data;
|
||||
// updateWalletData(dispatch, {
|
||||
// address,
|
||||
// alias: "alias",
|
||||
// balance,
|
||||
// assets,
|
||||
// transactions,
|
||||
// });
|
||||
// console.log("wallet data updated");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
//
|
||||
// const intervalId = setInterval(async () => {
|
||||
// await checkConnection();
|
||||
// console.log("connected", state.isConnected);
|
||||
// if (state.isConnected) {
|
||||
// await getWalletData();
|
||||
// }
|
||||
// }, 1000);
|
||||
//
|
||||
// return () => clearInterval(intervalId);
|
||||
// }, [dispatch, state.isConnected]);
|
||||
useEffect(() => {
|
||||
const checkConnection = async () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
if (chrome.runtime.sendMessage) {
|
||||
// eslint-disable-next-line no-undef
|
||||
chrome.runtime.sendMessage(
|
||||
{ message: "GET_WALLET_BALANCE" },
|
||||
(response) => {
|
||||
if (response.data) {
|
||||
updateWalletConnected(dispatch, true);
|
||||
} else {
|
||||
updateWalletConnected(dispatch, false);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// state.isConnected && setInterval(() => getWalletData(), 1000);
|
||||
const getWalletData = async () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
if (chrome.runtime.sendMessage) {
|
||||
// eslint-disable-next-line no-undef
|
||||
chrome.runtime.sendMessage(
|
||||
{ message: "GET_WALLET_DATA" },
|
||||
(response) => {
|
||||
if (response.data) {
|
||||
const { address, balance, transactions, assets } = response.data;
|
||||
updateWalletData(dispatch, {
|
||||
address,
|
||||
alias: "alias",
|
||||
balance,
|
||||
assets,
|
||||
transactions,
|
||||
});
|
||||
console.log("wallet data updated");
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const intervalId = setInterval(async () => {
|
||||
await checkConnection();
|
||||
console.log("connected", state.isConnected);
|
||||
if (state.isConnected) {
|
||||
await getWalletData();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [dispatch, state.isConnected]);
|
||||
|
||||
state.isConnected && setInterval(() => getWalletData(), 1000);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
|
|
|
|||
BIN
src/app/assets/images/failed-round.png
Normal file
BIN
src/app/assets/images/failed-round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/app/assets/images/success-round.png
Normal file
BIN
src/app/assets/images/success-round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
5
src/app/assets/svg/check-icon.svg
Normal file
5
src/app/assets/svg/check-icon.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="56" height="43" viewBox="0 0 56 43" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M55.027 0.788413C56.2485 1.9079 56.3311 3.8056 55.2116 5.02704L21.883 41.3907C21.3148 42.0106 20.5126 42.3636 19.6717 42.3637C18.8308 42.3637 18.0285 42.0109 17.4602 41.3911L0.788839 23.2093C-0.330909 21.9881 -0.248666 20.0904 0.972534 18.9707C2.19373 17.8509 4.09145 17.9332 5.2112 19.1544L19.6709 34.9241L50.7884 0.972999C51.9079 -0.248437 53.8056 -0.331078 55.027 0.788413Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 569 B |
8
src/app/assets/svg/loader.svg
Normal file
8
src/app/assets/svg/loader.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M62 21C39.3563 21 21 39.3563 21 62H1C1 28.3106 28.3106 1 62 1V21ZM62 103C84.6437 103 103 84.6437 103 62H123C123 95.6894 95.6894 123 62 123V103Z"
|
||||
fill="white" fill-opacity="0.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M62 21C39.3563 21 21 39.3563 21 62H1C1 28.3106 28.3106 1 62 1V21ZM62 103C84.6437 103 103 84.6437 103 62H123C123 95.6894 95.6894 123 62 123V103Z"
|
||||
fill="#16D1D6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 594 B |
6
src/app/assets/svg/plus-icon.svg
Normal file
6
src/app/assets/svg/plus-icon.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M44.2307 1.82249C45.2928 0.760405 47.0148 0.760404 48.0769 1.82249C49.139 2.88457 49.139 4.60655 48.0769 5.66863L5.76927 47.9762C4.70718 49.0383 2.9852 49.0383 1.92312 47.9763C0.861035 46.9142 0.861034 45.1922 1.92312 44.1301L44.2307 1.82249Z"
|
||||
fill="white"/>
|
||||
<path d="M1.92283 5.66917C0.860747 4.60708 0.860745 2.8851 1.92283 1.82302C2.98491 0.760938 4.70689 0.760937 5.76897 1.82302L48.0766 44.1306C49.1387 45.1927 49.1387 46.9147 48.0766 47.9768C47.0145 49.0389 45.2925 49.0389 44.2305 47.9768L1.92283 5.66917Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
|
|
@ -1,11 +1,11 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M19.6602 19.4836C18.6009 20.6212 17.0961 21.25 15.3341 21.25L6.66509 21.25C4.90302 21.25 3.39843 20.6212 2.33939 19.4835C1.28788 18.3539 0.750094 16.8039 0.750094 15.084L0.750095 6.916C0.750095 5.19472 1.29121 3.64491 2.34364 2.51598C3.40331 1.37929 4.9073 0.749997 6.6651 0.749997L15.3341 0.749998C17.0962 0.749998 18.6009 1.37881 19.6602 2.51641C20.712 3.64596 21.2501 5.19597 21.2501 6.916L21.2501 15.084C21.2501 16.804 20.712 18.354 19.6602 19.4836ZM18.1965 18.1207C18.8452 17.424 19.2501 16.391 19.2501 15.084L19.2501 6.916C19.2501 5.60903 18.8452 4.57604 18.1965 3.87933C17.5553 3.19068 16.602 2.75 15.3341 2.75L6.6651 2.75C5.40289 2.75 4.44938 3.19021 3.80655 3.87976C3.15648 4.57708 2.75009 5.61027 2.75009 6.916L2.75009 15.084C2.75009 16.3911 3.1548 17.4241 3.8033 18.1208C4.44426 18.8093 5.39717 19.25 6.66509 19.25L15.3341 19.25C16.602 19.25 17.5553 18.8093 18.1965 18.1207Z"
|
||||
d="M18.2629 18.1023C17.2788 19.1592 15.8762 19.75 14.2168 19.75L5.78207 19.75C4.1227 19.75 2.72026 19.1591 1.73645 18.1023C0.75829 17.0515 0.249869 15.601 0.249869 13.9736L0.24987 6.02629C0.24987 4.39785 0.761344 2.94751 1.74048 1.89721C2.72504 0.84108 4.12702 0.249875 5.78207 0.249875L14.2168 0.249876C15.8762 0.249876 17.2788 0.840725 18.2629 1.89753C19.2413 2.9483 19.75 4.39879 19.75 6.02629L19.75 13.9736C19.75 15.6011 19.2413 17.0516 18.2629 18.1023ZM17.1651 17.0802C17.8412 16.354 18.25 15.2913 18.25 13.9736L18.25 6.02629C18.25 4.70858 17.8412 3.64586 17.1651 2.91973C16.4946 2.19963 15.5056 1.74988 14.2168 1.74988L5.78207 1.74987C4.49871 1.74987 3.50959 2.19927 2.83766 2.92005C2.16029 3.64665 1.74987 4.70951 1.74987 6.02629L1.74987 13.9736C1.74987 15.2914 2.15848 16.3541 2.83439 17.0802C3.50464 17.8003 4.49331 18.25 5.78207 18.25L14.2168 18.25C15.5056 18.25 16.4946 17.8002 17.1651 17.0802Z"
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11.0001 16.0859C10.4478 16.0859 10.0001 15.6382 10.0001 15.0859L10.0001 6.91394C10.0001 6.36165 10.4478 5.91394 11.0001 5.91394C11.5524 5.91394 12.0001 6.36165 12.0001 6.91394L12.0001 15.0859C12.0001 15.6382 11.5524 16.0859 11.0001 16.0859Z"
|
||||
d="M5.27438 9.99951C5.27438 9.5853 5.61017 9.24951 6.02438 9.24951L13.9756 9.24951C14.3898 9.24951 14.7256 9.5853 14.7256 9.99951C14.7256 10.4137 14.3898 10.7495 13.9756 10.7495L6.02438 10.7495C5.61017 10.7495 5.27438 10.4137 5.27438 9.99951Z"
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M15.4537 11.3863C15.0623 11.776 14.4292 11.7747 14.0395 11.3833L11.0001 8.33097L7.96071 11.3833C7.57102 11.7747 6.93785 11.776 6.5465 11.3863C6.15514 10.9967 6.1538 10.3635 6.54349 9.97213L10.2915 6.20814C10.4791 6.01968 10.7341 5.91374 11.0001 5.91374C11.2661 5.91374 11.5211 6.01968 11.7087 6.20814L15.4567 9.97214C15.8464 10.3635 15.8451 10.9967 15.4537 11.3863Z"
|
||||
d="M9.78199 14.1757C9.48972 13.8822 9.49073 13.4073 9.78425 13.115L12.9128 9.99976L9.78425 6.88449C9.49073 6.59222 9.48972 6.11734 9.78199 5.82383C10.0743 5.53031 10.5491 5.5293 10.8426 5.82157L14.5049 9.4683C14.6463 9.60904 14.7257 9.80029 14.7257 9.99976C14.7257 10.1992 14.6463 10.3905 14.5049 10.5312L10.8426 14.1779C10.5491 14.4702 10.0743 14.4692 9.78199 14.1757Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,10 +1,18 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import displayImage from "../../assets/images/display.svg";
|
||||
import logo from "../../assets/svg/logo.svg";
|
||||
import questionIcon from "../../assets/svg/question.svg";
|
||||
import { Store } from "../../store/store-reducer";
|
||||
import Loader from "../UI/Loader/Loader";
|
||||
import s from "./AppPlug.module.scss";
|
||||
|
||||
const AppPlug = () => {
|
||||
const { state } = useContext(Store);
|
||||
|
||||
const btnClasses = state.isLoading
|
||||
? [s.plugButton, s.hidden].join(" ")
|
||||
: s.plugButton;
|
||||
|
||||
return (
|
||||
<div className={s.plug}>
|
||||
<div className={`${s.plugBody} container`}>
|
||||
|
|
@ -13,20 +21,24 @@ const AppPlug = () => {
|
|||
</div>
|
||||
|
||||
<div className={s.plugContent}>
|
||||
<div className={s.plugImage}>
|
||||
<img src={displayImage} alt="display image" />
|
||||
</div>
|
||||
{state.isLoading ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
<div className={s.plugImage}>
|
||||
<img src={displayImage} alt="display image" />
|
||||
</div>
|
||||
|
||||
<strong>Wallet offline</strong>
|
||||
<strong>Wallet offline</strong>
|
||||
|
||||
<div className={s.plugText}>
|
||||
Make sure you're running <br />a wallet with RPC enabled
|
||||
</div>
|
||||
|
||||
<button className={s.plugConnectButton}>Connect</button>
|
||||
<div className={s.plugText}>
|
||||
Make sure you're running <br />a wallet with RPC enabled
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button className={s.plugButton}>
|
||||
<button className={btnClasses}>
|
||||
<img src={questionIcon} alt="question icon" />
|
||||
How to create wallet?
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
.plug {
|
||||
height: 100%;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.plugBody {
|
||||
|
|
@ -16,6 +15,7 @@
|
|||
.plugLogo {
|
||||
max-width: 175px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -57,18 +57,10 @@
|
|||
text-align: center;
|
||||
color: #1F8FEB;
|
||||
padding: 15px;
|
||||
margin-bottom: 17px;
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plugConnectButton {
|
||||
background-color: #1F8FEB;
|
||||
border-radius: 8px;
|
||||
line-height: 47px;
|
||||
padding: 0 24px;
|
||||
min-width: 152px;
|
||||
transition: background-color 0.2s ease 0s;
|
||||
@media (any-hover: hover) {
|
||||
&:hover {
|
||||
background-color: #1a7cce;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,13 +4,7 @@ import History from "./History/History";
|
|||
import s from "./TokensTabs.module.scss";
|
||||
|
||||
const TokensTabs = () => {
|
||||
const [activeTab, setActiveTab] = useState(
|
||||
Number(localStorage.getItem("activeTab")) || 0
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("activeTab", activeTab);
|
||||
}, [activeTab]);
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
const tabs = [
|
||||
{ label: "assets", content: <Assets /> },
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@use "sass:math";
|
||||
|
||||
.tabs {
|
||||
position: relative;
|
||||
background: #0F2055;
|
||||
border-radius: 24px 24px 0 0;
|
||||
margin: 0 -16px;
|
||||
min-height: 57.8%;
|
||||
padding: 16px 16px 30px 16px;
|
||||
position: relative;
|
||||
background: #0F2055;
|
||||
border-radius: 24px 24px 0 0;
|
||||
margin: 0 -16px;
|
||||
min-height: 47vh;
|
||||
padding: 16px 16px 30px 16px;
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
|
|
|
|||
15
src/app/components/UI/Loader/Loader.jsx
Normal file
15
src/app/components/UI/Loader/Loader.jsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
import loader from "../../../assets/svg/loader.svg";
|
||||
import s from "./Loader.module.scss";
|
||||
|
||||
const Loader = ({ isSmall }) => {
|
||||
const loaderClasses = isSmall ? [s.loader, s.small].join(" ") : s.loader;
|
||||
|
||||
return (
|
||||
<div className={loaderClasses}>
|
||||
<img src={loader} alt="loader icon" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loader;
|
||||
22
src/app/components/UI/Loader/Loader.module.scss
Normal file
22
src/app/components/UI/Loader/Loader.module.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
@use "sass:math";
|
||||
|
||||
.loader {
|
||||
animation: rotate 1s infinite linear;
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
&.small {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
line-height: math.div(21, 18);
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
transition: background-color 0.2s ease 0s;
|
||||
transition: all 0.2s ease 0s;
|
||||
&.borderVariant {
|
||||
background-color: #1F8FEB;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,18 @@ import { goBack } from "react-chrome-extension-router";
|
|||
import backIcon from "../../../assets/svg/arrow-back.svg";
|
||||
import s from "./RoutersNav.module.scss";
|
||||
|
||||
const RoutersNav = ({ title }) => {
|
||||
const RoutersNav = ({ title, onClick }) => {
|
||||
const clickHandler = () => {
|
||||
onClick ? onClick() : goBack();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={s.navHeader}>
|
||||
<button onClick={() => goBack()} className={s.backBtn}>
|
||||
<img src={backIcon} alt="back button icon" />
|
||||
</button>
|
||||
{onClick !== "none" && (
|
||||
<button onClick={clickHandler} className={s.backBtn}>
|
||||
<img src={backIcon} alt="back button icon" />
|
||||
</button>
|
||||
)}
|
||||
<div className={s.title}>{title}</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import { useContext } from "react";
|
|||
import { Link } from "react-chrome-extension-router";
|
||||
import copyIcon from "../../assets/svg/copy.svg";
|
||||
import dotsIcon from "../../assets/svg/dots.svg";
|
||||
import receiveIcon from "../../assets/svg/receive.svg";
|
||||
import sendIcon from "../../assets/svg/send.svg";
|
||||
import { useCopy } from "../../hooks/useCopy";
|
||||
import { Store } from "../../store/store-reducer";
|
||||
import WalletReceive from "../WalletReceive/WalletReceive";
|
||||
import WalletSend from "../WalletSend/WalletSend";
|
||||
import s from "./Wallet.module.scss";
|
||||
|
||||
const Wallet = () => {
|
||||
|
|
@ -60,49 +59,43 @@ const Wallet = () => {
|
|||
{SuccessCopyModal}
|
||||
|
||||
<div className={s.infoWallet}>
|
||||
<div className={s.infoTop}>
|
||||
<div>
|
||||
{state.wallet.alias ? "@" + state.wallet.alias : "Wallet 1"}
|
||||
</div>
|
||||
<button className={`${s.dotsButton} round-button`}>
|
||||
<img src={dotsIcon} alt="dots icon" />
|
||||
</button>
|
||||
<div className={s.alias}>
|
||||
{state.wallet.alias ? (
|
||||
`@${state.wallet.alias}`
|
||||
) : (
|
||||
<button className={s.aliasCreateBtn}>Create alias</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderBalance()}
|
||||
|
||||
<div className={s.infoAddress}>
|
||||
<span>{state.wallet.address}</span>
|
||||
<button
|
||||
onClick={() => copyToClipboard(state.wallet.address)}
|
||||
className={`${s.copyButton} round-button`}
|
||||
>
|
||||
<img src={copyIcon} alt="copy icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={s.actionsWallet}>
|
||||
{/*<Link*/}
|
||||
{/* component={WalletSend}*/}
|
||||
{/* props={{ message: "I came from Wallet component" }}*/}
|
||||
{/* className={s.actionsButton}*/}
|
||||
{/*>*/}
|
||||
{/* <img src={sendIcon} alt="send icon" /> Send*/}
|
||||
{/*</Link>*/}
|
||||
<button className={s.actionsButton} onClick={() => sendTransfer()}>
|
||||
<img src={sendIcon} alt="send icon" /> Send
|
||||
<button className={`${s.dotsButton} round-button`}>
|
||||
<img src={dotsIcon} alt="dots icon" />
|
||||
</button>
|
||||
|
||||
<Link
|
||||
component={WalletReceive}
|
||||
component={WalletSend}
|
||||
props={{ message: "I came from Wallet component" }}
|
||||
className={s.actionsButton}
|
||||
className="round-button"
|
||||
>
|
||||
<img src={receiveIcon} alt="receive icon" /> Receive
|
||||
<img src={sendIcon} alt="send icon" />
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => copyToClipboard(state.wallet.address)}
|
||||
className="round-button"
|
||||
>
|
||||
<img src={copyIcon} alt="copy icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wallet;
|
||||
export default Wallet;
|
||||
|
|
@ -2,54 +2,33 @@
|
|||
@import "src/app/styles/variables";
|
||||
|
||||
.wallet {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 25px;
|
||||
background: radial-gradient(100% 188.88% at 0% 0%, #16d1d6 0%, #274cff 100%);
|
||||
border-radius: 16px;
|
||||
padding: 16px 16px 10px 16px;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dotsButton {
|
||||
transform: translate(25%, 0);
|
||||
.actionsWallet {
|
||||
display: grid;
|
||||
row-gap: 2px;
|
||||
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.infoWallet {
|
||||
background: radial-gradient(100% 188.88% at 0% 0%, #16d1d6 0%, #274cff 100%);
|
||||
border-radius: 16px;
|
||||
padding: 16px 16px 10px 16px;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.infoTop {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
column-gap: 20px;
|
||||
margin-bottom: 8px;
|
||||
line-height: math.div(21.5, 18);
|
||||
}
|
||||
|
||||
.infoWalletStatus {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
&:hover {
|
||||
.status {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.infoBalance {
|
||||
align-self: center;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: math.div(38, 32);
|
||||
margin-bottom: 0px;
|
||||
.percentСhange {
|
||||
color: #ffcbcb;
|
||||
font-size: 18px;
|
||||
|
|
@ -63,6 +42,7 @@
|
|||
display: flex;
|
||||
column-gap: 20px;
|
||||
align-items: center;
|
||||
max-width: 256px;
|
||||
span {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
|
@ -72,35 +52,22 @@
|
|||
line-height: math.div(17, 14);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.copyButton {
|
||||
transform: translate(25%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.actionsWallet {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 16px;
|
||||
.alias {
|
||||
|
||||
}
|
||||
|
||||
.actionsButton {
|
||||
background: #0c0c3a;
|
||||
border: 2px solid #1f8feb;
|
||||
border-radius: 16px;
|
||||
height: 57px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 6px;
|
||||
font-size: 21px;
|
||||
line-height: math.div(25, 21);
|
||||
transition: background-color 0.2s ease 0s;
|
||||
img {
|
||||
flex: 0 0 20px;
|
||||
.aliasCreateBtn {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
line-height: 32px;
|
||||
transition: background-color 0.1s ease 0s;
|
||||
@media (any-hover: hover) {
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #24244e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import React from "react";
|
||||
// import QRCodeImage from "../../assets/images/qr.png";
|
||||
import copyIcon from "../../assets/svg/copy.svg";
|
||||
import { useCopy } from "../../hooks/useCopy";
|
||||
import MyButton from "../UI/MyButton/MyButton";
|
||||
import RoutersNav from "../UI/RoutersNav/RoutersNav";
|
||||
import s from "./WalletReceive.module.scss";
|
||||
|
||||
const address =
|
||||
"ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7gbogZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7gbog7GZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7gbog7GZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7gbog7G";
|
||||
|
||||
const WalletReceive = () => {
|
||||
const { SuccessCopyModal, copyToClipboard } = useCopy();
|
||||
return (
|
||||
<div>
|
||||
{SuccessCopyModal}
|
||||
|
||||
<RoutersNav title="Receive" />
|
||||
|
||||
<div className={s.content}>
|
||||
<div className={s.QRCode}>
|
||||
{/* <img src={QRCodeImage} alt="QR code for tokens receiving" /> */}
|
||||
</div>
|
||||
|
||||
<div className={s.receiveAddress}>{address}</div>
|
||||
|
||||
<MyButton onClick={() => copyToClipboard(address)}>
|
||||
<img src={copyIcon} alt="copy icon" /> Copy
|
||||
</MyButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WalletReceive;
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@use "sass:math";
|
||||
|
||||
.content {
|
||||
button {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
width: calc(100% - 32px);
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.QRCode {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.receiveAddress {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 300;
|
||||
line-height: math.div(21, 18);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
|
@ -52,10 +52,7 @@ const AddressInput = ({ address }) => {
|
|||
<label className={mainStyles.label} htmlFor="address-wallet-send">
|
||||
Address:
|
||||
{address.value && (
|
||||
<button
|
||||
className={`${buttonClasses} round-button`}
|
||||
onClick={toggleAlias}
|
||||
>
|
||||
<button className={buttonClasses} onClick={toggleAlias}>
|
||||
<img src={aliasIcon} alt="add alias button icon" />
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
import React, { useContext, useState } from "react";
|
||||
import { goTo } from "react-chrome-extension-router";
|
||||
import App from "../../App";
|
||||
import failedImage from "../../assets/images/failed-round.png";
|
||||
import successImage from "../../assets/images/success-round.png";
|
||||
import { useCheckbox } from "../../hooks/useCheckbox";
|
||||
import { useInput } from "../../hooks/useInput";
|
||||
import { Store } from "../../store/store-reducer";
|
||||
|
|
@ -11,54 +15,129 @@ import AssetsSelect from "./AssetsSelect/AssetsSelect";
|
|||
import s from "./WalletSend.module.scss";
|
||||
|
||||
const WalletSend = () => {
|
||||
const { state } = useContext(Store);
|
||||
const { state, dispatch } = useContext(Store);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const [transactionSuccess, setTransactionSuccess] = useState(false);
|
||||
// Form data
|
||||
const address = useInput("");
|
||||
const [asset, setAsset] = useState(state.wallet.assets[0]);
|
||||
const amount = useInput("");
|
||||
const comment = useInput("");
|
||||
const mixin = useInput("");
|
||||
const fee = useInput("");
|
||||
const mixin = useInput(10);
|
||||
const fee = useInput(0.01);
|
||||
const isSenderInfo = useCheckbox(false);
|
||||
const isReceiverInfo = useCheckbox(false);
|
||||
|
||||
const sendHandler = () => {
|
||||
alert("Sending tokens");
|
||||
const TableRow = ({ label, value }) => {
|
||||
return (
|
||||
<div className="table__row">
|
||||
<div className="table__label">{label}:</div>
|
||||
<div className="table__value">{value}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={s.sendForm}>
|
||||
<RoutersNav title="Send" />
|
||||
<>
|
||||
{(() => {
|
||||
switch (activeStep) {
|
||||
// Send form
|
||||
case 0:
|
||||
return (
|
||||
<div>
|
||||
<RoutersNav title="Send" />
|
||||
|
||||
<AddressInput address={address} />
|
||||
<div className={s.sendForm}>
|
||||
<AddressInput address={address} />
|
||||
|
||||
<AssetsSelect value={asset} setValue={setAsset} />
|
||||
<AssetsSelect value={asset} setValue={setAsset} />
|
||||
|
||||
<MyInput
|
||||
type="number"
|
||||
placeholder="Enter how much you want to transfer"
|
||||
label="Amount:"
|
||||
value={amount.value}
|
||||
onChange={amount.onChange}
|
||||
/>
|
||||
<MyInput
|
||||
type="number"
|
||||
placeholder="Enter how much you want to transfer"
|
||||
label="Amount:"
|
||||
value={amount.value}
|
||||
onChange={amount.onChange}
|
||||
/>
|
||||
|
||||
<MyInput
|
||||
placeholder="Enter the comment"
|
||||
label="Comment:"
|
||||
value={comment.value}
|
||||
onChange={comment.onChange}
|
||||
/>
|
||||
<MyInput
|
||||
placeholder="Enter the comment"
|
||||
label="Comment:"
|
||||
value={comment.value}
|
||||
onChange={comment.onChange}
|
||||
/>
|
||||
|
||||
<AdditionalDetails
|
||||
mixin={mixin}
|
||||
fee={fee}
|
||||
isSenderInfo={isSenderInfo}
|
||||
isReceiverInfo={isReceiverInfo}
|
||||
/>
|
||||
<AdditionalDetails
|
||||
mixin={mixin}
|
||||
fee={fee}
|
||||
isSenderInfo={isSenderInfo}
|
||||
isReceiverInfo={isReceiverInfo}
|
||||
/>
|
||||
|
||||
<MyButton onClick={sendHandler}>Send</MyButton>
|
||||
</div>
|
||||
<MyButton
|
||||
disabled={!address.value || !amount.value}
|
||||
onClick={() => setActiveStep(1)}
|
||||
>
|
||||
Send
|
||||
</MyButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// Confirm
|
||||
case 1:
|
||||
return (
|
||||
<div>
|
||||
<RoutersNav onClick={() => setActiveStep(0)} title="Confirm" />
|
||||
|
||||
<div style={{ minHeight: "410px" }} className="table">
|
||||
<TableRow
|
||||
label="Amount"
|
||||
value={amount.value + " " + asset.ticker}
|
||||
/>
|
||||
<TableRow label="From" value={state.wallet.address} />
|
||||
<TableRow label="To" value={address.value} />
|
||||
<TableRow label="Comment" value={comment.value} />
|
||||
<TableRow label="Fee" value={fee.value} />
|
||||
</div>
|
||||
|
||||
<MyButton onClick={() => setActiveStep(2)}>Confirm</MyButton>
|
||||
</div>
|
||||
);
|
||||
// Transaction status
|
||||
case 2:
|
||||
return (
|
||||
<div>
|
||||
<RoutersNav
|
||||
onClick={transactionSuccess ? "none" : () => setActiveStep(1)}
|
||||
title="Transaction"
|
||||
/>
|
||||
|
||||
<div className={s.transactionContent}>
|
||||
<div className={s.transactionIcon}>
|
||||
<img
|
||||
src={transactionSuccess ? successImage : failedImage}
|
||||
alt="transaction status icon"
|
||||
/>
|
||||
</div>
|
||||
<div className={s.transactionText}>
|
||||
{transactionSuccess
|
||||
? "Successfully sent!"
|
||||
: "Sending failed"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MyButton onClick={() => goTo(App)}>Close</MyButton>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return;
|
||||
}
|
||||
})()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WalletSend;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,3 +16,28 @@
|
|||
row-gap: 16px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.transactionContent {
|
||||
min-height: 410px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transform: translate(0, -30px);
|
||||
}
|
||||
|
||||
.transactionIcon {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin: 0 auto 8px auto;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.transactionText {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
line-height: math.div(21, 18);
|
||||
color: #1F8FEB;
|
||||
}
|
||||
|
|
@ -25,3 +25,10 @@ export const updatePrice = (dispatch, state) => {
|
|||
payload: state,
|
||||
});
|
||||
};
|
||||
|
||||
export const updateLoading = (dispatch, state) => {
|
||||
return dispatch({
|
||||
type: "LOADING_UPDATED",
|
||||
payload: state,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ const initialState = {
|
|||
},
|
||||
displayUsd: true,
|
||||
isConnected: true,
|
||||
isLoading: false,
|
||||
priceUsd: 1,
|
||||
percentChange: -4.6,
|
||||
};
|
||||
|
|
@ -91,6 +92,8 @@ const reducer = (state, action) => {
|
|||
return { ...state, wallet: action.payload };
|
||||
case "PRICE_UPDATED":
|
||||
return { ...state, price: action.payload };
|
||||
case "LOADING_UPDATED":
|
||||
return { ...state, isLoading: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,11 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease 0s;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue