【前言】
先來回顧一下 Day2 Project 分析的使用者流程，今天先來做第一步的 「登入按鈕」 吧！因為自己負責前端的部分並沒有很多，所以如果時間允許的話，有點想做一個驗證是不是機器人的區塊來玩玩！

【（使用者看見的）前端與（後方運作的）後端】

1. 使用者會看見登入錢包按鈕（按鈕應該要有一些特效）
   • 按下按鈕後要連到 MetaMask 系統
2. 使用者點擊按鈕後出現 Loading 特效，同時跳出 Metamask 登入及連動同意
   • 同意後，要從 MetaMask 得到當前登入者的以太坊地址
3. 使用者同意後出現登入介面，讓其輸入欲登入的角色編號
   • 得到欲登入的角色編號後，去後方資料庫查詢此地址是否真的擁有此 NFT
     // 資料庫建構的部分由其他夥伴負責，這邊我負責檢查 Tokens 的持有地址
4. 成功登入後的畫面
   // 網頁互動的部分由其他夥伴負責，這邊我負責顯示登入成功 or 失敗

【頁面連結】
這裡使用 The React Router 來連動不同的頁面。首先在 command 引入 react-router-dom。

npm install react-router-dom

以及在 App.js import 來做使用。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <AppContainer>
      <Router>
        <Switch>
          <Route exact path="/">
            <MetaMask />
          </Route>
          <Route exact path="/login">
            <AccountBox />
          </Route>
        </Switch>
      </Router>
    </AppContainer>
  );
}

export default App;

首先製作背景，先用太空超人來作範例，到時候實際成品會希望畫一隻太空超人版的恐龍！

import styled from "styled-components";
import img1 from "./399728.jpg";

export const Wrapper = styled.section`
  background-image: url(${img1});
  ...
  }
`;

調整 background-position 花費我超多時間，因為我一直去調整個 Wrapper 的 position，因為wrapper 在 index.jsx 中是包住整個按鈕的，所以圖片就會一直壓到登入按鈕或者兩個互相影響位置，最後才發現原來是要改 background-position！

【錢包登入按鈕】

這個霓虹燈按鈕跟網路上很多類似的 CSS 是差不多概念，就不多作介紹了！這邊要注意的是如果要在 styled-components 裡面呼叫 JS 的變數名稱的話，都要加上 ${...} 來取用物件的方式使用。

const clrneon = "#66CCCC";

const StyledLink = styled(Link)`
	...
  color: ${clrneon};
  border: ${clrneon} 0.125em solid;
	...
	text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
  box-shadow: inset 0 0 0.5em 0 ${clrneon}, 0 0 0.5em 0 ${clrneon};
	position: relative;
  display: flex;
	...
	&:before {
		...
    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
  }
  &:after {
    ...
    box-shadow: 0 0 2em 0.5em ${clrneon};
    opacity: 0;
    transition: opacity 100ms linear;
  }
  &:focus {
    animation: rotate 1.5s linear infinite;
  }
  &:hover, &:focus {
    text-shadow: none;
  }
	...
`;

export function MetaMask(props) {

  return (
    <Wrapper>
      <StyledLink to="/login">
        LOGIN WITH METAMASK
      </StyledLink>
    </Wrapper>
  );
}

把所有元件組合起來的成果！有一種不知所云的塑膠迷因感，不過因為只是練習所以先暫時這樣吧！之後等美術做出樣本圖再換回正常的樣子xD

【MetaMask Logo】
這陣子發現 MetaMask 有一個開源的 3D-Logo 超可愛的，重點是狐狸會跟著滑鼠移動！除此之外還有一些驚為天人的特效，果然不是凡人能觸及的領域，身為一個普通人我還是直接 import 就好。

<script src="bundle.js"></script>

後來發現這樣 import 沒辦法在 react 裡面使用，只好利用下面這個方法把 Logo 放進去。

import { Helmet } from 'react-helmet';
import { Logo } from "./bundle.js"
...
export function MetaMask(props) {

  return (
    <Wrapper>
      <StyledLink to="/login">
        LOGIN WITH METAMASK
      </StyledLink>
			<Helmet >
			  <Logo />
			</Helmet>
    </Wrapper>
  );
}

悲慘的是我不管怎麼做都沒辦法讓 Logo 跟圖片重疊，總是會變成多一塊在最下面。我想很大的一個問題是我看不懂 MetaMask Logo JS 檔案的內容是怎麼產生的嗚嗚嗚。而且除了 Helmet ，其他把 JavaScript 放進去 export function return 的方法我也都不會，只好放棄把 Logo 放進去的想法。

【小結】
突然有一種當初在學 pointer 的感覺，就是不是完全地清楚自己到底在做什麼。差別只在於寫前端的時候編譯完就能看見結果，而在 C/C++ 中我看不見記憶體到底指到哪一塊。希望自己可以多多加油，而且可以提升一點美感，明天再來繼續把前端完成吧！

【參考資料】
GitHub - MetaMask/logo: A 3d take on the metamask logo, in browser, as a browserifyable module.
How to style your React-Router links using styled-components
4 Ways to Add External JavaScript Files in React