lthn/browser-extension
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Alex 2023-04-08 15:03:38 +02:00
parent 6ba904c4c2
commit 3e859eea93
46 changed files with 29692 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env Normal file
View file

@ -0,0 +1 @@
INLINE_RUNTIME_CHUNK=false

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.idea
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

8
.idea/modules.xml generated Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/zano-extension.iml" filepath="$PROJECT_DIR$/.idea/zano-extension.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

12
.idea/zano-extension.iml generated Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

16
index.html
View file

@ -1,16 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="container">
<div class="top-menu">top menu</div>
<div>wallet header</div>
<div class="buttons">buttons</div>
<div class="content">
<div class="assets">assets</div>
<div class="history">history</div>
</div>
</div>
</body>
</html>

5
jsconfig.json Normal file
View file

@ -0,0 +1,5 @@
{
"compilerOptions": {
"baseUrl": "src"
}
}

8
main.css
View file

@ -1,8 +0,0 @@
.container {
width: 400px;
height: 600px;
background-color: #bbbbbb;
display: flex;
flex-direction: column;
align-items: center;
}

28860
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

40
package.json Normal file
View file

@ -0,0 +1,40 @@
{
"name": "zano-extension",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"copy-to-clipboard": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sass": "^1.61.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

19
public/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Zano browser wallet extension"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Zano extension</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

2
manifest.json → public/manifest.json
View file

@ -7,4 +7,4 @@
"default_popup": "index.html",
"default_icon": "zano_extension.png"
}
}
}

3
public/robots.txt Normal file
View file

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

0
zano_extension.png → public/zano_extension.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

16
src/App.js Normal file
View file

@ -0,0 +1,16 @@
import "styles/App.scss";
import Header from "components/Header/Header";
import Wallet from "components/Wallet/Wallet";
function App() {
return (
<div className="App">
<Header/>
<div className="container">
<Wallet />
</div>
</div>
);
}
export default App;

BIN
src/assets/fonts/SFUIDisplay-bold.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-bold.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-light.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-light.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-medium.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-medium.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-regular.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-regular.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-semibold.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/SFUIDisplay-semibold.woff2 Normal file
View file

Binary file not shown.

8
src/assets/svg/burger.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="1em" height="1em" viewBox="0 0 22 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1.5C0 0.671573 0.671573 0 1.5 0H20.5C21.3284 0 22 0.671573 22 1.5C22 2.32843 21.3284 3 20.5 3H1.5C0.671573 3 0 2.32843 0 1.5Z"
/>
<path d="M0 9C0 8.17157 0.671573 7.5 1.5 7.5H20.5C21.3284 7.5 22 8.17157 22 9C22 9.82843 21.3284 10.5 20.5 10.5H1.5C0.671573 10.5 0 9.82843 0 9Z"
/>
<path d="M0 16.5C0 15.6716 0.671573 15 1.5 15H20.5C21.3284 15 22 15.6716 22 16.5C22 17.3284 21.3284 18 20.5 18H1.5C0.671573 18 0 17.3284 0 16.5Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 577 B

8
src/assets/svg/copy.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.00009 10.7502C7.00009 8.67918 8.67902 7.00024 10.7501 7.00024H16C18.0711 7.00024 19.75 8.67918 19.75 10.7502V16.0002C19.75 18.0712 18.0711 19.7502 16 19.7502H10.7501C8.67902 19.7502 7.00009 18.0712 7.00009 16.0002V10.7502ZM10.7501 8.50024C9.50745 8.50024 8.50009 9.5076 8.50009 10.7502V16.0002C8.50009 17.2428 9.50745 18.2502 10.7501 18.2502H16C17.2427 18.2502 18.25 17.2428 18.25 16.0002V10.7502C18.25 9.5076 17.2427 8.50024 16 8.50024H10.7501Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H9.43745C11.405 0.25 12.9999 1.84498 12.9999 3.81248C12.9999 4.2267 12.6642 4.56248 12.2499 4.56248C11.8357 4.56248 11.4999 4.2267 11.4999 3.81248C11.4999 2.67341 10.5765 1.75 9.43745 1.75H4C2.75736 1.75 1.75 2.75736 1.75 4V9.43745C1.75 10.5765 2.67341 11.4999 3.81248 11.4999C4.2267 11.4999 4.56248 11.8357 4.56248 12.2499C4.56248 12.6642 4.2267 12.9999 3.81248 12.9999C1.84498 12.9999 0.25 11.405 0.25 9.43745V4Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
src/assets/svg/cross.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.22184 4.22179C4.80763 3.63601 5.75737 3.63601 6.34316 4.22179L19.7782 17.6568C20.364 18.2426 20.364 19.1924 19.7782 19.7781C19.1924 20.3639 18.2427 20.3639 17.6569 19.7781L4.22184 6.34311C3.63605 5.75733 3.63605 4.80758 4.22184 4.22179Z"
/>
<path d="M19.7782 4.22157C20.364 4.80735 20.364 5.7571 19.7782 6.34289L6.34318 19.7779C5.75739 20.3637 4.80764 20.3637 4.22186 19.7779C3.63607 19.1921 3.63607 18.2424 4.22186 17.6566L17.6569 4.22157C18.2427 3.63578 19.1924 3.63578 19.7782 4.22157Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 634 B

