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 0000000..e9f30bc Binary files /dev/null and b/src/app/assets/images/failed-round.png differ diff --git a/src/app/assets/images/success-round.png b/src/app/assets/images/success-round.png new file mode 100644 index 0000000..d587c49 Binary files /dev/null and b/src/app/assets/images/success-round.png differ 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 }) => {