mirror of https://github.com/certusone/oyster.git
UI desing (#36)
* Added first design part * Added full design and footer * Added footer and navbar * Fix temp transfer
This commit is contained in:
Juan Diego García
GitHub
parent
769bce1caa
commit
a32c87ff16
|
|
@ -49,6 +49,7 @@
|
|||
"devDependencies": {
|
||||
"@commitlint/cli": "^8.2.0",
|
||||
"@commitlint/config-conventional": "^8.2.0",
|
||||
"@types/animejs": "^3.1.3",
|
||||
"@types/jest": "^24.0.0",
|
||||
"@types/react": "^16.9.50",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
@surge-20: #00CC82;
|
||||
@tungsten-100: #06101a;
|
||||
@tungsten-60: #547595;
|
||||
@tungsten-50: #0D1B28;
|
||||
@tungsten-40: #7BA4C7;
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
"@toruslabs/torus-embed": "^1.9.10",
|
||||
"@types/animejs": "^3.1.3",
|
||||
"@types/chart.js": "^2.9.29",
|
||||
"@types/echarts": "^4.9.0",
|
||||
"@types/react-router-dom": "^5.1.6",
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
"@web3-react/walletconnect-connector": "^6.1.1",
|
||||
"@web3-react/walletlink-connector": "^6.0.9",
|
||||
"@welldone-software/why-did-you-render": "^6.0.5",
|
||||
"animejs": "^3.2.1",
|
||||
"bn.js": "^5.1.3",
|
||||
"bs58": "^4.0.1",
|
||||
"buffer-layout": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="189" height="20" viewBox="0 0 189 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 2.0881L0.438385 1.47888H3.01712L6.16317 16.2016H6.49841L9.87655 3.25577H12.9452L16.3234 16.2016H16.6586L19.8047 1.47888H22.3834L22.8218 2.0881L19.1084 18.9939H14.0541L11.398 8.66258L8.7677 18.9939H3.71338L0 2.0881Z" fill="white"/>
|
||||
<path d="M55.8547 18.9939V1.47888H65.4337C68.2188 1.47888 69.6113 2.84962 69.6113 5.5911V8.4595C69.6113 10.6087 68.7517 11.9117 67.0326 12.3687L70.127 18.3339L69.7402 18.9939H67.0584L63.7576 12.5717H59.0008V18.9939H55.8547ZM59.0008 9.77948H65.3306C66.087 9.77948 66.4652 9.40718 66.4652 8.66258V5.38803C66.4652 4.64343 66.087 4.27113 65.3306 4.27113H59.0008V9.77948Z" fill="white"/>
|
||||
<path d="M106.277 18.9939V1.47888H109.423V8.51027H118.911V1.47888H122.057V18.9939H118.911V11.3025H109.423V18.9939H106.277Z" fill="white"/>
|
||||
<path d="M155.535 18.9939V1.47888H158.681V16.2016H166.726V18.9939H155.535Z" fill="white"/>
|
||||
<path d="M174.495 18.9939V1.47888H188.444V4.27113H177.642V8.51027H184.479V11.3025H177.642V16.2016H188.444V18.9939H174.495Z" fill="white"/>
|
||||
<path d="M98.4443 18.3847L98.006 18.9939L95.4272 18.9939L92.2812 4.27113L91.9459 4.27113L88.5678 17.217L85.4991 17.217L82.121 4.27113L81.7857 4.27113L78.6397 18.9939L76.0609 18.9939L75.6226 18.3847L79.3359 1.47888L84.3902 1.47888L87.0463 11.8102L89.6766 1.47888L94.731 1.47888L98.4443 18.3847Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.9613 3.92487L32.7533 8.067C31.6688 9.13457 31.6688 10.8654 32.7533 11.933L36.9613 16.0751C38.0458 17.1427 39.8042 17.1427 40.8887 16.0751L45.0966 11.933C46.1811 10.8654 46.1811 9.13457 45.0966 8.067L40.8887 3.92487C39.8042 2.8573 38.0458 2.8573 36.9613 3.92487ZM30.5091 5.85787C28.1851 8.1455 28.1851 11.8545 30.5091 14.1421L34.717 18.2843C37.041 20.5719 40.8089 20.5719 43.1329 18.2843L47.3408 14.1421C49.6648 11.8545 49.6648 8.1455 47.3408 5.85786L43.1329 1.71573C40.8089 -0.57191 37.041 -0.571909 34.717 1.71573L30.5091 5.85787Z" fill="#DC1FFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.621 3.92487L132.413 8.067C131.329 9.13457 131.329 10.8654 132.413 11.933L136.621 16.0751C137.706 17.1427 139.464 17.1427 140.549 16.0751L144.757 11.933C145.841 10.8654 145.841 9.13457 144.757 8.067L140.549 3.92487C139.464 2.8573 137.706 2.8573 136.621 3.92487ZM130.169 5.85787C127.845 8.1455 127.845 11.8545 130.169 14.1421L134.377 18.2843C136.701 20.5719 140.469 20.5719 142.793 18.2843L147.001 14.1421C149.325 11.8545 149.325 8.1455 147.001 5.85786L142.793 1.71573C140.469 -0.57191 136.701 -0.571909 134.377 1.71573L130.169 5.85787Z" fill="#00FFA3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,129 @@
|
|||
<svg viewBox="0 0 1420 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-217.293" y="597" width="1311.39" height="1311.39" rx="299.5" transform="rotate(-45 -217.293 597)" fill="url(#paint0_linear)" stroke="url(#paint1_linear)"/>
|
||||
<rect x="176.707" y="597" width="754.19" height="754.19" rx="119.5" transform="rotate(-45 176.707 597)" fill="url(#paint2_linear)" stroke="url(#paint3_linear)"/>
|
||||
<rect x="369.707" y="597" width="480.94" height="480.94" rx="60.5" transform="rotate(-45 369.707 597)" fill="url(#paint4_linear)" stroke="url(#paint5_linear)"/>
|
||||
<rect x="556.707" y="597" width="217.141" height="217.141" rx="23.5" transform="rotate(-45 556.707 597)" fill="url(#paint6_linear)" stroke="url(#paint7_linear)"/>
|
||||
<g filter="url(#filter0_f)">
|
||||
<ellipse cx="1428.5" cy="252.49" rx="430.5" ry="509.5" transform="rotate(-30 1428.5 252.49)" fill="url(#paint8_radial)" fill-opacity="0.2"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_f)">
|
||||
<ellipse cx="454.5" cy="-74.5" rx="523.5" ry="507.5" fill="url(#paint9_radial)" fill-opacity="0.2"/>
|
||||
</g>
|
||||
<circle cx="502" cy="535" r="1" fill="#2F506F"/>
|
||||
<circle cx="923" cy="155" r="1" fill="#2F506F"/>
|
||||
<circle cx="1286" cy="596" r="1" fill="#7BA4C7"/>
|
||||
<circle cx="433" cy="106" r="1" fill="#7BA4C7"/>
|
||||
<circle cx="1343" cy="114" r="1" fill="#7BA4C7"/>
|
||||
<circle cx="31" cy="694" r="1" fill="#D1D7DC"/>
|
||||
<circle cx="392" cy="188" r="1" fill="#D1D7DC"/>
|
||||
<circle cx="570.5" cy="536.5" r="0.5" fill="white"/>
|
||||
<circle cx="1010.5" cy="189.5" r="0.5" fill="white"/>
|
||||
<circle cx="1272.5" cy="472.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="591.5" cy="192.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="657.5" cy="115.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="272.5" cy="678.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="1199.5" cy="131.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="1334.5" cy="861.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="46.5" cy="254.5" r="0.5" fill="#2F506F"/>
|
||||
<circle cx="1309.5" cy="168.5" r="0.5" fill="#193650"/>
|
||||
<circle cx="454.5" cy="560.5" r="0.5" fill="white"/>
|
||||
<circle cx="1062.5" cy="2226.5" r="0.5" fill="white"/>
|
||||
<g filter="url(#filter2_b)">
|
||||
<path d="M725.384 408L727.282 405.322L711.202 331L689.316 331L677.927 376.419L666.425 331L644.539 331L628.459 405.322L630.358 408H641.524L655.147 343.275H656.599L671.227 400.188H684.515L699.143 343.275H700.594L714.217 408H725.384Z" fill="url(#paint10_linear)"/>
|
||||
<path d="M301 333.678L302.898 331H314.065L327.688 395.725H329.139L343.767 338.812H357.055L371.683 395.725H373.135L386.758 331H397.924L399.823 333.678L383.743 408H361.857L350.356 362.581L338.966 408H317.08L301 333.678Z" fill="url(#paint11_linear)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M542.862 408V331H584.341C596.4 331 602.43 337.026 602.43 349.078V361.688C602.43 371.137 598.708 376.865 591.264 378.874L604.663 405.099L602.988 408H591.375L577.082 379.767H556.485V408H542.862ZM556.485 367.491H583.894C587.169 367.491 588.807 365.855 588.807 362.581V348.186C588.807 344.912 587.169 343.275 583.894 343.275H556.485V367.491Z" fill="url(#paint12_linear)"/>
|
||||
<path d="M761.199 331V408H774.822V374.187H815.906V408H829.529V331H815.906V361.912H774.822V331H761.199Z" fill="url(#paint13_linear)"/>
|
||||
<path d="M974.495 408V331H988.117V395.725H1022.96V408H974.495Z" fill="url(#paint14_linear)"/>
|
||||
<path d="M1056.6 331V408H1117V395.725H1070.22V374.187H1099.83V361.912H1070.22V343.275H1117V331H1056.6Z" fill="url(#paint15_linear)"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M460.495 342.073L442.269 360.091C437.572 364.735 437.572 372.265 442.269 376.909L460.495 394.927C465.192 399.571 472.808 399.571 477.505 394.927L495.731 376.909C500.428 372.265 500.428 364.735 495.731 360.091L477.505 342.073C472.808 337.429 465.192 337.429 460.495 342.073ZM432.549 350.482C422.484 360.433 422.484 376.567 432.549 386.518L450.775 404.537C460.84 414.488 477.16 414.488 487.225 404.537L505.451 386.518C515.516 376.567 515.516 360.433 505.451 350.482L487.225 332.463C477.16 322.512 460.84 322.512 450.775 332.463L432.549 350.482Z" fill="#DC1FFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M892.495 342.073L874.269 360.091C869.572 364.735 869.572 372.265 874.269 376.909L892.495 394.927C897.192 399.571 904.808 399.571 909.505 394.927L927.731 376.909C932.428 372.265 932.428 364.735 927.731 360.091L909.505 342.073C904.808 337.429 897.192 337.429 892.495 342.073ZM864.549 350.482C854.484 360.433 854.484 376.567 864.549 386.518L882.775 404.537C892.84 414.488 909.16 414.488 919.225 404.537L937.451 386.518C947.516 376.567 947.516 360.433 937.451 350.482L919.225 332.463C909.16 322.512 892.84 322.512 882.775 332.463L864.549 350.482Z" fill="#00FFA3"/>
|
||||
<path d="M450.811 248H457.924V246.75H452.22V242.795H457.47V241.545H452.22V237.614H457.833V236.364H450.811V248ZM472.537 237.614H476.196V248H477.605V237.614H481.264V236.364H472.537V237.614ZM496.239 248H497.648V242.795H503.852V248H505.261V236.364H503.852V241.545H497.648V236.364H496.239V248ZM520.883 248H527.996V246.75H522.292V242.795H527.542V241.545H522.292V237.614H527.905V236.364H520.883V248ZM543.245 248H544.654V243.455H547.2C547.302 243.455 547.398 243.455 547.495 243.449L549.95 248H551.586L548.955 243.193C550.438 242.688 551.131 241.477 551.131 239.932C551.131 237.875 549.904 236.364 547.177 236.364H543.245V248ZM544.654 242.182V237.614H547.131C549.018 237.614 549.745 238.534 549.745 239.932C549.745 241.33 549.018 242.182 547.154 242.182H544.654ZM566.279 248H573.393V246.75H567.688V242.795H572.938V241.545H567.688V237.614H573.302V236.364H566.279V248ZM596.278 236.364V243.955C596.278 245.659 595.108 246.886 593.165 246.886C591.221 246.886 590.051 245.659 590.051 243.955V236.364H588.642V244.068C588.642 246.455 590.426 248.205 593.165 248.205C595.903 248.205 597.687 246.455 597.687 244.068V236.364H596.278ZM613.301 236.364V248H614.619V239.159H614.733L618.369 248H619.642L623.279 239.159H623.392V248H624.71V236.364H623.029L619.074 246.023H618.938L614.983 236.364H613.301ZM660.863 245.955H662.136V242.841H665.249V241.568H662.136V238.455H660.863V241.568H657.749V242.841H660.863V245.955ZM704.646 239.273H706.01C705.947 237.517 704.328 236.205 702.078 236.205C699.851 236.205 698.101 237.5 698.101 239.455C698.101 241.023 699.237 241.955 701.055 242.477L702.487 242.886C703.714 243.227 704.805 243.659 704.805 244.818C704.805 246.091 703.578 246.932 701.964 246.932C700.578 246.932 699.351 246.318 699.237 245H697.783C697.919 246.909 699.464 248.205 701.964 248.205C704.646 248.205 706.169 246.727 706.169 244.841C706.169 242.659 704.101 241.955 702.896 241.636L701.714 241.318C700.851 241.091 699.464 240.636 699.464 239.386C699.464 238.273 700.487 237.455 702.033 237.455C703.442 237.455 704.51 238.125 704.646 239.273ZM731.104 242.182C731.104 238.5 728.945 236.205 725.967 236.205C722.99 236.205 720.831 238.5 720.831 242.182C720.831 245.864 722.99 248.159 725.967 248.159C728.945 248.159 731.104 245.864 731.104 242.182ZM729.74 242.182C729.74 245.205 728.081 246.841 725.967 246.841C723.854 246.841 722.195 245.205 722.195 242.182C722.195 239.159 723.854 237.523 725.967 237.523C728.081 237.523 729.74 239.159 729.74 242.182ZM746.273 248H753.091V246.75H747.682V236.364H746.273V248ZM769.285 248L770.455 244.705H775.16L776.33 248H777.808L773.535 236.364H772.08L767.808 248H769.285ZM770.898 243.455L772.762 238.205H772.853L774.717 243.455H770.898ZM801.647 236.364H800.261V245.523H800.147L793.784 236.364H792.42V248H793.829V238.864H793.943L800.284 248H801.647V236.364ZM817.744 248L818.915 244.705H823.619L824.79 248H826.267L821.994 236.364H820.54L816.267 248H817.744ZM819.358 243.455L821.221 238.205H821.312L823.176 243.455H819.358ZM858.179 248H862.384C865.134 248 866.27 246.659 866.27 244.909C866.27 243.068 864.998 242.068 863.929 242V241.886C864.929 241.614 865.816 240.955 865.816 239.455C865.816 237.75 864.679 236.364 862.248 236.364H858.179V248ZM859.588 246.75V242.705H862.452C863.975 242.705 864.929 243.727 864.929 244.909C864.929 245.932 864.225 246.75 862.384 246.75H859.588ZM859.588 241.477V237.614H862.248C863.793 237.614 864.475 238.432 864.475 239.455C864.475 240.682 863.475 241.477 862.202 241.477H859.588ZM881.386 248H882.795V243.455H885.34C885.442 243.455 885.539 243.455 885.636 243.449L888.09 248H889.727L887.096 243.193C888.579 242.688 889.272 241.477 889.272 239.932C889.272 237.875 888.045 236.364 885.317 236.364H881.386V248ZM882.795 242.182V237.614H885.272C887.158 237.614 887.886 238.534 887.886 239.932C887.886 241.33 887.158 242.182 885.295 242.182H882.795ZM905.829 236.364H904.42V248H905.829V236.364ZM925.045 248C928.591 248 930.591 245.795 930.591 242.159C930.591 238.545 928.591 236.364 925.204 236.364H921.454V248H925.045ZM922.864 246.75V237.614H925.114C927.841 237.614 929.227 239.341 929.227 242.159C929.227 245 927.841 246.75 924.954 246.75H922.864ZM953.709 240H955.163C954.732 237.75 952.845 236.205 950.391 236.205C947.408 236.205 945.3 238.5 945.3 242.182C945.3 245.864 947.391 248.159 950.482 248.159C953.254 248.159 955.232 246.312 955.232 243.432V242.182H950.8V243.432H953.868C953.828 245.523 952.453 246.841 950.482 246.841C948.323 246.841 946.663 245.205 946.663 242.182C946.663 239.159 948.323 237.523 950.391 237.523C952.073 237.523 953.215 238.472 953.709 240ZM970.445 248H977.559V246.75H971.854V242.795H977.104V241.545H971.854V237.614H977.468V236.364H970.445V248Z" fill="url(#paint16_linear)"/>
|
||||
<defs>
|
||||
<filter id="filter0_f" x="946.909" y="-268.564" width="963.182" height="1042.11" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
|
||||
</filter>
|
||||
<filter id="filter1_f" x="-99" y="-612" width="1107" height="1075" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
|
||||
</filter>
|
||||
<filter id="filter2_b" x="295" y="325" width="828" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feGaussianBlur in="BackgroundImage" stdDeviation="3"/>
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="1158.03" y1="147.28" x2="619.214" y2="1495.03" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0877329" stop-color="#0A1F31" stop-opacity="0.8"/>
|
||||
<stop offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="767.46" y1="-56.8599" x2="781.471" y2="1152.78" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3D73FF"/>
|
||||
<stop offset="1" stop-color="#061019" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="811.046" y1="386.358" x2="814.283" y2="1442.22" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0877329" stop-color="#04090E" stop-opacity="0.8"/>
|
||||
<stop offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="743.064" y1="220.748" x2="751.127" y2="916.813" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3D73FF"/>
|
||||
<stop offset="1" stop-color="#061019" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="1716.44" y1="-27.5304" x2="593.196" y2="1095.71" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0877329" stop-color="#0D1A25"/>
|
||||
<stop offset="1" stop-color="#070D12" stop-opacity="0.4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="1676.78" y1="216.775" x2="596.65" y2="1040.19" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#CC3DFF"/>
|
||||
<stop offset="1" stop-color="#061019"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="1080.23" y1="399.981" x2="512.159" y2="749.735" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0364583" stop-color="#193650"/>
|
||||
<stop offset="1" stop-color="#080E14" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="1268.76" y1="564.025" x2="740.555" y2="781.555" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3DBDFF"/>
|
||||
<stop offset="1" stop-color="#061019"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1428.5 252.49) rotate(90) scale(509.5 430.5)">
|
||||
<stop stop-color="#0038FF"/>
|
||||
<stop offset="1" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(453.807 -75.1924) rotate(89.9218) scale(508.193 524.215)">
|
||||
<stop stop-color="#E451FF"/>
|
||||
<stop offset="1" stop-color="#09020C" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint10_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear" x1="433.986" y1="252" x2="1009.03" y2="252" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.130208" stop-color="#DC1FFF"/>
|
||||
<stop offset="0.5" stop-color="#4DA9FF"/>
|
||||
<stop offset="0.885417" stop-color="#00CC82"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg width="1039" height="191" viewBox="0 0 1039 191" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_f)">
|
||||
<ellipse cx="519.5" cy="271.5" rx="489.5" ry="241.5" fill="url(#paint0_radial)" fill-opacity="0.2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f" x="0" y="0" width="1039" height="543" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(518.852 271.171) rotate(89.8464) scale(241.83 490.167)">
|
||||
<stop stop-color="#00D1FF" stop-opacity="0.7"/>
|
||||
<stop offset="1" stop-color="#09020C" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 899 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 224 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 19.2C0 12.4794 0 9.11905 1.30792 6.55211C2.4584 4.29417 4.29417 2.4584 6.55211 1.30792C9.11905 0 12.4794 0 19.2 0H204.8C211.521 0 214.881 0 217.448 1.30792C219.706 2.4584 221.542 4.29417 222.692 6.55211C224 9.11905 224 12.4794 224 19.2V44.8C224 51.5206 224 54.8809 222.692 57.4479C221.542 59.7058 219.706 61.5416 217.448 62.6921C214.881 64 211.521 64 204.8 64H19.2C12.4794 64 9.11905 64 6.55211 62.6921C4.29417 61.5416 2.4584 59.7058 1.30792 57.4479C0 54.8809 0 51.5206 0 44.8V19.2Z" fill="#00CC82"/>
|
||||
<path d="M56.7287 38.716C55.5407 38.716 54.5027 38.446 53.6147 37.906C52.7267 37.366 52.0367 36.616 51.5447 35.656C51.0527 34.684 50.8067 33.556 50.8067 32.272C50.8067 30.976 51.0587 29.836 51.5627 28.852C52.0787 27.856 52.8047 27.082 53.7407 26.53C54.6887 25.966 55.8107 25.684 57.1067 25.684C58.5827 25.684 59.8067 26.038 60.7787 26.746C61.7507 27.454 62.3807 28.432 62.6687 29.68H60.0947C59.9027 29.092 59.5547 28.636 59.0507 28.312C58.5467 27.976 57.8987 27.808 57.1067 27.808C55.8467 27.808 54.8747 28.21 54.1907 29.014C53.5067 29.806 53.1647 30.898 53.1647 32.29C53.1647 33.682 53.5007 34.762 54.1727 35.53C54.8567 36.286 55.7807 36.664 56.9447 36.664C58.0847 36.664 58.9427 36.358 59.5187 35.746C60.1067 35.122 60.4607 34.306 60.5807 33.298H57.3947V31.57H62.9027V38.5H60.7787L60.5987 36.844C60.1907 37.444 59.6807 37.906 59.0687 38.23C58.4567 38.554 57.6767 38.716 56.7287 38.716ZM65.8626 38.5V25.9H74.0886V27.754H68.1666V31.21H73.5486V33.01H68.1666V36.646H74.0886V38.5H65.8626ZM79.9228 38.5V27.754H76.2508V25.9H85.9168V27.754H82.2268V38.5H79.9228ZM97.6546 38.716C96.7306 38.716 95.9146 38.56 95.2066 38.248C94.4986 37.924 93.9406 37.468 93.5326 36.88C93.1246 36.28 92.9146 35.554 92.9026 34.702H95.3326C95.3566 35.29 95.5666 35.788 95.9626 36.196C96.3706 36.592 96.9286 36.79 97.6366 36.79C98.2486 36.79 98.7346 36.646 99.0946 36.358C99.4546 36.058 99.6346 35.662 99.6346 35.17C99.6346 34.654 99.4726 34.252 99.1486 33.964C98.8366 33.676 98.4166 33.442 97.8886 33.262C97.3606 33.082 96.7966 32.89 96.1966 32.686C95.2246 32.35 94.4806 31.918 93.9646 31.39C93.4606 30.862 93.2086 30.16 93.2086 29.284C93.1966 28.54 93.3706 27.904 93.7306 27.376C94.1026 26.836 94.6066 26.422 95.2426 26.134C95.8786 25.834 96.6106 25.684 97.4386 25.684C98.2786 25.684 99.0166 25.834 99.6526 26.134C100.301 26.434 100.805 26.854 101.165 27.394C101.537 27.934 101.735 28.576 101.759 29.32H99.2926C99.2806 28.876 99.1066 28.486 98.7706 28.15C98.4466 27.802 97.9906 27.628 97.4026 27.628C96.8986 27.616 96.4726 27.742 96.1246 28.006C95.7886 28.258 95.6206 28.63 95.6206 29.122C95.6206 29.542 95.7526 29.878 96.0166 30.13C96.2806 30.37 96.6406 30.574 97.0966 30.742C97.5526 30.91 98.0746 31.09 98.6626 31.282C99.2866 31.498 99.8566 31.75 100.373 32.038C100.889 32.326 101.303 32.71 101.615 33.19C101.927 33.658 102.083 34.264 102.083 35.008C102.083 35.668 101.915 36.28 101.579 36.844C101.243 37.408 100.745 37.864 100.085 38.212C99.4246 38.548 98.6146 38.716 97.6546 38.716ZM107.589 38.5V27.754H103.917V25.9H113.583V27.754H109.893V38.5H107.589ZM113.863 38.5L118.471 25.9H121.063L125.671 38.5H123.223L122.215 35.584H117.301L116.275 38.5H113.863ZM117.931 33.784H121.585L119.749 28.546L117.931 33.784ZM128.015 38.5V25.9H132.641C133.649 25.9 134.477 26.074 135.125 26.422C135.785 26.758 136.277 27.22 136.601 27.808C136.925 28.384 137.087 29.026 137.087 29.734C137.087 30.502 136.883 31.204 136.475 31.84C136.079 32.476 135.455 32.938 134.603 33.226L137.213 38.5H134.567L132.227 33.532H130.319V38.5H128.015ZM130.319 31.84H132.497C133.265 31.84 133.829 31.654 134.189 31.282C134.549 30.91 134.729 30.418 134.729 29.806C134.729 29.206 134.549 28.726 134.189 28.366C133.841 28.006 133.271 27.826 132.479 27.826H130.319V31.84ZM142.883 38.5V27.754H139.211V25.9H148.877V27.754H145.187V38.5H142.883ZM151.304 38.5V25.9H159.53V27.754H153.608V31.21H158.99V33.01H153.608V36.646H159.53V38.5H151.304ZM162.43 38.5V25.9H166.732C168.208 25.9 169.42 26.164 170.368 26.692C171.328 27.208 172.036 27.94 172.492 28.888C172.96 29.824 173.194 30.928 173.194 32.2C173.194 33.472 172.96 34.582 172.492 35.53C172.036 36.466 171.328 37.198 170.368 37.726C169.42 38.242 168.208 38.5 166.732 38.5H162.43ZM164.734 36.52H166.624C167.68 36.52 168.514 36.352 169.126 36.016C169.738 35.668 170.176 35.176 170.44 34.54C170.704 33.892 170.836 33.112 170.836 32.2C170.836 31.3 170.704 30.526 170.44 29.878C170.176 29.23 169.738 28.732 169.126 28.384C168.514 28.036 167.68 27.862 166.624 27.862H164.734V36.52Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1667 8.5C31.6145 8.5 31.1667 8.94772 31.1667 9.5V16C31.1667 16.5523 31.6145 17 32.1667 17H35.8334C36.3857 17 36.8334 16.5523 36.8334 16V9.5C36.8334 8.94772 36.3857 8.5 35.8334 8.5H32.1667ZM32.1667 22.6667C31.6145 22.6667 31.1667 23.1144 31.1667 23.6667V30.1667C31.1667 30.719 31.6145 31.1667 32.1667 31.1667H35.8334C36.3857 31.1667 36.8334 30.719 36.8334 30.1667V23.6667C36.8334 23.1144 36.3857 22.6667 35.8334 22.6667H32.1667ZM31.1667 37.8333C31.1667 37.2811 31.6145 36.8333 32.1667 36.8333H35.8334C36.3857 36.8333 36.8334 37.2811 36.8334 37.8333V44.3333C36.8334 44.8856 36.3857 45.3333 35.8334 45.3333H32.1667C31.6145 45.3333 31.1667 44.8856 31.1667 44.3333V37.8333ZM32.1667 51C31.6145 51 31.1667 51.4477 31.1667 52V58.5C31.1667 59.0523 31.6145 59.5 32.1667 59.5H35.8334C36.3857 59.5 36.8334 59.0523 36.8334 58.5V52C36.8334 51.4477 36.3857 51 35.8334 51H32.1667Z" fill="#03E1FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M8.5 44.293C8.5 44.7123 8.98496 44.9454 9.31235 44.6835L22.1786 34.3904C22.4288 34.1903 22.4288 33.8097 22.1786 33.6096L9.31235 23.3166C8.98497 23.0547 8.5 23.2877 8.5 23.707V44.293ZM59.5 23.707C59.5 23.2877 59.015 23.0547 58.6877 23.3166L45.8214 33.6096C45.5712 33.8097 45.5712 34.1903 45.8214 34.3904L58.6877 44.6835C59.015 44.9454 59.5 44.7123 59.5 44.293V23.707Z" fill="#03E1FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 2L11.4162 10.8137C12.9076 12.0757 15.0924 12.0757 16.5838 10.8137L27 2" stroke="#00FFA3" stroke-width="3" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 247 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M33.0659 46.9018C33.6127 47.3365 34.3871 47.3363 34.9336 46.9012L54.8533 31.0434L58.0182 28.5373C58.7755 27.9375 58.7768 26.7887 58.0207 26.1873L34.9337 7.82592C34.3871 7.39123 33.6129 7.39123 33.0663 7.82592L9.97483 26.1909C9.22015 26.7911 9.21966 27.9373 9.97383 28.5381L13.1183 31.0434L33.0659 46.9018Z" fill="#DC1FFF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M34.9051 54.261C34.3586 54.6956 33.5845 54.6957 33.038 54.2612L14.2792 39.3478C13.6248 38.8276 12.6715 38.9426 12.1597 39.6035L10.8406 41.3069C10.3312 41.9647 10.4544 42.9114 11.1152 43.4168L33.0843 60.2198C33.6221 60.6312 34.3687 60.6312 34.9066 60.22L56.8832 43.4176C57.5446 42.9119 57.6676 41.9643 57.1573 41.3065L55.8122 39.5729C55.3001 38.9127 54.3473 38.7983 53.6934 39.3184L34.9051 54.261Z" fill="#DC1FFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 914 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1667 12.3333C14.1667 11.781 14.6145 11.3333 15.1667 11.3333H45.0834C45.2408 11.3333 45.389 11.4074 45.4834 11.5333L53.7334 22.5333C53.7983 22.6199 53.8334 22.7251 53.8334 22.8333V55.6666C53.8334 56.2189 53.3857 56.6666 52.8334 56.6666H15.1667C14.6145 56.6666 14.1667 56.2189 14.1667 55.6666V12.3333ZM25.5001 17H19.8334V25.5H25.5001V17ZM28.3334 17H34.0001V25.5H28.3334V17ZM42.5001 17H36.8334V25.5H42.5001V17Z" fill="#00FFA3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 582 B |
|
|
@ -3,39 +3,39 @@
|
|||
"name": "Wormhole Solana Bridge",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/android-icon-36x36.png",
|
||||
"src": "/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image\/png",
|
||||
"type": "image/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-48x48.png",
|
||||
"src": "/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"type": "image/png",
|
||||
"density": "1.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-72x72.png",
|
||||
"src": "/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image\/png",
|
||||
"type": "image/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-96x96.png",
|
||||
"src": "/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"type": "image/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-144x144.png",
|
||||
"src": "/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"type": "image/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-192x192.png",
|
||||
"src": "/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"type": "image/png",
|
||||
"density": "4.0"
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@ em {
|
|||
border-radius: 20px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
|
||||
width: 450px;
|
||||
margin: 40px auto 4px auto;
|
||||
margin: 100px auto 4px auto;
|
||||
padding: 0px;
|
||||
|
||||
.ant-tabs-tab {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
@import "_colors";
|
||||
.app-left {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
}
|
||||
.app-right {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
}
|
||||
.app-bar-inner {
|
||||
display: flex;
|
||||
min-width: 50%;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
.app-bar-item {
|
||||
cursor: pointer;
|
||||
padding: 0 30px;
|
||||
color: @tungsten-60;
|
||||
font-size: 18px;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import './index.less';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
export const AppBar = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const isActiveClass = useCallback(
|
||||
(lookupClass: string) => {
|
||||
return location.pathname.includes(lookupClass) ? 'active' : '';
|
||||
},
|
||||
[location],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={'app-bar-inner'}>
|
||||
<div className={`app-bar-item ${isActiveClass('move')}`}>
|
||||
<Link to="/move">Bridge</Link>
|
||||
</div>
|
||||
<div className={`app-bar-item ${isActiveClass('faq')}`}>FAQ</div>
|
||||
<div className={`app-bar-item ${isActiveClass('poassets')}`}>
|
||||
Proof-of-Assets
|
||||
</div>
|
||||
<div className={`app-bar-item ${isActiveClass('help')}`}>Help</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
.footer {
|
||||
text-align: left;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import './../../App.less';
|
||||
import './index.less';
|
||||
import { Layout, Button } from 'antd';
|
||||
import { Layout, Button, Popover } from 'antd';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
import { LABELS } from '../../constants';
|
||||
import { AppBar } from '@oyster/common';
|
||||
import { AppBar } from '../AppBar';
|
||||
import Wormhole from '../Wormhole';
|
||||
import { Footer as AppFooter } from './../Footer';
|
||||
import { EthereumConnect } from '../EthereumConnect';
|
||||
import { useEthereum } from '../../contexts';
|
||||
import { Settings } from '@oyster/common';
|
||||
import { SettingOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
|
|
@ -30,44 +32,42 @@ export const AppLayout = React.memo((props: any) => {
|
|||
return (
|
||||
<>
|
||||
<div className={`App`}>
|
||||
<Wormhole
|
||||
onCreated={() => setWormholeReady(true)}
|
||||
show={true}
|
||||
rotate={true}
|
||||
>
|
||||
<Layout title={LABELS.APP_TITLE}>
|
||||
<Layout title={LABELS.APP_TITLE}>
|
||||
<Header className="App-Bar">
|
||||
{!isRoot && (
|
||||
<Header className="App-Bar">
|
||||
<div className="app-title">
|
||||
<Link to="/">
|
||||
<h2>WORMHOLE</h2>
|
||||
</Link>
|
||||
</div>
|
||||
<AppBar
|
||||
additionalSettings={
|
||||
connected ? (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => disconnect()}
|
||||
style={{ marginTop: '8px' }}
|
||||
>
|
||||
Disconnect ETH
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
useWalletBadge={true}
|
||||
left={<EthereumConnect />}
|
||||
/>
|
||||
</Header>
|
||||
<div className="app-title app-left">
|
||||
<Link to="/">
|
||||
<img src={'/appbar/logo.svg'} />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<Content style={{ padding: '0 50px', flexDirection: 'column' }}>
|
||||
{props.children}
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
<AppFooter />
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Wormhole>
|
||||
<AppBar />
|
||||
{!isRoot && (
|
||||
<Popover
|
||||
placement="topRight"
|
||||
title={LABELS.SETTINGS_TOOLTIP}
|
||||
content={<Settings />}
|
||||
trigger="click"
|
||||
>
|
||||
<Button
|
||||
className={'app-right'}
|
||||
shape="circle"
|
||||
size="large"
|
||||
type="text"
|
||||
icon={<SettingOutlined />}
|
||||
/>
|
||||
</Popover>
|
||||
)}
|
||||
</Header>
|
||||
<Content style={{ flexDirection: 'column' }}>
|
||||
{props.children}
|
||||
</Content>
|
||||
<Footer>
|
||||
<div className={'description-text'} style={{ color: '#2F506F' }}>
|
||||
© Solana Foundation
|
||||
</div>
|
||||
</Footer>
|
||||
</Layout>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { notification, Spin, Button } from 'antd';
|
||||
import { contexts, ConnectButton, programIds, notify, cache, useUserAccounts } from '@oyster/common';
|
||||
import {
|
||||
contexts,
|
||||
ConnectButton,
|
||||
programIds,
|
||||
notify,
|
||||
cache,
|
||||
useUserAccounts,
|
||||
} from '@oyster/common';
|
||||
import { Input } from '../Input';
|
||||
|
||||
import './style.less';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
@import "_colors";
|
||||
.input-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.flexColumn:not(.home-container) {
|
||||
background: @tungsten-100;
|
||||
}
|
||||
.swap-button {
|
||||
border-radius: 2em;
|
||||
width: 40px;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,23 @@ import React, {
|
|||
} from 'react';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import bs58 from 'bs58';
|
||||
import { programIds, useConnection, useConnectionConfig, useUserAccounts } from '@oyster/common';
|
||||
import {
|
||||
programIds,
|
||||
useConnection,
|
||||
useConnectionConfig,
|
||||
useUserAccounts,
|
||||
} from '@oyster/common';
|
||||
import { TokenInfo } from '@solana/spl-token-registry';
|
||||
import { ASSET_CHAIN, filterModalSolTokens } from '../utils/assets';
|
||||
import { useEthereum } from './ethereum';
|
||||
import { BigNumber } from 'ethers/utils';
|
||||
import { WrappedAssetFactory } from '../contracts/WrappedAssetFactory';
|
||||
import { WormholeFactory } from '../contracts/WormholeFactory';
|
||||
import { bridgeAuthorityKey, TransferRequestInfo, wrappedAssetMintKey } from '../models/bridge';
|
||||
import {
|
||||
bridgeAuthorityKey,
|
||||
TransferRequestInfo,
|
||||
wrappedAssetMintKey,
|
||||
} from '../models/bridge';
|
||||
export interface TokenChainContextState {
|
||||
info?: TransferRequestInfo;
|
||||
|
||||
|
|
@ -88,7 +97,7 @@ export const useCurrencyLeg = (mintAddress: string) => {
|
|||
const connection = useConnection();
|
||||
|
||||
useEffect(() => {
|
||||
if(!provider || !connection) {
|
||||
if (!provider || !connection) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -112,13 +121,12 @@ export const useCurrencyLeg = (mintAddress: string) => {
|
|||
// TODO: checked if mint is wrapped mint from eth...
|
||||
|
||||
const accounts = userAccounts
|
||||
.filter(a => a.info.mint.toBase58() === solToken.address)
|
||||
.sort((a, b) => a.info.amount.toNumber() - b.info.amount.toNumber());
|
||||
.filter(a => a.info.mint.toBase58() === solToken.address)
|
||||
.sort((a, b) => a.info.amount.toNumber() - b.info.amount.toNumber());
|
||||
|
||||
console.log(accounts);
|
||||
}
|
||||
|
||||
|
||||
if (ethToken) {
|
||||
let signer = provider.getSigner();
|
||||
let e = WrappedAssetFactory.connect(mintAddress, provider);
|
||||
|
|
@ -145,14 +153,11 @@ export const useCurrencyLeg = (mintAddress: string) => {
|
|||
let isWrapped = await b.isWrappedAsset(mintAddress);
|
||||
if (isWrapped) {
|
||||
info.chainID = await e.assetChain();
|
||||
info.assetAddress = Buffer.from(
|
||||
(addr).slice(2),
|
||||
'hex',
|
||||
);
|
||||
info.assetAddress = Buffer.from(addr.slice(2), 'hex');
|
||||
info.isWrapped = true;
|
||||
}
|
||||
|
||||
if(chain === ASSET_CHAIN.Ethereum) {
|
||||
if (chain === ASSET_CHAIN.Ethereum) {
|
||||
info.balance = await e.balanceOf(addr);
|
||||
} else {
|
||||
// TODO: get balance on other chains for assets that came from eth
|
||||
|
|
@ -163,7 +168,7 @@ export const useCurrencyLeg = (mintAddress: string) => {
|
|||
const mint = await wrappedAssetMintKey(bridgeId, bridgeAuthority, {
|
||||
decimals: Math.min(9, info.decimals),
|
||||
address: info.assetAddress,
|
||||
chain: info.chainID
|
||||
chain: info.chainID,
|
||||
});
|
||||
|
||||
console.log(mint.toBase58());
|
||||
|
|
@ -173,14 +178,17 @@ export const useCurrencyLeg = (mintAddress: string) => {
|
|||
|
||||
setInfo(info);
|
||||
}
|
||||
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
||||
}, [connection, provider, setInfo, chain, mintAddress, ethTokens, solTokens, userAccounts])
|
||||
}, [
|
||||
connection,
|
||||
provider,
|
||||
setInfo,
|
||||
chain,
|
||||
mintAddress,
|
||||
ethTokens,
|
||||
solTokens,
|
||||
userAccounts,
|
||||
]);
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
|
|
@ -188,7 +196,7 @@ export const useCurrencyLeg = (mintAddress: string) => {
|
|||
setAmount: setAmount,
|
||||
chain: chain,
|
||||
setChain: setChain,
|
||||
info
|
||||
info,
|
||||
}),
|
||||
[amount, setAmount, chain, setChain],
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: DM Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
|
||||
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -21,9 +24,17 @@ code {
|
|||
.home-info-row {
|
||||
min-height: 75vh;
|
||||
}
|
||||
.img-svg-absolute {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wormhole-bg {
|
||||
background-image: url('../src/assets/wormhole.svg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-image: url('/home/background.svg');
|
||||
background-size: 100% auto;
|
||||
background-color: #06101a;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
@import '_colors';
|
||||
|
||||
.App {
|
||||
height: auto;
|
||||
}
|
||||
section.ant-layout {
|
||||
max-width: 1420px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
header.ant-layout-header.App-Bar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
|
||||
}
|
||||
|
||||
.get-started {
|
||||
background: url("/home/get-started.svg") center center no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
width: 224px;
|
||||
height: 64px;
|
||||
display: inline-block;
|
||||
}
|
||||
.down-arrow {
|
||||
background: url("/home/icons/down-arrow.svg") center center no-repeat;
|
||||
background-size: 150%;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 32px;
|
||||
line-height: 160%;
|
||||
margin-top: 80px;
|
||||
}
|
||||
.description-text {
|
||||
font-size: 14px;
|
||||
line-height: 160%;
|
||||
color: @tungsten-40;
|
||||
}
|
||||
.home-container {
|
||||
width: 100%;
|
||||
|
||||
#how-it-works-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
background: @tungsten-50;
|
||||
padding-bottom: 120px;
|
||||
|
||||
& > div:first-child {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.home-description {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.home-description-item {
|
||||
padding: 0 100px 0 100px;
|
||||
.description-title {
|
||||
font-size: 20px;
|
||||
line-height: 160%;
|
||||
margin: 22px 0 22px 0;
|
||||
}
|
||||
|
||||
.description-text {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#recent-tx-container {
|
||||
padding-bottom: 70px;
|
||||
.description-text {
|
||||
color: @tungsten-60
|
||||
}
|
||||
.ant-table-pagination.ant-pagination {
|
||||
margin: 16px 100px;
|
||||
}
|
||||
.ant-table {
|
||||
margin: 0 100px;
|
||||
thead {
|
||||
tr > th.ant-table-cell {
|
||||
background-color: @tungsten-100;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
tbody > tr:nth-child(even) > td.ant-table-cell {
|
||||
background-color: @tungsten-100;
|
||||
border: none;
|
||||
}
|
||||
tbody > tr:nth-child(odd) > td.ant-table-cell {
|
||||
background-color: @tungsten-50;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.justify-bottom-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 802px;
|
||||
|
||||
& > div {
|
||||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
width: auto;
|
||||
margin: 30px 0 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grow-effect:hover {
|
||||
transition: ease-out 100ms;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
footer.ant-layout-footer {
|
||||
padding: 30px 0;
|
||||
background-image: url('/home/footer.svg');
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
background-color: @tungsten-100;
|
||||
}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
import { Table, Col, Row, Statistic, Button } from 'antd';
|
||||
import React from 'react';
|
||||
import anime from 'animejs';
|
||||
import React, { useMemo } from 'react';
|
||||
import { GUTTER } from '../../constants';
|
||||
import { formatNumber, formatUSD, shortenAddress } from '@oyster/common';
|
||||
import './itemStyle.less';
|
||||
import './index.less';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
|
||||
import { TokenDisplay } from '../../components/TokenDisplay';
|
||||
|
|
@ -110,38 +112,93 @@ export const HomeView = () => {
|
|||
},
|
||||
},
|
||||
];
|
||||
|
||||
const handleDownArrow = () => {
|
||||
const scrollTo = document.getElementById('how-it-works-container');
|
||||
const scrollElement =
|
||||
window.document.scrollingElement ||
|
||||
window.document.body ||
|
||||
window.document.documentElement;
|
||||
anime({
|
||||
targets: scrollElement,
|
||||
scrollTop: scrollTo?.offsetTop,
|
||||
duration: 1000,
|
||||
easing: 'easeInOutQuad',
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="flexColumn" style={{ minHeight: '93vh' }}>
|
||||
<Row
|
||||
gutter={GUTTER}
|
||||
justify="center"
|
||||
align="middle"
|
||||
className="home-info-row"
|
||||
>
|
||||
<Col xs={24} xl={12} className="app-title">
|
||||
<h1>Wormhole</h1>
|
||||
<h2>
|
||||
<span>Ethereum + Solana Bridge</span>
|
||||
</h2>
|
||||
<div className="flexColumn home-container wormhole-bg">
|
||||
<div className={'justify-bottom-container'}>
|
||||
<div>
|
||||
A decentralized and bi-directional bridge for
|
||||
<br /> ERC-20 and SPL tokens
|
||||
</div>
|
||||
<div className={'grow-effect'}>
|
||||
<Link to="/move">
|
||||
<Button className="app-action">Get Started</Button>
|
||||
<span className={'get-started'}></span>
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xs={24} xl={12}>
|
||||
<Statistic
|
||||
className="home-statistic"
|
||||
title={`$${formatNumber.format(totalInUSD)}`}
|
||||
value="TOTAL VALUE LOCKED"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Table
|
||||
dataSource={externalAssets.filter(a => a.name)}
|
||||
columns={columns}
|
||||
loading={loadingLockedAccounts}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={'grow-effect'}
|
||||
onClick={() => {
|
||||
handleDownArrow();
|
||||
}}
|
||||
>
|
||||
<span className={'down-arrow'}></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="how-it-works-container">
|
||||
<div className={'home-subtitle'}>How it works</div>
|
||||
<div className={'home-description'}>
|
||||
<div className={'home-description-item'}>
|
||||
<div className={'description-icon'}>
|
||||
<img src={'/home/icons/bridge-direction.svg'} />
|
||||
</div>
|
||||
<div className={'description-title'}>Bridge in any direction</div>
|
||||
<div className={'description-text'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||
nisi at praesent sed sollicitudin ullamcorper malesuada in.
|
||||
Molestie sed morbi vitae in amet ultrices.
|
||||
</div>
|
||||
</div>
|
||||
<div className={'home-description-item'}>
|
||||
<div className={'description-icon'}>
|
||||
<img src={'/home/icons/sd-card.svg'} />
|
||||
</div>
|
||||
<div className={'description-title'}>Staking & Validation</div>
|
||||
<div className={'description-text'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||
nisi at praesent sed sollicitudin ullamcorper malesuada in.
|
||||
Molestie sed morbi vitae in amet ultrices.
|
||||
</div>
|
||||
</div>
|
||||
<div className={'home-description-item'}>
|
||||
<div className={'description-icon'}>
|
||||
<img src={'/home/icons/layers.svg'} />
|
||||
</div>
|
||||
<div className={'description-title'}>Layers and Capabilities</div>
|
||||
<div className={'description-text'}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
|
||||
nisi at praesent sed sollicitudin ullamcorper malesuada in.
|
||||
Molestie sed morbi vitae in amet ultrices.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id={'recent-tx-container'}>
|
||||
<div className={'home-subtitle'}>Recent Transactions</div>
|
||||
<div className={'description-text'} style={{ marginBottom: '70px' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</div>
|
||||
<Table
|
||||
scroll={{
|
||||
scrollToFirstRowOnChange: false,
|
||||
}}
|
||||
dataSource={externalAssets.filter(a => a.name)}
|
||||
columns={columns}
|
||||
loading={loadingLockedAccounts}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
10
yarn.lock
10
yarn.lock
|
|
@ -3284,6 +3284,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@typechain/ethers-v4/-/ethers-v4-1.0.1.tgz#268b619c2660bf7689cda86e30798bd30753ae94"
|
||||
integrity sha512-G8S2PqKmzJTORIAuvgVtyyDMEyoecVW0g3aqV8EONC3Wmeb4jjgG3oUsK3dzmvz8hjR+xH7qs907S4vZ4yR0OQ==
|
||||
|
||||
"@types/animejs@^3.1.3":
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/animejs/-/animejs-3.1.3.tgz#da720ea98272b3e29f595bb15efccadb9dc04dd4"
|
||||
integrity sha512-rJsAySPkYj2guclqKYM0H3PrmztgGL36e/oEv0APwiScmlNNQ36/S1INrOKRRLdygJbEiGjYDn4MAQ9LRNP4DA==
|
||||
|
||||
"@types/aria-query@^4.2.0":
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
|
||||
|
|
@ -4645,6 +4650,11 @@ alphanum-sort@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
|
||||
integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
|
||||
|
||||
animejs@^3.2.1:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda"
|
||||
integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==
|
||||
|
||||
ansi-colors@^3.0.0:
|
||||
version "3.2.4"
|
||||
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
|
||||
|
|
|
|||
Loading…
Reference in New Issue