mirror of https://github.com/certusone/oyster.git
Refactor texts and added additional pages (#102)
* fixed home css, removed usd- tokens and fixed commitment * Added proof of assets and help pages
This commit is contained in:
Juan Diego García
GitHub
parent
4aa29029aa
commit
3a9e3854fc
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 111 KiB |
|
|
@ -1,50 +1,44 @@
|
|||
<svg width="816" height="176" viewBox="0 0 816 176" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="816" height="87" viewBox="0 0 816 87" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_b)">
|
||||
<path d="M424.384 172L426.282 169.322L410.202 95L388.316 95L376.927 140.419L365.425 95L343.539 95L327.459 169.322L329.358 172H340.524L354.147 107.275H355.599L370.227 164.188H383.515L398.143 107.275H399.594L413.217 172H424.384Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M0 97.6783L1.89829 95.0001H13.0647L26.6877 159.725H28.1393L42.7673 102.812H56.0554L70.6833 159.725H72.135L85.758 95.0001H96.9244L98.8227 97.6783L82.743 172H60.8569L49.3555 126.581L37.9658 172H16.0796L0 97.6783Z" fill="url(#paint1_linear)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M241.862 172V95.0001H283.341C295.4 95.0001 301.43 101.026 301.43 113.078V125.688C301.43 135.137 297.708 140.865 290.264 142.874L303.663 169.099L301.988 172H290.375L276.082 143.767H255.485V172H241.862ZM255.485 131.491H282.894C286.169 131.491 287.807 129.855 287.807 126.581V112.186C287.807 108.912 286.169 107.275 282.894 107.275H255.485V131.491Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M460.199 95.0001V172H473.822V138.187H514.906V172H528.529V95.0001H514.906V125.912H473.822V95.0001H460.199Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M673.495 172V95.0001H687.117V159.725H721.957V172H673.495Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M755.598 95.0001V172H816V159.725H769.221V138.187H798.827V125.912H769.221V107.275H816V95.0001H755.598Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M424.384 82.9999L426.282 80.3217L410.202 6.00001L388.316 6.00001L376.927 51.4188L365.425 6L343.539 6L327.459 80.3217L329.358 82.9999H340.524L354.147 18.2754H355.599L370.227 75.1883H383.515L398.143 18.2754H399.594L413.217 82.9999H424.384Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M0 8.67833L1.89829 6.00007H13.0647L26.6877 70.7246H28.1393L42.7673 13.8117H56.0554L70.6833 70.7246H72.135L85.758 6.00007H96.9244L98.8227 8.67833L82.743 83H60.8569L49.3555 37.5812L37.9658 83H16.0796L0 8.67833Z" fill="url(#paint1_linear)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M241.862 83V6.00007H283.341C295.4 6.00007 301.43 12.0261 301.43 24.0783V36.6884C301.43 46.1367 297.708 51.8652 290.264 53.8739L303.663 80.0985L301.988 83H290.375L276.082 54.7667H255.485V83H241.862ZM255.485 42.4913H282.894C286.169 42.4913 287.807 40.8546 287.807 37.5812V23.1856C287.807 19.9121 286.169 18.2754 282.894 18.2754H255.485V42.4913Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M460.199 6.00007V83H473.822V49.187H514.906V83H528.529V6.00007H514.906V36.9116H473.822V6.00007H460.199Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M673.495 83V6.00007H687.117V70.7246H721.957V83H673.495Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M755.598 6.00007V83H816V70.7246H769.221V49.187H798.827V36.9116H769.221V18.2754H816V6.00007H755.598Z" fill="url(#paint5_linear)"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M159.495 106.073L141.269 124.091C136.572 128.735 136.572 136.265 141.269 140.909L159.495 158.927C164.192 163.571 171.808 163.571 176.505 158.927L194.731 140.909C199.428 136.265 199.428 128.735 194.731 124.091L176.505 106.073C171.808 101.429 164.192 101.429 159.495 106.073ZM131.549 114.482C121.484 124.433 121.484 140.567 131.549 150.518L149.775 168.537C159.84 178.488 176.16 178.488 186.225 168.537L204.451 150.518C214.516 140.567 214.516 124.433 204.451 114.482L186.225 96.4634C176.16 86.5122 159.84 86.5122 149.775 96.4634L131.549 114.482Z" fill="#DC1FFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M591.495 106.073L573.269 124.091C568.572 128.735 568.572 136.265 573.269 140.909L591.495 158.927C596.192 163.571 603.808 163.571 608.505 158.927L626.731 140.909C631.428 136.265 631.428 128.735 626.731 124.091L608.505 106.073C603.808 101.429 596.192 101.429 591.495 106.073ZM563.549 114.482C553.484 124.433 553.484 140.567 563.549 150.518L581.775 168.537C591.84 178.488 608.16 178.488 618.225 168.537L636.451 150.518C646.516 140.567 646.516 124.433 636.451 114.482L618.225 96.4634C608.16 86.5122 591.84 86.5122 581.775 96.4634L563.549 114.482Z" fill="#00FFA3"/>
|
||||
<path d="M149.811 12H156.924V10.75H151.22V6.79545H156.47V5.54545H151.22V1.61364H156.833V0.363636H149.811V12ZM171.537 1.61364H175.196V12H176.605V1.61364H180.264V0.363636H171.537V1.61364ZM195.239 12H196.648V6.79545H202.852V12H204.261V0.363636H202.852V5.54545H196.648V0.363636H195.239V12ZM219.883 12H226.996V10.75H221.292V6.79545H226.542V5.54545H221.292V1.61364H226.905V0.363636H219.883V12ZM242.245 12H243.654V7.45455H246.2C246.302 7.45455 246.398 7.45455 246.495 7.44886L248.95 12H250.586L247.955 7.19318C249.438 6.6875 250.131 5.47727 250.131 3.93182C250.131 1.875 248.904 0.363636 246.177 0.363636H242.245V12ZM243.654 6.18182V1.61364H246.131C248.018 1.61364 248.745 2.53409 248.745 3.93182C248.745 5.32955 248.018 6.18182 246.154 6.18182H243.654ZM265.279 12H272.393V10.75H266.688V6.79545H271.938V5.54545H266.688V1.61364H272.302V0.363636H265.279V12ZM295.278 0.363636V7.95455C295.278 9.65909 294.108 10.8864 292.165 10.8864C290.221 10.8864 289.051 9.65909 289.051 7.95455V0.363636H287.642V8.06818C287.642 10.4545 289.426 12.2045 292.165 12.2045C294.903 12.2045 296.687 10.4545 296.687 8.06818V0.363636H295.278ZM312.301 0.363636V12H313.619V3.15909H313.733L317.369 12H318.642L322.279 3.15909H322.392V12H323.71V0.363636H322.029L318.074 10.0227H317.938L313.983 0.363636H312.301ZM359.863 9.95455H361.136V6.84091H364.249V5.56818H361.136V2.45455H359.863V5.56818H356.749V6.84091H359.863V9.95455ZM403.646 3.27273H405.01C404.947 1.51705 403.328 0.204545 401.078 0.204545C398.851 0.204545 397.101 1.5 397.101 3.45455C397.101 5.02273 398.237 5.95455 400.055 6.47727L401.487 6.88636C402.714 7.22727 403.805 7.65909 403.805 8.81818C403.805 10.0909 402.578 10.9318 400.964 10.9318C399.578 10.9318 398.351 10.3182 398.237 9H396.783C396.919 10.9091 398.464 12.2045 400.964 12.2045C403.646 12.2045 405.169 10.7273 405.169 8.84091C405.169 6.65909 403.101 5.95455 401.896 5.63636L400.714 5.31818C399.851 5.09091 398.464 4.63636 398.464 3.38636C398.464 2.27273 399.487 1.45455 401.033 1.45455C402.442 1.45455 403.51 2.125 403.646 3.27273ZM430.104 6.18182C430.104 2.5 427.945 0.204545 424.967 0.204545C421.99 0.204545 419.831 2.5 419.831 6.18182C419.831 9.86364 421.99 12.1591 424.967 12.1591C427.945 12.1591 430.104 9.86364 430.104 6.18182ZM428.74 6.18182C428.74 9.20455 427.081 10.8409 424.967 10.8409C422.854 10.8409 421.195 9.20455 421.195 6.18182C421.195 3.15909 422.854 1.52273 424.967 1.52273C427.081 1.52273 428.74 3.15909 428.74 6.18182ZM445.273 12H452.091V10.75H446.682V0.363636H445.273V12ZM468.285 12L469.455 8.70455H474.16L475.33 12H476.808L472.535 0.363636H471.08L466.808 12H468.285ZM469.898 7.45455L471.762 2.20455H471.853L473.717 7.45455H469.898ZM500.647 0.363636H499.261V9.52273H499.147L492.784 0.363636H491.42V12H492.829V2.86364H492.943L499.284 12H500.647V0.363636ZM516.744 12L517.915 8.70455H522.619L523.79 12H525.267L520.994 0.363636H519.54L515.267 12H516.744ZM518.358 7.45455L520.221 2.20455H520.312L522.176 7.45455H518.358ZM557.179 12H561.384C564.134 12 565.27 10.6591 565.27 8.90909C565.27 7.06818 563.998 6.06818 562.929 6V5.88636C563.929 5.61364 564.816 4.95455 564.816 3.45455C564.816 1.75 563.679 0.363636 561.248 0.363636H557.179V12ZM558.588 10.75V6.70455H561.452C562.975 6.70455 563.929 7.72727 563.929 8.90909C563.929 9.93182 563.225 10.75 561.384 10.75H558.588ZM558.588 5.47727V1.61364H561.248C562.793 1.61364 563.475 2.43182 563.475 3.45455C563.475 4.68182 562.475 5.47727 561.202 5.47727H558.588ZM580.386 12H581.795V7.45455H584.34C584.442 7.45455 584.539 7.45455 584.636 7.44886L587.09 12H588.727L586.096 7.19318C587.579 6.6875 588.272 5.47727 588.272 3.93182C588.272 1.875 587.045 0.363636 584.317 0.363636H580.386V12ZM581.795 6.18182V1.61364H584.272C586.158 1.61364 586.886 2.53409 586.886 3.93182C586.886 5.32955 586.158 6.18182 584.295 6.18182H581.795ZM604.829 0.363636H603.42V12H604.829V0.363636ZM624.045 12C627.591 12 629.591 9.79545 629.591 6.15909C629.591 2.54545 627.591 0.363636 624.204 0.363636H620.454V12H624.045ZM621.864 10.75V1.61364H624.114C626.841 1.61364 628.227 3.34091 628.227 6.15909C628.227 9 626.841 10.75 623.954 10.75H621.864ZM652.709 4H654.163C653.732 1.75 651.845 0.204545 649.391 0.204545C646.408 0.204545 644.3 2.5 644.3 6.18182C644.3 9.86364 646.391 12.1591 649.482 12.1591C652.254 12.1591 654.232 10.3125 654.232 7.43182V6.18182H649.8V7.43182H652.868C652.828 9.52273 651.453 10.8409 649.482 10.8409C647.323 10.8409 645.663 9.20455 645.663 6.18182C645.663 3.15909 647.323 1.52273 649.391 1.52273C651.073 1.52273 652.215 2.47159 652.709 4ZM669.445 12H676.559V10.75H670.854V6.79545H676.104V5.54545H670.854V1.61364H676.468V0.363636H669.445V12Z" fill="url(#paint6_linear)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M159.495 17.0732L141.269 35.0915C136.572 39.7354 136.572 47.2646 141.269 51.9085L159.495 69.9268C164.192 74.5707 171.808 74.5707 176.505 69.9268L194.731 51.9085C199.428 47.2646 199.428 39.7354 194.731 35.0915L176.505 17.0732C171.808 12.4293 164.192 12.4293 159.495 17.0732ZM131.549 25.4817C121.484 35.4329 121.484 51.5671 131.549 61.5183L149.775 79.5366C159.84 89.4878 176.16 89.4878 186.225 79.5366L204.451 61.5183C214.516 51.5671 214.516 35.4329 204.451 25.4817L186.225 7.46342C176.16 -2.48781 159.84 -2.48781 149.775 7.46342L131.549 25.4817Z" fill="#DC1FFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M591.495 17.0732L573.269 35.0915C568.572 39.7354 568.572 47.2646 573.269 51.9085L591.495 69.9268C596.192 74.5707 603.808 74.5707 608.505 69.9268L626.731 51.9085C631.428 47.2646 631.428 39.7354 626.731 35.0915L608.505 17.0732C603.808 12.4293 596.192 12.4293 591.495 17.0732ZM563.549 25.4817C553.484 35.4329 553.484 51.5671 563.549 61.5183L581.775 79.5366C591.84 89.4878 608.16 89.4878 618.225 79.5366L636.451 61.5183C646.516 51.5671 646.516 35.4329 636.451 25.4817L618.225 7.46342C608.16 -2.48781 591.84 -2.48781 581.775 7.46342L563.549 25.4817Z" fill="#00FFA3"/>
|
||||
<defs>
|
||||
<filter id="filter0_b" x="-6" y="89" width="828" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter0_b" x="-6" y="0" width="828" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<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="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint0_linear" x1="408" y1="-22" x2="408" y2="104.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint1_linear" x1="408" y1="-22" x2="408" y2="104.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint2_linear" x1="408" y1="-22" x2="408" y2="104.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint3_linear" x1="408" y1="-22" x2="408" y2="104.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint4_linear" x1="408" y1="-22" x2="408" y2="104.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint5_linear" x1="408" y1="-22" x2="408" y2="104.791" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#010202" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="132.986" y1="16" x2="708.028" y2="16" 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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 4.3 KiB |
|
|
@ -51,9 +51,9 @@ export const AppBar = (props: { isRoot?: boolean }) => {
|
|||
<div className={`app-bar-item ${isActiveClass('move')}`}>
|
||||
<Link to="/move">Bridge</Link>
|
||||
</div>
|
||||
<div className={`app-bar-item ${isActiveClass('faq')}`}>
|
||||
<Link to="/faq">FAQ</Link>
|
||||
</div>
|
||||
{/*<div className={`app-bar-item ${isActiveClass('faq')}`}>*/}
|
||||
{/* <Link to="/faq">FAQ</Link>*/}
|
||||
{/*</div>*/}
|
||||
<div className={`app-bar-item ${isActiveClass('proof-of-assets')}`}>
|
||||
<Link to="/proof-of-assets">Proof-of-Assets</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
@import "_colors";
|
||||
|
||||
#recent-tx-container {
|
||||
max-width: 70%;
|
||||
margin: auto;
|
||||
padding-bottom: 70px;
|
||||
.description-text {
|
||||
color: @tungsten-60
|
||||
}
|
||||
.ant-table-pagination.ant-pagination {
|
||||
margin: 16px 100px;
|
||||
}
|
||||
.ant-table {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
#recent-tx-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
|
||||
#recent-tx-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
import { Table } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
import './index.less';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { TokenDisplay } from '../../components/TokenDisplay';
|
||||
import { toChainSymbol } from '../../contexts/chainPair';
|
||||
import { formatUSD, shortenAddress } from '@oyster/common';
|
||||
import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
|
||||
|
||||
export const AssetsTable = () => {
|
||||
const {
|
||||
loading: loadingLockedAccounts,
|
||||
externalAssets,
|
||||
totalInUSD,
|
||||
} = useWormholeAccounts();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Symbol',
|
||||
dataIndex: 'symbol',
|
||||
key: 'symbol',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: {},
|
||||
},
|
||||
children: (
|
||||
<Link
|
||||
to={`/move?from=${toChainSymbol(record.chain)}&token=${
|
||||
record.symbol
|
||||
}`}
|
||||
>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
|
||||
{record.logo && (
|
||||
<TokenDisplay logo={record.logo} chain={record.chain} />
|
||||
)}{' '}
|
||||
{record.symbol}
|
||||
</span>
|
||||
</Link>
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
},
|
||||
{
|
||||
title: 'Amount ($)',
|
||||
dataIndex: 'amountInUSD',
|
||||
key: 'amountInUSD',
|
||||
},
|
||||
{
|
||||
title: 'Price',
|
||||
dataIndex: 'price',
|
||||
width: 100,
|
||||
key: 'price',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: { textAlign: 'right' },
|
||||
},
|
||||
children: record.price ? formatUSD.format(record.price) : '--',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Asset Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: {},
|
||||
},
|
||||
children: (
|
||||
<a href={record.explorer} target="_blank" rel="noopener noreferrer">
|
||||
{shortenAddress(text, 6)}
|
||||
</a>
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Wrapped Address',
|
||||
dataIndex: 'mintKey',
|
||||
key: 'mintKey',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: {},
|
||||
},
|
||||
children: (
|
||||
<a
|
||||
href={record.wrappedExplorer}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{shortenAddress(text, 6)}
|
||||
</a>
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div id={'recent-tx-container'}>
|
||||
<div className={'home-subtitle'}>Total Value Locked</div>
|
||||
<div
|
||||
className={'assets-total description-text'}
|
||||
style={{ marginBottom: '70px', fontSize: '40px' }}
|
||||
>
|
||||
{formatUSD.format(totalInUSD)}
|
||||
</div>
|
||||
<Table
|
||||
scroll={{
|
||||
scrollToFirstRowOnChange: false,
|
||||
x: 900,
|
||||
}}
|
||||
dataSource={externalAssets.filter(a => a.name)}
|
||||
columns={columns}
|
||||
loading={loadingLockedAccounts}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -8,7 +8,7 @@ import { useEthereum } from '../../contexts';
|
|||
import { TokenDisplay } from '../TokenDisplay';
|
||||
import { ASSET_CHAIN } from '../../models/bridge/constants';
|
||||
import { useConnectionConfig } from '@oyster/common';
|
||||
import { filterModalSolTokens } from '../../utils/assets';
|
||||
import { filterModalEthTokens, filterModalSolTokens } from '../../utils/assets';
|
||||
|
||||
export const TokenSelectModal = (props: {
|
||||
onSelectToken: (token: string) => void;
|
||||
|
|
@ -24,7 +24,10 @@ export const TokenSelectModal = (props: {
|
|||
|
||||
const inputRef = useRef<Input>(null);
|
||||
const tokens = useMemo(
|
||||
() => [...ethTokens, ...filterModalSolTokens(solTokens)],
|
||||
() => [
|
||||
...filterModalEthTokens(ethTokens),
|
||||
...filterModalSolTokens(solTokens),
|
||||
],
|
||||
[ethTokens, solTokens],
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,11 @@ import {
|
|||
useUserAccounts,
|
||||
} from '@oyster/common';
|
||||
import { TokenInfo } from '@solana/spl-token-registry';
|
||||
import { ASSET_CHAIN, filterModalSolTokens } from '../utils/assets';
|
||||
import {
|
||||
ASSET_CHAIN,
|
||||
filterModalEthTokens,
|
||||
filterModalSolTokens,
|
||||
} from '../utils/assets';
|
||||
import { useEthereum } from './ethereum';
|
||||
import { BigNumber } from 'ethers/utils';
|
||||
import { WrappedAssetFactory } from '../contracts/WrappedAssetFactory';
|
||||
|
|
@ -252,7 +256,10 @@ export function TokenChainPairProvider({ children = null as any }) {
|
|||
const setChainB = quote.setChain;
|
||||
|
||||
const tokens = useMemo(
|
||||
() => [...ethTokens, ...filterModalSolTokens(solTokens)],
|
||||
() => [
|
||||
...filterModalEthTokens(ethTokens),
|
||||
...filterModalSolTokens(solTokens),
|
||||
],
|
||||
[ethTokens, solTokens],
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -224,6 +224,7 @@ export const EthereumProvider: FunctionComponent = ({ children }) => {
|
|||
|
||||
return (
|
||||
<Button
|
||||
key={provider.url}
|
||||
size="large"
|
||||
type={providerUrl === provider.url ? 'primary' : 'ghost'}
|
||||
onClick={onClick}
|
||||
|
|
|
|||
|
|
@ -275,7 +275,8 @@ export const useWormholeAccounts = () => {
|
|||
})();
|
||||
|
||||
return () => {
|
||||
connection.removeProgramAccountChangeListener(wormholeSubId);
|
||||
if (wormholeSubId !== 0)
|
||||
connection.removeProgramAccountChangeListener(wormholeSubId);
|
||||
};
|
||||
}, [connection, setExternalAssets]);
|
||||
|
||||
|
|
@ -330,7 +331,7 @@ export const useWormholeAccounts = () => {
|
|||
if (ids.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Querying Prices...');
|
||||
const parameters = `?ids=${ids.join(',')}&vs_currencies=usd`;
|
||||
const resp = await window.fetch(COINGECKO_COIN_PRICE_API + parameters);
|
||||
const data = await resp.json();
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ type WrappedTransferMeta = {
|
|||
coinId?: string;
|
||||
price?: number;
|
||||
explorer?: any;
|
||||
|
||||
logo?: string;
|
||||
symbol?: string;
|
||||
amount: number;
|
||||
|
|
@ -135,6 +134,7 @@ const queryWrappedMetaTransactions = async (
|
|||
for (const sig of resp.result) {
|
||||
const confirmedTx = await connection.getParsedConfirmedTransaction(
|
||||
sig.signature,
|
||||
'finalized',
|
||||
);
|
||||
if (!confirmedTx) continue;
|
||||
const instructions = confirmedTx.transaction?.message?.instructions;
|
||||
|
|
@ -297,6 +297,7 @@ export const useWormholeTransactions = () => {
|
|||
|
||||
if (ids.length === 0) return;
|
||||
|
||||
console.log('Querying Prices...');
|
||||
const parameters = `?ids=${ids.join(',')}&vs_currencies=usd`;
|
||||
const resp = await window.fetch(COINGECKO_COIN_PRICE_API + parameters);
|
||||
const usdByCoinId = await resp.json();
|
||||
|
|
@ -313,7 +314,7 @@ export const useWormholeTransactions = () => {
|
|||
() => dataSourcePriceQuery(),
|
||||
COINGECKO_POOL_INTERVAL,
|
||||
);
|
||||
}, [transfers, setAmountInUSD]);
|
||||
}, [transfers, setAmountInUSD, coinList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (transfers && coinList && !loading) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function Routes() {
|
|||
component={() => <HomeView />}
|
||||
/>
|
||||
<Route path="/move" children={<TransferView />} />
|
||||
<Route path="/faq" children={<FaqView />} />
|
||||
{/*<Route path="/faq" children={<FaqView />} />*/}
|
||||
<Route
|
||||
path="/proof-of-assets"
|
||||
children={<ProofOfAssetsView />}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,18 @@ export const chainToName = (chain?: ASSET_CHAIN) => {
|
|||
return CHAIN_NAME[chain || ASSET_CHAIN.Ethereum];
|
||||
};
|
||||
|
||||
const EXCLUDED_COMMON_TOKENS = ['usdt', 'usdc'];
|
||||
const EXCLUDED_SPL_TOKENS = ['sol', ...EXCLUDED_COMMON_TOKENS];
|
||||
|
||||
export const filterModalSolTokens = (tokens: TokenInfo[]) => {
|
||||
return tokens.filter(token => token.symbol !== 'SOL');
|
||||
return tokens.filter(
|
||||
token => EXCLUDED_SPL_TOKENS.indexOf(token.symbol.toLowerCase()) < 0,
|
||||
);
|
||||
};
|
||||
const EXCLUDED_ETH_TOKENS = [...EXCLUDED_COMMON_TOKENS];
|
||||
|
||||
export const filterModalEthTokens = (tokens: TokenInfo[]) => {
|
||||
return tokens.filter(
|
||||
token => EXCLUDED_ETH_TOKENS.indexOf(token.symbol.toLowerCase()) < 0,
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
.description-container {
|
||||
.ant-row {
|
||||
align-items: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.main-logo {
|
||||
.logo-title {
|
||||
margin-bottom: 0;
|
||||
font-size: 35px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.q-title {
|
||||
font-size: 32px;
|
||||
line-height: 160%;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.q-description {
|
||||
font-size: 20px;
|
||||
line-height: 160%;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
import './index.less';
|
||||
|
||||
|
|
@ -6,7 +7,47 @@ export const HelpView = () => {
|
|||
return (
|
||||
<div
|
||||
className="flexColumn transfer-bg"
|
||||
style={{ flex: 1, minHeight: '90vh' }}
|
||||
></div>
|
||||
style={{ flex: 1, minHeight: '90vh', paddingTop: '200px' }}
|
||||
>
|
||||
<div className={'description-container'}>
|
||||
<Row>
|
||||
<Col xs={24} sm={12}>
|
||||
<div className={'q-title'}>How does Wormhole Work?</div>
|
||||
<p className={'q-description'}>
|
||||
Wormhole allows existing projects, platforms, and communities to
|
||||
move tokenized assets seamlessly across blockchains to benefit
|
||||
from Solana’s high speed and low cost. Wormhole does this by
|
||||
wrapping ERC-20 tokens, which are then usable in Solana’s low-cost
|
||||
defi ecosystem.
|
||||
</p>
|
||||
</Col>
|
||||
<Col xs={24} sm={12}>
|
||||
<div className={'main-logo'}>
|
||||
<img src={'/help/overview.svg'} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={24} sm={12}>
|
||||
<div className={'main-logo'}>
|
||||
<a
|
||||
href={'https://github.com/certusone/wormhole'}
|
||||
target={'_blank'}
|
||||
>
|
||||
<div className={'logo-title'}> get started</div>
|
||||
</a>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12}>
|
||||
<div className={'q-title'}>
|
||||
How can I integrate Wormhole into my wallet or dapp?
|
||||
</div>
|
||||
<p className={'q-description'}>
|
||||
Wormhole is an open-source project accessible to all.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,6 +25,18 @@ section.ant-layout {
|
|||
width: 25px;
|
||||
height: 21px;
|
||||
}
|
||||
.logo-title {
|
||||
/* SOLANA <-> ETHEREUM BRIDGE */
|
||||
background: linear-gradient(90deg, #DC1FFF 11.29%, #4DA9FF 51.42%, #00CC82 93.23%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
text-align: center;
|
||||
letter-spacing: 0.8em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 32px;
|
||||
|
|
@ -55,7 +67,9 @@ section.ant-layout {
|
|||
.home-description {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.home-description-item {
|
||||
padding: 0 30px 0 30px;
|
||||
|
|
@ -116,7 +130,7 @@ section.ant-layout {
|
|||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
width: auto;
|
||||
margin: 3px 20px 30px 20px;
|
||||
margin: 3px 20px 40px 20px;
|
||||
}
|
||||
& > div:first-child {
|
||||
margin-bottom: 120px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { Table } from 'antd';
|
||||
import anime from 'animejs';
|
||||
import React from 'react';
|
||||
import { formatUSD, shortenAddress } from '@oyster/common';
|
||||
|
|
@ -8,109 +7,9 @@ import { Link } from 'react-router-dom';
|
|||
import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
|
||||
import { TokenDisplay } from '../../components/TokenDisplay';
|
||||
import { toChainSymbol } from '../../contexts/chainPair';
|
||||
import { AssetsTable } from '../../components/AssetsTable';
|
||||
|
||||
export const HomeView = () => {
|
||||
const {
|
||||
loading: loadingLockedAccounts,
|
||||
externalAssets,
|
||||
totalInUSD,
|
||||
} = useWormholeAccounts();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Symbol',
|
||||
dataIndex: 'symbol',
|
||||
key: 'symbol',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: {},
|
||||
},
|
||||
children: (
|
||||
<Link
|
||||
to={`/move?from=${toChainSymbol(record.chain)}&token=${
|
||||
record.symbol
|
||||
}`}
|
||||
>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
|
||||
{record.logo && (
|
||||
<TokenDisplay logo={record.logo} chain={record.chain} />
|
||||
)}{' '}
|
||||
{record.symbol}
|
||||
</span>
|
||||
</Link>
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
},
|
||||
{
|
||||
title: 'Amount ($)',
|
||||
dataIndex: 'amountInUSD',
|
||||
key: 'amountInUSD',
|
||||
},
|
||||
{
|
||||
title: 'Price',
|
||||
dataIndex: 'price',
|
||||
width: 100,
|
||||
key: 'price',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: { textAlign: 'right' },
|
||||
},
|
||||
children: record.price ? formatUSD.format(record.price) : '--',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Asset Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: {},
|
||||
},
|
||||
children: (
|
||||
<a href={record.explorer} target="_blank" rel="noopener noreferrer">
|
||||
{shortenAddress(text, 6)}
|
||||
</a>
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Wrapped Address',
|
||||
dataIndex: 'mintKey',
|
||||
key: 'mintKey',
|
||||
render(text: string, record: any) {
|
||||
return {
|
||||
props: {
|
||||
style: {},
|
||||
},
|
||||
children: (
|
||||
<a
|
||||
href={record.wrappedExplorer}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{shortenAddress(text, 6)}
|
||||
</a>
|
||||
),
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
const handleDownArrow = () => {
|
||||
const scrollTo = document.getElementById('how-it-works-container');
|
||||
const scrollElement =
|
||||
|
|
@ -129,11 +28,15 @@ export const HomeView = () => {
|
|||
<div className="flexColumn home-container">
|
||||
<div className={'justify-bottom-container wormhole-bg'}>
|
||||
<div className={'main-logo'}>
|
||||
<div className={'logo-title'}>
|
||||
{' '}
|
||||
SOLANA <-> ETHEREUM BRIDGE
|
||||
</div>
|
||||
<img src={'/home/main-logo.svg'} />
|
||||
</div>
|
||||
<div>
|
||||
A decentralized and bi-directional bridge for
|
||||
<br /> ERC-20 and SPL tokens
|
||||
Easily move any tokens between Ethereum and Solana <br /> with
|
||||
Wormhole’s bi-directional bridge
|
||||
</div>
|
||||
<div className={'grow-effect'}>
|
||||
<Link to="/move">
|
||||
|
|
@ -175,24 +78,7 @@ export const HomeView = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id={'recent-tx-container'}>
|
||||
<div className={'home-subtitle'}>Total Value Locked</div>
|
||||
<div
|
||||
className={'assets-total description-text'}
|
||||
style={{ marginBottom: '70px', fontSize: '40px' }}
|
||||
>
|
||||
{formatUSD.format(totalInUSD)}
|
||||
</div>
|
||||
<Table
|
||||
scroll={{
|
||||
scrollToFirstRowOnChange: false,
|
||||
x: 900,
|
||||
}}
|
||||
dataSource={externalAssets.filter(a => a.name)}
|
||||
columns={columns}
|
||||
loading={loadingLockedAccounts}
|
||||
/>
|
||||
</div>
|
||||
<AssetsTable />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
div:not(.home-container) > #recent-tx-container {
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
import React from 'react';
|
||||
|
||||
import './index.less';
|
||||
import { AssetsTable } from '../../components/AssetsTable';
|
||||
|
||||
export const ProofOfAssetsView = () => {
|
||||
return (
|
||||
<div
|
||||
className="flexColumn transfer-bg"
|
||||
style={{ flex: 1, minHeight: '90vh' }}
|
||||
></div>
|
||||
>
|
||||
<AssetsTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue