Day 7【钱包登入区 - Login Button】Kitten or Ice Cream?

【前言】
先来回顾一下 Day2 Project 分析的使用者流程，今天先来做第一步的 「登入按钮」 吧！因为自己负责前端的部分并没有很多，所以如果时间允许的话，有点想做一个验证是不是机器人的区块来玩玩！

【（使用者看见的）前端与（後方运作的）後端】

使用者会看见登入钱包按钮（按钮应该要有一些特效）
- 按下按钮後要连到 MetaMask 系统
使用者点击按钮後出现 Loading 特效，同时跳出 Metamask 登入及连动同意
- 同意後，要从 MetaMask 得到当前登入者的以太坊地址
使用者同意後出现登入介面，让其输入欲登入的角色编号
- 得到欲登入的角色编号後，去後方资料库查询此地址是否真的拥有此 NFT
  // 资料库建构的部分由其他夥伴负责，这边我负责检查 Tokens 的持有地址
成功登入後的画面
// 网页互动的部分由其他夥伴负责，这边我负责显示登入成功 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++ 中我看不见记忆体到底指到哪一块。希望自己可以多多加油，而且可以提升一点美感，明天再来继续把前端完成吧！