assets and history tabs added
This commit is contained in:
Alex
parent
3e859eea93
commit
27fbda53e5
23 changed files with 813 additions and 109 deletions
63
package-lock.json
generated
63
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="App">
|
||||
<Header/>
|
||||
<div className="container">
|
||||
<Wallet />
|
||||
<Wallet/>
|
||||
<TokensTabs/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
5
src/assets/svg/arrow-square.svg
Normal file
5
src/assets/svg/arrow-square.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="1em" height="1em" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M28 8.288L28 19.726C28 24.668 24.8206 28 20.076 28L7.938 28C3.192 28 2.91293e-07 24.668 7.23336e-07 19.726L1.72328e-06 8.288C2.15655e-06 3.332 3.192 -1.69195e-06 7.938 -1.27704e-06L20.076 -2.159e-07C24.8206 1.98886e-07 28 3.332 28 8.288ZM12.95 10.8219L12.95 19.7119C12.95 20.2999 13.426 20.7619 14 20.7619C14.588 20.7619 15.05 20.2999 15.05 19.7119L15.05 10.8219L18.508 14.2939C18.704 14.4899 18.984 14.6019 19.25 14.6019C19.5146 14.6019 19.782 14.4899 19.992 14.2939C20.398 13.8879 20.398 13.2159 19.992 12.8099L14.742 7.53192C14.35 7.13992 13.65 7.13992 13.258 7.53192L8.008 12.8099C7.602 13.2159 7.602 13.8879 8.008 14.2939C8.428 14.6999 9.086 14.6999 9.506 14.2939L12.95 10.8219Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 868 B |
8
src/assets/svg/loading.svg
Normal file
8
src/assets/svg/loading.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
|
||||
fill="#1F8FEB"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8 2C8 0.895431 8.89543 0 10 0C12.2526 0 14.4392 0.760522 16.2055 2.15836C17.9719 3.5562 19.2146 5.50947 19.7323 7.70173C19.9862 8.77674 19.3205 9.85399 18.2455 10.1079C17.1705 10.3617 16.0932 9.69604 15.8394 8.62104C15.5288 7.30568 14.7831 6.13372 13.7233 5.29502C12.6635 4.45631 11.3515 4 10 4C8.89543 4 8 3.10457 8 2Z"
|
||||
fill="#16D1D6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 848 B |
4
src/assets/tokens-svg/bitcoin.svg
Normal file
4
src/assets/tokens-svg/bitcoin.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.4404 9.64822C18.8179 7.12638 16.8963 5.7708 14.2686 4.86649L15.1211 1.45043L13.0398 0.932283L12.21 4.2584C11.6629 4.12205 11.101 3.99358 10.5425 3.86622L11.3784 0.518151L9.29841 0L8.44552 3.41494C7.99274 3.31194 7.54803 3.21015 7.11658 3.10288L7.11899 3.09214L4.24891 2.37605L3.69528 4.59704C3.69528 4.59704 5.23938 4.95068 5.20684 4.97245C6.04963 5.18262 6.20204 5.74005 6.17673 6.18187L5.20573 10.0736C5.26376 10.0883 5.33904 10.1096 5.4221 10.1429C5.35267 10.1257 5.27878 10.1069 5.20211 10.0886L3.8411 15.5403C3.73811 15.7961 3.47668 16.18 2.88744 16.0342C2.9083 16.0644 1.37476 15.6571 1.37476 15.6571L0.341461 18.0374L3.04986 18.712C3.55371 18.8382 4.04746 18.9703 4.53371 19.0945L3.67247 22.5498L5.7513 23.0679L6.60419 19.6493C7.17211 19.8034 7.72325 19.9455 8.26279 20.0794L7.41277 23.4819L9.49411 24L10.3553 20.5513C13.9042 21.2223 16.5727 20.9518 17.696 17.7445C18.6011 15.1623 17.6509 13.6728 15.7838 12.7016C17.1437 12.3882 18.168 11.4945 18.4411 9.6485L18.4405 9.64804L18.4404 9.64822ZM13.6852 16.3105C13.042 18.8927 8.69063 17.4968 7.27983 17.1468L8.42271 12.5692C9.83341 12.9211 14.3575 13.6174 13.6853 16.3105H13.6852ZM14.3289 9.6108C13.7422 11.9596 10.1204 10.7663 8.94557 10.4737L9.98174 6.32211C11.1566 6.61471 14.9401 7.16084 14.3291 9.6108H14.3289Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
12
src/assets/tokens-svg/custom-token.svg
Normal file
12
src/assets/tokens-svg/custom-token.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1325_5192)">
|
||||
<path d="M20.4856 3.51472C18.8074 1.83649 16.6692 0.693601 14.3414 0.23058C12.0136 -0.232443 9.60083 0.0051972 7.40812 0.913448C5.21541 1.8217 3.34127 3.35977 2.02269 5.33316C0.704111 7.30655 0.000323909 9.62662 0.000323909 12C0.000323909 14.3734 0.704112 16.6935 2.02269 18.6668C3.34127 20.6402 5.21541 22.1783 7.40812 23.0866C9.60083 23.9948 12.0136 24.2324 14.3414 23.7694C16.6692 23.3064 18.8074 22.1635 20.4856 20.4853L16.8369 16.8366C15.8803 17.7932 14.6616 18.4446 13.3347 18.7086C12.0079 18.9725 10.6326 18.837 9.38277 18.3193C8.13292 17.8016 7.06466 16.9249 6.31307 15.8001C5.56148 14.6753 5.16032 13.3528 5.16032 12C5.16032 10.6472 5.56148 9.32473 6.31307 8.1999C7.06466 7.07507 8.13292 6.19837 9.38277 5.68067C10.6326 5.16296 12.0079 5.02751 13.3347 5.29143C14.6616 5.55535 15.8803 6.2068 16.8369 7.16339L20.4856 3.51472Z"
|
||||
fill="white"/>
|
||||
<path d="M21 9L23.5981 10.5V13.5L21 15L18.4019 13.5V10.5L21 9Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1325_5192">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
8
src/assets/tokens-svg/eth.svg
Normal file
8
src/assets/tokens-svg/eth.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9978 0L11.838 0.546928V16.4161L11.9978 16.5767L19.3126 12.2225L11.9978 0Z" fill="#EDEDED"/>
|
||||
<path d="M11.9978 0L4.68292 12.2225L11.9978 16.5767V8.87428V0Z" fill="white"/>
|
||||
<path d="M11.9979 17.9713L11.9077 18.082V23.7348L11.9979 23.9997L19.3171 13.6194L11.9979 17.9713Z" fill="#EDEDED"/>
|
||||
<path d="M11.9978 23.9997V17.9713L4.68292 13.6194L11.9978 23.9997Z" fill="white"/>
|
||||
<path d="M11.9979 16.5767L19.3126 12.2225L11.9979 8.87427V16.5767Z" fill="#DCDCDC"/>
|
||||
<path d="M4.68292 12.2225L11.9978 16.5767V8.87427L4.68292 12.2225Z" fill="#EDEDED"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 680 B |
8
src/assets/tokens-svg/zano.svg
Normal file
8
src/assets/tokens-svg/zano.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M14.0959 8.7347e-07H16.8789C17.8321 -2.0876e-05 18.6341 -3.95179e-05 19.2906 0.0538869C19.9774 0.110295 20.6315 0.232894 21.2529 0.551183C22.1993 1.03602 22.9688 1.80964 23.4511 2.76118C23.7677 3.38586 23.8896 4.04349 23.9457 4.73389C23.9994 5.39393 23.9993 6.20025 23.9993 7.1586V9.8124C23.9993 10.7708 23.9994 11.5771 23.9457 12.2371C23.8896 12.9275 23.7677 13.5851 23.4511 14.2098C22.9688 15.1614 22.1993 15.935 21.2529 16.4198C20.6315 16.7381 19.9774 16.8607 19.2906 16.9171C18.6341 16.971 17.8321 16.971 16.8789 16.971H8.56807C7.9843 16.971 7.45751 16.6189 7.23162 16.0777C7.00574 15.5365 7.12485 14.9119 7.53381 14.4931L14.3969 7.46472L16.4654 9.50627L12.0219 14.0568H16.8208C17.8474 14.0568 18.5302 14.0556 19.0546 14.0126C19.5621 13.9709 19.7923 13.8973 19.9369 13.8232C20.3379 13.6178 20.664 13.29 20.8683 12.8868C20.942 12.7414 21.0152 12.51 21.0567 11.9998C21.0995 11.4726 21.1006 10.7862 21.1006 9.75404V7.21696C21.1006 6.18485 21.0995 5.49839 21.0567 4.9712C21.0152 4.46102 20.942 4.22959 20.8683 4.0842C20.664 3.68101 20.3379 3.3532 19.9369 3.14776C19.7923 3.07369 19.5621 3.0001 19.0546 2.95842C18.5302 2.91535 17.8474 2.91421 16.8208 2.91421H14.1544C13.1165 2.91421 12.4258 2.91536 11.8956 2.95912C11.3822 3.0015 11.1501 3.07633 11.005 3.15134C10.6016 3.35988 10.2748 3.69241 10.0723 4.10054C9.9995 4.24732 9.9279 4.48154 9.89201 4.99818C9.85495 5.53167 9.86223 6.22609 9.87489 7.26943L9.88942 8.46773L6.99095 8.50327L6.9757 7.24616C6.96392 6.27709 6.95402 5.46224 7.00037 4.79514C7.04882 4.09772 7.16445 3.43256 7.47844 2.79972C7.95633 1.83654 8.72745 1.05178 9.67961 0.559612C10.3052 0.236249 10.9654 0.111896 11.6584 0.0546848C12.3214 -3.96855e-05 13.1319 -2.10486e-05 14.0959 8.7347e-07Z"
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M4.94465 21.0418C5.46904 21.0849 6.15183 21.086 7.17844 21.086H9.88957C10.8257 21.086 11.4482 21.0851 11.9278 21.0491C12.3925 21.0142 12.6057 20.9524 12.7392 20.8909C13.2029 20.677 13.575 20.3029 13.7877 19.8367C13.8489 19.7025 13.9104 19.4882 13.9451 19.021C13.9809 18.5389 13.9818 17.913 13.9818 16.9718H16.8805L16.8805 17.025C16.8805 17.899 16.8806 18.6344 16.8357 19.2379C16.7889 19.8686 16.6873 20.4713 16.4224 21.0518C15.9203 22.1521 15.0423 23.0349 13.9478 23.5397C13.3704 23.806 12.7709 23.9081 12.1436 23.9552C11.5432 24.0003 10.8118 24.0003 9.94246 24.0002L7.12035 24.0002C6.16712 24.0003 5.36512 24.0003 4.7086 23.9464C4.02188 23.8899 3.36775 23.7674 2.7464 23.4491C1.79993 22.9642 1.03043 22.1906 0.548178 21.2391C0.231583 20.6144 0.109638 19.9568 0.0535297 19.2663C-0.000108719 18.6063 -8.96454e-05 17.8 -6.86646e-05 16.8416V14.1878C-8.96454e-05 13.2295 -0.000108719 12.4232 0.0535297 11.7631C0.109638 11.0727 0.231585 10.4151 0.548178 9.79042C1.03043 8.83888 1.79993 8.06526 2.7464 7.58042C3.36775 7.26213 4.02188 7.13953 4.70861 7.08312C5.36513 7.0292 6.16715 7.02922 7.1204 7.02924H15.4312C16.2316 7.02924 16.8805 7.68161 16.8805 8.48635C16.8805 9.29108 16.2316 9.94345 15.4312 9.94345H7.17845C6.15183 9.94345 5.46904 9.94459 4.94465 9.98766C4.43719 10.0293 4.20699 10.1029 4.06238 10.177C3.66133 10.3824 3.33527 10.7102 3.13093 11.1134C3.05724 11.2588 2.98405 11.4903 2.94259 12.0004C2.89975 12.5276 2.89862 13.2141 2.89862 14.2462V16.7833C2.89862 17.8154 2.89975 18.5018 2.94259 19.029C2.98405 19.5392 3.05724 19.7707 3.13093 19.916C3.33527 20.3192 3.66133 20.647 4.06238 20.8525C4.20699 20.9266 4.43719 21.0001 4.94465 21.0418Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
13
src/components/.UI/MyButton/MyButton.jsx
Normal file
13
src/components/.UI/MyButton/MyButton.jsx
Normal file
|
|
@ -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 (
|
||||
<button {...props} type="button" className={classes}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyButton;
|
||||
34
src/components/.UI/MyButton/MyButton.module.scss
Normal file
34
src/components/.UI/MyButton/MyButton.module.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 (
|
||||
<header className={s.header}>
|
||||
|
||||
<button onClick={toggleBurgerMenu} className={s.burger}>
|
||||
<button onClick={toggleBurgerMenu} className={`${s.burger}`}>
|
||||
<BurgerIcon/>
|
||||
</button>
|
||||
|
||||
{menuVisible &&
|
||||
(
|
||||
<div className={s.menu} onClick={toggleBurgerMenu}>
|
||||
<div className={s.menuBody} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={s.menuHeader}>
|
||||
<Logo/>
|
||||
<button onClick={toggleBurgerMenu}>
|
||||
<CrossIcon/>
|
||||
</button>
|
||||
</div>
|
||||
<div className={s.menuLinks}>
|
||||
<a href="" className={s.menuLink}>
|
||||
<PlusIcon/>
|
||||
Add Wallet
|
||||
</a>
|
||||
<a href="" className={s.menuLink}>
|
||||
<UsersIcon/>
|
||||
Contacts
|
||||
</a>
|
||||
<a href="" className={s.menuLink}>
|
||||
<GearIcon/>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
<button className={s.lockButton}>
|
||||
<LockIcon/>
|
||||
Lock Zano
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<BurgerMenu
|
||||
menuVisible={menuVisible}
|
||||
toggleBurgerMenu={toggleBurgerMenu}
|
||||
/>
|
||||
|
||||
<div className={s.headerSelect}>
|
||||
Wallet Name 1
|
||||
</div>
|
||||
<div className={s.headerSelect}>Wallet Name 1</div>
|
||||
|
||||
<button className={s.headerInfo}>
|
||||
<button className={`${s.headerInfo}`}>
|
||||
<InfoIcon/>
|
||||
</button>
|
||||
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
// Components
|
||||
const BurgerMenu = ({menuVisible, toggleBurgerMenu}) => {
|
||||
return (
|
||||
<>
|
||||
{menuVisible && (
|
||||
<div className={s.menu} onClick={toggleBurgerMenu}>
|
||||
<div className={s.menuBody} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={s.menuHeader}>
|
||||
<Logo/>
|
||||
<button className="round-button" onClick={toggleBurgerMenu}>
|
||||
<CrossIcon/>
|
||||
</button>
|
||||
</div>
|
||||
<div className={s.menuLinks}>
|
||||
<a href="" className={s.menuLink}>
|
||||
<PlusIcon/> Add Wallet
|
||||
</a>
|
||||
<a href="" className={s.menuLink}>
|
||||
<UsersIcon/> Contacts
|
||||
</a>
|
||||
<a href="" className={s.menuLink}>
|
||||
<GearIcon/> Settings
|
||||
</a>
|
||||
</div>
|
||||
<MyButton>
|
||||
<LockIcon/> Lock Zano
|
||||
</MyButton>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
46
src/components/TokensTabs/Assets/Assets.jsx
Normal file
46
src/components/TokensTabs/Assets/Assets.jsx
Normal file
|
|
@ -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 (
|
||||
<div>
|
||||
{assetsMap.map(asset =>
|
||||
<div className={s.asset}>
|
||||
<button className={s.assetRemoveBtn} onClick={remove}>
|
||||
<CrossIcon/>
|
||||
</button>
|
||||
<button className={s.assetBody}>
|
||||
<span className={s.assetTitle}>
|
||||
{asset.icon}
|
||||
{asset.name}
|
||||
</span>
|
||||
<span className={s.assetInfo}>
|
||||
<div>
|
||||
<div className={s.assetInfoLabel}>Balance</div>
|
||||
<div className={s.assetInfoValue}>
|
||||
{[asset.balance, asset.ticker].join(" ")}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={s.assetInfoLabel}>Value</div>
|
||||
<div className={s.assetInfoValue}>${asset.value}</div>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<MyButton style={{transform: "translateY(30%)"}}>
|
||||
<PlusIcon/> Add Custom Token
|
||||
</MyButton>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Assets;
|
||||
73
src/components/TokensTabs/Assets/Assets.module.scss
Normal file
73
src/components/TokensTabs/Assets/Assets.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
44
src/components/TokensTabs/History/History.jsx
Normal file
44
src/components/TokensTabs/History/History.jsx
Normal file
|
|
@ -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 (
|
||||
<div>
|
||||
{historyMap.map((historyItem, index) => {
|
||||
const iconClasses =
|
||||
historyItem.type === "send"
|
||||
? s.historyIcon
|
||||
: [s.historyIcon, s.receiveVariant].join(" ");
|
||||
|
||||
return (
|
||||
<button key={index} className={s.historyItem}>
|
||||
|
||||
{historyItem.inProcess && (
|
||||
<div className={s.historyLoading}>
|
||||
<LoadingIcon/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={s.historyTop}>
|
||||
<div className={iconClasses}>
|
||||
<ArrowIcon/>
|
||||
</div>
|
||||
<span>
|
||||
{[historyItem.value, historyItem.ticker].join(" ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className={s.historyAddress}>
|
||||
{historyItem.address}
|
||||
</span>
|
||||
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default History;
|
||||
71
src/components/TokensTabs/History/History.module.scss
Normal file
71
src/components/TokensTabs/History/History.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
93
src/components/TokensTabs/TokensTabs.jsx
Normal file
93
src/components/TokensTabs/TokensTabs.jsx
Normal file
|
|
@ -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: <ZanoIcon/>,
|
||||
balance: 120,
|
||||
ticker: "ZANO",
|
||||
value: 128.96,
|
||||
},
|
||||
{
|
||||
name: "Wrapped Bitcoin",
|
||||
icon: <BitcoinIcon/>,
|
||||
balance: 0.212,
|
||||
ticker: "WBTC",
|
||||
value: 4096.96,
|
||||
},
|
||||
{
|
||||
name: "Wrapped Ethereum",
|
||||
icon: <EthIcon/>,
|
||||
balance: 2.1,
|
||||
ticker: "WETH",
|
||||
value: 3020.12,
|
||||
},
|
||||
{
|
||||
name: "Custom Asset",
|
||||
icon: <CustomTokenIcon/>,
|
||||
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: <Assets assetsMap={assetsMap}/>},
|
||||
{label: "history", content: <History historyMap={historyMap}/>},
|
||||
];
|
||||
|
||||
const toggleTabs = (e) => {
|
||||
if (activeTab !== e.target.value) {
|
||||
setActiveTab(Number(e.target.value));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={s.tabs}>
|
||||
<div className={s.tabsNav}>
|
||||
{tabs.map((tab, index) => (
|
||||
<button
|
||||
key={tab.label}
|
||||
onClick={(e) => toggleTabs(e)}
|
||||
value={index}
|
||||
disabled={activeTab === index}
|
||||
className={s.tabsNavBtn}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tabs[activeTab].content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TokensTabs;
|
||||
121
src/components/TokensTabs/TokensTabs.module.scss
Normal file
121
src/components/TokensTabs/TokensTabs.module.scss
Normal file
|
|
@ -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;
|
||||
}*/
|
||||
|
||||
|
|
@ -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 (
|
||||
<div>
|
||||
|
||||
<div className={s.wallet}>
|
||||
<div className={s.infoWallet}>
|
||||
<div className={s.infoTop}>
|
||||
<div>Wallet Name 1</div>
|
||||
<span
|
||||
<div
|
||||
className={s.infoWalletStatus}
|
||||
style={{backgroundColor: getWalletStatusColor()}}
|
||||
/>
|
||||
>
|
||||
<StatusModal
|
||||
walletConnected={walletConnected}
|
||||
getWalletStatusColor={getWalletStatusColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={s.infoBalance}>
|
||||
<span>$1224.15</span>
|
||||
<span
|
||||
|
|
@ -48,6 +52,7 @@ const Wallet = () => {
|
|||
-4.6%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={s.infoAddress}>
|
||||
<span>{walletAddress}</span>
|
||||
<button
|
||||
|
|
@ -68,17 +73,34 @@ const Wallet = () => {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{modalVisible &&
|
||||
(
|
||||
<div className={s.clipboardModal}>
|
||||
Copied to clipboard!
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{modalVisible && (
|
||||
<div className={s.clipboardModal}>
|
||||
Copied to clipboard!
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wallet;
|
||||
export default Wallet;
|
||||
|
||||
// Components
|
||||
const StatusModal = ({walletConnected, getWalletStatusColor}) => (
|
||||
<div className={s.status}>
|
||||
<div
|
||||
style={{color: getWalletStatusColor()}}
|
||||
className={s.statusTitle}
|
||||
>
|
||||
{walletConnected ? "Connected" : "Disconnected"}
|
||||
</div>
|
||||
<div className={s.statusContent}>
|
||||
<div className={s.statusAddress}>
|
||||
website.com
|
||||
</div>
|
||||
<div className={s.statusText}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
}
|
||||
|
||||
.container{
|
||||
margin: 0 15px;
|
||||
margin: 0 16px;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
@import "_variables";
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue