diff --git a/package-lock.json b/package-lock.json index fb6f912..7761343 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "copy-to-clipboard": "^3.3.3", + "framer-motion": "^10.11.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -2185,6 +2186,21 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -7930,6 +7946,29 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "10.11.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.11.2.tgz", + "integrity": "sha512-IrwuC9regNOU99JoM/Z62CAMA3awGV6AcF7e3bcgXk/ZoNlGSt5aVq0J7UAwtLmCkwVlRvBkiMnvv2mZ1GW2pg==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -18149,6 +18188,21 @@ "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", "requires": {} }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -22461,6 +22515,15 @@ "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==" }, + "framer-motion": { + "version": "10.11.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.11.2.tgz", + "integrity": "sha512-IrwuC9regNOU99JoM/Z62CAMA3awGV6AcF7e3bcgXk/ZoNlGSt5aVq0J7UAwtLmCkwVlRvBkiMnvv2mZ1GW2pg==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "tslib": "^2.4.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", diff --git a/src/App.js b/src/App.js index 88ad188..6253215 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,15 @@ -import "styles/App.scss"; import Header from "components/Header/Header"; +import TokensTabs from "components/TokensTabs/TokensTabs"; import Wallet from "components/Wallet/Wallet"; +import "styles/App.scss"; function App() { return (
- + +
); diff --git a/src/assets/svg/arrow-square.svg b/src/assets/svg/arrow-square.svg new file mode 100644 index 0000000..80c887f --- /dev/null +++ b/src/assets/svg/arrow-square.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/assets/svg/loading.svg b/src/assets/svg/loading.svg new file mode 100644 index 0000000..933ec19 --- /dev/null +++ b/src/assets/svg/loading.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/assets/tokens-svg/bitcoin.svg b/src/assets/tokens-svg/bitcoin.svg new file mode 100644 index 0000000..aeff85e --- /dev/null +++ b/src/assets/tokens-svg/bitcoin.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/assets/tokens-svg/custom-token.svg b/src/assets/tokens-svg/custom-token.svg new file mode 100644 index 0000000..7e01dd4 --- /dev/null +++ b/src/assets/tokens-svg/custom-token.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + diff --git a/src/assets/tokens-svg/eth.svg b/src/assets/tokens-svg/eth.svg new file mode 100644 index 0000000..f17b1d7 --- /dev/null +++ b/src/assets/tokens-svg/eth.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/tokens-svg/zano.svg b/src/assets/tokens-svg/zano.svg new file mode 100644 index 0000000..a8cb193 --- /dev/null +++ b/src/assets/tokens-svg/zano.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/components/.UI/MyButton/MyButton.jsx b/src/components/.UI/MyButton/MyButton.jsx new file mode 100644 index 0000000..0e9aff3 --- /dev/null +++ b/src/components/.UI/MyButton/MyButton.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import s from "./MyButton.module.scss" + +const MyButton = ({variant, children, ...props}) => { + const classes = variant === "border" ? [s.myButton, s.borderVariant].join(" ") : s.myButton; + return ( + + ); +}; + +export default MyButton; \ No newline at end of file diff --git a/src/components/.UI/MyButton/MyButton.module.scss b/src/components/.UI/MyButton/MyButton.module.scss new file mode 100644 index 0000000..1648939 --- /dev/null +++ b/src/components/.UI/MyButton/MyButton.module.scss @@ -0,0 +1,34 @@ +@use "sass:math"; + +.myButton { + width: 100%; + height: 47px; + background: transparent; + border: 2px solid #1F8FEB; + border-radius: 8px; + display: flex; + column-gap: 6px; + justify-content: center; + align-items: center; + line-height: math.div(21, 18); + text-align: center; + color: #ffffff; + transition: background-color 0.2s ease 0s; + &.borderVariant { + background-color: #1F8FEB; + &:hover { + background-color: #1a7dcc; + } + } + svg { + font-size: 18px; + } + &[disabled] { + opacity: 0.5; + pointer-events: none; + } + &:hover { + background-color: rgba(255, 255, 255, 0.05); + } +} + diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 8ebde84..2cdb315 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,76 +1,78 @@ -import React, { useState } from "react"; -import s from "./Header.module.scss"; -import { ReactComponent as InfoIcon } from "assets/svg/info.svg"; -import { ReactComponent as CrossIcon } from "assets/svg/cross.svg"; import { ReactComponent as BurgerIcon } from "assets/svg/burger.svg"; +import { ReactComponent as CrossIcon } from "assets/svg/cross.svg"; +import { ReactComponent as GearIcon } from "assets/svg/gear.svg"; +import { ReactComponent as InfoIcon } from "assets/svg/info.svg"; +import { ReactComponent as LockIcon } from "assets/svg/lock.svg"; +import { ReactComponent as Logo } from "assets/svg/logo.svg"; import { ReactComponent as PlusIcon } from "assets/svg/plus.svg"; import { ReactComponent as UsersIcon } from "assets/svg/users.svg"; -import { ReactComponent as LockIcon } from "assets/svg/lock.svg"; -import { ReactComponent as GearIcon } from "assets/svg/gear.svg"; -import { ReactComponent as Logo } from "assets/svg/logo.svg"; +import MyButton from "components/.UI/MyButton/MyButton"; +import React, { useState } from "react"; +import s from "./Header.module.scss"; const Header = () => { - const [menuVisible, setMenuVisible] = useState(false) + const [menuVisible, setMenuVisible] = useState(false); const toggleBurgerMenu = () => { if (menuVisible) { - setMenuVisible(false) + setMenuVisible(false); } else { - setMenuVisible(true) + setMenuVisible(true); } - } - + }; return (
- - - {menuVisible && - ( -
-
e.stopPropagation()}> -
- - -
-
- - - Add Wallet - - - - Contacts - - - - Settings - -
- -
-
- ) - } + -
- Wallet Name 1 -
+
Wallet Name 1
- -
); }; export default Header; + +// Components +const BurgerMenu = ({menuVisible, toggleBurgerMenu}) => { + return ( + <> + {menuVisible && ( +
+
e.stopPropagation()}> +
+ + +
+
+ + Add Wallet + + + Contacts + + + Settings + +
+ + Lock Zano + +
+
+ )} + + ); +}; diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index a5e535d..a087b61 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -16,16 +16,35 @@ column-gap: 30px; padding: 0 15px; text-align: center; - + } .headerInfo { color: $blueColor; display: flex; - justify-content:center; + justify-content: center; align-items: center; } +.lockButton { + display: flex; + column-gap: 6px; + justify-content: center; + align-items: center; + border: 2px solid #1F8FEB; + border-radius: 8px; + color: #ffffff; + height: 47px; + width: 100%; + transition: background-color 0.2s ease 0s; + svg { + font-size: 15px; + } + &:hover { + background-color: rgba(255, 255, 255, 0.05); + } +} + // ========================================================= .burger { display: flex; @@ -51,7 +70,7 @@ top: 0; left: 0; background: rgba(0, 0, 0, 0.46); - animation: show-menu-bg 0.2s ease-in-out; + animation: show-menu-bg 0.2s ease; } @keyframes show-menu-bg { 0% { @@ -71,7 +90,7 @@ display: flex; flex-direction: column; background: #11316B; - animation: show-burger-menu 0.2s ease-in-out; + animation: show-burger-menu 0.2s ease; @keyframes show-burger-menu { 0% { transform: translate(-100%, 0); @@ -101,25 +120,27 @@ align-items: center; text-align: left; height: 50px; - font-size: 18px; font-weight: 600; - color: rgba(255, 255, 255, 0.7); + opacity: 0.7; + transition: opacity 0.2s ease 0s; + font-size: 20px; + svg { + width: 24px; + flex: 0 0 24px; + } + &:nth-child(1) { + svg { + font-size: 18px; + } + } + &:nth-child(2) { + svg { + font-size: 22px; + } + } &:hover { - color: #ffffff; + opacity: 1; } } -.lockButton { - display: flex; - column-gap: 6px; - justify-content: center; - align-items: center; - border: 2px solid #1F8FEB; - border-radius: 8px; - color: #ffffff; - height: 47px; - width: 100%; - svg { - font-size: 15px; - } -} + diff --git a/src/components/TokensTabs/Assets/Assets.jsx b/src/components/TokensTabs/Assets/Assets.jsx new file mode 100644 index 0000000..5d6fae5 --- /dev/null +++ b/src/components/TokensTabs/Assets/Assets.jsx @@ -0,0 +1,46 @@ +import { ReactComponent as CrossIcon } from "assets/svg/cross.svg"; +import { ReactComponent as PlusIcon } from "assets/svg/plus.svg"; +import MyButton from "components/.UI/MyButton/MyButton"; +import React from 'react'; +import s from "./Assets.module.scss" + +const Assets = ({assetsMap}) => { + const remove = () => { + alert("remove") + } + + return ( +
+ {assetsMap.map(asset => +
+ + +
+ )} + + Add Custom Token + +
+ ) +}; + +export default Assets; \ No newline at end of file diff --git a/src/components/TokensTabs/Assets/Assets.module.scss b/src/components/TokensTabs/Assets/Assets.module.scss new file mode 100644 index 0000000..ae4783e --- /dev/null +++ b/src/components/TokensTabs/Assets/Assets.module.scss @@ -0,0 +1,73 @@ +@use "sass:math"; + +.asset { + position: relative; + border-radius: 16px; + overflow: hidden; + background-color: rgba(31, 143, 235, 0.15); + transition: background-color 0.2s ease 0s; + &:hover { + background-color: rgba(31, 143, 235, 0.3); + } + &:not(:last-child) { + margin-bottom: 8px; + } +} + +.assetBody { + padding: 16px; + width: 100%; + text-align: left; +} + +.assetRemoveBtn { + position: absolute; + z-index: 2; + top: 8px; + right: 8px; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + padding: 5px; + background-color: transparent; + color: #ffffff; + opacity: 0.5; + transition: all 0.2s ease 0s; + &:hover { + opacity: 1; + background-color: rgba(255, 255, 255, 0.1); + } +} + +.assetTitle { + display: flex; + align-items: center; + column-gap: 8px; + font-size: 24px; + font-weight: 600; + line-height: math.div(28, 24); + svg { + width: 24px; + height: 24px; + flex: 0 0 24px; + } + margin-bottom: 12px; +} + +.assetInfo { + display: grid; + grid-template-columns: 56% 44%; + column-gap: 20px; + line-height: math.div(21, 18); +} + +.assetInfoLabel { + color: #1F8FEB; + margin-bottom: 4px; +} + +.assetInfoValue { + font-weight: 600; +} \ No newline at end of file diff --git a/src/components/TokensTabs/History/History.jsx b/src/components/TokensTabs/History/History.jsx new file mode 100644 index 0000000..694ba94 --- /dev/null +++ b/src/components/TokensTabs/History/History.jsx @@ -0,0 +1,44 @@ +import { ReactComponent as ArrowIcon } from "assets/svg/arrow-square.svg"; +import { ReactComponent as LoadingIcon } from "assets/svg/loading.svg"; +import React from "react"; +import s from "./History.module.scss" + +const History = ({historyMap}) => { + return ( +
+ {historyMap.map((historyItem, index) => { + const iconClasses = + historyItem.type === "send" + ? s.historyIcon + : [s.historyIcon, s.receiveVariant].join(" "); + + return ( + + ); + })} +
+ ); +}; + +export default History; diff --git a/src/components/TokensTabs/History/History.module.scss b/src/components/TokensTabs/History/History.module.scss new file mode 100644 index 0000000..34d8f0e --- /dev/null +++ b/src/components/TokensTabs/History/History.module.scss @@ -0,0 +1,71 @@ +@use "sass:math"; + +.historyItem { + display: block; + width: 100%; + position: relative; + background-color: rgba(31, 143, 235, 0.15); + border-radius: 16px; + padding: 16px; + transition: background-color 0.2s ease 0s; + &:hover { + background-color: rgba(31, 143, 235, 0.3); + } + &:not(:last-child) { + margin-bottom: 8px; + } +} + +.historyLoading { + position: absolute; + z-index: 1; + top: 16px; + right: 16px; + width: 20px; + height: 20px; + animation: rotate 0.8s infinite linear; + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +} + +.historyTop { + display: flex; + align-items: center; + column-gap: 8px; + margin-bottom: 11px; + padding-right: 45px; + span { + font-weight: 600; + font-size: 24px; + line-height: math.div(29, 24); + } +} + +.historyIcon { + font-size: 28px; + flex: 0 0 28px; + height: 28px; + width: 28px; + color: #1f8feb; + &.receiveVariant { + color: #16d1d6; + transform: rotate(-180deg); + } +} + +.historyAddress { + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-size: 14px; + line-height: math.div(17, 14); + color: #1F8FEB; + opacity: 0.5; +} \ No newline at end of file diff --git a/src/components/TokensTabs/TokensTabs.jsx b/src/components/TokensTabs/TokensTabs.jsx new file mode 100644 index 0000000..fc43038 --- /dev/null +++ b/src/components/TokensTabs/TokensTabs.jsx @@ -0,0 +1,93 @@ +import { ReactComponent as BitcoinIcon } from "assets/tokens-svg/bitcoin.svg"; +import { ReactComponent as CustomTokenIcon } from "assets/tokens-svg/custom-token.svg"; +import { ReactComponent as EthIcon } from "assets/tokens-svg/eth.svg"; +import { ReactComponent as ZanoIcon } from "assets/tokens-svg/zano.svg"; +import Assets from "components/TokensTabs/Assets/Assets"; +import History from "components/TokensTabs/History/History"; +import s from "components/TokensTabs/TokensTabs.module.scss"; +import React, { useState } from "react"; + +const assetsMap = [ + { + name: "ZANO", + icon: , + balance: 120, + ticker: "ZANO", + value: 128.96, + }, + { + name: "Wrapped Bitcoin", + icon: , + balance: 0.212, + ticker: "WBTC", + value: 4096.96, + }, + { + name: "Wrapped Ethereum", + icon: , + balance: 2.1, + ticker: "WETH", + value: 3020.12, + }, + { + name: "Custom Asset", + icon: , + balance: 15.52, + ticker: "TSDS", + value: 3020.12, + }, +]; + +const historyMap = [ + { + value: 112412, + type: "send", // or "receive" + ticker: "ZANO", + address: "ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7gbog7oT6KQaR7gbog7", + inProcess: false, + }, + { + value: 10, + type: "receive", // or "send" + ticker: "ZANO", + address: "ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7gbog7oT6KQaR7gbog7", + inProcess: true, + } +]; + +const TokensTabs = () => { + const [activeTab, setActiveTab] = useState(1); + + const tabs = [ + {label: "assets", content: }, + {label: "history", content: }, + ]; + + const toggleTabs = (e) => { + if (activeTab !== e.target.value) { + setActiveTab(Number(e.target.value)); + } + }; + + return ( +
+
+ {tabs.map((tab, index) => ( + + ))} +
+ + {tabs[activeTab].content} +
+ ); +}; + +export default TokensTabs; \ No newline at end of file diff --git a/src/components/TokensTabs/TokensTabs.module.scss b/src/components/TokensTabs/TokensTabs.module.scss new file mode 100644 index 0000000..f4f286b --- /dev/null +++ b/src/components/TokensTabs/TokensTabs.module.scss @@ -0,0 +1,121 @@ +@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; +} + +// ========================================================= +.tabsNav { + margin-bottom: 16px; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; +} + +.tabsNavBtn { + position: relative; + display: flex; + justify-content: center; + align-items: center; + text-transform: capitalize; + line-height: math.div(21, 18); + text-align: center; + font-weight: 600; + height: 45px; + &::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 4px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 10px; + transition: background-color 0.2s ease 0s; + } + &[disabled] { + &::after { + background-color: #1F8FEB; + } + } +} + +// ========================================================= +// Old code for assets +/*.asset { + position: relative; + border-radius: 16px; + overflow: hidden; + background-color: rgba(31, 143, 235, 0.15); + transition: background-color 0.2s ease 0s; + &:hover { + background-color: rgba(31, 143, 235, 0.3); + } + &:not(:last-child) { + margin-bottom: 8px; + } +} + +.assetBody { + padding: 16px; + width: 100%; + text-align: left; +} + +.assetRemoveBtn { + position: absolute; + z-index: 2; + top: 8px; + right: 8px; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + padding: 5px; + background-color: transparent; + color: #ffffff; + opacity: 0.5; + transition: all 0.2s ease 0s; + &:hover { + opacity: 1; + background-color: rgba(255, 255, 255, 0.1); + } +} + +.assetTitle { + display: flex; + align-items: center; + column-gap: 8px; + font-size: 24px; + font-weight: 600; + line-height: math.div(28, 24); + svg { + width: 24px; + height: 24px; + flex: 0 0 24px; + } + margin-bottom: 12px; +} + +.assetInfo { + display: grid; + grid-template-columns: 56% 44%; + column-gap: 20px; + line-height: math.div(21, 18); +} + +.assetInfoLabel { + color: #1F8FEB; + margin-bottom: 4px; +} + +.assetInfoValue { + font-weight: 600; +}*/ + diff --git a/src/components/Wallet/Wallet.jsx b/src/components/Wallet/Wallet.jsx index 250e29b..833154d 100644 --- a/src/components/Wallet/Wallet.jsx +++ b/src/components/Wallet/Wallet.jsx @@ -1,18 +1,18 @@ -import React, { useState } from 'react'; -import s from "components/Wallet/Wallet.module.scss" -import { ReactComponent as SendIcon } from "assets/svg/send.svg"; -import { ReactComponent as ReceiveIcon } from "assets/svg/receive.svg"; import { ReactComponent as CopyIcon } from "assets/svg/copy.svg"; +import { ReactComponent as ReceiveIcon } from "assets/svg/receive.svg"; +import { ReactComponent as SendIcon } from "assets/svg/send.svg"; +import s from "components/Wallet/Wallet.module.scss" import copy from 'copy-to-clipboard'; +import React, { useState } from 'react'; const Wallet = () => { const [modalVisible, setModalVisible] = useState(false) - const walletStatus = true; + const walletConnected = true; const percentChange = false; const walletAddress = "ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7EPnwKFPa9Hy5frFbQoT6KQaR7"; const getWalletStatusColor = () => { - return walletStatus ? "#16D1D6" : "red" + return walletConnected ? "#16D1D6" : "#FFCBCB" } const getWalletPercentColor = () => { @@ -27,18 +27,22 @@ const Wallet = () => { }, 2000) }; - return ( -
- +
Wallet Name 1
- + > + +
+
$1224.15 { -4.6%
+
{walletAddress}
- {modalVisible && - ( -
- Copied to clipboard! -
- ) - } - + {modalVisible && ( +
+ Copied to clipboard! +
+ )}
); }; -export default Wallet; \ No newline at end of file +export default Wallet; + +// Components +const StatusModal = ({walletConnected, getWalletStatusColor}) => ( +
+
+ {walletConnected ? "Connected" : "Disconnected"} +
+
+
+ website.com +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit +
+
+
+) diff --git a/src/components/Wallet/Wallet.module.scss b/src/components/Wallet/Wallet.module.scss index a5cd60c..88de67c 100644 --- a/src/components/Wallet/Wallet.module.scss +++ b/src/components/Wallet/Wallet.module.scss @@ -1,6 +1,12 @@ @use "sass:math"; @import "src/styles/variables"; +.wallet { + &:not(:last-child) { + margin-bottom: 20px; + } +} + // ========================================================= .clipboardModal { position: absolute; @@ -38,7 +44,7 @@ .infoWallet { background: radial-gradient(100% 188.88% at 0% 0%, #16D1D6 0%, #274CFF 100%); border-radius: 16px; - padding: 16px; + padding: 16px 16px 10px 16px; &:not(:last-child) { margin-bottom: 16px; } @@ -51,12 +57,20 @@ column-gap: 20px; margin-bottom: 8px; line-height: math.div(21.5, 18); - .infoWalletStatus { - display: block; - border-radius: 50%; - background-color: #fff; - width: 10px; - height: 10px; +} + +.infoWalletStatus { + position: relative; + display: block; + border-radius: 50%; + background-color: #fff; + width: 10px; + height: 10px; + &:hover { + .status { + opacity: 1; + visibility: visible; + } } } @@ -64,7 +78,7 @@ font-weight: 600; font-size: 32px; line-height: math.div(38, 32); - margin-bottom: 8px; + margin-bottom: 0px; .percentСhange { color: #ffcbcb; font-size: 18px; @@ -88,7 +102,42 @@ opacity: 0.5; } .copyButton { + transform: translate(25%, 0); + } +} +// Status modal +.status { + position: absolute; + z-index: 2; + min-width: 180px; + top: calc(100% + 4px); + right: 0; + background: #11316B; + border-radius: 8px; + font-size: 14px; + line-height: math.div(17, 14); + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); + + transition: all 0.2s ease 0s; + transition-property: opacity, visibility; + opacity: 0; + visibility: hidden; + .statusTitle { + display: block; + padding: 10px 12px 8px 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + } + .statusContent { + padding: 8px 12px 12px 12px; + } + .statusAddress { + font-weight: 500; + margin-bottom: 5px; + } + .statusText { + font-weight: 300; + color: rgba(255, 255, 255, 0.8); } } diff --git a/src/styles/App.scss b/src/styles/App.scss index 03b9a9c..590cb2b 100644 --- a/src/styles/App.scss +++ b/src/styles/App.scss @@ -13,6 +13,7 @@ } .container{ - margin: 0 15px; + margin: 0 16px; max-width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 8bf1910..6933f24 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -1,14 +1,13 @@ .round-button { - flex: 0 0 30px; + flex: 0 0 35px; border-radius: 50%; - width: 30px; - height: 30px; + width: 35px; + height: 35px; display: flex; justify-content: center; align-items: center; - transition: all 0.2s ease 0s; - will-change: transform; + transition: background-color 0.2s ease 0s; &:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.07); } } \ No newline at end of file diff --git a/src/styles/reset.scss b/src/styles/reset.scss index f8d3908..253bde3 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -1,5 +1,10 @@ @import "_variables"; +::-webkit-scrollbar { + display: none; + scrollbar-width: none; +} + * { padding: 0px; margin: 0px;