5
src/assets/svg/gear.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="1em" height="1em" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0728 5.98797L16.5022 4.99788C16.0195 4.16012 14.9498 3.87111 14.1109 4.35181V4.35181C13.7116 4.58705 13.2351 4.65379 12.7865 4.53732C12.3379 4.42084 11.954 4.13071 11.7196 3.73091C11.5688 3.47679 11.4877 3.18735 11.4846 2.89186V2.89186C11.4983 2.41811 11.3195 1.95902 10.9892 1.61918C10.6588 1.27935 10.205 1.0877 9.73103 1.08789H8.58152C8.1172 1.08789 7.67202 1.27291 7.34448 1.60202C7.01694 1.93113 6.83406 2.3772 6.83629 2.84151V2.84151C6.82253 3.80017 6.04142 4.57006 5.08267 4.56996C4.78717 4.5669 4.49773 4.48585 4.24361 4.33503V4.33503C3.4047 3.85433 2.335 4.14334 1.85231 4.9811L1.2398 5.98797C0.75769 6.82468 1.04276 7.89371 1.87748 8.37927V8.37927C2.42006 8.69252 2.7543 9.27144 2.7543 9.89796C2.7543 10.5245 2.42006 11.1034 1.87748 11.4166V11.4166C1.04382 11.8989 0.758439 12.9654 1.2398 13.7996V13.7996L1.81875 14.798C2.04491 15.2061 2.42437 15.5073 2.87316 15.6348C3.32195 15.7624 3.80307 15.7058 4.21005 15.4777V15.4777C4.61014 15.2442 5.0869 15.1803 5.53438 15.3C5.98185 15.4197 6.36295 15.7133 6.59296 16.1153C6.74379 16.3695 6.82483 16.6589 6.8279 16.9544V16.9544C6.8279 17.9229 7.61302 18.708 8.58152 18.708H9.73103C10.6963 18.708 11.48 17.928 11.4846 16.9628V16.9628C11.4824 16.497 11.6664 16.0497 11.9958 15.7203C12.3252 15.391 12.7725 15.2069 13.2383 15.2092C13.5331 15.2171 13.8213 15.2978 14.0773 15.4441V15.4441C14.914 15.9262 15.9831 15.6411 16.4686 14.8064V14.8064L17.0728 13.7996C17.3066 13.3982 17.3708 12.9202 17.2511 12.4713C17.1314 12.0225 16.8377 11.6399 16.4351 11.4083V11.4083C16.0324 11.1766 15.7387 10.794 15.6191 10.3452C15.4994 9.89635 15.5636 9.41832 15.7974 9.01695C15.9495 8.75146 16.1696 8.53133 16.4351 8.37927V8.37927C17.2648 7.89397 17.5492 6.83119 17.0728 5.99636V5.99636V5.98797Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<ellipse cx="9.16047" cy="9.89792" rx="2.41648" ry="2.41648" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

5
src/assets/svg/info.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM10 8.25C10.4142 8.25 10.75 8.58579 10.75 9V15C10.75 15.4142 10.4142 15.75 10 15.75C9.58579 15.75 9.25 15.4142 9.25 15V9C9.25 8.58579 9.58579 8.25 10 8.25ZM10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 560 B

5
src/assets/svg/lock.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="1em" height="1em" viewBox="0 0 14 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.142 4.547V5.69701C12.4338 6.10022 13.375 7.2696 13.375 8.6663V12.369C13.375 14.0981 11.9415 15.5 10.1742 15.5H3.8266C2.05852 15.5 0.625 14.0981 0.625 12.369V8.6663C0.625 7.2696 1.56696 6.10022 2.85796 5.69701V4.547C2.86559 2.31109 4.7175 0.5 6.98857 0.5C9.29012 0.5 11.142 2.31109 11.142 4.547ZM7.00381 1.80428C8.55088 1.80428 9.80835 3.03404 9.80835 4.547V5.53528H4.19165V4.5321C4.19927 3.02658 5.45674 1.80428 7.00381 1.80428ZM7.66684 11.3412C7.66684 11.7064 7.36962 11.9971 6.99619 11.9971C6.63038 11.9971 6.33316 11.7064 6.33316 11.3412V9.68662C6.33316 9.32888 6.63038 9.03821 6.99619 9.03821C7.36962 9.03821 7.66684 9.32888 7.66684 9.68662V11.3412Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 848 B

40
src/assets/svg/logo.svg Normal file
View file

