-
-
+
+
diff --git a/src/app/components/Wallet/Wallet.jsx b/src/app/components/Wallet/Wallet.jsx
index 3b6ce02..9612181 100644
--- a/src/app/components/Wallet/Wallet.jsx
+++ b/src/app/components/Wallet/Wallet.jsx
@@ -1,24 +1,18 @@
-import CopyIcon from "../../assets/svg/copy.svg";
-import ReceiveIcon from "../../assets/svg/receive.svg";
-import SendIcon from "../../assets/svg/send.svg";
-import s from "./Wallet.module.scss";
import copy from "copy-to-clipboard";
import React, { useState } from "react";
+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 s from "./Wallet.module.scss";
+
+const walletConnected = true;
+const percentChange = false;
+const walletAddress =
+ "ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7EPnwKFPa9Hy5frFbQoT6KQaR7";
const Wallet = () => {
const [modalVisible, setModalVisible] = useState(false);
- const walletConnected = true;
- const percentChange = false;
- const walletAddress =
- "ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7EPnwKFPa9Hy5frFbQoT6KQaR7";
-
- const getWalletStatusColor = () => {
- return walletConnected ? "#16D1D6" : "#FFCBCB";
- };
-
- const getWalletPercentColor = () => {
- return percentChange ? "#16D1D6" : "#FFCBCB";
- };
const copyToClipboard = (text) => {
copy(text);
@@ -33,21 +27,15 @@ const Wallet = () => {
Wallet Name 1
-
-
-
+
$1224.15
-4.6%
@@ -60,17 +48,17 @@ const Wallet = () => {
onClick={() => copyToClipboard(walletAddress)}
className={`${s.copyButton} round-button`}
>
- 
+ 
@@ -83,17 +71,3 @@ const Wallet = () => {
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/app/components/Wallet/Wallet.module.scss b/src/app/components/Wallet/Wallet.module.scss
index 6922fee..46224ae 100644
--- a/src/app/components/Wallet/Wallet.module.scss
+++ b/src/app/components/Wallet/Wallet.module.scss
@@ -7,6 +7,10 @@
}
}
+.dotsButton {
+ transform: translate(25%, 0);
+}
+
// =========================================================
.clipboardModal {
position: absolute;
@@ -106,41 +110,6 @@
}
}
-// 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);
- }
-}
-
// =========================================================
.actionsWallet {
display: grid;
@@ -161,7 +130,7 @@
font-size: 21px;
line-height: math.div(25, 21);
transition: background-color 0.2s ease 0s;
- svg {
+ img {
flex: 0 0 20px;
}
&:hover {
diff --git a/src/app/styles/App.scss b/src/app/styles/App.scss
index ae06812..c7039ac 100644
--- a/src/app/styles/App.scss
+++ b/src/app/styles/App.scss
@@ -10,6 +10,7 @@
overflow-y: auto;
background-color: #0C0C3A;
padding-top: 72px;
+
}
.container {
diff --git a/src/app/styles/_variables.scss b/src/app/styles/_variables.scss
index b3b1c2c..3559920 100644
--- a/src/app/styles/_variables.scss
+++ b/src/app/styles/_variables.scss
@@ -3,3 +3,4 @@ $fontSize: 19px;
$mainColor: #ffffff;
$blueColor: #1f8feb;
$appWidth: 360px;
+$appHeight: 600px;
diff --git a/src/app/styles/reset.scss b/src/app/styles/reset.scss
index 253bde3..e4065ed 100644
--- a/src/app/styles/reset.scss
+++ b/src/app/styles/reset.scss
@@ -1,8 +1,8 @@
@import "_variables";
::-webkit-scrollbar {
- display: none;
- scrollbar-width: none;
+ display: none;
+ scrollbar-width: none;
}
* {
diff --git a/src/utils/formatters.js b/src/utils/formatters.js
new file mode 100644
index 0000000..4a84df2
--- /dev/null
+++ b/src/utils/formatters.js
@@ -0,0 +1,21 @@
+export default class Formatters {
+ static walletAddress(str) {
+ if (str.length > 20) {
+ if (window.innerWidth > 768) {
+ return (
+ str.substring(0, 6) +
+ "..." +
+ str.substring(str.length - 6, str.length)
+ );
+ } else {
+ return (
+ str.substring(0, 5) +
+ "..." +
+ str.substring(str.length - 5, str.length)
+ );
+ }
+ }
+ return str;
+ }
+}
+