Merge pull request #58 from Anchor-Protocol/feature/manual-wallet-set…

…ting

Feature/manual wallet setting

README.md

@@ -71,12 +71,14 @@ IDE
 
 - [packages/src/@anchor-protocol/icons/README.md](packages/src/@anchor-protocol/icons/README.md)
 - [packages/src/@anchor-protocol/notation/README.md](packages/src/@anchor-protocol/notation/README.md)
+- [packages/src/@anchor-protocol/token-icons/README.md](packages/src/@anchor-protocol/token-icons/README.md)
 - [packages/src/@anchor-protocol/wallet-provider/README.md](packages/src/@anchor-protocol/wallet-provider/README.md)
 - [packages/src/@terra-dev/audit-fastdom/README.md](packages/src/@terra-dev/audit-fastdom/README.md)
 - [packages/src/@terra-dev/big-interpolate/README.md](packages/src/@terra-dev/big-interpolate/README.md)
 - [packages/src/@terra-dev/big-math/README.md](packages/src/@terra-dev/big-math/README.md)
 - [packages/src/@terra-dev/broadcastable-operation/README.md](packages/src/@terra-dev/broadcastable-operation/README.md)
 - [packages/src/@terra-dev/event-bus/README.md](packages/src/@terra-dev/event-bus/README.md)
+- [packages/src/@terra-dev/is-desktop-chrome/README.md](packages/src/@terra-dev/is-desktop-chrome/README.md)
 - [packages/src/@terra-dev/is-touch-device/README.md](packages/src/@terra-dev/is-touch-device/README.md)
 - [packages/src/@terra-dev/is-zero/README.md](packages/src/@terra-dev/is-zero/README.md)
 - [packages/src/@terra-dev/neumorphism-ui/README.md](packages/src/@terra-dev/neumorphism-ui/README.md)

app/scripts/start.ts

@@ -22,7 +22,7 @@ import { launch } from 'puppeteer';
 
   const [page] = await browser.pages();
   await page.goto(
-    `${process.env.HTTPS ? 'https' : 'http'}://localhost:${port}/basset/mint`,
+    `${process.env.HTTPS ? 'https' : 'http'}://localhost:${port}`,
   );
 
   //await page.waitForFunction(
@@ -32,8 +32,4 @@ import { launch } from 'puppeteer';
   //    polling: 1000 * 3,
   //  },
   //);
-
-  // if you want to start with another situation
-  // you can make another script file like this script file
-  // and, add the made script to the scripts section of package.json
 })();

app/src/App.tsx

@@ -1,5 +1,6 @@
+import { useIsDesktopChrome } from '@terra-dev/is-desktop-chrome';
 import { AppProviders } from 'base/AppProviders';
-import { Banner } from 'components/Banner';
+import { GlobalStyle } from 'components/GlobalStyle';
 import { Header } from 'components/Header';
 import { MessageBox } from 'components/MessageBox';
 import { Airdrop } from 'pages/airdrop';
@@ -10,22 +11,29 @@ import { Governance } from 'pages/gov';
 import { govPathname } from 'pages/gov/env';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';
-import { GlobalStyle } from 'components/GlobalStyle';
 
 export function App() {
+  const isDesktopChrome = useIsDesktopChrome();
+
   return (
     <AppProviders>
       <div>
         <GlobalStyle />
         <Header />
-        <Banner />
         <EmptyCatcher>
+          {!isDesktopChrome && (
+            <MessageBox
+              level="info"
+              hide={{ id: 'chrome-only', period: 1000 * 60 * 60 * 24 * 7 }}
+            >
+              Anchor currently only supports{' '}
+              <a href="https://www.google.com/chrome/">desktop Chrome</a>
+            </MessageBox>
+          )}
+
           <MessageBox
             level="info"
             hide={{ id: 'announcement1', period: 1000 * 60 * 60 * 24 * 7 }}
-            style={{
-              margin: '30px 30px 0 30px',
-            }}
           >
             Some time is required for accurate data to be displayed on the
             Anchor web app. Information displayed may vary until the necessary
@@ -46,6 +54,21 @@ export function App() {
 }
 
 const EmptyCatcher = styled.div`
+  :not(:empty) {
+    padding: 20px 30px 10px 30px;
+
+    display: flex;
+    flex-direction: column;
+
+    > * {
+      margin: 0;
+
+      &:not(:first-child) {
+        margin-top: 10px;
+      }
+    }
+  }
+
   :empty {
     display: block;
     height: 50px;

app/src/components/Header/MobileHeader.tsx

@@ -1,15 +1,19 @@
-import { Menu, MenuClose } from '@anchor-protocol/icons';
+import { Menu, MenuClose, Wallet } from '@anchor-protocol/icons';
+import { useWallet, WalletStatusType } from '@anchor-protocol/wallet-provider';
+import { IconButton } from '@material-ui/core';
 import { Launch } from '@material-ui/icons';
 import { IconSpan } from '@terra-dev/neumorphism-ui/components/IconSpan';
 import { IconToggleButton } from '@terra-dev/neumorphism-ui/components/IconToggleButton';
 import { useTheme } from 'base/contexts/theme';
 import { onProduction } from 'base/env';
 import logoUrl from 'components/Header/assets/Logo.svg';
+import { useWalletDetailDialog } from 'components/Header/WalletSelector/useWalletDetailDialog';
 import { headerHeight, links } from 'env';
 import { govPathname } from 'pages/gov/env';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Link, useRouteMatch } from 'react-router-dom';
 import styled, { keyframes } from 'styled-components';
+import { useViewAddressDialog } from 'components/Header/WalletSelector/useViewAddressDialog';
 
 export interface MobileHeaderProps {
   className?: string;
@@ -20,6 +24,20 @@ function MobileHeaderBase({ className }: MobileHeaderProps) {
 
   const { themeColor } = useTheme();
 
+  const { status } = useWallet();
+
+  const [openProvideAddress, provideAddressElement] = useViewAddressDialog();
+
+  const [openWalletDetail, walletDetailElement] = useWalletDetailDialog();
+
+  const toggleWallet = useCallback(() => {
+    if (status.status === WalletStatusType.WALLET_ADDRESS_CONNECTED) {
+      openWalletDetail({});
+    } else {
+      openProvideAddress({});
+    }
+  }, [openProvideAddress, openWalletDetail, status.status]);
+
   return (
     <>
       <header
@@ -66,6 +84,13 @@ function MobileHeaderBase({ className }: MobileHeaderProps) {
           >
             <img src={logoUrl} alt="logo" />
           </a>
+
+          <div />
+
+          <IconButton onClick={toggleWallet}>
+            <Wallet />
+          </IconButton>
+
           <IconToggleButton
             on={open}
             onChange={setOpen}
@@ -74,7 +99,11 @@ function MobileHeaderBase({ className }: MobileHeaderProps) {
           />
         </section>
       </header>
+
       {open && <div style={{ height: headerHeight }} />}
+
+      {walletDetailElement}
+      {provideAddressElement}
     </>
   );
 }
@@ -123,6 +152,10 @@ export const MobileHeader = styled(MobileHeaderBase)`
   // style
   // ---------------------------------------------
   > section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     background-color: #ffffff;
 
     a {
@@ -132,6 +165,14 @@ export const MobileHeader = styled(MobileHeaderBase)`
 
     button {
       color: #333333;
+
+      &:last-child {
+        margin-left: 10px;
+      }
+    }
+
+    div:empty {
+      flex: 1;
     }
   }