fix select bridge
@@ -68,8 +68,7 @@
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Вариант абзаца: предупреждение.
|
||||
NB: исторический контраст (светлый фон + белый текст) сохранён как было. */
|
||||
/* Вариант абзаца: предупреждение (тёмный текст на светло-жёлтом фоне). */
|
||||
.warning {
|
||||
padding: 15px;
|
||||
background: #fff3cd;
|
||||
@@ -77,6 +76,7 @@
|
||||
border-radius: 4px;
|
||||
margin: 15px 0;
|
||||
font-weight: 500;
|
||||
color: #664d03;
|
||||
}
|
||||
|
||||
/* Вариант абзаца: акцент (был `.confirmation`). */
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { About } from '@widgets/about'
|
||||
import { Converter } from '@widgets/currency-converter'
|
||||
import { Footer } from '@widgets/footer'
|
||||
@@ -6,6 +8,16 @@ import { Hero } from '@widgets/hero'
|
||||
import { NetworksTable } from '@widgets/networks-table'
|
||||
|
||||
export function HomePage() {
|
||||
const location = useLocation()
|
||||
|
||||
useEffect(() => {
|
||||
if ((location.state as { scrollTo?: string } | null)?.scrollTo === 'about') {
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })
|
||||
})
|
||||
}
|
||||
}, [location.state])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
|
||||
BIN
src/shared/assets/coins/ARB.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/shared/assets/coins/BNB.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/shared/assets/coins/BONK.png
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
src/shared/assets/coins/BTC.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/shared/assets/coins/BUSD.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/shared/assets/coins/DAI.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/shared/assets/coins/DOGE.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/shared/assets/coins/ETH.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/shared/assets/coins/JTO.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/shared/assets/coins/JUP.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/shared/assets/coins/LINK.png
Normal file
|
After Width: | Height: | Size: 686 B |
BIN
src/shared/assets/coins/ORCA.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/shared/assets/coins/PENGU.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/shared/assets/coins/POPCAT.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/shared/assets/coins/PUMP.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/shared/assets/coins/PYTH.png
Normal file
|
After Width: | Height: | Size: 678 B |
BIN
src/shared/assets/coins/RAY.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/shared/assets/coins/SOL.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/shared/assets/coins/TRUMP.png
Normal file
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/shared/assets/coins/TRX.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/shared/assets/coins/UNI.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/shared/assets/coins/USDC.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/shared/assets/coins/USDT.png
Normal file
|
After Width: | Height: | Size: 674 B |
BIN
src/shared/assets/coins/W.png
Normal file
|
After Width: | Height: | Size: 632 B |
BIN
src/shared/assets/coins/WBNB.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/shared/assets/coins/WBTC.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/shared/assets/coins/WIF.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="151" height="172" viewBox="0 0 151 172" fill="none">
|
||||
<path d="M144.518 39.2113L82.214 3.03438C80.1932 1.87961 77.9919 1.28418 75.7545 1.28418C73.5352 1.28418 71.3158 1.87961 69.3311 3.03438L7.00937 39.2474C3.05788 41.5569 0.585938 45.8151 0.585938 50.4162V122.842C0.585938 127.443 3.05788 131.756 7.00937 134.047L18.2143 140.561L34.5616 150.052L38.2243 139.965L71.8932 47.1143C72.2 46.2121 71.5504 45.2378 70.54 45.2378H54.752C53.5792 45.2378 52.4966 45.9775 52.1177 47.0782L21.8951 130.474L12.2961 124.899C11.5743 124.484 11.1232 123.708 11.1232 122.878V50.4162C11.1232 49.5862 11.5743 48.8103 12.2961 48.3953L74.6178 12.1824C74.9606 11.9658 75.3756 11.8756 75.7725 11.8756C76.1875 11.8756 76.5665 11.9839 76.9454 12.1824L139.285 48.3953C140.007 48.8103 140.458 49.5862 140.458 50.4162V122.842C140.458 123.672 140.007 124.448 139.285 124.863L129.794 130.384L104.822 61.4768C104.371 60.2137 102.639 60.2137 102.188 61.4768L93.9602 84.1392C93.7257 84.7707 93.7257 85.4744 93.9602 86.0879L113.447 139.875L106.969 143.646L91.0192 99.6023C90.5681 98.3393 88.8359 98.3393 88.3848 99.6023L80.1571 122.265C79.9225 122.896 79.9225 123.6 80.1571 124.213L90.6403 153.137L76.9634 161.094C76.6206 161.311 76.2056 161.401 75.7906 161.401C75.3756 161.401 74.9967 161.293 74.6178 161.094L61.1033 153.227L99.5537 47.1323C99.8965 46.1941 99.2108 45.2017 98.2365 45.2017H82.4486C81.2758 45.2017 80.1932 45.9414 79.8142 47.0421L44.756 143.718L41.0932 153.805L57.4405 163.295L69.3672 170.224C71.3519 171.379 73.5713 171.974 75.7906 171.974C78.0099 171.974 80.2292 171.379 82.214 170.224L144.554 134.011C148.541 131.701 150.977 127.443 150.977 122.806V50.4162C150.977 45.8151 148.505 41.5028 144.554 39.2113H144.518Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 2496 2496" style="enable-background:new 0 0 2496 2496;" xml:space="preserve">
|
||||
<g>
|
||||
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F0B90B;" d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248
|
||||
S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"/>
|
||||
<path style="fill:#FFFFFF;" d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3
|
||||
l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4
|
||||
L1084.3,821.4z"/>
|
||||
<path style="fill:#FFFFFF;" d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6
|
||||
l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918
|
||||
L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578
|
||||
L1809.2,1578z"/>
|
||||
<polygon style="fill:#FFFFFF;" points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 "/>
|
||||
<path style="fill:#FFFFFF;" d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4
|
||||
L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6
|
||||
l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,43 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="CIRCLE_OUTLINE_BLACK" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FDDE00;}
|
||||
.st1{fill:#3C2D0C;}
|
||||
.st2{fill:#E78C19;}
|
||||
.st3{fill:#EFB99D;}
|
||||
.st4{fill:#FBFBFB;}
|
||||
.st5{fill:#E72D36;}
|
||||
</style>
|
||||
<circle class="st0" cx="256" cy="256" r="256"/>
|
||||
<path class="st1" d="M131.4,181c0,0-13.2,16.7-8.8,92.2c0,0-28.9,74-19.1,111.8c9.8,37.7,48,35.8,48,35.8s61.3,53.9,108.3,6.4
|
||||
c47.1-47.6-39.2-231.9-39.2-231.9l-10.8-63.7c0,0-11.8,9.3-10.3,70.6s-24,18.1-24,18.1L131.4,181z"/>
|
||||
<path class="st2" d="M136.3,247.7l-16.2,45.6l-5.9,31.9c0,0-20.1,71.1,62.8,70.1c0,0,64.7,57.9,106.9,19.1l11.3-12.3l19.6-30.4
|
||||
l32.4-96.6c0,0-10.3-66.2-75.5-93.6c0,0-5.4-2.9-15.2,1c0,0-27-60.8-44.1-53.4c0,0-14.7,7.8-2,67.7l-23,10.3
|
||||
c0,0-25.2-47.8-48.5-38.2C117.2,177.6,136.3,247.7,136.3,247.7z"/>
|
||||
<path class="st3" d="M220.1,158.9l2,26.5c0,0,1.5,15.2,17.6,9.8c4.6-1.5,8.6-4.7,8.2-9.9c-0.3-3.9-3-7.5-4.8-10.8
|
||||
c-3.3-6.3-6-13-9.9-19.1c-2-3.1-6.1-10-10.6-9.2C222.6,146.2,219.2,145.2,220.1,158.9z"/>
|
||||
<path class="st3" d="M149.3,188.7c0.3-0.2,6.9-8.5,20.6,11.7c13.7,20.2,12.3,17.6,12.3,17.6s7.4,8.1-7.7,18.5
|
||||
c-3.3,2.4-6.9,4.4-10.7,6c-2.4,0.9-4.9,1.4-7.4,1.4c-2.9-0.1-4.2-1.6-4.9-4.3c-2.3-8.8-4.9-17.6-6.2-26.6
|
||||
C144.3,206,142.3,193.2,149.3,188.7z"/>
|
||||
<path class="st4" d="M308.5,229.4c0,4.8-7,8.7-15.7,8.7c-8.7,0-15.7-3.9-15.7-8.7s7.2-11.9,15.8-11.9S308.5,224.6,308.5,229.4z"/>
|
||||
<ellipse transform="matrix(0.4925 -0.8703 0.8703 0.4925 -121.8385 314.1253)" class="st4" cx="208.4" cy="261.5" rx="17.1" ry="11"/>
|
||||
<path class="st4" d="M240.2,306.7l42.9-22.3c0,0,53.4-27.9,66.4-6.4s0,54.4,0,54.4s-5.6,38.5-44.9,41.9l-21.1,2.9l-27,0.7
|
||||
c0,0-43.4,2.5-75.3-21.1l-10.1-12.3c0,0-20.3-27.9-6.1-48s62.8,11,62.8,11S234.6,311.2,240.2,306.7z"/>
|
||||
<circle class="st5" cx="337.5" cy="185.2" r="10.3"/>
|
||||
<circle class="st5" cx="314.7" cy="159.9" r="10.3"/>
|
||||
<circle class="st5" cx="278.2" cy="151.8" r="10.3"/>
|
||||
<path class="st5" d="M286.3,78.8c2.2,30.4-2.2,57.9-9.6,57.9s-17.2-29.7-17.2-57.9c0-11.6,6.1-13.5,13.5-13.5
|
||||
C280.5,65.3,285.5,67.2,286.3,78.8z"/>
|
||||
<path class="st5" d="M354.5,97.7c-11.2,28.3-27.1,51.2-33.7,48c-6.6-3.2-2.6-34.2,9.7-59.6c5.1-10.5,11.4-9.5,18-6.3
|
||||
C355.1,83.1,358.8,86.9,354.5,97.7z"/>
|
||||
<path class="st5" d="M403.3,152.9c-24.7,17.9-50.3,28.7-54.2,22.4c-3.9-6.3,16.2-30.2,40.1-45.1c9.9-6.1,14.7-1.9,18.6,4.3
|
||||
C411.6,140.8,412.7,146,403.3,152.9z"/>
|
||||
<path d="M238.2,276.8c-0.9,0.1-1.8,0.2-2.7,0.3c0.1,0.3,0.2,0.6,0.2,1c0,3.1-4.9,5.7-11,5.9c0,0.3-0.1,0.5,0,0.8
|
||||
c0.3,3.8,6.9,6.4,14.6,5.8c7.8-0.6,13.9-4.2,13.6-8C252.5,278.8,246,276.2,238.2,276.8z"/>
|
||||
<path d="M292.4,263.4c-0.9,0.1-1.8,0.2-2.7,0.3c0.1,0.3,0.2,0.6,0.2,1c0,3.1-4.9,5.7-11,5.9c0,0.3-0.1,0.5,0,0.8
|
||||
c0.3,3.8,6.9,6.4,14.6,5.8c7.8-0.6,13.9-4.2,13.6-8C306.8,265.4,300.2,262.8,292.4,263.4z"/>
|
||||
<path d="M310.2,279.3c0,0-21.5,6.3-20.2,18.4s27.2,18.4,27.2,18.4s7,2.8,11-3.9c4-6.6,9.9-15.6,8.3-28.5
|
||||
C336.5,283.7,336,274.1,310.2,279.3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@@ -1,4 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 6H15C16.6569 6 18 7.34315 18 9C18 10.6569 16.6569 12 15 12M10 6V12M10 6H7M10 6V3M15 12H10M15 12C16.6569 12 18 13.3431 18 15C18 16.6569 16.6569 18 15 18H10M10 12V18M10 18H7M10 18V21M13 6V3M13 21V18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 518 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 336.41 337.42"><defs><style>.cls-1{fill:#f0b90b;stroke:#f0b90b;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M168.2.71l41.5,42.5L105.2,147.71l-41.5-41.5Z"/><path class="cls-1" d="M231.2,63.71l41.5,42.5L105.2,273.71l-41.5-41.5Z"/><path class="cls-1" d="M42.2,126.71l41.5,42.5-41.5,41.5L.7,169.21Z"/><path class="cls-1" d="M294.2,126.71l41.5,42.5L168.2,336.71l-41.5-41.5Z"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 528 B |
@@ -1,13 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW 2019 (64-Bit) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
|
||||
viewBox="0 0 444.44 444.44"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path fill="#F5AC37" fill-rule="nonzero" d="M222.22 0c122.74,0 222.22,99.5 222.22,222.22 0,122.74 -99.48,222.22 -222.22,222.22 -122.72,0 -222.22,-99.49 -222.22,-222.22 0,-122.72 99.5,-222.22 222.22,-222.22z"/>
|
||||
<path fill="#FEFEFD" fill-rule="nonzero" d="M230.41 237.91l84.44 0c1.8,0 2.65,0 2.78,-2.36 0.69,-8.59 0.69,-17.23 0,-25.83 0,-1.67 -0.83,-2.36 -2.64,-2.36l-168.05 0c-2.08,0 -2.64,0.69 -2.64,2.64l0 24.72c0,3.19 0,3.19 3.33,3.19l82.78 0zm77.79 -59.44c0.24,-0.63 0.24,-1.32 0,-1.94 -1.41,-3.07 -3.08,-6 -5.02,-8.75 -2.92,-4.7 -6.36,-9.03 -10.28,-12.92 -1.85,-2.35 -3.99,-4.46 -6.39,-6.25 -12.02,-10.23 -26.31,-17.47 -41.67,-21.11 -7.75,-1.74 -15.67,-2.57 -23.61,-2.5l-74.58 0c-2.08,0 -2.36,0.83 -2.36,2.64l0 49.3c0,2.08 0,2.64 2.64,2.64l160.27 0c0,0 1.39,-0.28 1.67,-1.11l-0.68 0zm0 88.33c-2.36,-0.26 -4.74,-0.26 -7.1,0l-154.02 0c-2.08,0 -2.78,0 -2.78,2.78l0 48.2c0,2.22 0,2.78 2.78,2.78l71.11 0c3.4,0.26 6.8,0.02 10.13,-0.69 10.32,-0.74 20.47,-2.98 30.15,-6.67 3.52,-1.22 6.92,-2.81 10.13,-4.72l0.97 0c16.67,-8.67 30.21,-22.29 38.75,-39.01 0,0 0.97,-2.1 -0.12,-2.65zm-191.81 78.75l0 -0.83 0 -32.36 0 -10.97 0 -32.64c0,-1.81 0,-2.08 -2.22,-2.08l-30.14 0c-1.67,0 -2.36,0 -2.36,-2.22l0 -26.39 32.22 0c1.8,0 2.5,0 2.5,-2.36l0 -26.11c0,-1.67 0,-2.08 -2.22,-2.08l-30.14 0c-1.67,0 -2.36,0 -2.36,-2.22l0 -24.44c0,-1.53 0,-1.94 2.22,-1.94l29.86 0c2.08,0 2.64,0 2.64,-2.64l0 -74.86c0,-2.22 0,-2.78 2.78,-2.78l104.16 0c7.56,0.3 15.07,1.13 22.5,2.5 15.31,2.83 30.02,8.3 43.47,16.11 8.92,5.25 17.13,11.59 24.44,18.89 5.5,5.71 10.46,11.89 14.86,18.47 4.37,6.67 8,13.8 10.85,21.25 0.35,1.94 2.21,3.25 4.15,2.92l24.86 0c3.19,0 3.19,0 3.33,3.06l0 22.78c0,2.22 -0.83,2.78 -3.06,2.78l-19.17 0c-1.94,0 -2.5,0 -2.36,2.5 0.76,8.46 0.76,16.95 0,25.41 0,2.36 0,2.64 2.65,2.64l21.93 0c0.97,1.25 0,2.5 0,3.76 0.14,1.61 0.14,3.24 0,4.85l0 16.81c0,2.36 -0.69,3.06 -2.78,3.06l-26.25 0c-1.83,-0.35 -3.61,0.82 -4.03,2.64 -6.25,16.25 -16.25,30.82 -29.17,42.5 -4.72,4.25 -9.68,8.25 -14.86,11.94 -5.56,3.2 -10.97,6.53 -16.67,9.17 -10.49,4.72 -21.49,8.2 -32.78,10.41 -10.72,1.92 -21.59,2.79 -32.5,2.64l-96.39 0 0 -0.14z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" width="2500" height="2500"><g fill="#c2a633"><path d="M1024 659H881.12v281.69h224.79v117.94H881.12v281.67H1031c38.51 0 316.16 4.35 315.73-327.72S1077.44 659 1024 659z"/><path d="M1000 0C447.71 0 0 447.71 0 1000s447.71 1000 1000 1000 1000-447.71 1000-1000S1552.29 0 1000 0zm39.29 1540.1H677.14v-481.46H549.48V940.7h127.65V459.21h310.82c73.53 0 560.56-15.27 560.56 549.48 0 574.09-509.21 531.41-509.21 531.41z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 484 B |
@@ -1,35 +0,0 @@
|
||||
<?xml version="1.0" ?>
|
||||
|
||||
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 32 32" id="_x3C_Layer_x3E_" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.st0{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
.st1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
]]>
|
||||
</style>
|
||||
|
||||
<g id="Ethereum_x2C__crypto_x2C__cryptocurrency_1_">
|
||||
|
||||
<g id="XMLID_15_">
|
||||
|
||||
<polygon class="st1" id="XMLID_8_" points="16.01,1.5 7.62,16.23 16.01,21.5 24.38,16.18 "/>
|
||||
|
||||
<line class="st1" id="XMLID_31_" x1="16.01" x2="16.01" y1="30.5" y2="24.1"/>
|
||||
|
||||
<polygon class="st1" id="XMLID_12_" points="16.01,30.5 7.62,18.83 16.01,24.1 24.38,18.78 "/>
|
||||
|
||||
<polygon class="st1" id="XMLID_30_" points="16.01,12.3 7.62,16.23 16.01,21.5 24.38,16.18 "/>
|
||||
|
||||
<line class="st1" id="XMLID_32_" x1="16.01" x2="16.01" y1="1.5" y2="21.5"/>
|
||||
|
||||
<polygon class="st1" id="XMLID_192_" points="16.01,1.5 7.62,16.23 16.01,21.5 24.38,16.18 "/>
|
||||
|
||||
</g>
|
||||
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,49 +1,41 @@
|
||||
import btc from './btc.svg'
|
||||
import eth from './eth.svg'
|
||||
import sol from './sol.svg'
|
||||
import trx from './trx.svg'
|
||||
import bnb from './bnb.svg'
|
||||
import arb from './arb.svg'
|
||||
import bonk from './bonk.svg'
|
||||
import busd from './busd.svg'
|
||||
import dai from './dai.svg'
|
||||
import doge from './doge.svg'
|
||||
import jup from './jup.svg'
|
||||
import link from './link.svg'
|
||||
import orca from './orca.svg'
|
||||
import popcat from './popcat.svg'
|
||||
import pyth from './pyth.svg'
|
||||
import ray from './ray.svg'
|
||||
import uni from './uni.svg'
|
||||
import usdc from './usdc.svg'
|
||||
import usdt from './usdt.svg'
|
||||
import w from './w.svg'
|
||||
import wif from './wif.svg'
|
||||
// Единая точка доступа к логотипам монет.
|
||||
// Логотипы автоматически подхватываются из этой папки — чтобы добавить новую
|
||||
// монету, достаточно положить файл `<TICKER>.png` (или `.svg`) рядом с этим
|
||||
// файлом. Ничего дописывать в код не нужно.
|
||||
//
|
||||
// При наличии и PNG, и SVG для одного тикера приоритет отдаётся PNG.
|
||||
|
||||
export const COIN_ICONS: Record<string, string> = {
|
||||
BTC: btc,
|
||||
ETH: eth,
|
||||
SOL: sol,
|
||||
TRX: trx,
|
||||
BNB: bnb,
|
||||
ARB: arb,
|
||||
BONK: bonk,
|
||||
BUSD: busd,
|
||||
DAI: dai,
|
||||
DOGE: doge,
|
||||
JUP: jup,
|
||||
LINK: link,
|
||||
ORCA: orca,
|
||||
POPCAT: popcat,
|
||||
PYTH: pyth,
|
||||
RAY: ray,
|
||||
UNI: uni,
|
||||
USDC: usdc,
|
||||
USDT: usdt,
|
||||
W: w,
|
||||
WIF: wif,
|
||||
type IconModules = Record<string, string>
|
||||
|
||||
const svgIcons = import.meta.glob('./*.svg', {
|
||||
eager: true,
|
||||
query: '?url',
|
||||
import: 'default',
|
||||
}) as IconModules
|
||||
|
||||
const pngIcons = import.meta.glob('./*.png', {
|
||||
eager: true,
|
||||
query: '?url',
|
||||
import: 'default',
|
||||
}) as IconModules
|
||||
|
||||
/** Достаёт тикер из пути вида `./usdt.svg` → `USDT`. */
|
||||
function tickerFromPath(path: string): string {
|
||||
return path.replace(/^\.\//, '').replace(/\.[^.]+$/, '').toUpperCase()
|
||||
}
|
||||
|
||||
function collect(modules: IconModules, target: Record<string, string>) {
|
||||
for (const [path, url] of Object.entries(modules)) {
|
||||
target[tickerFromPath(path)] = url
|
||||
}
|
||||
}
|
||||
|
||||
/** Карта `ТИКЕР → url логотипа`. PNG перекрывает SVG при совпадении тикера. */
|
||||
export const COIN_ICONS: Record<string, string> = {}
|
||||
collect(svgIcons, COIN_ICONS) // сначала svg…
|
||||
collect(pngIcons, COIN_ICONS) // …затем png перекрывает
|
||||
|
||||
/** Вернуть url логотипа по тикеру (регистр не важен), либо undefined. */
|
||||
export function getCoinIcon(ticker: string): string | undefined {
|
||||
return COIN_ICONS[ticker.toUpperCase()]
|
||||
}
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#141726;}
|
||||
.st1{fill:url(#SVGID_1_);}
|
||||
.st2{fill:url(#SVGID_2_);}
|
||||
.st3{fill:url(#SVGID_3_);}
|
||||
.st4{fill:url(#SVGID_4_);}
|
||||
.st5{fill:url(#SVGID_5_);}
|
||||
.st6{fill:url(#SVGID_6_);}
|
||||
</style>
|
||||
<circle class="st0" cx="400" cy="400" r="400"/>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="574.9257" y1="665.8727" x2="248.5257" y2="142.3127" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M536,568.9c-66.8-108.5-166.4-170-289.4-195.6c-43.5-9-87.2-8.9-129.4,7.7c-28.9,11.4-33.3,23.4-19.7,53.7
|
||||
c92.4-21.9,178.4-1.5,258.9,45c81.1,46.9,141.6,112.2,169.1,205c38.6-11.8,43.6-18.3,34.3-54.2C554.3,609.4,547.4,587.4,536,568.9
|
||||
L536,568.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="572.5896" y1="667.3303" x2="246.1996" y2="143.7703" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M609.1,480.6c-85.8-125-207.3-194.9-355.8-218.3c-39.3-6.2-79.4-4.5-116.2,14.3c-17.6,9-33.2,20.5-37.4,44.9
|
||||
c115.8-31.9,219.7-3.7,317.5,53c98.3,57,175.1,133.5,205,251.1c20.8-18.4,24.5-41,19.1-62C633.9,534.8,625.5,504.5,609.1,480.6
|
||||
L609.1,480.6z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="577.0148" y1="664.5671" x2="250.6247" y2="141.0071" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M105,488.6c7.3,16.2,12.1,34.5,23,47.6c5.5,6.7,22.2,4.1,33.8,5.7c1.8,0.2,3.6,0.5,5.4,0.7
|
||||
c102.9,15.3,184.1,65.1,242.1,152c3.4,5.1,8.9,12.7,13.4,12.7c17.4-0.1,34.9-2.8,52.5-4.5C449,557.5,232.8,438.3,105,488.6
|
||||
L105,488.6z"/>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="569.0272" y1="669.5518" x2="242.6272" y2="145.9917" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st4" d="M656.6,366.7C599.9,287.4,521.7,234.6,432.9,197c-61.5-26.1-125.2-41.8-192.8-33.7
|
||||
c-23.4,2.8-45.3,9.5-63.4,24.7c230.9,5.8,404.6,105.8,524,303.3c0.2-13.1,2.2-27.7-2.6-39.5C686.1,422.5,674.7,392,656.6,366.7z"/>
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="571.6973" y1="667.8917" x2="245.2973" y2="144.3317" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st5" d="M709.8,325.3c-47-178.9-238-265-379.2-221.4C482.7,133.9,607.5,206.4,709.8,325.3z"/>
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="579.0382" y1="663.3111" x2="252.6482" y2="139.7511" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st6" d="M155.4,583.9c54.6,69.3,124,109.7,213,122.8C334.4,643.2,214.6,574.5,155.4,583.9L155.4,583.9z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.8 43.6"><defs><style>.cls-1{fill:#2a5ada;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M18.9,0l-4,2.3L4,8.6,0,10.9V32.7L4,35l11,6.3,4,2.3,4-2.3L33.8,35l4-2.3V10.9l-4-2.3L22.9,2.3ZM8,28.1V15.5L18.9,9.2l10.9,6.3V28.1L18.9,34.4Z"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 387 B |
@@ -1,40 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="CIRCLE_OUTLINE_BLACK" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFD15C;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M512,256c0,141.4-114.6,256-256,256S0,397.4,0,256S114.6,0,256,0S512,114.6,512,256z"/>
|
||||
<path class="st1" d="M193.5,152.3c-10.4,1.5-4.6,10.4-4.6,10.4l-0.3,2.5c14.9,25.7,39.5,52.7,64.6,70.7c18.5,13.2,32.3,32.7,39,54.9
|
||||
c6.6,21.9,5.4,44.6-3.2,62.2c-10.4,21.2-30.1,33.5-55.3,34.7c-25.1,1.2-54.9-8.7-88.6-29.4c-0.3,0.8-0.7,1.6-1.1,2.3
|
||||
c29.2,30.1,63,48.1,98.1,52.2c35.5,4.2,71.9-5.8,102.7-27.9c-0.8,0-1.4-0.2-1.9-0.5C446.5,298.8,276.9,140.4,193.5,152.3
|
||||
L193.5,152.3z"/>
|
||||
<path d="M462.6,267.4c-0.1-1.9-0.2-4.2-0.6-6.9c-1.3-10.5-5.5-26.6-17.7-43.7c-0.6-0.8-1.2-1.6-1.8-2.4c-0.1-0.2-0.3-0.4-0.4-0.6
|
||||
c-0.5-0.7-1.1-1.4-1.6-2.1c0,0-0.1-0.1-0.1-0.1c-0.6-0.7-1.2-1.5-1.8-2.2c-0.1-0.2-0.3-0.3-0.4-0.5c-0.5-0.6-1.1-1.3-1.6-1.9
|
||||
c-0.1-0.1-0.1-0.1-0.2-0.2c-0.6-0.7-1.2-1.3-1.8-2c-0.1-0.1-0.3-0.3-0.4-0.4c-0.5-0.6-1-1.1-1.5-1.6c-0.1-0.1-0.2-0.2-0.2-0.3
|
||||
c-0.6-0.6-1.2-1.2-1.7-1.7c-0.1-0.1-0.2-0.2-0.4-0.4c-0.5-0.5-1-1-1.5-1.4c-0.1-0.1-0.2-0.2-0.3-0.3c-0.6-0.5-1.1-1-1.7-1.5
|
||||
c-0.1-0.1-0.2-0.2-0.3-0.3c-0.5-0.4-1-0.8-1.4-1.2c-0.1-0.1-0.2-0.2-0.3-0.3c-0.5-0.5-1.1-0.9-1.6-1.3c-0.1-0.1-0.2-0.2-0.3-0.3
|
||||
c-0.4-0.4-0.9-0.7-1.3-1.1c-0.1-0.1-0.3-0.2-0.4-0.3c-0.5-0.4-1-0.8-1.5-1.1c-0.1-0.1-0.2-0.2-0.3-0.2c-0.4-0.3-0.8-0.6-1.2-0.9
|
||||
c-0.1-0.1-0.3-0.2-0.4-0.3c-0.5-0.3-0.9-0.6-1.4-1c-0.1-0.1-0.2-0.2-0.4-0.2c-0.4-0.2-0.7-0.5-1-0.7c-0.2-0.1-0.3-0.2-0.5-0.3
|
||||
c-0.4-0.2-0.8-0.5-1.1-0.7c-0.2-0.1-0.4-0.2-0.5-0.3c-0.3-0.2-0.5-0.3-0.8-0.5c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.5-0.3-0.7-0.4
|
||||
c-0.3-0.2-0.6-0.4-1-0.5c-0.2-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.4-0.2-0.7-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c-0.4-0.2-0.9-0.5-1.3-0.7
|
||||
c0,0-0.1,0-0.1,0c-2.7-4.8-5.7-9.6-8.9-14.4c-37.3-54.6-78.2-81.1-124.9-81.2h-0.2c-19.8,0-37.9,4.5-53,8.9c-4.3,1.3-8.8,2.6-13.1,4
|
||||
c-11,3.4-21.4,6.7-30.3,8.1c-5.6,0.9-10,3-13.1,6.2c-2.8,3-4.5,7.1-5,12.1c-1,9.7,2.5,22.8,10.1,37.8c15.3,30.4,44.6,63.9,74.6,85.4
|
||||
c3.5,2.5,6.7,5.2,9.7,8.2c-0.6,0.1-1.2,0.2-1.9,0.3c-23.5,3.4-35.8,28.6-40.7,42.3c-1.3,3.6,2.2,6.8,5.8,5.5
|
||||
c14.6-4.9,44.3-12.9,61-2.6c0.1,0,0.3-0.1,0.4-0.1c3,15,1.6,29.8-4.1,41.3c-7.5,15.1-21.8,24-40.3,24.9
|
||||
c-21.8,1.1-48.6-8.2-79.7-27.6l-0.5-0.3c-0.3-0.1-0.6-0.3-0.8-0.5c24.2-27.5,9.9-69.9,4.3-83.8c-0.7-1.8-3.3-1.8-4.3-0.1
|
||||
c-13,22.1-39.8,20.4-39.3,46.7c0,0,0,0,0-0.1c-20.4-16.6-35.6,5.5-61,2.2c-2-0.3-3.5,1.7-2.5,3.4c7.7,13.3,33.5,52.3,71.6,47.9
|
||||
l-1.8,1.3l6.8,7.5c33.3,36.7,72.9,58.7,114.6,63.6c6,0.7,12,1.1,18,1.1c34.9,0,69.6-11.7,99.4-33.9c34.2-25.4,57.9-61.3,66.8-101
|
||||
c3-13.2,4.2-26.4,3.7-39.5c7.5-3,15.7,0.3,22.2,4.7c0.1,0,0.1,0.1,0.2,0.1c0.3,0.2,0.5,0.4,0.8,0.5c0.1,0,0.1,0.1,0.2,0.1
|
||||
c0.8,0.5,1.5,1.1,2.2,1.6c0.1,0.1,0.3,0.2,0.4,0.3c0.2,0.1,0.3,0.3,0.5,0.4c0.2,0.1,0.3,0.3,0.5,0.4c0.1,0.1,0.3,0.2,0.4,0.4
|
||||
c0.3,0.2,0.6,0.5,0.8,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.2,0.4,0.4,0.6,0.5c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.2,0.4,0.3,0.6,0.5
|
||||
c0.1,0.1,0.2,0.1,0.2,0.2c0.2,0.2,0.5,0.5,0.7,0.7c0.1,0.1,0.2,0.1,0.2,0.2c0.5,0.4,1.1,0.5,1.6,0.5
|
||||
C461.7,269.5,462.7,268.6,462.6,267.4z M342.9,384.5c0.5,0.3,1.1,0.4,1.9,0.5c-30.8,22.2-67.2,32.1-102.7,27.9
|
||||
c-35.2-4.1-68.9-22.1-98.1-52.2c0.4-0.8,0.8-1.5,1.1-2.3c33.7,20.7,63.5,30.6,88.6,29.4c25.2-1.2,44.9-13.6,55.3-34.7
|
||||
c8.7-17.6,9.8-40.2,3.2-62.2c-6.7-22.2-20.5-41.7-39-54.9c-25.2-18-49.7-45-64.6-70.7l0.3-2.5c0,0-5.8-8.9,4.6-10.4
|
||||
C276.9,140.4,446.5,298.8,342.9,384.5z"/>
|
||||
<path class="st1" d="M280.3,146.5c-2.9-4.1-8.7-15.1,9.3-15.1c18,0,45.4,20.3,51,27.8c-1.7,4.6-13.3,5.6-19.1,5.2
|
||||
s-15.6-1.4-23.2-5.2C290.8,155.6,283.2,150.6,280.3,146.5z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB |
@@ -1,97 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 994.3 1000.5" style="enable-background:new 0 0 994.3 1000.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F7F5F8;}
|
||||
.st1{fill:#DCC4D4;}
|
||||
.st2{fill:#EFAD93;}
|
||||
.st3{fill:#D68C72;}
|
||||
.st4{fill:#964C49;}
|
||||
.st5{fill:#3A0101;}
|
||||
.st6{fill:#894544;}
|
||||
.st7{fill:#E3746D;}
|
||||
.st8{fill:#FFFFFF;}
|
||||
.st9{fill:#623538;}
|
||||
.st10{fill:#C95755;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M27.4,444.9l471.8-254l124.2-2.5c0,0,129.7,15.8,232.7,116.6c0.1,0.1,0.2,0.1,0.2,0.2
|
||||
c28.2,27.7,54.4,62.5,75.1,106.3c1.4,2.9,2.8,5.9,4.1,8.9c0,0,151.2,244-41.3,456.4c-192.5,212.3-651.4,110.6-789.3-112.5
|
||||
c-1-1.5-2-3.1-3-4.7c-21.2-34.1-37-67.9-48.6-99.2c-14.7-39.6-22.9-75.1-27.4-101.6C20.8,528.5,27.5,444.9,27.4,444.9z"/>
|
||||
<path class="st1" d="M218.8,420.3c-31.3,88.9,7.8,189.9,85.9,99.6c111.2-153,321.4-183.3,405.1-172.5
|
||||
c102.5,19.8,182.5,123.4,207.9,125.4c25.4,2,13.7-61.3,13.7-61.3c1.4,2.9,2.8,5.9,4.1,8.9c0,0,151.2,244-41.3,456.4
|
||||
C701.7,1089.1,242.8,987.4,105,764.2c-1-1.5-2-3.1-3-4.7c-21.2-34.1-37-67.9-48.6-99.2C106.8,572.1,243.9,348.5,218.8,420.3z"/>
|
||||
<path class="st2" d="M680.7,183.7c49.4-48.5,129.9-117.2,190.6-152.4c29.2-17,53.8-26.2,68.1-21.7c2.8,0.8,5.1,2.2,7.1,4.1
|
||||
c23.7,23.2,14.4,169.4,3.6,279.9c-7,70.6-14.6,126.7-14.6,126.7c-15.5-33.2-32-65.7-81.8-118c-20.7-20.3-41.8-37.4-63.2-51.7
|
||||
c-36-24-72.5-40.1-108.3-50.3c-4.8-1.4-9.6-2.6-14.4-3.8C671.8,192.5,676.1,188.2,680.7,183.7z"/>
|
||||
<path class="st3" d="M871.3,31.4c-10.1,73.5-12.2,200.9,78.8,262.3c-7,70.6-14.6,126.7-14.6,126.7c-15.5-33.2-32-65.7-81.8-118
|
||||
c-20.7-20.3-41.8-37.4-63.2-51.7c-36-24-72.5-40.1-108.3-50.3l-1.6-16.6C730.1,135.2,810.6,66.6,871.3,31.4z"/>
|
||||
<path class="st4" d="M51.1,14.9c49.7-15.8,213.2,136.5,315.7,216.5c0,0,141.2-74,301.1-34.9c7.5,1.8,15.1,3.9,22.8,6.3
|
||||
c-46.6-1.7-115.4-3.1-144.9,2.2C499,213.5,329,264,254.7,383.2c-74.3,119.1-71.3,258.8-69.5,320.2c1.4,48.9-34.4,79.5-88.3,48
|
||||
c-44.5-74.3-63.2-146.8-71-192.6c-1.1-10.1-2.2-20.5-3.5-31c-0.8-6-1.4-12-2.1-17.9C-12.3,223.4,2.5,30.3,51.1,14.9z"/>
|
||||
<path class="st4" d="M939.4,9.6c-41.2,32.2-128.1,113.5-148.9,241c-40.8-27.2-82.3-44.2-122.7-54.1C736,126.7,892.6-5,939.4,9.6z"
|
||||
/>
|
||||
<path class="st5" d="M667.3,196.7c18-21.7,38.7-41.3,59-60.8c30.9-28.7,63.1-56.1,97.5-80.5c23.1-16.3,47-31.5,73.2-42.8
|
||||
c13.8-5.3,28.2-11.2,43.7-6.9c3.2,0.8,4.1,5.5,1.3,7.4c-48,35.5-89.8,81.2-115,136l-7.3,16.4l-6.3,16.8c-8.3,23.1-13.5,47.2-19,71
|
||||
c-1.4,2.2-4.4,2.7-6.5,1.3c-9.3-6.2-18.7-12.1-28.3-17.7C730.6,220,699.1,207.3,667.3,196.7L667.3,196.7z M668.3,196.4
|
||||
c33.5,5.2,65.5,17.4,95.4,33c10,5.2,19.8,11.1,29.3,17.3l-7.2,3.2c11.1-73.1,51.8-137.4,99-192.5c15.9-18.4,33.2-35.6,52-51.1
|
||||
l1.3,7.4c-34.7-7-111.7,54.4-141.3,75.9C755.4,121.4,714.9,155,676,189.9C673.8,191.8,670.7,194.7,668.3,196.4L668.3,196.4z"/>
|
||||
<path class="st5" d="M667,196.8c9.8-12.7,21.5-23.8,32.5-35.3c56.3-55.7,115.3-109,185.4-147.2C903.6,5.5,934-9.3,952.6,8
|
||||
c8.6,9.3,11,23.4,12.9,34.8c7.6,63.5,0.5,127.1-5.9,190.2c-7.1,62.7-14.3,125.2-20.2,188c-0.1,1.2-0.9,2.5-2.1,3.1
|
||||
c-1.9,1-4.3,0.2-5.3-1.7c-21.3-43.7-51.6-81.8-85.2-116.5c-29-28.5-61.5-53.6-97.1-73.3C723.7,217.7,695.1,206.6,667,196.8
|
||||
L667,196.8z M668.6,196.3c102.9,16.6,200.3,90.3,251,181.1c7.4,13.4,13.7,27.4,19.6,41.3l-7.6,1.2c15.8-93,21.6-187.6,22.5-281.8
|
||||
c0.1-30.9,0.3-62.6-4.6-92.8c-1.5-8.2-3.1-16-6.7-22.5c-2.2-3.9-5.1-5.3-10-5.6c-13.2-0.3-28,6.5-40.3,12.5
|
||||
c-13.6,6.6-26.9,14.5-39.9,22.9c-62,40.5-119.8,87.7-175.4,136.6C674.9,191.3,671.1,194.7,668.6,196.3L668.6,196.3z"/>
|
||||
<path class="st5" d="M368.1,222.4c0,0-27.7,15.2-48.3,39.2c32.8-26.4,66.9-39.2,66.9-39.2H368.1z"/>
|
||||
<path class="st5" d="M51.4,15.6C-13.1,43.9,7.5,316.1,13.6,383c3.6,42.3,8.6,84.5,13.7,126.7c0.9,16.6,3.4,33.8,6.5,50.3
|
||||
c15.8,83.2,49,164.3,101,231.4c162.6,201.4,596.3,285.2,772.8,64.1c93.2-112.3,103.3-255.1,47.5-387.3c-6.8-15.7-14.3-31.3-23-45.7
|
||||
c-9.8-21.3-21.3-41.7-34.7-60.8C858,307,809.5,265.5,746.8,233.1c-117.3-59-260-50.3-377.9,2.6c-1.6,0.8-3.7,0.7-5.2-0.5
|
||||
c-50.3-40.8-98.5-83.9-148.5-125C183.7,85.2,89.5,5.3,51.4,15.6L51.4,15.6z M50.9,14.1c38.2-10.9,133.1,68.2,166.8,93
|
||||
c51.1,39.6,100.6,81.4,152,120.5l-5.2-0.5c10.1-5.3,20.2-9.7,30.6-13.9c113.6-45.9,247.7-50.1,357.9,7.6
|
||||
c38.5,19.3,80,51.8,106.2,79.6c28.3,26.3,63.5,77.6,79.6,117.9c37.5,68.6,57.7,147.2,55.3,225.5c-2,78.7-32.2,155.1-80.9,216.3
|
||||
c-144.1,184.7-435.8,164.2-626.6,69.8c-70.3-34.9-136.1-83.3-181-148.9c-52.9-79.3-87.3-177.1-92-270.3
|
||||
c-12-126.6-19.9-254.6-7-381.4C10.8,98.9,18.7,25.8,50.9,14.1L50.9,14.1z"/>
|
||||
<path class="st2" d="M56.5,68.9c10.8,4.5,48,42.6,88.9,92c33.1,40,68.6,87.5,94.4,130.5C256.3,318.9,134.9,522,113,560.3
|
||||
c-20.1,35.1-64.5-92-76.1-226c-1.1-12-1.8-23.9-2.3-35.9C28.8,152.3,36.9,60.8,56.5,68.9z"/>
|
||||
<path class="st6" d="M327.6,643.2c7.1-85.1,52.7-166.4,117.6-206.6c75-42,139.1-61.4,202.6-61.1l0,0c15.2,0.1,30.5,1.3,45.8,3.6
|
||||
c15,2.3,30.1,5.6,45.5,9.9c66,18.5,208.6,88.2,186.5,282.8c-0.7,5.8-1.5,11.5-2.5,17.2C891,873.9,688.2,995.2,467.4,887.4
|
||||
C358,834,319.8,736.3,327.6,643.2z"/>
|
||||
<path class="st7" d="M636.5,336.4c9.7,2.9,32.2,11.3,56.1-1c23.9-12.3,33.2,15.1,20.5,22.1c-14.4,7.9-18.4,17-19.6,21.7
|
||||
c-15.3-2.3-30.5-3.5-45.8-3.6l0,0c-4.1-7.4-25.4-8.4-33.2-21.1C606.7,341.7,626.8,333.4,636.5,336.4z"/>
|
||||
<path class="st8" d="M386.7,314c6.2-5.8,12.6-10.9,19.1-15.3c58-40,121.3-28.3,130.8-3.7c10.6,27.3-35.8,36.7-64.2,48.6
|
||||
c-25.9,10.8-56.1,30.6-78.7,43.5c-16.6,9.5-29.3,15.3-33.1,11.1C351.5,388.3,342.5,354.9,386.7,314z"/>
|
||||
<path class="st8" d="M773.8,272.5c33.4,12.4,58.6,33.3,75,50.7c11.4,12.1,18.4,22.5,20.9,27.2c6.1,11.4-12.7,14-36.2,5.3
|
||||
c-1-0.4-2.1-0.8-3.2-1.2c-25.3-9-84.3-25.6-101.1-33C705.1,310.9,717.2,251.5,773.8,272.5z"/>
|
||||
<path class="st5" d="M405.8,298.7c58-40,121.3-28.3,130.8-3.7c10.6,27.3-35.8,36.7-64.2,48.6c-25.9,10.8-56.1,30.6-78.7,43.5
|
||||
C370.3,352.9,386.3,320.8,405.8,298.7z"/>
|
||||
<path class="st5" d="M773.8,272.5c33.4,12.4,58.6,33.3,75,50.7c0.6,10.9-2.7,23.7-18.5,31.3c-25.3-9-84.3-25.6-101.1-33
|
||||
C705.1,310.9,717.2,251.5,773.8,272.5z"/>
|
||||
<path class="st5" d="M504.4,274.3c-72.3-19-136.4,35.7-149,74s-0.5,51.9,0,40.6s0-28.9,18-52.9c18.1-24,76-50.5,76-50.5
|
||||
S477.1,292.5,504.4,274.3z"/>
|
||||
<path class="st5" d="M869.5,341.4c-20.4-25.1-54.2-47.2-54.2-47.2s5.1,17,18.1,25.7c13,8.8,37.3,35.8,37.3,35.8
|
||||
S876.6,352.4,869.5,341.4z"/>
|
||||
<path class="st8" d="M504.4,294.2c-8.5,0.9-74.6,10.1-65.2-3.7s34.7-12.3,55.5-10.7C517.1,281.5,512.9,293.4,504.4,294.2z"/>
|
||||
<path class="st8" d="M803.6,314.5c-12.8-6.2-34.7-17.4-31.5-26s27.8,6.4,42.5,14C833.1,312,816.4,320.7,803.6,314.5z"/>
|
||||
<path class="st9" d="M445.2,436.6c75-42,139.1-61.4,202.6-61.1l0,0c15.2,0.1,30.5,1.3,45.8,3.6c15,2.3,30.1,5.6,45.5,9.9
|
||||
c66,18.5,208.6,88.2,186.5,282.7c-0.7,5.8-1.5,11.5-2.5,17.2C859.5,755.1,757.8,798,643,797.9c-139.3,0-259.6-63.2-315.5-154.7
|
||||
C334.6,558.1,380.2,476.8,445.2,436.6z"/>
|
||||
<path class="st5" d="M467,888.1c-4.1-2.1-15-8-19-10.1c-4.3-2.5-13.8-8.5-18.2-11.3c-5.7-3.9-11.5-8.7-17.3-12.6
|
||||
c-12.8-10.7-25.3-22-35.9-35c-51-59.2-67.4-143.5-50-219.2c14.9-66.8,52.5-130.4,110.4-168.2c74.4-43.3,162.1-73,249-60.2
|
||||
c66.6,9.1,131.6,37.9,178.2,87.3c47.5,48.6,68.8,117.8,66.7,185c-0.4,38.6-7.7,77.3-22.3,113.1C871.9,848.2,785.9,914.7,689,928
|
||||
C613.2,939.7,535.3,921.3,467,888.1L467,888.1z M467.7,886.6c103.1,51,224,52.6,322.3-10.2c62.5-40,109.6-104.2,126.4-177.1
|
||||
c12.6-54.7,12.2-114.2-9.7-166.5C878,462.3,811,414,739.3,394.7C633,365.6,539,391.2,446.1,446.3
|
||||
C361.9,503,321.5,614.9,336.4,714.1c5.5,34.6,19.1,68.2,39.4,96.7c3.2,4,7.6,9.9,10.8,13.9c6.6,7.1,14.9,16.4,22.4,22.6l5.2,4.8
|
||||
l5.6,4.3c6.3,5.3,16.2,11.9,23.2,16.3C449.7,877.2,460.6,882.6,467.7,886.6L467.7,886.6z"/>
|
||||
<path class="st10" d="M624.5,349.4c9.9-5,28,14.1,28,14.1C630,361.9,614.5,354.5,624.5,349.4z"/>
|
||||
<path class="st10" d="M709.7,347.4c-8.3-4.5-19.1,16.1-19.1,16.1C701.2,361.2,718,351.9,709.7,347.4z"/>
|
||||
<path class="st3" d="M145.4,160.9c33.1,40,68.6,87.5,94.4,130.5c16.5,27.5-104.9,230.6-126.9,268.9c-20.1,35.1-64.5-92-76.1-226
|
||||
C134.4,390.3,148.1,261.2,145.4,160.9z"/>
|
||||
<path class="st5" d="M239.3,291.7C203,231.8,156.6,179,109.9,127.3C94.3,110.6,78.5,93.1,61,78.7c-2.4-1.8-4.8-3.7-6.8-4.5
|
||||
c-2.9,2.5-5.2,9.1-6.4,13.8c-7.9,33.4-8.7,68.6-9.8,103.1c-0.4,23.2-0.5,46.6-0.3,69.9c-0.2,70,5.5,140.1,23.6,207.9
|
||||
c5.3,20,24.9,86.9,43.7,93.3c1.6-0.1,2.6-1.2,3.6-2.7l0.9-1.5c3.4-7.1,73.1-128.3,78.8-138.8C201.1,395.1,248.5,315.1,239.3,291.7
|
||||
L239.3,291.7z M240.3,291.1c10.1,18.9-35.6,108.8-46,131.3c-23,47.3-49.2,93.1-76.6,137.9c-2,4.1-7.1,10.6-13.3,9.8
|
||||
c-30.8-4.3-55.4-138.4-61-168.9C30.8,332,27.6,261.4,27.8,191.1c0.8-28.9-0.2-103.5,17.4-124.3c7.7-8.1,16.3-2.5,22.8,3
|
||||
c9.4,7.7,17.6,16.1,25.8,24.6C150,154,197.5,221.4,240.3,291.1L240.3,291.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.6 KiB |
@@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="CIRCLE_OUTLINE_BLACK" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E6DAFE;}
|
||||
</style>
|
||||
<circle class="st0" cx="256" cy="256" r="256"/>
|
||||
<path d="M303.4,228.5c0,20.7-16.7,37.5-37.4,37.5v37.5c41.3,0,74.7-33.5,74.7-74.9s-33.5-74.9-74.7-74.9c-13.6,0-26.4,3.6-37.4,10
|
||||
c-22.3,12.9-37.4,37.2-37.4,64.9v187.3l33.6,33.7l3.8,3.8V228.5c0-20.7,16.7-37.5,37.4-37.5S303.4,207.9,303.4,228.5z"/>
|
||||
<path d="M266,78.7c-27.2,0-52.7,7.3-74.7,20.1c-14.1,8.1-26.7,18.5-37.4,30.7c-23.2,26.4-37.4,61.1-37.4,99.1v112.4l37.4,37.5V228.5
|
||||
c0-33.3,14.4-63.2,37.4-83.8c10.8-9.7,23.4-17.3,37.4-22.2c11.7-4.2,24.3-6.4,37.4-6.4c61.9,0,112.1,50.3,112.1,112.4
|
||||
S327.9,340.9,266,340.9v37.5c82.5,0,149.4-67.1,149.4-149.8S348.5,78.7,266,78.7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,37 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 32 36.9" style="enable-background:new 0 0 32 36.9;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:url(#SVGID_2_);}
|
||||
.st2{fill:url(#SVGID_3_);}
|
||||
.st3{fill:url(#SVGID_4_);}
|
||||
</style>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="32.95" y1="26.3048" x2="-0.9788" y2="12.7367" gradientTransform="matrix(1 0 0 -1 0 38)">
|
||||
<stop offset="0" style="stop-color:#C200FB"/>
|
||||
<stop offset="0.4897" style="stop-color:#3772FF"/>
|
||||
<stop offset="1" style="stop-color:#5AC4BE"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M30.3,13.9v12.9L16,35L1.7,26.7V10.2L16,1.9l11,6.4l1.7-1L16,0L0,9.2v18.5l16,9.2l16-9.2V12.9L30.3,13.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="32.2949" y1="27.9428" x2="-1.6339" y2="14.3747" gradientTransform="matrix(1 0 0 -1 0 38)">
|
||||
<stop offset="0" style="stop-color:#C200FB"/>
|
||||
<stop offset="0.4897" style="stop-color:#3772FF"/>
|
||||
<stop offset="1" style="stop-color:#5AC4BE"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M12,26.8H9.6v-8h8c0.8,0,1.5-0.3,2-0.9c0.5-0.5,0.8-1.3,0.8-2c0-0.4-0.1-0.7-0.2-1.1c-0.1-0.3-0.4-0.7-0.6-0.9
|
||||
c-0.3-0.3-0.6-0.5-0.9-0.6S18,13,17.6,13h-8v-2.4h8c1.4,0,2.7,0.6,3.7,1.6c1,1,1.6,2.3,1.6,3.7c0,1.1-0.3,2.1-0.9,3
|
||||
c-0.6,0.8-1.4,1.5-2.3,1.9c-0.9,0.3-1.9,0.4-2.9,0.4H12V26.8z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="35.6876" y1="19.4591" x2="1.7588" y2="5.891" gradientTransform="matrix(1 0 0 -1 0 38)">
|
||||
<stop offset="0" style="stop-color:#C200FB"/>
|
||||
<stop offset="0.4897" style="stop-color:#3772FF"/>
|
||||
<stop offset="1" style="stop-color:#5AC4BE"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M22.8,26.6H20l-2.2-3.8c0.9-0.1,1.7-0.2,2.5-0.5L22.8,26.6z"/>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="32.0678" y1="28.5037" x2="-1.861" y2="14.9356" gradientTransform="matrix(1 0 0 -1 0 38)">
|
||||
<stop offset="0" style="stop-color:#C200FB"/>
|
||||
<stop offset="0.4897" style="stop-color:#3772FF"/>
|
||||
<stop offset="1" style="stop-color:#5AC4BE"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M28.7,11.2l1.7,0.9l1.7-0.9V9.2l-1.7-1l-1.7,1V11.2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.08398 5.22265C7.17671 5.08355 7.33282 5 7.5 5H18.5C18.6844 5 18.8538 5.10149 18.9408 5.26407C19.0278 5.42665 19.0183 5.62392 18.916 5.77735L16.916 8.77735C16.8233 8.91645 16.6672 9 16.5 9H5.5C5.3156 9 5.14617 8.89851 5.05916 8.73593C4.97215 8.57335 4.98169 8.37608 5.08398 8.22265L7.08398 5.22265ZM7.76759 6L6.43426 8H16.2324L17.5657 6H7.76759Z" fill="#fff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.08398 15.2226C7.17671 15.0836 7.33282 15 7.5 15H18.5C18.6844 15 18.8538 15.1015 18.9408 15.2641C19.0278 15.4267 19.0183 15.6239 18.916 15.7774L16.916 18.7774C16.8233 18.9164 16.6672 19 16.5 19H5.5C5.3156 19 5.14617 18.8985 5.05916 18.7359C4.97215 18.5734 4.98169 18.3761 5.08398 18.2226L7.08398 15.2226ZM7.76759 16L6.43426 18H16.2324L17.5657 16H7.76759Z" fill="#fff"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.08398 13.7774C7.17671 13.9164 7.33282 14 7.5 14H18.5C18.6844 14 18.8538 13.8985 18.9408 13.7359C19.0278 13.5733 19.0183 13.3761 18.916 13.2226L16.916 10.2226C16.8233 10.0836 16.6672 10 16.5 10H5.5C5.3156 10 5.14617 10.1015 5.05916 10.2641C4.97215 10.4267 4.98169 10.6239 5.08398 10.7774L7.08398 13.7774ZM7.76759 13L6.43426 11H16.2324L17.5657 13H7.76759Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,4 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.6109 4.68601C4.72546 4.54406 4.90822 4.47575 5.0878 4.50778L16.575 6.55656C16.6715 6.57377 16.7608 6.61896 16.8318 6.68651L19.3446 9.07676C19.5379 9.26064 19.5528 9.5639 19.3784 9.76583L11.122 19.3268C11.0084 19.4583 10.8347 19.5214 10.6632 19.4935C10.4917 19.4656 10.347 19.3506 10.281 19.1898L4.53742 5.18979C4.46819 5.02103 4.49635 4.82796 4.6109 4.68601ZM6.19646 6.59904L10.4853 17.053L11.2894 10.6786L6.19646 6.59904ZM12.2688 10.9045L11.4468 17.4207L17.7491 10.1226L12.2688 10.9045ZM17.9075 9.08986L13.7298 9.68594L16.4453 7.69901L17.9075 9.08986ZM15.2483 7.33573L6.84451 5.83688L11.8343 9.83381L15.2483 7.33573Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 912 B |
@@ -1,52 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 400 432.7" style="enable-background:new 0 0 400 432.7;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F50DB4;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#F50DB4;}
|
||||
</style>
|
||||
<path class="st0" d="M325.1,65.4c0.6-10.2,2-17,4.8-23.1c1.1-2.4,2.1-4.4,2.3-4.4s-0.3,1.8-1.1,4c-2,6-2.4,14.2-1,23.7
|
||||
c1.8,12.1,2.8,13.8,15.6,26.9c6,6.1,13,13.8,15.5,17.1l4.6,6l-4.6-4.3c-5.6-5.3-18.6-15.5-21.4-17c-1.9-1-2.2-1-3.4,0.2
|
||||
c-1.1,1.1-1.3,2.7-1.5,10.4c-0.2,12-1.9,19.7-5.8,27.3c-2.1,4.2-2.5,3.3-0.5-1.4c1.4-3.5,1.6-5,1.6-16.6c0-23.3-2.8-28.9-19.1-38.5
|
||||
c-4.1-2.4-10.9-5.9-15.1-7.8c-4.2-1.9-7.5-3.5-7.4-3.6c0.5-0.5,16.3,4.2,22.7,6.6c9.5,3.6,11.1,4.1,12.2,3.7
|
||||
C324.4,74.2,324.8,72,325.1,65.4z"/>
|
||||
<path class="st0" d="M124.4,31.5c-5.6-0.9-5.9-1-3.2-1.4c5.1-0.8,17.1,0.3,25.4,2.2c19.3,4.6,36.9,16.3,55.6,37l5,5.5l7.1-1.1
|
||||
c30-4.8,60.6-1,86.1,10.8c7,3.2,18.1,9.7,19.5,11.3c0.4,0.5,1.3,3.9,1.8,7.5c1.9,12.5,0.9,22.1-2.9,29.3c-2.1,3.9-2.2,5.1-0.8,8.5
|
||||
c1.1,2.7,4.3,4.6,7.4,4.6c6.3,0,13.2-10.2,16.3-24.4l1.3-5.6l2.5,2.8c13.7,15.4,24.4,36.4,26.2,51.3l0.5,3.9l-2.3-3.5
|
||||
c-4-6.1-7.9-10.2-13-13.6c-9.2-6-18.9-8.1-44.5-9.4c-23.2-1.2-36.3-3.2-49.3-7.4c-22.1-7.2-33.3-16.7-59.6-51.1
|
||||
c-11.7-15.2-18.9-23.7-26.1-30.5C161,42.8,145,34.7,124.4,31.5z"/>
|
||||
<path class="st0" d="M135.4,105.3c-11.4-15.7-18.5-39.7-17-57.6l0.5-5.6l2.6,0.5c4.9,0.9,13.3,4,17.3,6.4
|
||||
c10.8,6.5,15.5,15.2,20.3,37.3c1.4,6.5,3.2,13.8,4.1,16.3c1.4,4,6.5,13.3,10.7,19.4c3,4.4,1,6.4-5.6,5.8
|
||||
C158,126.9,144.2,117.5,135.4,105.3z"/>
|
||||
<path class="st0" d="M311.3,221.9c-53.5-21.4-72.3-40-72.3-71.4c0-4.6,0.2-8.4,0.4-8.4c0.2,0,2.3,1.5,4.6,3.4
|
||||
c10.8,8.6,23,12.3,56.6,17.2c19.8,2.9,30.9,5.2,41.2,8.6c32.6,10.8,52.8,32.6,57.6,62.4c1.4,8.6,0.6,24.9-1.7,33.4
|
||||
c-1.8,6.7-7.3,18.9-8.7,19.4c-0.4,0.1-0.8-1.4-0.9-3.5c-0.6-11.2-6.2-22-15.8-30.2C361.4,243.6,346.9,236.2,311.3,221.9z"/>
|
||||
<path class="st0" d="M273.7,230.8c-0.7-4-1.8-9-2.6-11.3l-1.4-4l2.5,2.8c3.5,3.9,6.3,8.9,8.6,15.6c1.8,5.1,2,6.6,2,14.9
|
||||
c0,8.1-0.2,9.8-1.9,14.4c-2.6,7.2-5.8,12.4-11.3,17.9c-9.8,9.9-22.3,15.4-40.4,17.6c-3.1,0.4-12.3,1.1-20.4,1.5
|
||||
c-20.3,1.1-33.7,3.2-45.8,7.4c-1.7,0.6-3.3,1-3.4,0.8c-0.5-0.5,7.7-5.3,14.5-8.6c9.5-4.6,19-7.1,40.3-10.6
|
||||
c10.5-1.7,21.4-3.9,24.1-4.7C264.6,276.7,278,256.2,273.7,230.8z"/>
|
||||
<path class="st0" d="M298.2,274.1c-7.1-15.2-8.7-29.9-4.8-43.5c0.4-1.5,1.1-2.7,1.5-2.7c0.4,0,2.1,0.9,3.7,2
|
||||
c3.3,2.2,9.8,5.9,27.3,15.4c21.8,11.8,34.3,21,42.7,31.5c7.4,9.2,12,19.6,14.2,32.3c1.3,7.2,0.5,24.6-1.3,31.8
|
||||
c-5.9,22.9-19.5,40.9-39,51.4c-2.9,1.5-5.4,2.8-5.7,2.8c-0.3,0,0.8-2.6,2.3-5.8c6.5-13.6,7.3-26.8,2.3-41.6c-3-9-9.2-20-21.7-38.6
|
||||
C305.4,287.5,301.8,281.7,298.2,274.1z"/>
|
||||
<path class="st0" d="M97.4,356.1c19.8-16.7,44.5-28.5,67-32.1c9.7-1.6,25.8-0.9,34.8,1.3c14.4,3.7,27.3,11.9,33.9,21.6
|
||||
c6.5,9.5,9.3,17.9,12.3,36.4c1.2,7.3,2.4,14.6,2.8,16.3c2.2,9.6,6.5,17.3,11.8,21.1c8.4,6.1,22.9,6.5,37.1,1
|
||||
c2.4-0.9,4.5-1.6,4.7-1.4c0.5,0.5-6.7,5.3-11.7,7.8c-6.8,3.4-12.2,4.7-19.4,4.7c-13,0-23.9-6.6-32.9-20c-1.8-2.6-5.8-10.6-8.9-17.6
|
||||
c-9.5-21.6-14.2-28.2-25.3-35.4c-9.6-6.3-22.1-7.4-31.4-2.8c-12.3,6-15.7,21.6-6.9,31.5c3.5,3.9,10,7.3,15.3,8
|
||||
c10,1.2,18.5-6.3,18.5-16.3c0-6.5-2.5-10.2-8.8-13.1c-8.6-3.9-17.9,0.7-17.9,8.7c0,3.4,1.5,5.6,5,7.2c2.2,1,2.3,1.1,0.5,0.7
|
||||
c-7.9-1.6-9.8-11.1-3.4-17.4c7.7-7.6,23.5-4.2,28.9,6.1c2.3,4.3,2.5,13,0.6,18.2c-4.5,11.7-17.4,17.8-30.6,14.5
|
||||
c-9-2.3-12.6-4.7-23.4-15.8c-18.8-19.3-26.1-23-53.2-27.2l-5.2-0.8L97.4,356.1z"/>
|
||||
<path class="st1" d="M9.2,11.5c62.8,75.7,106,107,110.8,113.6c4,5.5,2.5,10.4-4.3,14.2c-3.8,2.1-11.5,4.3-15.4,4.3
|
||||
c-4.4,0-5.9-1.7-5.9-1.7c-2.6-2.4-4-2-17.1-25.1C59.1,88.8,43.9,65.5,43.5,65.1c-1-0.9-0.9-0.9,32,57.7c5.3,12.2,1.1,16.7,1.1,18.4
|
||||
c0,3.5-1,5.4-5.4,10.3c-7.3,8.1-10.6,17.2-12.9,36.1c-2.6,21.1-10.1,36.1-30.7,61.6c-12.1,15-14,17.7-17.1,23.7
|
||||
c-3.8,7.6-4.9,11.9-5.3,21.4c-0.5,10.1,0.4,16.7,3.5,26.4c2.7,8.5,5.6,14.1,12.9,25.3c6.3,9.7,9.9,16.9,9.9,19.7
|
||||
c0,2.2,0.4,2.2,10.2,0.1c23.3-5.2,42.2-14.4,52.8-25.7c6.6-7,8.1-10.8,8.2-20.4c0-6.3-0.2-7.6-1.9-11.2c-2.8-5.9-7.8-10.7-18.9-18.3
|
||||
c-14.5-9.9-20.8-17.9-22.5-28.8c-1.4-9,0.2-15.3,8.3-32.1c8.3-17.4,10.4-24.8,11.8-42.3c0.9-11.3,2.2-15.8,5.4-19.3
|
||||
c3.4-3.7,6.5-5,14.9-6.1c13.7-1.9,22.5-5.4,29.7-12c6.2-5.7,8.9-11.2,9.3-19.5l0.3-6.3l-3.5-4C122.8,105.1,0.8,0,0,0
|
||||
C-0.2,0,4,5.2,9.2,11.5z M38.5,305.9c2.9-5,1.3-11.5-3.4-14.7c-4.5-3-11.5-1.6-11.5,2.3c0,1.2,0.7,2.1,2.1,2.8
|
||||
c2.5,1.3,2.7,2.7,0.7,5.7c-2,3-1.8,5.6,0.5,7.4C30.5,312.3,35.7,310.7,38.5,305.9z"/>
|
||||
<path class="st1" d="M147.6,164.9c-6.5,2-12.7,8.8-14.7,15.9c-1.2,4.4-0.5,12,1.3,14.3c2.9,3.8,5.6,4.8,13.1,4.8
|
||||
c14.7-0.1,27.5-6.4,29-14.2c1.2-6.4-4.4-15.3-12.1-19.2C160.2,164.4,151.7,163.6,147.6,164.9z M164.8,178.3c2.3-3.2,1.3-6.7-2.6-9
|
||||
c-7.3-4.5-18.4-0.8-18.4,6.1c0,3.4,5.8,7.2,11.1,7.2C158.4,182.6,163.2,180.5,164.8,178.3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M48 95C73.9574 95 95 73.9574 95 48C95 22.0426 73.9574 1 48 1C22.0426 1 1 22.0426 1 48C1 73.9574 22.0426 95 48 95Z" fill="#0B53BF"/>
|
||||
<path d="M56.4609 13.7778V19.8291C68.5341 23.4716 77.3759 34.6928 77.3759 47.9997C77.3759 61.3066 68.5341 72.5278 56.4609 76.1703V82.2216C71.8534 78.4616 83.2509 64.5672 83.2509 47.9997C83.2509 31.4322 71.8534 17.5378 56.4609 13.7778Z" fill="white"/>
|
||||
<path d="M18.625 47.9997C18.625 34.6928 27.4669 23.4716 39.54 19.8291V13.7778C24.1475 17.5378 12.75 31.4322 12.75 47.9997C12.75 64.5672 24.1475 78.4616 39.54 82.2216V76.1703C27.4669 72.5572 18.625 61.3066 18.625 47.9997Z" fill="white"/>
|
||||
<path d="M60.6319 54.5506C60.6319 42.5362 41.8025 47.4713 41.8025 40.8325C41.8025 38.4531 43.7119 36.9256 47.3544 36.9256C51.7019 36.9256 53.2 39.0406 53.67 41.89H59.6625C59.1279 36.5426 56.0588 33.1662 50.9382 32.1604V27.4375H45.0632V31.9918C39.4534 32.7062 35.9275 35.973 35.9275 40.8325C35.9275 52.9056 54.7863 48.3819 54.7863 54.9031C54.7863 57.3706 52.4069 59.0156 48.3825 59.0156C43.1244 59.0156 41.3913 56.695 40.745 53.4931H34.8994C35.2781 59.3502 38.8897 63.0159 45.0632 63.9307V68.5625H50.9382V63.9923C56.9633 63.2139 60.6319 59.7089 60.6319 54.5506Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1 +0,0 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 339.43 295.27"><title>tether-usdt-logo</title><path d="M62.15,1.45l-61.89,130a2.52,2.52,0,0,0,.54,2.94L167.95,294.56a2.55,2.55,0,0,0,3.53,0L338.63,134.4a2.52,2.52,0,0,0,.54-2.94l-61.89-130A2.5,2.5,0,0,0,275,0H64.45a2.5,2.5,0,0,0-2.3,1.45h0Z" style="fill:#50af95;fill-rule:evenodd"/><path d="M191.19,144.8v0c-1.2.09-7.4,0.46-21.23,0.46-11,0-18.81-.33-21.55-0.46v0c-42.51-1.87-74.24-9.27-74.24-18.13s31.73-16.25,74.24-18.15v28.91c2.78,0.2,10.74.67,21.74,0.67,13.2,0,19.81-.55,21-0.66v-28.9c42.42,1.89,74.08,9.29,74.08,18.13s-31.65,16.24-74.08,18.12h0Zm0-39.25V79.68h59.2V40.23H89.21V79.68H148.4v25.86c-48.11,2.21-84.29,11.74-84.29,23.16s36.18,20.94,84.29,23.16v82.9h42.78V151.83c48-2.21,84.12-11.73,84.12-23.14s-36.09-20.93-84.12-23.15h0Zm0,0h0Z" style="fill:#fff;fill-rule:evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 874 B |
@@ -1,47 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 696.8 697.9" style="enable-background:new 0 0 696.8 697.9;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:url(#SVGID_2_);}
|
||||
.st2{fill:url(#SVGID_3_);}
|
||||
.st3{fill:url(#SVGID_4_);}
|
||||
</style>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="716.2648" y1="102.511" x2="-52.0246" y2="621.5151" gradientTransform="matrix(1 0 0 -1 0 700)">
|
||||
<stop offset="0" style="stop-color:#0F0C48"/>
|
||||
<stop offset="1" style="stop-color:#262769"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M348.4,697.9c-92.3-0.1-180.9-36.8-246.2-102.2C36.9,530.3,0.1,441.5,0,349c0.1-92.6,36.9-181.3,102.2-246.7
|
||||
C167.5,36.9,256.1,0.1,348.4,0c92.3,0.1,180.9,36.9,246.2,102.3c65.3,65.4,102.1,154.1,102.2,246.7
|
||||
c-0.1,92.6-36.9,181.3-102.2,246.7S440.7,697.9,348.4,697.9z M348.4,26.9c-85.2,0.1-166.9,34-227.2,94.4
|
||||
C60.9,181.6,26.9,263.5,26.8,349c0.1,85.4,34,167.4,94.3,227.8c60.3,60.4,142,94.3,227.3,94.3c85.2,0,167-33.9,227.3-94.3
|
||||
C636,516.3,669.9,434.4,670,349c-0.1-85.4-34.1-167.3-94.3-227.7C515.3,60.9,433.6,26.9,348.4,26.9L348.4,26.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="697.22" y1="140.5214" x2="60.6977" y2="570.4864" gradientTransform="matrix(1 0 0 -1 0 700)">
|
||||
<stop offset="0" style="stop-color:#0F0C48"/>
|
||||
<stop offset="1" style="stop-color:#262769"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M392.4,642.7c-76.5-0.1-149.8-30.5-203.9-84.7c-54.1-54.2-84.6-127.7-84.7-204.4
|
||||
c0.1-76.7,30.6-150.2,84.7-204.4C242.6,95,315.9,64.5,392.4,64.5c76.5,0.1,149.8,30.5,203.9,84.7c54.1,54.2,84.6,127.7,84.7,204.4
|
||||
c-0.1,76.7-30.6,150.2-84.7,204.4C542.3,612.2,468.9,642.7,392.4,642.7z M392.4,85.3c-71,0.1-139,28.3-189.2,78.6
|
||||
s-78.4,118.5-78.6,189.6c0.1,71.1,28.4,139.3,78.6,189.6c50.2,50.3,118.2,78.5,189.2,78.6c71-0.1,139-28.3,189.2-78.6
|
||||
c50.2-50.3,78.5-118.5,78.6-189.6c-0.1-71.1-28.4-139.3-78.6-189.6C531.4,113.7,463.4,85.4,392.4,85.3L392.4,85.3z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="678.1428" y1="178.4569" x2="173.4188" y2="519.3949" gradientTransform="matrix(1 0 0 -1 0 700)">
|
||||
<stop offset="0" style="stop-color:#0F0C48"/>
|
||||
<stop offset="1" style="stop-color:#262769"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M436.5,587.5c-60.7,0-118.8-24.2-161.7-67.2c-42.9-43-67.1-101.3-67.1-162.1c0.1-60.8,24.2-119.1,67.1-162.1
|
||||
s101.1-67.1,161.7-67.2c60.7,0,118.8,24.2,161.7,67.2c42.9,43,67,101.3,67.1,162.1c-0.1,60.8-24.2,119.1-67.1,162.1
|
||||
C555.3,563.3,497.1,587.5,436.5,587.5L436.5,587.5z M436.5,144c-56.7,0-111.1,22.6-151.2,62.8c-40.1,40.2-62.7,94.7-62.8,151.5
|
||||
c0.1,56.8,22.7,111.3,62.8,151.5s94.5,62.8,151.2,62.8c56.7,0,111.1-22.6,151.2-62.8c40.1-40.2,62.7-94.7,62.8-151.5
|
||||
c-0.1-56.9-22.7-111.4-62.8-151.5C547.5,166.6,493.2,144,436.5,144L436.5,144z"/>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="659.0872" y1="216.4527" x2="286.1323" y2="468.3527" gradientTransform="matrix(1 0 0 -1 0 700)">
|
||||
<stop offset="0" style="stop-color:#0F0C48"/>
|
||||
<stop offset="1" style="stop-color:#262769"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M480.5,532.3c-44.8,0-87.8-17.9-119.5-49.6c-31.7-31.8-49.5-74.8-49.6-119.7c0.1-44.9,17.9-88,49.6-119.8
|
||||
c31.7-31.8,74.7-49.6,119.5-49.7c44.8,0,87.8,17.9,119.5,49.7c31.7,31.8,49.5,74.8,49.6,119.8c-0.1,44.9-17.9,88-49.6,119.7
|
||||
C568.3,514.4,525.3,532.3,480.5,532.3L480.5,532.3z M480.5,202.5c-42.5,0-83.2,17-113.2,47c-30,30.1-46.9,70.9-47,113.4
|
||||
c0.1,42.6,17,83.3,47,113.4c30,30.1,70.7,47,113.2,47c42.4,0,83.1-16.9,113.2-47c30-30.1,46.9-70.9,47-113.4
|
||||
c-0.1-42.6-17-83.4-47-113.4C563.7,219.4,523,202.5,480.5,202.5z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB |
@@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#EFBFA8;}
|
||||
</style>
|
||||
<path class="st0" d="M300,0C134.3,0,0,134.3,0,300s134.3,300,300,300s300-134.3,300-300S465.7,0,300,0z M449,347
|
||||
c-13-29-61-93-131-86c-73,8-156,49-180,109c-37-29-5-79,17-102c-5-22,9-70,17-90c3-17,17-29,24-32c-1-12,20-18,30-20l1-2
|
||||
c3-9,6-20,32-28c22-8,42,12,50,23c2-6,10-15,18-8c72,11,96,90,100,127c14,10,43,36,50,60c7,29-1,35-11,43l-2,2
|
||||
C459,349,453,349,449,347z M435,378c-15.7,65.8-68.5,116.3-135,129c-42,0-109-66-128-97c-39-3-30-23-21-32l-5-2c18-42,69-92,169-104
|
||||
c55-7,97,32,122,72C438,357,437,371,435,378z M216,328c6,15,24,39,50,11C264,331,250,317,216,328z M256,470c-4-6,20-9,32-10l16-4
|
||||
c3-13-3-14-6-13c-24,2-22-26-16-35c7-8,22-5,27-4c5,2,13,0,16-1c15-1,14,17,11,26c-1,12-18,16-26,16c-1,9,1,13,3,13l34,8
|
||||
c13,5,6,6,0,7c-17-11-29-7-37-5l-6,2c-14-5-29-4-35-2C266,471,259,475,256,470z M345,344c1-12,13-32,48-14C388,342,371,361,345,344z
|
||||
"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
29
src/shared/lib/hooks/useInView.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
export function useInView<T extends HTMLElement = HTMLElement>(
|
||||
options?: IntersectionObserverInit & { once?: boolean },
|
||||
) {
|
||||
const { once = true, ...observerOptions } = options ?? {}
|
||||
const ref = useRef<T>(null)
|
||||
const [inView, setInView] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current
|
||||
if (!el) return
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setInView(true)
|
||||
if (once) observer.disconnect()
|
||||
} else if (!once) {
|
||||
setInView(false)
|
||||
}
|
||||
}, observerOptions)
|
||||
|
||||
observer.observe(el)
|
||||
return () => observer.disconnect()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [once])
|
||||
|
||||
return { ref, inView }
|
||||
}
|
||||
@@ -75,6 +75,18 @@
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
/* Настоящий логотип уже круглый и цветной — подложка не нужна. */
|
||||
.currencyHasLogo {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.currencyImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.field {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { getCoinIcon } from '@shared/assets/coins'
|
||||
import styles from './ConvertField.module.css'
|
||||
|
||||
export type Currency = 'USDT' | 'RUB'
|
||||
@@ -30,11 +31,17 @@ export function ConvertField({ label, value, currency, onChange, error, compact
|
||||
inputMode={readOnly ? undefined : 'decimal'}
|
||||
/>
|
||||
<div className={styles.currency}>
|
||||
<span
|
||||
className={`${styles.currencyIcon} ${currency === 'USDT' ? styles.currencyUsdt : styles.currencyRub}`}
|
||||
>
|
||||
{currency === 'USDT' ? '₮' : '₽'}
|
||||
</span>
|
||||
{currency === 'USDT' && getCoinIcon('USDT') ? (
|
||||
<span className={`${styles.currencyIcon} ${styles.currencyHasLogo}`}>
|
||||
<img src={getCoinIcon('USDT')} alt="USDT" className={styles.currencyImg} />
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={`${styles.currencyIcon} ${currency === 'USDT' ? styles.currencyUsdt : styles.currencyRub}`}
|
||||
>
|
||||
{currency === 'USDT' ? '₮' : '₽'}
|
||||
</span>
|
||||
)}
|
||||
{currency}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,11 +53,30 @@
|
||||
gap: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 0 12px;
|
||||
transition: all 0.2s ease;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
border-left-color 0.2s ease,
|
||||
opacity 0.6s ease,
|
||||
transform 0.6s ease;
|
||||
cursor: default;
|
||||
border-left: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
|
||||
.right[data-inview] .row {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.row {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: background 0.2s ease, border-left-color 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.row[data-last] {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { Pill } from '@shared/ui'
|
||||
import { useInView } from '@shared/lib/hooks/useInView'
|
||||
import styles from './About.module.css'
|
||||
import { Title } from '@shared/ui/Title/Title'
|
||||
|
||||
@@ -11,6 +12,7 @@ const THESES = [
|
||||
|
||||
export function About() {
|
||||
const [hovered, setHovered] = useState(-1)
|
||||
const { ref, inView } = useInView<HTMLDivElement>({ threshold: 0.2 })
|
||||
|
||||
return (
|
||||
<section id="about" className={styles.section}>
|
||||
@@ -29,12 +31,13 @@ export function About() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.right}>
|
||||
<div ref={ref} className={styles.right} data-inview={inView || undefined}>
|
||||
<div className={styles.glow} />
|
||||
{THESES.map((text, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={styles.row}
|
||||
style={{ transitionDelay: `${i * 150}ms` }}
|
||||
data-hovered={hovered === i || undefined}
|
||||
data-last={i === THESES.length - 1 || undefined}
|
||||
onMouseEnter={() => setHovered(i)}
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
type Chain, type JumperToken, type WalletBalanceData, type JumperQuote, type JumperQuotePayload,
|
||||
type RelayQuotePayload,
|
||||
} from '@features/wallet'
|
||||
import { getCoinIcon } from '@shared/assets/coins'
|
||||
import { Notification, PrimaryButton, Spinner } from '@shared/ui'
|
||||
import { ROUTES } from '@shared/config/routes'
|
||||
import { useDebounce } from '@shared/lib/hooks/useDebounce'
|
||||
@@ -51,7 +52,7 @@ function mapJumperToken(t: JumperToken): Token {
|
||||
symbol: t.symbol,
|
||||
letter: meta?.letter ?? t.symbol[0],
|
||||
color: meta?.color ?? '#888',
|
||||
logo: t.logoURI ?? meta?.logo,
|
||||
logo: t.logoURI ?? meta?.logo ?? getCoinIcon(t.symbol),
|
||||
network: NET_BY_CHAIN_ID[String(t.chainId)] ?? t.symbol,
|
||||
balance: 0,
|
||||
usdRate: parseFloat(t.priceUSD) || 0,
|
||||
|
||||
@@ -63,6 +63,9 @@
|
||||
@media (max-width: 1024px) {
|
||||
.nav {
|
||||
padding: 10px 32px;
|
||||
/* blur(20px) на fixed-шапке — самый дорогой эффект при скролле на мобильных */
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(10, 11, 46, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +1,28 @@
|
||||
import logo from '@shared/assets/logo-full-white.png'
|
||||
import styles from './Header.module.css'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { ROUTES } from '@shared/config/routes'
|
||||
|
||||
export function Header() {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const goToAbout = (e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
if (location.pathname === ROUTES.HOME) {
|
||||
document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })
|
||||
} else {
|
||||
navigate(ROUTES.HOME, { state: { scrollTo: 'about' } })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className={styles.nav}>
|
||||
<a className={styles.logo} href="/">
|
||||
<img src={logo} alt="ЭКСА" />
|
||||
</a>
|
||||
<div className={styles.right}>
|
||||
<a className={styles.link} href="#about">
|
||||
<a className={styles.link} href="#about" onClick={goToAbout}>
|
||||
О нас
|
||||
</a>
|
||||
<Link className={styles.btn} to={ROUTES.WALLET}>
|
||||
|
||||
83
src/widgets/hero/model/useConversionCycle.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
interface ConversionPair {
|
||||
rub: string
|
||||
usdt: string
|
||||
}
|
||||
|
||||
const PAIRS: ConversionPair[] = [
|
||||
{ rub: '10 000 ₽', usdt: '≈ 125.3 USDT' },
|
||||
{ rub: '25 000 ₽', usdt: '≈ 313.3 USDT' },
|
||||
{ rub: '50 000 ₽', usdt: '≈ 626.5 USDT' },
|
||||
{ rub: '100 000 ₽', usdt: '≈ 1 253.1 USDT' },
|
||||
]
|
||||
|
||||
const ERASE_MS = 40
|
||||
const TYPE_MS = 75
|
||||
const PAUSE_MS = 3500
|
||||
const TRANSFER_MS = 900
|
||||
|
||||
export type ActiveField = 'rub' | 'usdt' | null
|
||||
|
||||
export function useConversionCycle() {
|
||||
const [rub, setRub] = useState(PAIRS[0].rub)
|
||||
const [usdt, setUsdt] = useState(PAIRS[0].usdt)
|
||||
const [active, setActive] = useState<ActiveField>(null)
|
||||
const [settled, setSettled] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
let alive = true
|
||||
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
|
||||
|
||||
const erase = async (text: string, set: (s: string) => void) => {
|
||||
for (let n = text.length - 1; n >= 0 && alive; n--) {
|
||||
set(text.slice(0, n))
|
||||
await sleep(ERASE_MS)
|
||||
}
|
||||
}
|
||||
|
||||
const type = async (text: string, set: (s: string) => void) => {
|
||||
for (let n = 1; n <= text.length && alive; n++) {
|
||||
set(text.slice(0, n))
|
||||
await sleep(TYPE_MS)
|
||||
}
|
||||
}
|
||||
|
||||
const run = async () => {
|
||||
let i = 0
|
||||
while (alive) {
|
||||
await sleep(PAUSE_MS)
|
||||
if (!alive) return
|
||||
const cur = PAIRS[i % PAIRS.length]
|
||||
const next = PAIRS[(i + 1) % PAIRS.length]
|
||||
|
||||
setSettled(false)
|
||||
setActive('rub')
|
||||
await erase(cur.rub, setRub)
|
||||
await type(next.rub, setRub)
|
||||
|
||||
// пауза — «средства идут» по траектории к USDT
|
||||
setActive(null)
|
||||
await sleep(TRANSFER_MS)
|
||||
if (!alive) return
|
||||
|
||||
setActive('usdt')
|
||||
await erase(cur.usdt, setUsdt)
|
||||
await type(next.usdt, setUsdt)
|
||||
|
||||
setActive(null)
|
||||
setSettled(true)
|
||||
i++
|
||||
}
|
||||
}
|
||||
|
||||
run()
|
||||
return () => {
|
||||
alive = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { rub, usdt, active, settled }
|
||||
}
|
||||
63
src/widgets/hero/model/useParallax.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
/**
|
||||
* Пишет нормализованные координаты в CSS-переменные --mx/--my на самой
|
||||
* секции; слои фона сдвигаются от них в CSS со своим коэффициентом глубины.
|
||||
*
|
||||
* Источник координат зависит от устройства:
|
||||
* - мышь (hover + fine pointer) — позиция курсора внутри секции (-1..1);
|
||||
* - тач — прогресс прокрутки секции, орб плавно уплывает при скролле.
|
||||
*/
|
||||
export function useParallax<T extends HTMLElement>() {
|
||||
const ref = useRef<T>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current
|
||||
if (!el) return
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
|
||||
const onMove = (e: MouseEvent) => {
|
||||
const rect = el.getBoundingClientRect()
|
||||
const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2
|
||||
const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2
|
||||
el.style.setProperty('--mx', x.toFixed(3))
|
||||
el.style.setProperty('--my', y.toFixed(3))
|
||||
}
|
||||
|
||||
const onLeave = () => {
|
||||
el.style.setProperty('--mx', '0')
|
||||
el.style.setProperty('--my', '0')
|
||||
}
|
||||
|
||||
el.addEventListener('mousemove', onMove)
|
||||
el.addEventListener('mouseleave', onLeave)
|
||||
return () => {
|
||||
el.removeEventListener('mousemove', onMove)
|
||||
el.removeEventListener('mouseleave', onLeave)
|
||||
}
|
||||
}
|
||||
|
||||
let raf = 0
|
||||
const onScroll = () => {
|
||||
if (raf) return
|
||||
raf = requestAnimationFrame(() => {
|
||||
raf = 0
|
||||
const rect = el.getBoundingClientRect()
|
||||
const progress = Math.min(Math.max(-rect.top / rect.height, 0), 1)
|
||||
// >1 по модулю — усиливаем дрейф, т.к. скролл-диапазон уже курсорного
|
||||
el.style.setProperty('--mx', (progress * 0.6).toFixed(3))
|
||||
el.style.setProperty('--my', (progress * -1.4).toFixed(3))
|
||||
})
|
||||
}
|
||||
|
||||
onScroll()
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onScroll)
|
||||
cancelAnimationFrame(raf)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return ref
|
||||
}
|
||||
37
src/widgets/hero/model/useTilt.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
/**
|
||||
* 3D-наклон элемента за курсором: пишет углы в CSS-переменные
|
||||
* --rx/--ry на самом элементе, transform задаётся в CSS.
|
||||
*/
|
||||
export function useTilt<T extends HTMLElement>(maxDeg = 7) {
|
||||
const ref = useRef<T>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current
|
||||
if (!el) return
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
const onMove = (e: MouseEvent) => {
|
||||
const rect = el.getBoundingClientRect()
|
||||
const x = (e.clientX - rect.left) / rect.width - 0.5
|
||||
const y = (e.clientY - rect.top) / rect.height - 0.5
|
||||
el.style.setProperty('--ry', `${(x * maxDeg).toFixed(2)}deg`)
|
||||
el.style.setProperty('--rx', `${(-y * maxDeg).toFixed(2)}deg`)
|
||||
}
|
||||
|
||||
const onLeave = () => {
|
||||
el.style.setProperty('--rx', '0deg')
|
||||
el.style.setProperty('--ry', '0deg')
|
||||
}
|
||||
|
||||
el.addEventListener('mousemove', onMove)
|
||||
el.addEventListener('mouseleave', onLeave)
|
||||
return () => {
|
||||
el.removeEventListener('mousemove', onMove)
|
||||
el.removeEventListener('mouseleave', onLeave)
|
||||
}
|
||||
}, [maxDeg])
|
||||
|
||||
return ref
|
||||
}
|
||||
@@ -2,6 +2,11 @@
|
||||
position: relative;
|
||||
width: 420px;
|
||||
height: 460px;
|
||||
/* tilt за курсором: --rx/--ry пишет useTilt */
|
||||
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
|
||||
transition: transform 0.25s ease-out;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -22,6 +27,7 @@
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cardEksa {
|
||||
@@ -30,8 +36,12 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
/* непрозрачная подложка, чтобы траектория не просвечивала под логотипом */
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%),
|
||||
var(--bg-mid);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
animation: glowPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cardUsdt {
|
||||
@@ -42,6 +52,7 @@
|
||||
background: rgba(38, 161, 123, 0.12);
|
||||
border: 1px solid rgba(38, 161, 123, 0.3);
|
||||
box-shadow: 0 0 24px rgba(38, 161, 123, 0.25);
|
||||
animation: float 6s ease-in-out 1.8s infinite;
|
||||
}
|
||||
|
||||
.eksaLogo {
|
||||
@@ -69,11 +80,13 @@
|
||||
.ghostBtc {
|
||||
top: 10px;
|
||||
right: 40px;
|
||||
animation: drift 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ghostEth {
|
||||
bottom: 30px;
|
||||
left: 10px;
|
||||
animation: drift 11s ease-in-out 2s infinite reverse;
|
||||
}
|
||||
|
||||
.logoCircle {
|
||||
@@ -97,6 +110,26 @@
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
/* Настоящий логотип монеты — круглый и цветной, подложка не нужна. */
|
||||
.logoHasImg {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.logoImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Декоративные «призрачные» монеты фона. */
|
||||
.ghostImg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
@@ -108,6 +141,19 @@
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
white-space: nowrap;
|
||||
min-width: 24px;
|
||||
min-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
margin-left: 2px;
|
||||
background: currentColor;
|
||||
animation: blink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
.badgeRub {
|
||||
@@ -127,6 +173,16 @@
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--success);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.statusPending {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.statusPending .statusDot {
|
||||
background: var(--text-secondary);
|
||||
animation-duration: 0.8s;
|
||||
}
|
||||
|
||||
.statusDot {
|
||||
@@ -134,6 +190,8 @@
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
animation: dotPulse 1.6s ease-in-out infinite;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.path {
|
||||
@@ -143,3 +201,90 @@
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dashLine {
|
||||
animation: dashFlow 1.2s linear infinite;
|
||||
}
|
||||
|
||||
.spark {
|
||||
animation: dotPulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.spark:nth-of-type(odd) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
translate: 0 0;
|
||||
}
|
||||
50% {
|
||||
translate: 0 -8px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0%,
|
||||
100% {
|
||||
translate: 0 0;
|
||||
}
|
||||
50% {
|
||||
translate: 6px -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dashFlow {
|
||||
to {
|
||||
stroke-dashoffset: -14;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.flow {
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.cardRub,
|
||||
.cardUsdt,
|
||||
.cardEksa,
|
||||
.ghostBtc,
|
||||
.ghostEth,
|
||||
.dashLine,
|
||||
.statusDot,
|
||||
.spark,
|
||||
.caret {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.traveler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,38 @@
|
||||
import logo from '@shared/assets/logo-full-white.png'
|
||||
import { getCoinIcon } from '@shared/assets/coins'
|
||||
import { useConversionCycle } from '../model/useConversionCycle'
|
||||
import { useTilt } from '../model/useTilt'
|
||||
import styles from './ConversionFlow.module.css'
|
||||
|
||||
const PATH = 'M60 68 C100 160, 250 140, 210 230 C170 310, 300 320, 350 360'
|
||||
|
||||
const btcLogo = getCoinIcon('BTC')
|
||||
const ethLogo = getCoinIcon('ETH')
|
||||
const usdtLogo = getCoinIcon('USDT')
|
||||
|
||||
export function ConversionFlow() {
|
||||
const { rub, usdt, active, settled } = useConversionCycle()
|
||||
const tiltRef = useTilt<HTMLDivElement>()
|
||||
|
||||
return (
|
||||
<div className={styles.flow}>
|
||||
<div className={styles.flow} ref={tiltRef}>
|
||||
<div className={`${styles.ghost} ${styles.ghostBtc}`}>
|
||||
<span style={{ fontSize: 20, color: '#F7931A' }}>₿</span>
|
||||
{btcLogo
|
||||
? <img src={btcLogo} alt="BTC" className={styles.ghostImg} />
|
||||
: <span style={{ fontSize: 20, color: '#F7931A' }}>₿</span>}
|
||||
</div>
|
||||
<div className={`${styles.ghost} ${styles.ghostEth}`}>
|
||||
<span style={{ fontSize: 20, color: '#627EEA' }}>Ξ</span>
|
||||
{ethLogo
|
||||
? <img src={ethLogo} alt="ETH" className={styles.ghostImg} />
|
||||
: <span style={{ fontSize: 20, color: '#627EEA' }}>Ξ</span>}
|
||||
</div>
|
||||
|
||||
<div className={`${styles.card} ${styles.cardRub}`}>
|
||||
<div className={`${styles.logoCircle} ${styles.logoRub}`}>₽</div>
|
||||
<div className={`${styles.badge} ${styles.badgeRub}`}>10 000 ₽</div>
|
||||
<div className={`${styles.badge} ${styles.badgeRub}`}>
|
||||
{rub}
|
||||
{active === 'rub' && <span className={styles.caret} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.card} ${styles.cardEksa}`}>
|
||||
@@ -21,10 +40,16 @@ export function ConversionFlow() {
|
||||
</div>
|
||||
|
||||
<div className={`${styles.card} ${styles.cardUsdt}`}>
|
||||
<div className={`${styles.logoCircle} ${styles.logoUsdt}`}>₮</div>
|
||||
<div className={`${styles.badge} ${styles.badgeUsdt}`}>≈ 125.3 USDT</div>
|
||||
<div className={styles.status}>
|
||||
<span className={styles.statusDot} /> ✓ Зачислено
|
||||
<div className={`${styles.logoCircle} ${styles.logoUsdt} ${usdtLogo ? styles.logoHasImg : ''}`}>
|
||||
{usdtLogo ? <img src={usdtLogo} alt="USDT" className={styles.logoImg} /> : '₮'}
|
||||
</div>
|
||||
<div className={`${styles.badge} ${styles.badgeUsdt}`}>
|
||||
{usdt}
|
||||
{active === 'usdt' && <span className={styles.caret} />}
|
||||
</div>
|
||||
<div className={`${styles.status} ${settled ? '' : styles.statusPending}`}>
|
||||
<span className={styles.statusDot} />
|
||||
{settled ? '✓ Зачислено' : 'Конвертация…'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,26 +67,38 @@ export function ConversionFlow() {
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M60 68 C100 160, 250 140, 210 230 C170 310, 300 320, 350 360"
|
||||
className={styles.dashLine}
|
||||
d={PATH}
|
||||
stroke="url(#pathGrad)"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="8 6"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M60 68 C100 160, 250 140, 210 230 C170 310, 300 320, 350 360"
|
||||
d={PATH}
|
||||
stroke="url(#pathGrad)"
|
||||
strokeWidth={8}
|
||||
strokeDasharray="8 6"
|
||||
opacity={0.08}
|
||||
fill="none"
|
||||
/>
|
||||
<circle cx={80} cy={110} r={3} fill="#fff" opacity={0.5} />
|
||||
<circle cx={140} cy={160} r={2.5} fill="#fff" opacity={0.4} />
|
||||
<circle cx={220} cy={200} r={3} fill="#fff" opacity={0.3} />
|
||||
<circle cx={200} cy={270} r={2.5} fill="#26A17B" opacity={0.35} />
|
||||
<circle cx={260} cy={310} r={3} fill="#26A17B" opacity={0.25} />
|
||||
<circle cx={320} cy={345} r={2} fill="#26A17B" opacity={0.2} />
|
||||
<g className={styles.traveler}>
|
||||
<circle r={8} fill="#26A17B" opacity={0.25}>
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path={PATH} />
|
||||
</circle>
|
||||
<circle r={3.5} fill="#26A17B">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path={PATH} />
|
||||
</circle>
|
||||
<circle r={2} fill="#fff" opacity={0.7}>
|
||||
<animateMotion dur="5s" begin="-2.5s" repeatCount="indefinite" path={PATH} />
|
||||
</circle>
|
||||
</g>
|
||||
<circle className={styles.spark} cx={80} cy={110} r={3} fill="#fff" opacity={0.5} />
|
||||
<circle className={styles.spark} cx={140} cy={160} r={2.5} fill="#fff" opacity={0.4} />
|
||||
<circle className={styles.spark} cx={220} cy={200} r={3} fill="#fff" opacity={0.3} />
|
||||
<circle className={styles.spark} cx={200} cy={270} r={2.5} fill="#26A17B" opacity={0.35} />
|
||||
<circle className={styles.spark} cx={260} cy={310} r={3} fill="#26A17B" opacity={0.25} />
|
||||
<circle className={styles.spark} cx={320} cy={345} r={2} fill="#26A17B" opacity={0.2} />
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -48,6 +48,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Автономное «дыхание» вместо tilt за курсором */
|
||||
@keyframes breathe {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: perspective(900px) rotateX(0.6deg) rotateY(-1.4deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: perspective(900px) rotateX(-0.6deg) rotateY(1.4deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -57,6 +76,7 @@
|
||||
padding: 28px 24px 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: breathe 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
@@ -94,6 +114,18 @@
|
||||
color: var(--success);
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 0.5px;
|
||||
transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.statusPillPending {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.statusPillPending .statusDot {
|
||||
background: var(--text-secondary);
|
||||
animation-duration: 0.8s;
|
||||
}
|
||||
|
||||
.statusDot {
|
||||
@@ -146,6 +178,24 @@
|
||||
animation: glowUsdt 2s ease-in-out infinite 1s;
|
||||
}
|
||||
|
||||
/* Под логотип USDT — сплошной фирменный зелёный (как в самом логотипе),
|
||||
чтобы монета в схеме читалась цельным кружком. overflow скрывает вынос
|
||||
картинки за круг после сдвига ниже. */
|
||||
.hasLogo {
|
||||
background: var(--success);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.curIconImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
/* Символ ₮ в исходном файле смещён вверх (~4px на 64px) — опускаем картинку,
|
||||
чтобы монета визуально читалась по центру кружка. */
|
||||
transform: translateY(6%);
|
||||
}
|
||||
|
||||
/* Анимированный пунктир на стрелках */
|
||||
.flowLine {
|
||||
animation: flowDash 1s linear infinite;
|
||||
@@ -158,6 +208,17 @@
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
/* не даём блоку схлопнуться, пока текст стёрт */
|
||||
min-height: 1.3em;
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
margin-left: 3px;
|
||||
background: currentColor;
|
||||
animation: blink 0.9s step-end infinite;
|
||||
}
|
||||
|
||||
.curLabel {
|
||||
@@ -177,6 +238,11 @@
|
||||
font-weight: 600;
|
||||
margin-top: -2px;
|
||||
letter-spacing: 0.3px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.curCheckPending {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.bridge {
|
||||
@@ -193,6 +259,22 @@
|
||||
align-items: center;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
transition: color 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* точка «средства идут» — видна только во время переноса между полями */
|
||||
.bridgeDot {
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.flowRow[data-transferring] .bridgeLine {
|
||||
color: var(--success);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.flowRow[data-transferring] .bridgeDot {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bridgeLabel {
|
||||
@@ -260,6 +342,13 @@
|
||||
|
||||
.curAmount {
|
||||
font-size: 16px;
|
||||
/* длинные пары («≈ 1 253.1 USDT») переносятся на 2 строки —
|
||||
резервируем их высоту, чтобы блоки не прыгали при смене сумм */
|
||||
min-height: 2.7em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.curIcon {
|
||||
@@ -267,4 +356,20 @@
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.card,
|
||||
.statusDot,
|
||||
.flowLine,
|
||||
.rub,
|
||||
.usdt,
|
||||
.caret {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.bridgeDot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,68 +1,84 @@
|
||||
import { USDT_RATE } from '@shared/config/constants'
|
||||
import logo from '@shared/assets/logo-full-white.png'
|
||||
import { getCoinIcon } from '@shared/assets/coins'
|
||||
import { useConversionCycle } from '../model/useConversionCycle'
|
||||
import styles from './ExchangeCard.module.css'
|
||||
|
||||
const usdtLogo = getCoinIcon('USDT')
|
||||
|
||||
function BridgeArrow({ begin }: { begin?: string }) {
|
||||
return (
|
||||
<svg width={48} height={12} viewBox="0 0 48 12" fill="none" aria-hidden="true">
|
||||
<line
|
||||
x1={0} y1={6} x2={36} y2={6}
|
||||
stroke="currentColor" strokeWidth={1.5} strokeDasharray="4 3"
|
||||
className={styles.flowLine}
|
||||
/>
|
||||
<path
|
||||
d="M34 2l6 4-6 4"
|
||||
stroke="currentColor" strokeWidth={1.5}
|
||||
strokeLinecap="round" strokeLinejoin="round" fill="none"
|
||||
/>
|
||||
<circle r={2.5} fill="#26A17B" className={styles.bridgeDot}>
|
||||
<animateMotion dur="0.9s" begin={begin} repeatCount="indefinite" path="M0 6 H40" />
|
||||
</circle>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function ExchangeCard() {
|
||||
const { rub, usdt, active, settled } = useConversionCycle()
|
||||
// пауза TRANSFER_MS между полями — «средства идут» по мосту
|
||||
const transferring = !settled && active === null
|
||||
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<div className={styles.statusPill}>
|
||||
<div className={`${styles.statusPill} ${settled ? '' : styles.statusPillPending}`}>
|
||||
<span className={styles.statusDot} />
|
||||
Операция завершена
|
||||
{settled ? 'Операция завершена' : 'Конвертация…'}
|
||||
</div>
|
||||
|
||||
<div className={styles.flowRow}>
|
||||
<div className={styles.flowRow} data-transferring={transferring || undefined}>
|
||||
<div className={styles.curBlock}>
|
||||
<div className={`${styles.curIcon} ${styles.rub}`}>₽</div>
|
||||
<div className={styles.curAmount}>10 000 ₽</div>
|
||||
<div className={styles.curAmount}>
|
||||
{rub}
|
||||
{active === 'rub' && <span className={styles.caret} />}
|
||||
</div>
|
||||
<div className={styles.curLabel}>Отправлено</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.bridge}>
|
||||
<div className={styles.bridgeLine}>
|
||||
<svg width={48} height={12} viewBox="0 0 48 12" fill="none" aria-hidden="true">
|
||||
<line
|
||||
x1={0} y1={6} x2={36} y2={6}
|
||||
stroke="currentColor" strokeWidth={1.5} strokeDasharray="4 3"
|
||||
className={styles.flowLine}
|
||||
/>
|
||||
<path
|
||||
d="M34 2l6 4-6 4"
|
||||
stroke="currentColor" strokeWidth={1.5}
|
||||
strokeLinecap="round" strokeLinejoin="round" fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<BridgeArrow />
|
||||
</div>
|
||||
<div className={styles.bridgeLabel}>
|
||||
<img src={logo} alt="ЭКСА" />
|
||||
</div>
|
||||
<div className={styles.bridgeLine}>
|
||||
<svg width={48} height={12} viewBox="0 0 48 12" fill="none" aria-hidden="true">
|
||||
<line
|
||||
x1={0} y1={6} x2={36} y2={6}
|
||||
stroke="currentColor" strokeWidth={1.5} strokeDasharray="4 3"
|
||||
className={styles.flowLine}
|
||||
/>
|
||||
<path
|
||||
d="M34 2l6 4-6 4"
|
||||
stroke="currentColor" strokeWidth={1.5}
|
||||
strokeLinecap="round" strokeLinejoin="round" fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<BridgeArrow begin="-0.45s" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.curBlock}>
|
||||
<div className={`${styles.curIcon} ${styles.usdt}`}>₮</div>
|
||||
<div className={styles.curAmount}>125.3 USDT</div>
|
||||
<div className={styles.curCheck}>
|
||||
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M2 6l3 3 5-5"
|
||||
stroke="#26A17B" strokeWidth={1.5}
|
||||
strokeLinecap="round" strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Зачислено
|
||||
<div className={`${styles.curIcon} ${styles.usdt} ${usdtLogo ? styles.hasLogo : ''}`}>
|
||||
{usdtLogo ? <img src={usdtLogo} alt="USDT" className={styles.curIconImg} /> : '₮'}
|
||||
</div>
|
||||
<div className={styles.curAmount}>
|
||||
{usdt}
|
||||
{active === 'usdt' && <span className={styles.caret} />}
|
||||
</div>
|
||||
<div className={`${styles.curCheck} ${settled ? '' : styles.curCheckPending}`}>
|
||||
{settled && (
|
||||
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M2 6l3 3 5-5"
|
||||
stroke="#26A17B" strokeWidth={1.5}
|
||||
strokeLinecap="round" strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{settled ? 'Зачислено' : 'Ожидание…'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,26 +8,53 @@
|
||||
background: var(--bg-deep);
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
.orbs {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
left: 15%;
|
||||
top: 30%;
|
||||
background: radial-gradient(circle, rgba(91, 61, 184, 0.25), transparent 70%);
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
/* растворяем свечение у нижней кромки, чтобы orbViolet не срезался overflow'ом */
|
||||
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
.orb {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
right: 20%;
|
||||
bottom: 10%;
|
||||
background: radial-gradient(circle, rgba(61, 42, 142, 0.18), transparent 70%);
|
||||
pointer-events: none;
|
||||
border-radius: 50%;
|
||||
/* параллакс: --mx/--my (-1..1) пишет useParallax на .hero, --depth — px сдвига на слой */
|
||||
transform: translate3d(
|
||||
calc(var(--mx, 0) * var(--depth, 0) * 1px),
|
||||
calc(var(--my, 0) * var(--depth, 0) * 1px),
|
||||
0
|
||||
);
|
||||
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.orbPurple {
|
||||
width: 760px;
|
||||
height: 760px;
|
||||
left: 8%;
|
||||
top: 12%;
|
||||
--depth: 28;
|
||||
background: radial-gradient(circle, rgba(91, 61, 184, 0.3), transparent 70%);
|
||||
animation: aurora 36s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes aurora {
|
||||
0%,
|
||||
100% {
|
||||
translate: 0 0;
|
||||
scale: 1;
|
||||
}
|
||||
33% {
|
||||
translate: 50px -35px;
|
||||
scale: 1.12;
|
||||
}
|
||||
66% {
|
||||
translate: -40px 30px;
|
||||
scale: 0.94;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -47,6 +74,7 @@
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
animation: rise 0.7s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
@@ -69,6 +97,7 @@
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1px;
|
||||
animation: rise 0.7s ease-out both;
|
||||
}
|
||||
|
||||
.line2 {
|
||||
@@ -93,9 +122,17 @@
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.ctaRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
animation: rise 0.7s ease-out 0.15s both;
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: inline-block;
|
||||
margin-top: 28px;
|
||||
padding: 16px 40px;
|
||||
border-radius: 100px;
|
||||
background: var(--grad-center);
|
||||
@@ -111,6 +148,17 @@
|
||||
box-shadow: 0 4px 24px rgba(74, 109, 255, 0.3);
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 0 28px;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero {
|
||||
min-height: min(100vh, 1000px);
|
||||
@@ -142,6 +190,10 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ctaRow {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reflection {
|
||||
display: none;
|
||||
}
|
||||
@@ -149,6 +201,14 @@
|
||||
.hero {
|
||||
padding: 100px 32px 40px;
|
||||
}
|
||||
|
||||
/* меньше слой — дешевле композитинг на слабых устройствах */
|
||||
.orbPurple {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
left: -15%;
|
||||
top: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@@ -156,4 +216,83 @@
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Низкие экраны (напр. телефон в альбомной): первый экран — только
|
||||
заголовок и кнопка, карточка уходит под фолд. Работает независимо
|
||||
от ширины, поэтому дублируем переключение на одноколоночную раскладку.
|
||||
Размеры заголовка привязаны к vh, чтобы заголовок + кнопка гарантированно
|
||||
помещались в первый экран при любой высоте из этого диапазона. */
|
||||
@media (max-height: 600px) {
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
align-items: stretch;
|
||||
padding: 68px 32px 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
order: 1;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 2.5vh;
|
||||
/* тянем блок ниже низа вьюпорта (верхний паддинг минус небольшой запас),
|
||||
чтобы карточка гарантированно оказалась под сгибом без субпиксельных зазоров */
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(24px, 7vh, 48px);
|
||||
}
|
||||
|
||||
.line2 {
|
||||
font-size: clamp(28px, 9vh, 60px);
|
||||
}
|
||||
|
||||
.ctaRow {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 12px 32px;
|
||||
}
|
||||
|
||||
.left {
|
||||
order: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reflection {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.orb {
|
||||
animation: none;
|
||||
transition: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.title,
|
||||
.ctaRow,
|
||||
.left {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,18 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ROUTES } from '@shared/config/routes'
|
||||
import { useParallax } from '../model/useParallax'
|
||||
import { ConversionFlow } from './ConversionFlow'
|
||||
import { ExchangeCard } from './ExchangeCard'
|
||||
import styles from './Hero.module.css'
|
||||
|
||||
export function Hero() {
|
||||
const heroRef = useParallax<HTMLElement>()
|
||||
|
||||
return (
|
||||
<section className={styles.hero}>
|
||||
<section className={styles.hero} ref={heroRef}>
|
||||
<div className={styles.orbs} aria-hidden="true">
|
||||
<div className={`${styles.orb} ${styles.orbPurple}`} />
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.left}>
|
||||
<div className={styles.desktop}>
|
||||
@@ -28,10 +36,10 @@ export function Hero() {
|
||||
активов
|
||||
</span>
|
||||
</h1>
|
||||
<div>
|
||||
<a href="#converter" className={styles.cta}>
|
||||
Попробовать калькулятор
|
||||
</a>
|
||||
<div className={styles.ctaRow}>
|
||||
<Link to={ROUTES.REGISTER} className={styles.cta}>
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,6 +88,18 @@
|
||||
background: linear-gradient(135deg, #f3ba2f, #d4a229);
|
||||
}
|
||||
|
||||
/* Настоящий логотип монеты сам по себе круглый и цветной — убираем градиент-подложку. */
|
||||
.iconHasLogo {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.iconImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
@@ -138,6 +150,58 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Карточки — альтернатива таблице на мобильных, по умолчанию скрыты */
|
||||
.cards {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 18px;
|
||||
padding: 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.cards[data-inview] .card {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.cardRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.cardKey {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* в карточке шкала тянется на всю оставшуюся ширину */
|
||||
.cardRow .speedBar {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.section {
|
||||
padding: 40px 32px;
|
||||
@@ -161,4 +225,21 @@
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.tableWrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,18 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { getCoinIcon } from '@shared/assets/coins'
|
||||
import { NETWORKS } from '../model/networks'
|
||||
import styles from './NetworksTable.module.css'
|
||||
|
||||
/** Иконка сети: настоящий логотип монеты из центральной точки, иначе — глиф-фолбэк. */
|
||||
function NetworkIcon({ ticker, cls, glyph }: { ticker: string; cls: string; glyph: string }) {
|
||||
const logo = getCoinIcon(ticker)
|
||||
return (
|
||||
<div className={`${styles.icon} ${styles[`icon_${cls}`]} ${logo ? styles.iconHasLogo : ''}`}>
|
||||
{logo ? <img src={logo} alt={ticker} className={styles.iconImg} /> : glyph}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function NetworksTable() {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
const [animated, setAnimated] = useState(false)
|
||||
@@ -43,7 +54,7 @@ export function NetworksTable() {
|
||||
<tr key={n.ticker}>
|
||||
<td>
|
||||
<div className={styles.name}>
|
||||
<div className={`${styles.icon} ${styles[`icon_${n.cls}`]}`}>{n.icon}</div>
|
||||
<NetworkIcon ticker={n.ticker} cls={n.cls} glyph={n.icon} />
|
||||
<span className={styles.label}>{n.name}</span>
|
||||
<span className={styles.ticker}>{n.ticker}</span>
|
||||
</div>
|
||||
@@ -67,6 +78,43 @@ export function NetworksTable() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className={styles.cards} data-inview={animated || undefined}>
|
||||
{NETWORKS.map((n, i) => (
|
||||
<div
|
||||
key={n.ticker}
|
||||
className={styles.card}
|
||||
style={{ transitionDelay: `${i * 80}ms` }}
|
||||
>
|
||||
<div className={styles.cardHead}>
|
||||
<NetworkIcon ticker={n.ticker} cls={n.cls} glyph={n.icon} />
|
||||
<span className={styles.label}>{n.name}</span>
|
||||
<span className={styles.ticker}>{n.ticker}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.cardRow}>
|
||||
<span className={styles.cardKey}>Скорость</span>
|
||||
<div className={styles.speedBar}>
|
||||
<div
|
||||
className={styles.speedFill}
|
||||
style={{ width: animated ? `${n.speed}%` : '0%', background: n.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.cardRow}>
|
||||
<span className={styles.cardKey}>Комиссия</span>
|
||||
<span className={styles.fee}>{n.fee}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.cardRow}>
|
||||
<span className={styles.cardKey}>Подтверждение</span>
|
||||
<span className={styles.confirm}>{n.confirm}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.footnote}>
|
||||
* Комиссии и время подтверждения указаны приблизительно и зависят от загруженности сети
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useSendWallet } from '@features/wallet'
|
||||
import { getCoinIcon } from '@shared/assets/coins'
|
||||
import { CHAIN_CONFIG, CHAIN_TOKENS, type Chain, type FeeTier } from '../model/sendTypes'
|
||||
import styles from './SendModal.module.css'
|
||||
|
||||
@@ -138,7 +139,9 @@ export function SendModal({ open, onClose, network, tokens = [], initialToken =
|
||||
onClick={() => setOpenDropdown((d) => (d === 'token' ? null : 'token'))}
|
||||
>
|
||||
<span className={styles.tokenDot} style={{ background: cfg.color }}>
|
||||
{tokenLabel[0]}
|
||||
{getCoinIcon(tokenLabel)
|
||||
? <img src={getCoinIcon(tokenLabel)} alt={tokenLabel} />
|
||||
: tokenLabel[0]}
|
||||
</span>
|
||||
<span className={styles.selectValue}>{tokenLabel}</span>
|
||||
<svg
|
||||
@@ -156,7 +159,9 @@ export function SendModal({ open, onClose, network, tokens = [], initialToken =
|
||||
onClick={() => { setSelectedToken(''); setOpenDropdown(null) }}
|
||||
>
|
||||
<span className={styles.tokenDot} style={{ background: cfg.color }}>
|
||||
{cfg.nativeSymbol[0]}
|
||||
{getCoinIcon(cfg.nativeSymbol)
|
||||
? <img src={getCoinIcon(cfg.nativeSymbol)} alt={cfg.nativeSymbol} />
|
||||
: cfg.nativeSymbol[0]}
|
||||
</span>
|
||||
<span className={styles.dropdownTicker}>{cfg.nativeSymbol}</span>
|
||||
<span className={styles.dropdownName}>Нативный</span>
|
||||
@@ -169,7 +174,9 @@ export function SendModal({ open, onClose, network, tokens = [], initialToken =
|
||||
onClick={() => { setSelectedToken(tok); setOpenDropdown(null) }}
|
||||
>
|
||||
<span className={styles.tokenDot} style={{ background: 'rgba(255,255,255,0.12)' }}>
|
||||
{tok[0]}
|
||||
{getCoinIcon(tok)
|
||||
? <img src={getCoinIcon(tok)} alt={tok} />
|
||||
: tok[0]}
|
||||
</span>
|
||||
<span className={styles.dropdownTicker}>{tok}</span>
|
||||
</button>
|
||||
|
||||
@@ -6,6 +6,27 @@ const eth = COIN_ICONS.ETH
|
||||
const sol = COIN_ICONS.SOL
|
||||
const trx = COIN_ICONS.TRX
|
||||
const arb = COIN_ICONS.ARB
|
||||
const usdc = COIN_ICONS.USDC
|
||||
const usdt = COIN_ICONS.USDT
|
||||
const dai = COIN_ICONS.DAI
|
||||
const busd = COIN_ICONS.BUSD
|
||||
const wbtc = COIN_ICONS.WBTC
|
||||
const link = COIN_ICONS.LINK
|
||||
const uni = COIN_ICONS.UNI
|
||||
const wbnb = COIN_ICONS.WBNB
|
||||
const doge = COIN_ICONS.DOGE
|
||||
const jup = COIN_ICONS.JUP
|
||||
const wif = COIN_ICONS.WIF
|
||||
const bonk = COIN_ICONS.BONK
|
||||
const ray = COIN_ICONS.RAY
|
||||
const orca = COIN_ICONS.ORCA
|
||||
const pyth = COIN_ICONS.PYTH
|
||||
const jto = COIN_ICONS.JTO
|
||||
const w = COIN_ICONS.W
|
||||
const pump = COIN_ICONS.PUMP
|
||||
const popcat = COIN_ICONS.POPCAT
|
||||
const trump = COIN_ICONS.TRUMP
|
||||
const pengu = COIN_ICONS.PENGU
|
||||
import type { WalletBalanceData } from '@features/wallet'
|
||||
|
||||
export interface Token {
|
||||
@@ -25,8 +46,8 @@ const TOKENS: Record<string, Token> = {
|
||||
SOL: { symbol: 'SOL', letter: 'S', logo: sol, color: '#9945FF', network: 'SOLANA', balance: 0.994, usdRate: 163.84, decimals: 9 },
|
||||
TRX: { symbol: 'TRX', letter: 'T', logo: trx, color: '#FF060A', network: 'TRON', balance: 0, usdRate: 0.12, decimals: 6 },
|
||||
ARB: { symbol: 'ARB', letter: 'A', logo: arb, color: '#4A6DFF', network: 'ARBITRUM', balance: 0, usdRate: 0.92, decimals: 18 },
|
||||
USDC: { symbol: 'USDC', letter: '$', color: '#2775CA', network: 'SOLANA', balance: 0, usdRate: 1, decimals: 6 },
|
||||
USDT: { symbol: 'USDT', letter: '$', color: '#26A17B', network: 'ETHEREUM', balance: 0, usdRate: 1, decimals: 6 },
|
||||
USDC: { symbol: 'USDC', letter: '$', logo: usdc, color: '#2775CA', network: 'SOLANA', balance: 0, usdRate: 1, decimals: 6 },
|
||||
USDT: { symbol: 'USDT', letter: '$', logo: usdt, color: '#26A17B', network: 'ETHEREUM', balance: 0, usdRate: 1, decimals: 6 },
|
||||
}
|
||||
|
||||
export const TOKENS_LIST: Token[] = Object.values(TOKENS)
|
||||
@@ -40,30 +61,30 @@ export const TOKEN_META: Record<string, { letter: string; color: string; logo?:
|
||||
TRX: { letter: 'T', logo: trx, color: '#FF060A' },
|
||||
ARB: { letter: 'A', logo: arb, color: '#4A6DFF' },
|
||||
// Stablecoins
|
||||
USDC: { letter: '$', color: '#2775CA' },
|
||||
USDT: { letter: '$', color: '#26A17B' },
|
||||
DAI: { letter: 'D', color: '#F5AC37' },
|
||||
BUSD: { letter: 'B', color: '#F0B90B' },
|
||||
USDC: { letter: '$', logo: usdc, color: '#2775CA' },
|
||||
USDT: { letter: '$', logo: usdt, color: '#26A17B' },
|
||||
DAI: { letter: 'D', logo: dai, color: '#F5AC37' },
|
||||
BUSD: { letter: 'B', logo: busd, color: '#F0B90B' },
|
||||
// ETH tokens
|
||||
WBTC: { letter: 'W', color: '#F7931A' },
|
||||
LINK: { letter: 'L', color: '#2A5ADA' },
|
||||
UNI: { letter: 'U', color: '#FF007A' },
|
||||
WBTC: { letter: 'W', logo: wbtc, color: '#F7931A' },
|
||||
LINK: { letter: 'L', logo: link, color: '#2A5ADA' },
|
||||
UNI: { letter: 'U', logo: uni, color: '#FF007A' },
|
||||
// BSC tokens
|
||||
WBNB: { letter: 'W', color: '#F3BA2F' },
|
||||
DOGE: { letter: 'D', color: '#C2A633' },
|
||||
WBNB: { letter: 'W', logo: wbnb, color: '#F3BA2F' },
|
||||
DOGE: { letter: 'D', logo: doge, color: '#C2A633' },
|
||||
// SOL tokens
|
||||
JUP: { letter: 'J', color: '#C7A52D' },
|
||||
WIF: { letter: 'W', color: '#9333EA' },
|
||||
BONK: { letter: 'B', color: '#FF8C00' },
|
||||
RAY: { letter: 'R', color: '#5AC4BE' },
|
||||
ORCA: { letter: 'O', color: '#1B8EF2' },
|
||||
PYTH: { letter: 'P', color: '#8B5CF6' },
|
||||
JTO: { letter: 'J', color: '#06B6D4' },
|
||||
W: { letter: 'W', color: '#6B7280' },
|
||||
PUMP: { letter: 'P', color: '#00D4AA' },
|
||||
POPCAT: { letter: 'P', color: '#FF6B6B' },
|
||||
TRUMP: { letter: 'T', color: '#E63946' },
|
||||
PENGU: { letter: 'P', color: '#60A5FA' },
|
||||
JUP: { letter: 'J', logo: jup, color: '#C7A52D' },
|
||||
WIF: { letter: 'W', logo: wif, color: '#9333EA' },
|
||||
BONK: { letter: 'B', logo: bonk, color: '#FF8C00' },
|
||||
RAY: { letter: 'R', logo: ray, color: '#5AC4BE' },
|
||||
ORCA: { letter: 'O', logo: orca, color: '#1B8EF2' },
|
||||
PYTH: { letter: 'P', logo: pyth, color: '#8B5CF6' },
|
||||
JTO: { letter: 'J', logo: jto, color: '#06B6D4' },
|
||||
W: { letter: 'W', logo: w, color: '#6B7280' },
|
||||
PUMP: { letter: 'P', logo: pump, color: '#00D4AA' },
|
||||
POPCAT: { letter: 'P', logo: popcat, color: '#FF6B6B' },
|
||||
TRUMP: { letter: 'T', logo: trump, color: '#E63946' },
|
||||
PENGU: { letter: 'P', logo: pengu, color: '#60A5FA' },
|
||||
}
|
||||
|
||||
const CHAIN_NATIVE: Record<string, string> = {
|
||||
|
||||