From bcbd01e64f7e1fc936136ff60b4d3762bb4319ca Mon Sep 17 00:00:00 2001 From: Alex <40631201+DrekaaR@users.noreply.github.com> Date: Thu, 20 Apr 2023 18:45:02 +0200 Subject: [PATCH] send form finished --- src/app/App.js | 108 +++++++------- src/app/assets/images/failed-round.png | Bin 0 -> 2531 bytes src/app/assets/images/success-round.png | Bin 0 -> 2898 bytes src/app/assets/svg/check-icon.svg | 5 + src/app/assets/svg/loader.svg | 8 + src/app/assets/svg/plus-icon.svg | 6 + src/app/assets/svg/send.svg | 8 +- src/app/components/AppPlug/AppPlug.jsx | 34 +++-- .../components/AppPlug/AppPlug.module.scss | 20 +-- src/app/components/TokensTabs/TokensTabs.jsx | 8 +- .../TokensTabs/TokensTabs.module.scss | 12 +- src/app/components/UI/Loader/Loader.jsx | 15 ++ .../components/UI/Loader/Loader.module.scss | 22 +++ .../UI/MyButton/MyButton.module.scss | 2 +- .../components/UI/RoutersNav/RoutersNav.jsx | 14 +- src/app/components/Wallet/Wallet.jsx | 49 +++--- src/app/components/Wallet/Wallet.module.scss | 83 ++++------- .../WalletReceive/WalletReceive.jsx | 35 ----- .../WalletReceive/WalletReceive.module.scss | 38 ----- .../WalletSend/AddressInput/AddressInput.jsx | 5 +- src/app/components/WalletSend/WalletSend.jsx | 139 ++++++++++++++---- .../WalletSend/WalletSend.module.scss | 25 ++++ src/app/store/actions.js | 7 + src/app/store/store-reducer.js | 3 + src/app/styles/_global.scss | 5 + 25 files changed, 358 insertions(+), 293 deletions(-) create mode 100644 src/app/assets/images/failed-round.png create mode 100644 src/app/assets/images/success-round.png create mode 100644 src/app/assets/svg/check-icon.svg create mode 100644 src/app/assets/svg/loader.svg create mode 100644 src/app/assets/svg/plus-icon.svg create mode 100644 src/app/components/UI/Loader/Loader.jsx create mode 100644 src/app/components/UI/Loader/Loader.module.scss delete mode 100644 src/app/components/WalletReceive/WalletReceive.jsx delete mode 100644 src/app/components/WalletReceive/WalletReceive.module.scss diff --git a/src/app/App.js b/src/app/App.js index 21aab85..aa94b56 100644 --- a/src/app/App.js +++ b/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 (
diff --git a/src/app/assets/images/failed-round.png b/src/app/assets/images/failed-round.png new file mode 100644 index 0000000000000000000000000000000000000000..e9f30bcf8154324380487a7e47eeedabf959e60d GIT binary patch literal 2531 zcmV<92^{u`P)x64_q}(vi`&|<9shcFzK;~*gr>FZPu{(IcRn-F6n^)v4gG!-7&|Fm+Tt

yzSJ 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 literal 0 HcmV?d00001 diff --git a/src/app/assets/svg/check-icon.svg b/src/app/assets/svg/check-icon.svg new file mode 100644 index 0000000..b22bbd8 --- /dev/null +++ b/src/app/assets/svg/check-icon.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/app/assets/svg/loader.svg b/src/app/assets/svg/loader.svg new file mode 100644 index 0000000..16ad9b6 --- /dev/null +++ b/src/app/assets/svg/loader.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/app/assets/svg/plus-icon.svg b/src/app/assets/svg/plus-icon.svg new file mode 100644 index 0000000..1ca4fe8 --- /dev/null +++ b/src/app/assets/svg/plus-icon.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/app/assets/svg/send.svg b/src/app/assets/svg/send.svg index b58285e..8dec5eb 100644 --- a/src/app/assets/svg/send.svg +++ b/src/app/assets/svg/send.svg @@ -1,11 +1,11 @@ - + diff --git a/src/app/components/AppPlug/AppPlug.jsx b/src/app/components/AppPlug/AppPlug.jsx index 51c0a35..6b5873b 100644 --- a/src/app/components/AppPlug/AppPlug.jsx +++ b/src/app/components/AppPlug/AppPlug.jsx @@ -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 (

@@ -13,20 +21,24 @@ const AppPlug = () => {
-
- display image -
+ {state.isLoading ? ( + + ) : ( + <> +
+ display image +
- Wallet offline + Wallet offline -
- Make sure you're running
a wallet with RPC enabled -
- - +
+ Make sure you're running
a wallet with RPC enabled +
+ + )}
- diff --git a/src/app/components/AppPlug/AppPlug.module.scss b/src/app/components/AppPlug/AppPlug.module.scss index 842f8b5..7e545e5 100644 --- a/src/app/components/AppPlug/AppPlug.module.scss +++ b/src/app/components/AppPlug/AppPlug.module.scss @@ -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; - } - } -} \ No newline at end of file diff --git a/src/app/components/TokensTabs/TokensTabs.jsx b/src/app/components/TokensTabs/TokensTabs.jsx index bae301b..8c9df0f 100644 --- a/src/app/components/TokensTabs/TokensTabs.jsx +++ b/src/app/components/TokensTabs/TokensTabs.jsx @@ -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: }, diff --git a/src/app/components/TokensTabs/TokensTabs.module.scss b/src/app/components/TokensTabs/TokensTabs.module.scss index f4f286b..3b1e683 100644 --- a/src/app/components/TokensTabs/TokensTabs.module.scss +++ b/src/app/components/TokensTabs/TokensTabs.module.scss @@ -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; } // ========================================================= diff --git a/src/app/components/UI/Loader/Loader.jsx b/src/app/components/UI/Loader/Loader.jsx new file mode 100644 index 0000000..c7a8dad --- /dev/null +++ b/src/app/components/UI/Loader/Loader.jsx @@ -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 ( +
+ loader icon +
+ ); +}; + +export default Loader; \ No newline at end of file diff --git a/src/app/components/UI/Loader/Loader.module.scss b/src/app/components/UI/Loader/Loader.module.scss new file mode 100644 index 0000000..04d0e04 --- /dev/null +++ b/src/app/components/UI/Loader/Loader.module.scss @@ -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); + } + } +} diff --git a/src/app/components/UI/MyButton/MyButton.module.scss b/src/app/components/UI/MyButton/MyButton.module.scss index d3e53ff..d4b9072 100644 --- a/src/app/components/UI/MyButton/MyButton.module.scss +++ b/src/app/components/UI/MyButton/MyButton.module.scss @@ -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 { diff --git a/src/app/components/UI/RoutersNav/RoutersNav.jsx b/src/app/components/UI/RoutersNav/RoutersNav.jsx index fec8ddf..6d2e83e 100644 --- a/src/app/components/UI/RoutersNav/RoutersNav.jsx +++ b/src/app/components/UI/RoutersNav/RoutersNav.jsx @@ -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 (
- + {onClick !== "none" && ( + + )}
{title}
); diff --git a/src/app/components/Wallet/Wallet.jsx b/src/app/components/Wallet/Wallet.jsx index c647b4d..dc95b58 100644 --- a/src/app/components/Wallet/Wallet.jsx +++ b/src/app/components/Wallet/Wallet.jsx @@ -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}
-
-
- {state.wallet.alias ? "@" + state.wallet.alias : "Wallet 1"} -
- +
+ {state.wallet.alias ? ( + `@${state.wallet.alias}` + ) : ( + + )}
{renderBalance()}
{state.wallet.address} -
- {/**/} - {/* send icon Send*/} - {/**/} - + - receive icon Receive + send icon + +
); }; -export default Wallet; +export default Wallet; \ No newline at end of file diff --git a/src/app/components/Wallet/Wallet.module.scss b/src/app/components/Wallet/Wallet.module.scss index 59be68b..e315501 100644 --- a/src/app/components/Wallet/Wallet.module.scss +++ b/src/app/components/Wallet/Wallet.module.scss @@ -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; - } -} +} \ No newline at end of file diff --git a/src/app/components/WalletReceive/WalletReceive.jsx b/src/app/components/WalletReceive/WalletReceive.jsx deleted file mode 100644 index b0bdca8..0000000 --- a/src/app/components/WalletReceive/WalletReceive.jsx +++ /dev/null @@ -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 ( -
- {SuccessCopyModal} - - - -
-
- {/* QR code for tokens receiving */} -
- -
{address}
- - copyToClipboard(address)}> - copy icon Copy - -
-
- ); -}; - -export default WalletReceive; diff --git a/src/app/components/WalletReceive/WalletReceive.module.scss b/src/app/components/WalletReceive/WalletReceive.module.scss deleted file mode 100644 index eff1a40..0000000 --- a/src/app/components/WalletReceive/WalletReceive.module.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/app/components/WalletSend/AddressInput/AddressInput.jsx b/src/app/components/WalletSend/AddressInput/AddressInput.jsx index 0b22643..64615cc 100644 --- a/src/app/components/WalletSend/AddressInput/AddressInput.jsx +++ b/src/app/components/WalletSend/AddressInput/AddressInput.jsx @@ -52,10 +52,7 @@ const AddressInput = ({ address }) => {