Update homepage, fix loader (Uniswap#48)

* add travis badge, tweak copy

* update loanscan api url

* add beta. redirect

* undo broken redirect

* refactor on exchange data, add routing

* refactor data fetching with hooks, folder re-org

* safe routes on bad tokens and updated loading img

* update index page

* updated routes, graph endpoint

* deploy bugs, yarn packages

* fix lock

* rdeploy fixes

* es version update

* updated file structure

* fix path bug on copy hook

* switch logo ordering on dropdown, fix highlight route on back button

* update loader, webpack load config, edit homepage setup

* updated homepage setting

* remove unused imports

package.json

@@ -2,7 +2,7 @@
   "name": "uniswap-info",
   "version": "0.1.0",
   "private": true,
-  "homepage": ".",
+  "homepage": "https://uniswap.info",
   "dependencies": {
     "@reach/router": "^1.2.1",
     "apollo-cache-inmemory": "^1.6.3",
@@ -70,7 +70,6 @@
   },
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "prettier": "^1.18.2",
-    "react-responsive-select": "^5.1.0"
+    "prettier": "^1.18.2"
   }
 }

src/App.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import { ApolloProvider } from 'react-apollo'
 import { client } from './apollo/client'
 import { Route, Switch, BrowserRouter, withRouter, Redirect } from 'react-router-dom'
-import LocalLoader from './components/LocalLoader'
 import Wrapper from './components/Theme'
 import NavHeader from './components/NavHeader'
 import { ExchangePage } from './Data/ExchangePage'
@@ -11,6 +10,7 @@ import { useGlobalData } from './Data/GlobalData'
 import { useUniswapHistory } from './Data/UniswapHistory'
 import { timeframeOptions } from './constants'
 import { useAllExchanges } from './Data/GetAllExchanges'
+import LocalLoader from './components/LocalLoader'
 
 function App(props) {
   // set default time box to all time
@@ -88,7 +88,7 @@ function App(props) {
             </Switch>
           </BrowserRouter>
         ) : (
-          <>{LocalLoader()}</>
+          <LocalLoader fill="true" />
         )}
       </Wrapper>
     </ApolloProvider>

src/components/ExchangePage.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { MainPage } from '../pages/MainPage'
+import LocalLoader from '../components/LocalLoader'
 import { useExchangeSpecificData } from '../Data/ExchangeSpecificData'
 import { useChart } from '../Data/ChartData'
 import { hardcodeThemes } from '../constants/theme'
@@ -56,6 +57,6 @@ export const ExchangePage = function({ address, exchanges, currencyUnit, history
       tokenAddress={exchangeData.tokenAddress}
     />
   ) : (
-    ''
+    <LocalLoader />
   )
 }

src/components/LocalLoader/index.js

@@ -1,24 +1,32 @@
 import React from 'react'
-import styled from 'styled-components'
-import gif from './loading.gif'
+import styled, { css } from 'styled-components'
 
 const Loader = styled.div`
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
 
   & > * {
     width: 72px;
   }
+
+  ${props =>
+    props.fill && !props.height
+      ? css`
+          height: 100vh;
+        `
+      : css`
+          height: 180px;
+        `}
 `
 
-const LocalLoader = () => {
+const LocalLoader = ({ fill }) => {
   return (
-    <Loader>
-      <img src={gif} alt="loading-icon" />
+    <Loader fill={fill}>
+      <img src={require('./loading.gif')} alt="loading-icon" />
     </Loader>
   )
 }

src/components/TransactionsList/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useMedia } from 'react-use'
 import dayjs from 'dayjs'
+import LocalLoader from '../LocalLoader'
 import utc from 'dayjs/plugin/utc'
 import { client } from '../../apollo/client'
 import { TRANSACTIONS_QUERY_SKIPPABLE } from '../../apollo/queries'
@@ -10,23 +11,11 @@ import styled from 'styled-components'
 
 import Link from '../Link'
 import { Divider } from '../../components'
-import gif from './loading.gif'
 
 import { urls, formatTime, Big, formattedNum } from '../../helpers'
 
 dayjs.extend(utc)
 
-const LoadWrapper = styled.div`
-  pointer-events: none;
-  display: grid;
-  place-items: center;
-  padding-top: 20px;
-
-  & > * {
-    width: 72px;
-  }
-`
-
 const PageButtons = styled.div`
   width: 100%;
   display: flex;
@@ -516,9 +505,7 @@ function TransactionsList({ tokenSymbol, exchangeAddress, price, priceUSD, txFil
       <List p={0}>
         {!loading && txs && filteredTxs.length === 0 ? <EmptyTxWrapper>No transactions</EmptyTxWrapper> : ''}
         {loading ? (
-          <LoadWrapper>
-            <img src={gif} alt="loading-icon" />
-          </LoadWrapper>
+          <LocalLoader />
         ) : (
           filteredTxs.slice(TXS_PER_PAGE * (page - 1), page * TXS_PER_PAGE).map((tx, index) => {
             return (

webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.(png|jpg|gif)$/,
+        loader: 'url?limit=25000'
+      }
+    ]
+  }
+}