@ -0,0 +1,40 @@
<svg width="107" height="36" viewBox="0 0 107 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.944 0.0351576H26.0846C27.5028 0.0351251 28.696 0.0350972 29.6728 0.115685C30.6945 0.19998 31.6677 0.383191 32.5921 0.858841C34.0003 1.58337 35.1452 2.73947 35.8627 4.16144C36.3337 5.09496 36.5151 6.07772 36.5986 7.10946C36.6784 8.09581 36.6784 9.30077 36.6784 10.7329V14.6987C36.6784 16.1309 36.6784 17.3359 36.5986 18.3222C36.5151 19.3539 36.3337 20.3367 35.8627 21.2702C35.1452 22.6922 34.0003 23.8483 32.5921 24.5728C31.6677 25.0485 30.6945 25.2317 29.6728 25.316C28.696 25.3966 27.5027 25.3965 26.0845 25.3965H13.7197C12.8511 25.3965 12.0674 24.8703 11.7313 24.0616C11.3952 23.2528 11.5725 22.3194 12.1809 21.6936L22.3918 11.1904L25.4694 14.2413L18.8583 21.0415H25.9981C27.5255 21.0415 28.5414 21.0398 29.3216 20.9755C30.0766 20.9132 30.4191 20.8032 30.6342 20.6925C31.2309 20.3855 31.716 19.8956 32.02 19.2931C32.1297 19.0758 32.2386 18.73 32.3003 17.9676C32.364 17.1797 32.3657 16.1539 32.3657 14.6115V10.8201C32.3657 9.27775 32.364 8.25192 32.3003 7.46409C32.2386 6.70167 32.1297 6.35582 32.02 6.13856C31.716 5.53603 31.2309 5.04616 30.6342 4.73916C30.4191 4.62846 30.0766 4.51849 29.3216 4.4562C28.5414 4.39183 27.5255 4.39014 25.9981 4.39014H22.031C20.4869 4.39014 19.4592 4.39185 18.6704 4.45725C17.9066 4.52058 17.5613 4.63241 17.3454 4.74449C16.7451 5.05614 16.259 5.55307 15.9577 6.16297C15.8494 6.38233 15.7428 6.73235 15.6894 7.50441C15.6343 8.30166 15.6451 9.33938 15.664 10.8985L15.6856 12.6893L11.3732 12.7424L11.3505 10.8638C11.333 9.41559 11.3183 8.1979 11.3872 7.20098C11.4593 6.15876 11.6314 5.16475 12.0985 4.21905C12.8095 2.77967 13.9568 1.60693 15.3734 0.871438C16.3042 0.388205 17.2864 0.202372 18.3175 0.116877C19.3038 0.0350969 20.5098 0.0351248 21.944 0.0351576Z" fill="url(#paint0_linear_1333_5403)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.944 0.0351576H26.0846C27.5028 0.0351251 28.696 0.0350972 29.6728 0.115685C30.6945 0.19998 31.6677 0.383191 32.5921 0.858841C34.0003 1.58337 35.1452 2.73947 35.8627 4.16144C36.3337 5.09496 36.5151 6.07772 36.5986 7.10946C36.6784 8.09581 36.6784 9.30077 36.6784 10.7329V14.6987C36.6784 16.1309 36.6784 17.3359 36.5986 18.3222C36.5151 19.3539 36.3337 20.3367 35.8627 21.2702C35.1452 22.6922 34.0003 23.8483 32.5921 24.5728C31.6677 25.0485 30.6945 25.2317 29.6728 25.316C28.696 25.3966 27.5027 25.3965 26.0845 25.3965H13.7197C12.8511 25.3965 12.0674 24.8703 11.7313 24.0616C11.3952 23.2528 11.5725 22.3194 12.1809 21.6936L22.3918 11.1904L25.4694 14.2413L18.8583 21.0415H25.9981C27.5255 21.0415 28.5414 21.0398 29.3216 20.9755C30.0766 20.9132 30.4191 20.8032 30.6342 20.6925C31.2309 20.3855 31.716 19.8956 32.02 19.2931C32.1297 19.0758 32.2386 18.73 32.3003 17.9676C32.364 17.1797 32.3657 16.1539 32.3657 14.6115V10.8201C32.3657 9.27775 32.364 8.25192 32.3003 7.46409C32.2386 6.70167 32.1297 6.35582 32.02 6.13856C31.716 5.53603 31.2309 5.04616 30.6342 4.73916C30.4191 4.62846 30.0766 4.51849 29.3216 4.4562C28.5414 4.39183 27.5255 4.39014 25.9981 4.39014H22.031C20.4869 4.39014 19.4592 4.39185 18.6704 4.45725C17.9066 4.52058 17.5613 4.63241 17.3454 4.74449C16.7451 5.05614 16.259 5.55307 15.9577 6.16297C15.8494 6.38233 15.7428 6.73235 15.6894 7.50441C15.6343 8.30166 15.6451 9.33938 15.664 10.8985L15.6856 12.6893L11.3732 12.7424L11.3505 10.8638C11.333 9.41559 11.3183 8.1979 11.3872 7.20098C11.4593 6.15876 11.6314 5.16475 12.0985 4.21905C12.8095 2.77967 13.9568 1.60693 15.3734 0.871438C16.3042 0.388205 17.2864 0.202372 18.3175 0.116877C19.3038 0.0350969 20.5098 0.0351248 21.944 0.0351576Z" fill="url(#paint1_radial_1333_5403)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.944 0.0351576H26.0846C27.5028 0.0351251 28.696 0.0350972 29.6728 0.115685C30.6945 0.19998 31.6677 0.383191 32.5921 0.858841C34.0003 1.58337 35.1452 2.73947 35.8627 4.16144C36.3337 5.09496 36.5151 6.07772 36.5986 7.10946C36.6784 8.09581 36.6784 9.30077 36.6784 10.7329V14.6987C36.6784 16.1309 36.6784 17.3359 36.5986 18.3222C36.5151 19.3539 36.3337 20.3367 35.8627 21.2702C35.1452 22.6922 34.0003 23.8483 32.5921 24.5728C31.6677 25.0485 30.6945 25.2317 29.6728 25.316C28.696 25.3966 27.5027 25.3965 26.0845 25.3965H13.7197C12.8511 25.3965 12.0674 24.8703 11.7313 24.0616C11.3952 23.2528 11.5725 22.3194 12.1809 21.6936L22.3918 11.1904L25.4694 14.2413L18.8583 21.0415H25.9981C27.5255 21.0415 28.5414 21.0398 29.3216 20.9755C30.0766 20.9132 30.4191 20.8032 30.6342 20.6925C31.2309 20.3855 31.716 19.8956 32.02 19.2931C32.1297 19.0758 32.2386 18.73 32.3003 17.9676C32.364 17.1797 32.3657 16.1539 32.3657 14.6115V10.8201C32.3657 9.27775 32.364 8.25192 32.3003 7.46409C32.2386 6.70167 32.1297 6.35582 32.02 6.13856C31.716 5.53603 31.2309 5.04616 30.6342 4.73916C30.4191 4.62846 30.0766 4.51849 29.3216 4.4562C28.5414 4.39183 27.5255 4.39014 25.9981 4.39014H22.031C20.4869 4.39014 19.4592 4.39185 18.6704 4.45725C17.9066 4.52058 17.5613 4.63241 17.3454 4.74449C16.7451 5.05614 16.259 5.55307 15.9577 6.16297C15.8494 6.38233 15.7428 6.73235 15.6894 7.50441C15.6343 8.30166 15.6451 9.33938 15.664 10.8985L15.6856 12.6893L11.3732 12.7424L11.3505 10.8638C11.333 9.41559 11.3183 8.1979 11.3872 7.20098C11.4593 6.15876 11.6314 5.16475 12.0985 4.21905C12.8095 2.77967 13.9568 1.60693 15.3734 0.871438C16.3042 0.388205 17.2864 0.202372 18.3175 0.116877C19.3038 0.0350969 20.5098 0.0351248 21.944 0.0351576Z" fill="url(#paint2_radial_1333_5403)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.944 0.0351576H26.0846C27.5028 0.0351251 28.696 0.0350972 29.6728 0.115685C30.6945 0.19998 31.6677 0.383191 32.5921 0.858841C34.0003 1.58337 35.1452 2.73947 35.8627 4.16144C36.3337 5.09496 36.5151 6.07772 36.5986 7.10946C36.6784 8.09581 36.6784 9.30077 36.6784 10.7329V14.6987C36.6784 16.1309 36.6784 17.3359 36.5986 18.3222C36.5151 19.3539 36.3337 20.3367 35.8627 21.2702C35.1452 22.6922 34.0003 23.8483 32.5921 24.5728C31.6677 25.0485 30.6945 25.2317 29.6728 25.316C28.696 25.3966 27.5027 25.3965 26.0845 25.3965H13.7197C12.8511 25.3965 12.0674 24.8703 11.7313 24.0616C11.3952 23.2528 11.5725 22.3194 12.1809 21.6936L22.3918 11.1904L25.4694 14.2413L18.8583 21.0415H25.9981C27.5255 21.0415 28.5414 21.0398 29.3216 20.9755C30.0766 20.9132 30.4191 20.8032 30.6342 20.6925C31.2309 20.3855 31.716 19.8956 32.02 19.2931C32.1297 19.0758 32.2386 18.73 32.3003 17.9676C32.364 17.1797 32.3657 16.1539 32.3657 14.6115V10.8201C32.3657 9.27775 32.364 8.25192 32.3003 7.46409C32.2386 6.70167 32.1297 6.35582 32.02 6.13856C31.716 5.53603 31.2309 5.04616 30.6342 4.73916C30.4191 4.62846 30.0766 4.51849 29.3216 4.4562C28.5414 4.39183 27.5255 4.39014 25.9981 4.39014H22.031C20.4869 4.39014 19.4592 4.39185 18.6704 4.45725C17.9066 4.52058 17.5613 4.63241 17.3454 4.74449C16.7451 5.05614 16.259 5.55307 15.9577 6.16297C15.8494 6.38233 15.7428 6.73235 15.6894 7.50441C15.6343 8.30166 15.6451 9.33938 15.664 10.8985L15.6856 12.6893L11.3732 12.7424L11.3505 10.8638C11.333 9.41559 11.3183 8.1979 11.3872 7.20098C11.4593 6.15876 11.6314 5.16475 12.0985 4.21905C12.8095 2.77967 13.9568 1.60693 15.3734 0.871438C16.3042 0.388205 17.2864 0.202372 18.3175 0.116877C19.3038 0.0350969 20.5098 0.0351248 21.944 0.0351576Z" fill="url(#paint3_radial_1333_5403)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.32875 31.4784C9.10893 31.5427 10.1248 31.5444 11.6522 31.5444H15.6858C17.0786 31.5444 18.0048 31.543 18.7183 31.4892C19.4098 31.4371 19.7269 31.3448 19.9254 31.2528C20.6154 30.9332 21.169 30.3742 21.4855 29.6774C21.5766 29.4769 21.668 29.1567 21.7196 28.4584C21.7729 27.7379 21.7743 26.8026 21.7743 25.3962H26.087L26.087 25.4757C26.087 26.7817 26.087 27.8807 26.0203 28.7827C25.9507 29.7251 25.7995 30.6258 25.4054 31.4933C24.6584 33.1376 23.352 34.4568 21.7237 35.2111C20.8646 35.6091 19.9726 35.7618 19.0394 35.8321C18.1461 35.8995 17.0579 35.8994 15.7645 35.8994L11.5658 35.8994C10.1475 35.8994 8.95432 35.8995 7.97756 35.8189C6.95585 35.7346 5.98263 35.5514 5.05819 35.0757C3.65002 34.3512 2.50516 33.1951 1.78766 31.7731C1.31663 30.8396 1.1352 29.8568 1.05172 28.8251C0.971918 27.8388 0.971947 26.6338 0.971979 25.2016V21.2358C0.971947 19.8037 0.971918 18.5987 1.05172 17.6124C1.1352 16.5806 1.31663 15.5979 1.78766 14.6643C2.50516 13.2424 3.65002 12.0863 5.05819 11.3617C5.98263 10.8861 6.95585 10.7029 7.97756 10.6186C8.95434 10.538 10.1476 10.538 11.5658 10.5381H23.9306C25.1216 10.5381 26.087 11.513 26.087 12.7156C26.087 13.9181 25.1216 14.893 23.9306 14.893H11.6522C10.1248 14.893 9.10893 14.8947 8.32875 14.9591C7.57374 15.0214 7.23125 15.1314 7.0161 15.2421C6.41942 15.5491 5.93431 16.0389 5.63028 16.6415C5.52066 16.8587 5.41176 17.2046 5.35008 17.967C5.28633 18.7548 5.28466 19.7807 5.28466 21.323V25.1144C5.28466 26.6568 5.28633 27.6826 5.35008 28.4705C5.41176 29.2329 5.52066 29.5787 5.63028 29.796C5.93431 30.3985 6.41942 30.8884 7.0161 31.1954C7.23125 31.3061 7.57374 31.4161 8.32875 31.4784Z" fill="url(#paint4_linear_1333_5403)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.32875 31.4784C9.10893 31.5427 10.1248 31.5444 11.6522 31.5444H15.6858C17.0786 31.5444 18.0048 31.543 18.7183 31.4892C19.4098 31.4371 19.7269 31.3448 19.9254 31.2528C20.6154 30.9332 21.169 30.3742 21.4855 29.6774C21.5766 29.4769 21.668 29.1567 21.7196 28.4584C21.7729 27.7379 21.7743 26.8026 21.7743 25.3962H26.087L26.087 25.4757C26.087 26.7817 26.087 27.8807 26.0203 28.7827C25.9507 29.7251 25.7995 30.6258 25.4054 31.4933C24.6584 33.1376 23.352 34.4568 21.7237 35.2111C20.8646 35.6091 19.9726 35.7618 19.0394 35.8321C18.1461 35.8995 17.0579 35.8994 15.7645 35.8994L11.5658 35.8994C10.1475 35.8994 8.95432 35.8995 7.97756 35.8189C6.95585 35.7346 5.98263 35.5514 5.05819 35.0757C3.65002 34.3512 2.50516 33.1951 1.78766 31.7731C1.31663 30.8396 1.1352 29.8568 1.05172 28.8251C0.971918 27.8388 0.971947 26.6338 0.971979 25.2016V21.2358C0.971947 19.8037 0.971918 18.5987 1.05172 17.6124C1.1352 16.5806 1.31663 15.5979 1.78766 14.6643C2.50516 13.2424 3.65002 12.0863 5.05819 11.3617C5.98263 10.8861 6.95585 10.7029 7.97756 10.6186C8.95434 10.538 10.1476 10.538 11.5658 10.5381H23.9306C25.1216 10.5381 26.087 11.513 26.087 12.7156C26.087 13.9181 25.1216 14.893 23.9306 14.893H11.6522C10.1248 14.893 9.10893 14.8947 8.32875 14.9591C7.57374 15.0214 7.23125 15.1314 7.0161 15.2421C6.41942 15.5491 5.93431 16.0389 5.63028 16.6415C5.52066 16.8587 5.41176 17.2046 5.35008 17.967C5.28633 18.7548 5.28466 19.7807 5.28466 21.323V25.1144C5.28466 26.6568 5.28633 27.6826 5.35008 28.4705C5.41176 29.2329 5.52066 29.5787 5.63028 29.796C5.93431 30.3985 6.41942 30.8884 7.0161 31.1954C7.23125 31.3061 7.57374 31.4161 8.32875 31.4784Z" fill="url(#paint5_radial_1333_5403)"/>
<path d="M59.005 24.114V26.3344C59.005 26.6513 58.7489 26.9102 58.4332 26.9102H46.2243C46.2075 26.9102 46.1888 26.9102 46.172 26.9082C45.5593 26.8913 45.0208 26.5744 44.6957 26.0982C44.6938 26.0944 44.6921 26.0906 44.6883 26.087C44.5398 25.8355 44.4544 25.5413 44.4544 25.2242C44.4544 24.8736 44.5602 24.551 44.7404 24.2809C44.7553 24.2585 44.7702 24.236 44.7867 24.2152L54.0577 11.2547H45.7544C45.4406 11.2547 45.1842 10.9959 45.1842 10.6771V8.45856C45.1842 8.13976 45.4406 7.88089 45.7544 7.88089H57.3912C57.4042 7.88089 57.4172 7.88089 57.4302 7.8828C57.4338 7.8828 57.4394 7.88089 57.4451 7.8828C58.0784 7.89976 58.6337 8.24101 58.953 8.74919C58.9567 8.75492 58.9586 8.7585 58.9605 8.76233C59.0904 9.00233 59.1627 9.27624 59.1627 9.56686C59.1627 9.91552 59.057 10.2401 58.8768 10.5101C58.8622 10.5326 58.8473 10.5534 58.8305 10.5758L49.5578 23.5382H58.4332C58.7489 23.5382 59.005 23.7971 59.005 24.114Z" fill="white"/>
<path d="M66.8144 24.0573C64.7231 24.0573 63.2023 22.4126 63.2023 20.1378C63.2023 17.8347 64.7231 16.1901 66.8144 16.1901C68.9035 16.1901 70.3967 17.8347 70.3967 20.1378C70.3967 22.4126 68.9035 24.0573 66.8144 24.0573ZM73.357 13.3657H70.9687C70.653 13.3657 70.3967 13.6246 70.3967 13.9417V15.53C69.3121 13.9959 67.6295 13.0901 65.674 13.0901C62.1438 13.0901 59.5642 16.0532 59.5642 20.1378C59.5642 24.2223 62.1438 27.1572 65.674 27.1572C67.6295 27.1572 69.3121 26.2533 70.3967 24.7436V26.3059C70.3967 26.6395 70.666 26.9096 70.9947 26.9096H73.357C73.6876 26.9096 73.9551 26.6395 73.9551 26.3059V13.9677C73.9551 13.6358 73.6876 13.3657 73.357 13.3657Z" fill="white"/>
<path d="M84.6067 13.0905C82.7599 13.0905 81.2389 13.9678 80.37 15.4219V13.9411C80.37 13.5573 80.1534 13.3653 79.8001 13.3653H77.4099C77.0578 13.3653 76.8412 13.5573 76.8412 13.9411V26.3065C76.8412 26.6902 77.0578 26.9102 77.4099 26.9102H79.8001C80.1534 26.9102 80.37 26.6902 80.37 26.3065V18.9584C80.37 17.1487 81.5111 15.9425 83.2211 15.9425C84.8777 15.9425 85.9911 17.1487 85.9911 18.9584V26.3065C85.9911 26.6398 86.2585 26.9102 86.5877 26.9102H88.9512C89.2801 26.9102 89.5478 26.6398 89.5478 26.3065V18.438C89.5478 15.2839 87.511 13.0905 84.6067 13.0905Z" fill="white"/>
<path d="M98.7702 24.0573C96.6792 24.0573 95.1879 22.4126 95.1879 20.1378C95.1879 17.8347 96.6792 16.1901 98.7702 16.1901C100.889 16.1901 102.382 17.8347 102.382 20.1378C102.382 22.4126 100.889 24.0573 98.7702 24.0573ZM98.7981 13.0901C94.5898 13.0901 91.5477 16.0532 91.5477 20.1378C91.5477 24.2223 94.5898 27.1572 98.7981 27.1572C102.98 27.1572 106.021 24.2223 106.021 20.1378C106.021 16.0532 102.98 13.0901 98.7981 13.0901Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_1333_5403" x1="17.9853" y1="25.1996" x2="18.2734" y2="0.00285435" gradientUnits="userSpaceOnUse">
<stop offset="0.43118" stop-color="#498FFD"/>
<stop offset="1" stop-color="#16D1D6"/>
</linearGradient>
<radialGradient id="paint1_radial_1333_5403" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.0368 7.71385) rotate(-15.5605) scale(16.2958 16.259)">
<stop stop-color="#18CFD7"/>
<stop offset="1" stop-color="#18CFD7" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial_1333_5403" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.5588 14.9139) rotate(152.373) scale(6.09988 6.08753)">
<stop stop-color="#4990FE"/>
<stop offset="0.353962" stop-color="#4990FE"/>
<stop offset="1" stop-color="#4990FE" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint3_radial_1333_5403" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.0956 23.1424) rotate(-45.9158) scale(11.0974 11.0803)">
<stop stop-color="#4990FE"/>
<stop offset="0.405688" stop-color="#4990FE"/>
<stop offset="1" stop-color="#4990FE" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint4_linear_1333_5403" x1="26.2206" y1="35.9993" x2="26.3132" y2="10.2853" gradientUnits="userSpaceOnUse">
<stop stop-color="#2950FF"/>
<stop offset="0.821717" stop-color="#498FFD"/>
</linearGradient>
<radialGradient id="paint5_radial_1333_5403" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.2206 25.1993) rotate(129.312) scale(10.9677 10.854)">
<stop offset="0.337169" stop-color="#2950FF"/>
<stop offset="0.792226" stop-color="#2950FF" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

