Added footer

packages/bridge/src/components/Footer/index.less

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

packages/bridge/src/components/Footer/index.tsx

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

packages/bridge/src/components/Layout/index.tsx

@@ -10,6 +10,8 @@ import { contexts, AppBar, shortenAddress, useWallet } from '@oyster/common';
 import Wormhole from '../Wormhole';
 import { useEthereum } from '../../contexts';
 import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
+import { SecurityAuditButton } from '../SecurityAuditButton';
+import { Footer } from '../Footer';
 
 const { Header, Content } = Layout;
 const { useConnectionConfig } = contexts.Connection;
@@ -30,6 +32,7 @@ export const AppLayout = React.memo((props: any) => {
     [...Object.keys(paths)].find(key => location.pathname.startsWith(key)) ||
     '';
   return (
+    <>
       <div className={`App`}>
         <Wormhole
           onCreated={() => setWormholeReady(true)}
@@ -72,9 +75,12 @@ export const AppLayout = React.memo((props: any) => {
                 />
               </Header>
             )}
-          <Content style={{ padding: '0 50px' }}>{props.children}</Content>
+            <Content style={{ padding: '0 50px', flexDirection: 'column' }}>
+              {props.children}
+            </Content>
           </Layout>
         </Wormhole>
       </div>
+    </>
   );
 });

packages/bridge/src/components/SecurityAuditButton/index.less

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

packages/bridge/src/components/SecurityAuditButton/index.tsx

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

packages/bridge/src/components/Transfer/index.tsx

@@ -1,19 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { notification, Spin, Button } from 'antd';
-import {
-  contexts,
-  ConnectButton,
-  programIds,
-  formatAmount,
-  notify,
-} from '@oyster/common';
-import { Input } from './../Input';
+import { contexts, ConnectButton, programIds, notify } from '@oyster/common';
+import { Input } from '../Input';
 
 import './style.less';
 import { ASSET_CHAIN, chainToName } from '../../utils/assets';
 import { ProgressUpdate, toSolana, TransferRequest } from '../../models/bridge';
 import { useEthereum } from '../../contexts';
-import { TokenDisplay } from './../TokenDisplay';
+import { TokenDisplay } from '../TokenDisplay';
 import { WrappedAssetFactory } from '../../contracts/WrappedAssetFactory';
 import { WormholeFactory } from '../../contracts/WormholeFactory';
 import BN from 'bn.js';

packages/bridge/src/views/home/index.tsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
 import { TokenDisplay } from '../../components/TokenDisplay';
 import { toChainSymbol } from '../../contexts/chainPair';
+import { Footer } from '../../components/Footer';
 
 export const HomeView = () => {
   const {
@@ -108,7 +109,8 @@ export const HomeView = () => {
   ];
 
   return (
-    <div className="flexColumn">
+    <>
+      <div className="flexColumn" style={{ minHeight: '93vh' }}>
         <Row
           gutter={GUTTER}
           justify="center"
@@ -138,5 +140,7 @@ export const HomeView = () => {
           loading={loadingLockedAccounts}
         />
       </div>
+      <Footer />
+    </>
   );
 };

packages/bridge/src/views/transfer/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Card } from 'antd';
 import { Transfer } from '../../components/Transfer';
+import { Footer } from '../../components/Footer';
 
 export const TransferView = () => {
   return (
-    <div className="flexColumn" style={{ flex: 1 }}>
+    <>
+      <div className="flexColumn" style={{ flex: 1, minHeight: '90vh' }}>
         <Card
           className="bridge-card"
           headStyle={{ padding: 0 }}
@@ -13,5 +15,8 @@ export const TransferView = () => {
           <Transfer />
         </Card>
       </div>
+
+      <Footer />
+    </>
   );
 };