certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added footer

This commit is contained in:
juan 2021-03-12 18:43:50 -05:00
parent 227937ab46
commit 76c1e0b63f
8 changed files with 152 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bridge/src/components/Footer/index.less Normal file
View File

@ -0,0 +1,4 @@
.footer {
text-align: left;
margin: 20px 0 20px 0;
}

25
packages/bridge/src/components/Footer/index.tsx Normal file
View File

@ -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>
);
};

98
packages/bridge/src/components/Layout/index.tsx
View File

@ -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={isRoot} show={true}
> rotate={isRoot}
<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>
</>
); );
}); });

7
packages/bridge/src/components/SecurityAuditButton/index.less Normal file
View File

@ -0,0 +1,7 @@
.audit-button {
display: inline-block;
position: relative;
width: auto;
height: auto;
margin: 0 20px 0 20px;
}

13
packages/bridge/src/components/SecurityAuditButton/index.tsx Normal file
View File

@ -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>
);
};

12
packages/bridge/src/components/Transfer/index.tsx
View File

@ -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 { ProgressUpdate, toSolana, TransferRequest } from '../../models/bridge'; import { 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';

64
packages/bridge/src/views/home/index.tsx
View File

@ -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 />
</>
); );
}; };

23
packages/bridge/src/views/transfer/index.tsx
View File

@ -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 />
</>
); );
}; };