6
src/assets/svg/plus.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="1em" height="1em" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1C8 0.447716 8.44772 0 9 0C9.55228 0 10 0.447715 10 1V17C10 17.5523 9.55228 18 9 18C8.44772 18 8 17.5523 8 17V1Z"
/>
<path d="M1 10C0.447716 10 -1.95702e-08 9.55229 -4.37114e-08 9C-6.78525e-08 8.44772 0.447715 8 1 8L17 8C17.5523 8 18 8.44771 18 9C18 9.55228 17.5523 10 17 10L1 10Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 426 B

11
src/assets/svg/receive.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="1em" height="1em" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.33979 2.51641C3.39906 1.37881 4.90384 0.75 6.66589 0.75L15.3349 0.75C17.097 0.75 18.6016 1.37883 19.6606 2.51652C20.7121 3.64612 21.2499 5.19612 21.2499 6.916V15.084C21.2499 16.8053 20.7088 18.3551 19.6563 19.484C18.5967 20.6207 17.0927 21.25 15.3349 21.25L6.66589 21.25C4.90384 21.25 3.39906 20.6212 2.33979 19.4836C1.28802 18.354 0.749893 16.804 0.749893 15.084L0.749893 6.916C0.749893 5.19597 1.28802 3.64596 2.33979 2.51641ZM3.8035 3.87934C3.15477 4.57604 2.74989 5.60903 2.74989 6.916L2.74989 15.084C2.74989 16.391 3.15477 17.424 3.8035 18.1207C4.44473 18.8093 5.39794 19.25 6.66589 19.25L15.3349 19.25C16.5971 19.25 17.5506 18.8098 18.1934 18.1202C18.8435 17.4229 19.2499 16.3897 19.2499 15.084V6.916C19.2499 5.60889 18.8452 4.57588 18.1967 3.87923C17.5557 3.19067 16.6028 2.75 15.3349 2.75L6.66589 2.75C5.39794 2.75 4.44473 3.19069 3.8035 3.87934Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.9999 5.91406C11.5522 5.91406 11.9999 6.36178 11.9999 6.91406L11.9999 15.0861C11.9999 15.6383 11.5522 16.0861 10.9999 16.0861C10.4476 16.0861 9.99989 15.6383 9.99989 15.0861L9.99989 6.91406C9.99989 6.36178 10.4476 5.91406 10.9999 5.91406Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.54629 10.6137C6.93765 10.224 7.57081 10.2253 7.9605 10.6167L10.9999 13.669L14.0393 10.6167C14.429 10.2253 15.0621 10.224 15.4535 10.6137C15.8448 11.0033 15.8462 11.6365 15.4565 12.0279L11.7085 15.7919C11.5208 15.9803 11.2658 16.0863 10.9999 16.0863C10.7339 16.0863 10.4789 15.9803 10.2913 15.7919L6.54328 12.0279C6.15359 11.6365 6.15494 11.0033 6.54629 10.6137Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

11
src/assets/svg/send.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="1em" height="1em" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19.6602 19.4836C18.6009 20.6212 17.0961 21.25 15.3341 21.25L6.66509 21.25C4.90302 21.25 3.39843 20.6212 2.33939 19.4835C1.28788 18.3539 0.750094 16.8039 0.750094 15.084L0.750095 6.916C0.750095 5.19472 1.29121 3.64491 2.34364 2.51598C3.40331 1.37929 4.9073 0.749997 6.6651 0.749997L15.3341 0.749998C17.0962 0.749998 18.6009 1.37881 19.6602 2.51641C20.712 3.64596 21.2501 5.19597 21.2501 6.916L21.2501 15.084C21.2501 16.804 20.712 18.354 19.6602 19.4836ZM18.1965 18.1207C18.8452 17.424 19.2501 16.391 19.2501 15.084L19.2501 6.916C19.2501 5.60903 18.8452 4.57604 18.1965 3.87933C17.5553 3.19068 16.602 2.75 15.3341 2.75L6.6651 2.75C5.40289 2.75 4.44938 3.19021 3.80655 3.87976C3.15648 4.57708 2.75009 5.61027 2.75009 6.916L2.75009 15.084C2.75009 16.3911 3.1548 17.4241 3.8033 18.1208C4.44426 18.8093 5.39717 19.25 6.66509 19.25L15.3341 19.25C16.602 19.25 17.5553 18.8093 18.1965 18.1207Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.0001 16.0859C10.4478 16.0859 10.0001 15.6382 10.0001 15.0859L10.0001 6.91394C10.0001 6.36165 10.4478 5.91394 11.0001 5.91394C11.5524 5.91394 12.0001 6.36165 12.0001 6.91394L12.0001 15.0859C12.0001 15.6382 11.5524 16.0859 11.0001 16.0859Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.4537 11.3863C15.0623 11.776 14.4292 11.7747 14.0395 11.3833L11.0001 8.33097L7.96071 11.3833C7.57102 11.7747 6.93785 11.776 6.5465 11.3863C6.15514 10.9967 6.1538 10.3635 6.54349 9.97213L10.2915 6.20814C10.4791 6.01968 10.7341 5.91374 11.0001 5.91374C11.2661 5.91374 11.5211 6.01968 11.7087 6.20814L15.4567 9.97214C15.8464 10.3635 15.8451 10.9967 15.4537 11.3863Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

20
src/assets/svg/users.svg Normal file
View file

@ -0,0 +1,20 @@
<svg width="1em" height="1em" viewBox="0 0 20 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.9657 2.33887C13.9657 1.92465 14.3015 1.58887 14.7157 1.58887C16.4664 1.58887 17.8869 3.00802 17.8869 4.75935C17.8869 6.51068 16.4664 7.92983 14.7157 7.92983C14.3015 7.92983 13.9657 7.59404 13.9657 7.17983C13.9657 6.76561 14.3015 6.42983 14.7157 6.42983C15.6386 6.42983 16.3869 5.68163 16.3869 4.75935C16.3869 3.83706 15.6386 3.08887 14.7157 3.08887C14.3015 3.08887 13.9657 2.75308 13.9657 2.33887Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.0806 9.758C15.1091 9.34477 15.4672 9.03288 15.8804 9.06138C16.3125 9.09118 16.7438 9.1523 17.1702 9.2477C17.4733 9.30761 17.8407 9.40583 18.1812 9.57574C18.521 9.74525 18.9052 10.0221 19.1212 10.4746L19.1216 10.4756C19.367 10.9917 19.3666 11.5912 19.1219 12.1072L19.1216 12.1079C18.9059 12.5614 18.521 12.838 18.1824 13.0075C17.8391 13.1794 17.4683 13.279 17.1668 13.341C16.761 13.4244 16.3645 13.1631 16.2811 12.7574C16.1976 12.3517 16.4589 11.9551 16.8646 11.8717C17.1061 11.8221 17.3337 11.7549 17.511 11.6662C17.6925 11.5753 17.7506 11.4977 17.7669 11.4639C17.8186 11.3544 17.8182 11.2276 17.767 11.1197L18.4443 10.7977L17.7674 11.1207C17.7509 11.0861 17.6923 11.0081 17.5116 10.918C17.3357 10.8302 17.1096 10.7643 16.8716 10.7177L16.851 10.7134C16.4991 10.6342 16.1401 10.5829 15.7772 10.5578C15.364 10.5293 15.0521 10.1712 15.0806 9.758Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.28413 3.08887C4.36123 3.08887 3.61289 3.83706 3.61289 4.75935C3.61289 5.68163 4.36123 6.42983 5.28413 6.42983C5.69835 6.42983 6.03413 6.76561 6.03413 7.17983C6.03413 7.59404 5.69835 7.92983 5.28413 7.92983C3.53342 7.92983 2.11289 6.51068 2.11289 4.75935C2.11289 3.00802 3.53342 1.58887 5.28413 1.58887C5.69835 1.58887 6.03413 1.92465 6.03413 2.33887C6.03413 2.75308 5.69835 3.08887 5.28413 3.08887Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.91924 9.758C4.94774 10.1712 4.63586 10.5293 4.22262 10.5578C3.85973 10.5829 3.50069 10.6342 3.14878 10.7134L3.1282 10.7177C2.89023 10.7643 2.66418 10.8302 2.48839 10.9179C2.30787 11.008 2.24977 11.0858 2.23357 11.1198L2.23298 11.1211C2.18172 11.2283 2.18138 11.3541 2.23328 11.463L2.23399 11.4645L2.23399 11.4645C2.24969 11.4976 2.30711 11.5752 2.48899 11.6662C2.6661 11.7549 2.89368 11.8221 3.13517 11.8717C3.5409 11.9551 3.80217 12.3517 3.71874 12.7574C3.63531 13.1631 3.23877 13.4244 2.83304 13.341C2.53155 13.279 2.16071 13.1794 1.81739 13.0075C1.47903 12.8381 1.09427 12.5614 0.878947 12.1078C0.633044 11.5914 0.632722 10.9913 0.879312 10.4749C1.0949 10.0222 1.47901 9.74525 1.81856 9.57579C2.15909 9.40584 2.52655 9.30761 2.82959 9.2477C3.25596 9.1523 3.68733 9.09118 4.11942 9.06138C4.53265 9.03288 4.89075 9.34477 4.91924 9.758Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.91741 11.899C5.78997 12.0325 5.72303 12.1822 5.72303 12.3959C5.72303 12.6081 5.78966 12.7558 5.91701 12.888C6.06214 13.0387 6.31257 13.1929 6.70689 13.3252C7.50314 13.5922 8.65714 13.6963 9.99601 13.6963C11.3408 13.6963 12.494 13.5885 13.2875 13.3186C13.6804 13.185 13.9299 13.0297 14.0746 12.878C14.2021 12.7444 14.269 12.5948 14.269 12.3814C14.269 12.1693 14.2024 12.0216 14.075 11.8893C13.9298 11.7386 13.6792 11.5844 13.2849 11.4522C12.4885 11.1851 11.3345 11.0811 9.99601 11.0811C8.65109 11.0811 7.49791 11.1886 6.7044 11.4584C6.31158 11.592 6.06214 11.7473 5.91741 11.899ZM6.22157 10.0382C7.25852 9.6857 8.61683 9.58105 9.99601 9.58105C11.3663 9.58105 12.7238 9.68195 13.7617 10.03C14.2845 10.2053 14.7818 10.4611 15.1552 10.8486C15.5463 11.2546 15.769 11.7732 15.769 12.3814C15.769 12.9878 15.5485 13.5062 15.1598 13.9135C14.7884 14.3027 14.2929 14.5611 13.7705 14.7388C12.7336 15.0914 11.3753 15.1963 9.99601 15.1963C8.62531 15.1963 7.26782 15.0954 6.22997 14.7473C5.70725 14.572 5.20998 14.3162 4.83667 13.9286C4.44558 13.5226 4.22303 13.004 4.22303 12.3959C4.22303 11.7894 4.44345 11.2709 4.83218 10.8635C5.20362 10.4742 5.69915 10.2159 6.22157 10.0382Z"
/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.99601 2.30273C8.62373 2.30273 7.52711 3.39935 7.52711 4.77163C7.52711 6.14479 8.62385 7.24129 9.99601 7.24129C11.3682 7.24129 12.4649 6.14479 12.4649 4.77163C12.4649 3.39935 11.3683 2.30273 9.99601 2.30273ZM6.02711 4.77163C6.02711 2.57092 7.7953 0.802734 9.99601 0.802734C12.1967 0.802734 13.9649 2.57092 13.9649 4.77163C13.9649 6.97298 12.1968 8.74129 9.99601 8.74129C7.79519 8.74129 6.02711 6.97298 6.02711 4.77163Z"
/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

76
src/components/Header/Header.jsx Normal file
View file

@ -0,0 +1,76 @@
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 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";
const Header = () => {
const [menuVisible, setMenuVisible] = useState(false)
const toggleBurgerMenu = () => {
if (menuVisible) {
setMenuVisible(false)
} else {
setMenuVisible(true)
}
}
return (
<header className={s.header}>
<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>
)
}
<div className={s.headerSelect}>
Wallet Name 1
</div>
<button className={s.headerInfo}>
<InfoIcon/>
</button>
</header>
);
};
export default Header;

125
src/components/Header/Header.module.scss Normal file
View file

@ -0,0 +1,125 @@
@use "sass:math";
@import "src/styles/variables";
.header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 360px;
height: 56px;
background: #0F2055;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 30px;
padding: 0 15px;
text-align: center;
}
.headerInfo {
color: $blueColor;
display: flex;
justify-content:center;
align-items: center;
}
// =========================================================
.burger {
display: flex;
justify-content: center;
align-items: center;
color: $blueColor;
}
// =========================================================
.menu {
position: fixed;
z-index: 100;
top: 0;
left: 0;
height: 100%;
width: 100%;
&::after {
content: "";
position: absolute;
z-index: -1;
width: calc(100% + 290px);
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.46);
animation: show-menu-bg 0.2s ease-in-out;
}
@keyframes show-menu-bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
.menuBody {
padding: 18px 16px;
width: 290px;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
background: #11316B;
animation: show-burger-menu 0.2s ease-in-out;
@keyframes show-burger-menu {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0px, 0px);
}
}
}
.menuHeader {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 22px;
color: #1f8feb;
margin-bottom: 35px;
}
.menuLinks {
flex: 1 1 auto;
}
.menuLink {
display: flex;
column-gap: 8px;
align-items: center;
text-align: left;
height: 50px;
font-size: 18px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
&:hover {
color: #ffffff;
}
}
.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;
}
}

