mirror of https://github.com/certusone/oyster.git
commit
e2298a5451
|
@ -0,0 +1,4 @@
|
||||||
|
.footer {
|
||||||
|
text-align: left;
|
||||||
|
margin: 20px 0 20px 0;
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { GithubOutlined, TwitterOutlined } from '@ant-design/icons';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { SecurityAuditButton } from '../SecurityAuditButton';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
export const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div className={'footer'}>
|
||||||
|
<SecurityAuditButton />
|
||||||
|
<Button
|
||||||
|
shape={'circle'}
|
||||||
|
icon={<GithubOutlined />}
|
||||||
|
style={{ marginRight: '20px' }}
|
||||||
|
>
|
||||||
|
<Link to={'https://github.com/solana-labs/oyster'}></Link>
|
||||||
|
</Button>
|
||||||
|
<Button shape={'circle'} icon={<TwitterOutlined />}>
|
||||||
|
<Link to={'https://twitter.com/solana'}></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
|
@ -10,6 +10,8 @@ import { contexts, AppBar, shortenAddress, useWallet } from '@oyster/common';
|
||||||
import Wormhole from '../Wormhole';
|
import Wormhole from '../Wormhole';
|
||||||
import { useEthereum } from '../../contexts';
|
import { useEthereum } from '../../contexts';
|
||||||
import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
|
import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
|
||||||
|
import { SecurityAuditButton } from '../SecurityAuditButton';
|
||||||
|
import { Footer } from '../Footer';
|
||||||
|
|
||||||
const { Header, Content } = Layout;
|
const { Header, Content } = Layout;
|
||||||
const { useConnectionConfig } = contexts.Connection;
|
const { useConnectionConfig } = contexts.Connection;
|
||||||
|
@ -30,51 +32,55 @@ export const AppLayout = React.memo((props: any) => {
|
||||||
[...Object.keys(paths)].find(key => location.pathname.startsWith(key)) ||
|
[...Object.keys(paths)].find(key => location.pathname.startsWith(key)) ||
|
||||||
'';
|
'';
|
||||||
return (
|
return (
|
||||||
<div className={`App`}>
|
<>
|
||||||
<Wormhole
|
<div className={`App`}>
|
||||||
onCreated={() => setWormholeReady(true)}
|
<Wormhole
|
||||||
show={true}
|
onCreated={() => setWormholeReady(true)}
|
||||||
rotate={true}
|
show={true}
|
||||||
>
|
rotate={true}
|
||||||
<Layout title={LABELS.APP_TITLE}>
|
>
|
||||||
{isRoot && (
|
<Layout title={LABELS.APP_TITLE}>
|
||||||
<Header className="App-Bar">
|
{isRoot && (
|
||||||
<div className="app-title">
|
<Header className="App-Bar">
|
||||||
<Link to="/">
|
<div className="app-title">
|
||||||
<h2>WORMHOLE</h2>
|
<Link to="/">
|
||||||
</Link>
|
<h2>WORMHOLE</h2>
|
||||||
</div>
|
</Link>
|
||||||
<AppBar
|
</div>
|
||||||
useWalletBadge={true}
|
<AppBar
|
||||||
left={
|
useWalletBadge={true}
|
||||||
<>
|
left={
|
||||||
{accounts[0] && (
|
<>
|
||||||
<div style={{ marginRight: 8 }}>
|
{accounts[0] && (
|
||||||
{hasCorrespondingNetworks ? (
|
<div style={{ marginRight: 8 }}>
|
||||||
<>
|
{hasCorrespondingNetworks ? (
|
||||||
<img
|
<>
|
||||||
alt={'metamask-icon'}
|
<img
|
||||||
width={20}
|
alt={'metamask-icon'}
|
||||||
height={20}
|
width={20}
|
||||||
src={metamaskIcon}
|
height={20}
|
||||||
/>
|
src={metamaskIcon}
|
||||||
{shortenAddress(accounts[0], 4)}
|
/>
|
||||||
</>
|
{shortenAddress(accounts[0], 4)}
|
||||||
) : (
|
</>
|
||||||
<Button danger type={'primary'}>
|
) : (
|
||||||
WRONG NETWORK
|
<Button danger type={'primary'}>
|
||||||
</Button>
|
WRONG NETWORK
|
||||||
)}
|
</Button>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</>
|
)}
|
||||||
}
|
</>
|
||||||
/>
|
}
|
||||||
</Header>
|
/>
|
||||||
)}
|
</Header>
|
||||||
<Content style={{ padding: '0 50px' }}>{props.children}</Content>
|
)}
|
||||||
</Layout>
|
<Content style={{ padding: '0 50px', flexDirection: 'column' }}>
|
||||||
</Wormhole>
|
{props.children}
|
||||||
</div>
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Wormhole>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
.audit-button {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 20px 0 20px;
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
export const SecurityAuditButton = () => {
|
||||||
|
return (
|
||||||
|
<Button className={'audit-button'}>
|
||||||
|
<Link to={'https://github.com/certusone/wormhole'}>Security Audit</Link>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,19 +1,13 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { notification, Spin, Button } from 'antd';
|
import { notification, Spin, Button } from 'antd';
|
||||||
import {
|
import { contexts, ConnectButton, programIds, notify } from '@oyster/common';
|
||||||
contexts,
|
import { Input } from '../Input';
|
||||||
ConnectButton,
|
|
||||||
programIds,
|
|
||||||
formatAmount,
|
|
||||||
notify,
|
|
||||||
} from '@oyster/common';
|
|
||||||
import { Input } from './../Input';
|
|
||||||
|
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import { ASSET_CHAIN, chainToName } from '../../utils/assets';
|
import { ASSET_CHAIN, chainToName } from '../../utils/assets';
|
||||||
import { fromSolana, ProgressUpdate, toSolana, TransferRequest } from '../../models/bridge';
|
import { fromSolana, ProgressUpdate, toSolana, TransferRequest } from '../../models/bridge';
|
||||||
import { useEthereum } from '../../contexts';
|
import { useEthereum } from '../../contexts';
|
||||||
import { TokenDisplay } from './../TokenDisplay';
|
import { TokenDisplay } from '../TokenDisplay';
|
||||||
import { WrappedAssetFactory } from '../../contracts/WrappedAssetFactory';
|
import { WrappedAssetFactory } from '../../contracts/WrappedAssetFactory';
|
||||||
import { WormholeFactory } from '../../contracts/WormholeFactory';
|
import { WormholeFactory } from '../../contracts/WormholeFactory';
|
||||||
import BN from 'bn.js';
|
import BN from 'bn.js';
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
|
||||||
import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
|
import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
|
||||||
import { TokenDisplay } from '../../components/TokenDisplay';
|
import { TokenDisplay } from '../../components/TokenDisplay';
|
||||||
import { toChainSymbol } from '../../contexts/chainPair';
|
import { toChainSymbol } from '../../contexts/chainPair';
|
||||||
|
import { Footer } from '../../components/Footer';
|
||||||
|
|
||||||
export const HomeView = () => {
|
export const HomeView = () => {
|
||||||
const {
|
const {
|
||||||
|
@ -108,35 +109,38 @@ export const HomeView = () => {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flexColumn">
|
<>
|
||||||
<Row
|
<div className="flexColumn" style={{ minHeight: '93vh' }}>
|
||||||
gutter={GUTTER}
|
<Row
|
||||||
justify="center"
|
gutter={GUTTER}
|
||||||
align="middle"
|
justify="center"
|
||||||
className="home-info-row"
|
align="middle"
|
||||||
>
|
className="home-info-row"
|
||||||
<Col xs={24} xl={12} className="app-title">
|
>
|
||||||
<h1>Wormhole</h1>
|
<Col xs={24} xl={12} className="app-title">
|
||||||
<h2>
|
<h1>Wormhole</h1>
|
||||||
<span>Ethereum + Solana Bridge</span>
|
<h2>
|
||||||
</h2>
|
<span>Ethereum + Solana Bridge</span>
|
||||||
<Link to="/move">
|
</h2>
|
||||||
<Button className="app-action">Get Started</Button>
|
<Link to="/move">
|
||||||
</Link>
|
<Button className="app-action">Get Started</Button>
|
||||||
</Col>
|
</Link>
|
||||||
<Col xs={24} xl={12}>
|
</Col>
|
||||||
<Statistic
|
<Col xs={24} xl={12}>
|
||||||
className="home-statistic"
|
<Statistic
|
||||||
title={`$${formatNumber.format(totalInUSD)}`}
|
className="home-statistic"
|
||||||
value="TOTAL VALUE LOCKED"
|
title={`$${formatNumber.format(totalInUSD)}`}
|
||||||
/>
|
value="TOTAL VALUE LOCKED"
|
||||||
</Col>
|
/>
|
||||||
</Row>
|
</Col>
|
||||||
<Table
|
</Row>
|
||||||
dataSource={externalAssets.filter(a => a.name)}
|
<Table
|
||||||
columns={columns}
|
dataSource={externalAssets.filter(a => a.name)}
|
||||||
loading={loadingLockedAccounts}
|
columns={columns}
|
||||||
/>
|
loading={loadingLockedAccounts}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,17 +1,22 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Card } from 'antd';
|
import { Card } from 'antd';
|
||||||
import { Transfer } from '../../components/Transfer';
|
import { Transfer } from '../../components/Transfer';
|
||||||
|
import { Footer } from '../../components/Footer';
|
||||||
|
|
||||||
export const TransferView = () => {
|
export const TransferView = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flexColumn" style={{ flex: 1 }}>
|
<>
|
||||||
<Card
|
<div className="flexColumn" style={{ flex: 1, minHeight: '90vh' }}>
|
||||||
className="bridge-card"
|
<Card
|
||||||
headStyle={{ padding: 0 }}
|
className="bridge-card"
|
||||||
bodyStyle={{ position: 'relative' }}
|
headStyle={{ padding: 0 }}
|
||||||
>
|
bodyStyle={{ position: 'relative' }}
|
||||||
<Transfer />
|
>
|
||||||
</Card>
|
<Transfer />
|
||||||
</div>
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue