Merge pull request #1 from rmshea/layout

Format, clean up pages
jacobcreech · Feb 16, 2021 · f8bf838 · f8bf838
2 parents 22eb312 + 51ff15f
commit f8bf838
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 109 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Oyster Lending on Solana" />
+    <meta name="description" content="Solana DApp Starter" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -20,7 +20,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Oyster Lending | Solana</title>
+    <title>DApp Starter | Solana</title>
     <style type="text/css">
       #root {
         height: 100%;

diff --git a/src/actions/account.ts b/src/actions/account.ts
@@ -5,10 +5,7 @@ import {
   SystemProgram,
   TransactionInstruction,
 } from "@solana/web3.js";
-import {
-  TOKEN_PROGRAM_ID,
-  WRAPPED_SOL_MINT,
-} from "../utils/ids";
+import { TOKEN_PROGRAM_ID, WRAPPED_SOL_MINT } from "../utils/ids";
 import { TokenAccount } from "../models";
 import { cache, TokenAccountParser } from "./../contexts/accounts";
 

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,25 +1,26 @@
-import React from 'react';
-import './../../App.less';
-import { Layout } from 'antd';
+import React from "react";
+import "./../../App.less";
+import { Layout } from "antd";
+import { Link } from "react-router-dom";
 
-import { LABELS } from '../../constants';
-import { AppBar } from '../AppBar';
+import { LABELS } from "../../constants";
+import { AppBar } from "../AppBar";
 
 const { Header, Content } = Layout;
 
 export const AppLayout = React.memo((props: any) => {
   return (
     <div className="App wormhole-bg">
-      <Layout
-        title={LABELS.APP_TITLE}
-      >
+      <Layout title={LABELS.APP_TITLE}>
         <Header className="App-Bar">
-          <div className="app-title"><h2>Solana DAPP</h2></div>
+          <Link to="/">
+            <div className="app-title">
+              <h2>Solana DAPP</h2>
+            </div>
+          </Link>
           <AppBar />
         </Header>
-        <Content style={{ padding: '0 50px' }}>
-          {props.children}
-        </Content>
+        <Content style={{ padding: "0 50px" }}>{props.children}</Content>
       </Layout>
     </div>
   );

diff --git a/src/config/tokens.json b/src/config/tokens.json
@@ -1,9 +1,8 @@
 [
-    {
-      "tokenSymbol": "SRM",
-      "mintAddress": "SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt",
-      "tokenName": "SRM",
-      "icon": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x476c5E26a75bd202a9683ffD34359C0CC15be0fF/logo.png"
-    }
-  ]
-
+  {
+    "tokenSymbol": "SRM",
+    "mintAddress": "SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt",
+    "tokenName": "SRM",
+    "icon": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x476c5E26a75bd202a9683ffD34359C0CC15be0fF/logo.png"
+  }
+]
diff --git a/src/contexts/accounts.tsx b/src/contexts/accounts.tsx
@@ -1,9 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useConnection } from "./connection";
 import { useWallet } from "./wallet";
 import {
@@ -18,10 +13,7 @@ import { TokenAccount } from "./../models";
 import { chunks } from "./../utils/utils";
 import { EventEmitter } from "./../utils/eventEmitter";
 import { useUserAccounts } from "../hooks/useUserAccounts";
-import {
-  WRAPPED_SOL_MINT,
-  programIds,
-} from "../utils/ids";
+import { WRAPPED_SOL_MINT, programIds } from "../utils/ids";
 
 const AccountsContext = React.createContext<any>(null);
 

diff --git a/src/contexts/connection.tsx b/src/contexts/connection.tsx
@@ -24,6 +24,7 @@ export const ENDPOINTS = [
   {
     name: "mainnet-beta" as ENV,
     endpoint: "https://solana-api.projectserum.com/",
+  },
   { name: "testnet" as ENV, endpoint: clusterApiUrl("testnet") },
   { name: "devnet" as ENV, endpoint: clusterApiUrl("devnet") },
   { name: "localnet" as ENV, endpoint: "http://127.0.0.1:8899" },

diff --git a/src/contexts/market.tsx b/src/contexts/market.tsx
@@ -1,8 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { MINT_TO_MARKET } from "./../models/marketOverrides";
-import {
-  STABLE_COINS,
-} from "./../utils/utils";
+import { STABLE_COINS } from "./../utils/utils";
 import { useConnectionConfig } from "./connection";
 import { cache, getMultipleAccounts } from "./accounts";
 import { Market, MARKETS, Orderbook, TOKEN_MINTS } from "@project-serum/serum";

diff --git a/src/contexts/wallet.tsx b/src/contexts/wallet.tsx
@@ -17,28 +17,33 @@ import { useLocalStorageState } from "./../utils/utils";
 import { LedgerWalletAdapter } from "../wallet-adapters/ledger";
 import { SolongWalletAdapter } from "../wallet-adapters/solong";
 
-const ASSETS_URL = 'https://raw.githubusercontent.com/solana-labs/oyster/main/assets/wallets/';
+const ASSETS_URL =
+  "https://raw.githubusercontent.com/solana-labs/oyster/main/assets/wallets/";
 export const WALLET_PROVIDERS = [
   {
     name: "Sollet",
-    url:  "https://www.sollet.io",
+    url: "https://www.sollet.io",
     icon: `${ASSETS_URL}sollet.svg`,
-  }, {
+  },
+  {
     name: "Solong",
-    url:  "https://solongwallet.com",
+    url: "https://solongwallet.com",
     icon: `${ASSETS_URL}solong.png`,
     adapter: SolongWalletAdapter,
-  }, {
+  },
+  {
     name: "Solflare",
-    url:  "https://solflare.com/access-wallet",
+    url: "https://solflare.com/access-wallet",
     icon: `${ASSETS_URL}solflare.svg`,
-  }, {
+  },
+  {
     name: "MathWallet",
-    url:  "https://mathwallet.org",
+    url: "https://mathwallet.org",
     icon: `${ASSETS_URL}mathwallet.svg`,
-  }, {
+  },
+  {
     name: "Ledger",
-    url:  "https://www.ledger.com",
+    url: "https://www.ledger.com",
     icon: `${ASSETS_URL}ledger.svg`,
     adapter: LedgerWalletAdapter,
   },

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,4 +1,4 @@
 export * from "./useUserAccounts";
 export * from "./useAccountByMint";
 export * from "./useTokenName";
-export * from "./useUserBalance";
+export * from "./useUserBalance";
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.ant-row {
+  min-width: 100%;
+}
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,6 +1,6 @@
 {
-  "name": "Oyster Lending",
-  "short_name": "Oyster Lending",
+  "name": "DApp Starter",
+  "short_name": "DApp Starter",
   "display": "standalone",
   "start_url": "./",
   "theme_color": "#002140",

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -6,10 +6,7 @@ import { AccountsProvider } from "./contexts/accounts";
 import { MarketProvider } from "./contexts/market";
 import { AppLayout } from "./components/Layout";
 
-import {
-  FaucetView,
-  HomeView,
-} from "./views";
+import { FaucetView, HomeView } from "./views";
 
 export function Routes() {
   return (
@@ -19,12 +16,12 @@ export function Routes() {
           <WalletProvider>
             <AccountsProvider>
               <MarketProvider>
-                  <AppLayout>
-                    <Switch>
-                      <Route exact path="/" component={() => <HomeView />} />
-                      <Route exact path="/faucet" children={<FaucetView />} />
-                    </Switch>
-                  </AppLayout>
+                <AppLayout>
+                  <Switch>
+                    <Route exact path="/" component={() => <HomeView />} />
+                    <Route exact path="/faucet" children={<FaucetView />} />
+                  </Switch>
+                </AppLayout>
               </MarketProvider>
             </AccountsProvider>
           </WalletProvider>

diff --git a/src/views/faucet/index.tsx b/src/views/faucet/index.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from "react";
-import { Card } from "antd";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
@@ -16,43 +15,24 @@ export const FaucetView = () => {
       return;
     }
 
-    connection
-      .requestAirdrop(publicKey, 2 * LAMPORTS_PER_SOL)
-      .then(() => {
-        notify({
-          message: LABELS.ACCOUNT_FUNDED,
-          type: "success",
-        });
+    connection.requestAirdrop(publicKey, 2 * LAMPORTS_PER_SOL).then(() => {
+      notify({
+        message: LABELS.ACCOUNT_FUNDED,
+        type: "success",
       });
+    });
   }, [publicKey, connection]);
 
-  const bodyStyle: React.CSSProperties = {
-    display: "flex",
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    height: "100%",
-  };
-
   return (
     <div className="flexColumn" style={{ flex: 1 }}>
-      <Card title={"Faucet"} bodyStyle={bodyStyle} style={{ flex: 1 }}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-around",
-            alignItems: "center",
-          }}
-        >
-          <div className="deposit-input-title" style={{ margin: 10 }}>
-            {LABELS.FAUCET_INFO}
-          </div>
-          <ConnectButton type="primary" onClick={airdrop}>
-            {LABELS.GIVE_SOL}
-          </ConnectButton>
+      <div>
+        <div className="deposit-input-title" style={{ margin: 10 }}>
+          {LABELS.FAUCET_INFO}
         </div>
-      </Card>
+        <ConnectButton type="primary" onClick={airdrop}>
+          {LABELS.GIVE_SOL}
+        </ConnectButton>
+      </div>
     </div>
   );
 };
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
@@ -1,5 +1,5 @@
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
-import { Button } from "antd";
+import { Button, Col, Row } from "antd";
 import React, { useEffect, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { ConnectButton } from "../../components/ConnectButton";
@@ -13,12 +13,13 @@ export const HomeView = () => {
   const { tokenMap } = useConnectionConfig();
   const { account } = useNativeAccount();
 
-  const balance = useMemo(() => formatNumber.format((account?.lamports || 0) / LAMPORTS_PER_SOL), [account]);
+  const balance = useMemo(
+    () => formatNumber.format((account?.lamports || 0) / LAMPORTS_PER_SOL),
+    [account]
+  );
 
   useEffect(() => {
-    const refreshTotal = () => {
-
-    };
+    const refreshTotal = () => {};
 
     const dispose = marketEmitter.onMarket(() => {
       refreshTotal();
@@ -32,15 +33,19 @@ export const HomeView = () => {
   }, [marketEmitter, midPriceInUSD, tokenMap]);
 
   return (
-    <div className="flexColumn">
-      TODO:
-      Your balance: {balance} SOL
-
-      <ConnectButton />
-      <Link to="/faucet">
-        <Button>Faucet</Button>
-      </Link>
-      2. Link to faucet
-    </div>
+    <Row gutter={[16, 16]} align="middle">
+      <Col span={24}>
+        <h2>Your balance: {balance} SOL</h2>
+      </Col>
+
+      <Col span={12}>
+        <ConnectButton />
+      </Col>
+      <Col span={12}>
+        <Link to="/faucet">
+          <Button>Faucet</Button>
+        </Link>
+      </Col>
+    </Row>
   );
 };