84
src/components/Wallet/Wallet.jsx Normal file
View file

@ -0,0 +1,84 @@
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 copy from 'copy-to-clipboard';
const Wallet = () => {
const [modalVisible, setModalVisible] = useState(false)
const walletStatus = true;
const percentChange = false;
const walletAddress = "ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7EPnwKFPa9Hy5frFbQoT6KQaR7";
const getWalletStatusColor = () => {
return walletStatus ? "#16D1D6" : "red"
}
const getWalletPercentColor = () => {
return percentChange ? "#16D1D6" : "#FFCBCB"
}
const copyToClipboard = (text) => {
copy(text)
setModalVisible(true)
setTimeout(() => {
setModalVisible(false)
}, 2000)
};
return (
<div>
<div className={s.infoWallet}>
<div className={s.infoTop}>
<div>Wallet Name 1</div>
<span
className={s.infoWalletStatus}
style={{backgroundColor: getWalletStatusColor()}}
/>
</div>
<div className={s.infoBalance}>
<span>$1224.15</span>
<span
style={{color: getWalletPercentColor()}}
className={s.percentСhange}
>
-4.6%
</span>
</div>
<div className={s.infoAddress}>
<span>{walletAddress}</span>
<button
onClick={() => copyToClipboard(walletAddress)}
className={`${s.copyButton} round-button`}
>
<CopyIcon/>
</button>
</div>
</div>
<div className={s.actionsWallet}>
<button className={s.actionsButton}>
<SendIcon/> Send
</button>
<button className={s.actionsButton}>
<ReceiveIcon/> Receive
</button>
</div>
{modalVisible &&
(
<div className={s.clipboardModal}>
Copied to clipboard!
</div>
)
}
</div>
);
};
export default Wallet;

121
src/components/Wallet/Wallet.module.scss Normal file
View file

@ -0,0 +1,121 @@
@use "sass:math";
@import "src/styles/variables";
// =========================================================
.clipboardModal {
position: absolute;
z-index: 100;
top: 45px;
left: 50%;
transform: translate(-50%, 0);
background-color: #16d1d6;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 14px;
line-height: 1.2;
border-radius: 16px;
height: 40px;
padding: 0 16px;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
animation: show-modal 0.2s ease;
@keyframes show-modal {
0% {
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%);
}
100% {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
}
}
// =========================================================
.infoWallet {
background: radial-gradient(100% 188.88% at 0% 0%, #16D1D6 0%, #274CFF 100%);
border-radius: 16px;
padding: 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 {
display: block;
border-radius: 50%;
background-color: #fff;
width: 10px;
height: 10px;
}
}
.infoBalance {
font-weight: 600;
font-size: 32px;
line-height: math.div(38, 32);
margin-bottom: 8px;
.percentСhange {
color: #ffcbcb;
font-size: 18px;
font-weight: 400;
line-height: math.div(21, 18);
padding-left: 6px;
}
}
.infoAddress {
display: flex;
column-gap: 20px;
align-items: center;
span {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
line-height: math.div(17, 14);
opacity: 0.5;
}
.copyButton {
}
}
// =========================================================
.actionsWallet {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 16px;
}
.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;
svg {
flex: 0 0 20px;
}
&:hover {
background-color: #24244E;
}
}

10
src/index.js Normal file
View file

@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

18
src/styles/App.scss Normal file
View file

@ -0,0 +1,18 @@
@use "reset";
@use "global";
@use "fonts";
.App {
position: relative;
width: 360px;
height: 600px;
overflow-x: hidden;
overflow-y: auto;
background-color: #0C0C3A;
padding-top: 72px;
}
.container{
margin: 0 15px;
max-width: 100%;
}

14
src/styles/_global.scss Normal file
View file

@ -0,0 +1,14 @@
.round-button {
flex: 0 0 30px;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease 0s;
will-change: transform;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}

5
src/styles/_variables.scss Normal file
View file

@ -0,0 +1,5 @@
$fontFamily: "SFUIDisplay";
$fontSize: 19px;
$mainColor: #ffffff;
$blueColor: #1f8feb;
$appWidth: 360px;

42
src/styles/fonts.scss Normal file
View file

@ -0,0 +1,42 @@
@charset "UTF-8";
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url("../assets/fonts/SFUIDisplay-light.woff2") format("woff2"), url("../assets/fonts/SFUIDisplay-light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url("../assets/fonts/SFUIDisplay-regular.woff2") format("woff2"), url("../assets/fonts/SFUIDisplay-regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url("../assets/fonts/SFUIDisplay-medium.woff2") format("woff2"), url("../assets/fonts/SFUIDisplay-medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url("../assets/fonts/SFUIDisplay-semibold.woff2") format("woff2"), url("../assets/fonts/SFUIDisplay-semibold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url("../assets/fonts/SFUIDisplay-bold.woff2") format("woff2"), url("../assets/fonts/SFUIDisplay-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}

77
src/styles/reset.scss Normal file
View file

@ -0,0 +1,77 @@
@import "_variables";
* {
padding: 0px;
margin: 0px;
border: 0px;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a:focus,
a:active {
outline: none;
}
html,
body {
height: 100%;
}
body {
font-size: $fontSize;
color: $mainColor;
line-height: 1;
font-family: $fontFamily;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input,
button,
textarea {
font-family: $fontFamily;
font-size: inherit;
}
button {
cursor: pointer;
color: inherit;
background-color: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}