Day 9【钱包登入区 - Login Interface】你也想起舞吗？

【前言】
一如往常先来回顾一下 Day2 Project 分析的使用者流程。今天来做登入页面，第三步的**「登入介面」，还有第四步的「登入成功画面」**！因为之前学习前端三巨头还有 React 的课後练习就已经是拿这个部分来实作了，所以今天应该会比较轻松吧，对吧…希望是如此。

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

使用者会看见登入钱包按钮（按钮应该要有一些特效）
- 按下按钮後要连到 MetaMask 系统
使用者点击按钮後出现 Loading 特效，同时跳出 Metamask 登入及连动同意
- 同意後，要从 MetaMask 得到当前登入者的以太坊地址
使用者同意後出现登入介面，让其输入欲登入的角色编号
- 得到欲登入的角色编号後，去後方资料库查询此地址是否真的拥有此 NFT
  // 资料库建构的部分由其他夥伴负责，这边我负责检查 Tokens 的持有地址
成功登入後的画面
// 网页互动的部分由其他夥伴负责，这边我负责显示登入成功 or 失败

【登入介面】
延续上次的恐龙登入介面：
先来加个背景动画，这个背景把一个渐层背景图放得很大，并且藉由移动背景图的位置来制造变色的效果，如果把时间拉得长一点还会有呼吸灯的效果。

import styled from "styled-components";

export const Wrapper = styled.section`
  ...
  background: linear-gradient(#141e30, #243b55);
	...
  display: flex;
  background-size: 1000% 1000%;
  animation: gradient 10s ease infinite;

  @keyframes gradient { 
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
  }
`;

按下去 Enter 之後，进入 Loading 页面！这边我使用的是 react-text-transition 这个套件来制作文字转换的效果，里面有很多常用的动画可以使用。首先下载套件：

npm install -S react-text-transition

制造阵列储存想要呈现的文字方块。

const TEXTS = [
  "Good morning! Ladies and gentlemen,",
  "Welcome aboard 「Dino Spaceline」 flight 「7721」",
  "We expect Landing at 「Dino Club Airport」...",
  "Please remain seated until the Fasten Seat Belt sign turned off,",
  "and check around your seat for any personal belongings.",
  "We hope you enjoy the flight! Thank you!"
];

const paragraphs = [
  "The number of the DINO Design.Team is 3 and Dev.Team is 4.",
  "The Currency circulated here is DINO Coin.",
  "There are still lots of alive DINO that haven’t been discovered by human on Earth yet.",
  "DINO weekly magazine comes off the press once a week."
];

首先从 react-text-transition import 需要的物件。并且在 export function 里面初始化 state。如果不想使用 React.useState 也可以在一开始 import useState 这个 FUNCTION from React。

import TextTransition, { presets } from "react-text-transition";

export function LoaderTEXT(props) {
  const [index1, setIndex1] = React.useState(0);
  const [index2, setIndex2] = React.useState(0);
  ...
  return (
    ...
  );
}

使用 useEffect() 来设定时间间隔，藉每经过一段时间就对阵列 index += 1 来更换当前呈现的文字。

export function LoaderTEXT(props) {
  ...
  React.useEffect(() => {
    const intervalId1 = setInterval(() =>
      setIndex1(index1 => index1 + 1),
      3000
    );
    const intervalId2 = setInterval(() =>
      setIndex2(index2 => index2 + 1),
      5000
    );

    return () => {
      clearTimeout(intervalId1)
      clearTimeout(intervalId2)};
		 }, []);
  return (
    ...
  );
}

里用 TextTransition 来呈现阵列里面的文字，除了可以更改内容、动画，还可以对 CSS 进行修改。

export function LoaderTEXT(props) {
  ...
  return (
    <Box>
      <h1>
        <TextTransition
          text={ TEXTS[index1 % TEXTS.length] }
          springConfig={ presets.wobbly }
          style={{
            "color": "white", 
            "text-shadow": "0 0 20px #00b3ff"}} />
      </h1>
      <div>
        <Head>Do you know?</Head>
        <TextTransition
          text={ paragraphs[index2 % paragraphs.length]}
          springConfig={presets.gentle}
          overflow
          style={{ "color": "white" }} />
      </div>
    </Box>
  );
}

【登入成功画面】
持有验证完毕之後会显示「Verified Successfully!」字样，这里一样先初始化 useState() 的使用以及以 useEffect() 设定呈现的时间间隔。

export function VIP(props) {
  const [isPending, setIsPending] = useState(true);
  const [isVering, setIsVering] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsPending(false);
      setIsVering(true);
    }, 18000);
  }, [])

  useEffect(() => {
    setTimeout(() => {
      setIsVering(false);
    }, 21000);
  }, [])

  return (
    ...
  );
}

要注意的有几点，首先是 isVering 因为是「Verified Successfully!」字样，而在 Loading 特效时我们是不会出现验证成功的，所以一开始要初始化为 False。再来是在一定的时间且 isPending 为 false 时把 IsVering 应改为 true 来呈现正确的结果。

return 之中我使用三元运算子 condition ? exprIfTrue : exprIfFalse 来决定当前呈现的物件。

export function VIP(props) {
  ...

  return (
    <Wrapper>
      { isPending && <LoaderTEXT /> }
      { (!isPending && isVering)
				?
          <VerifiedSuc>Verified Successfully!</VerifiedSuc>
        :
          ...
      }
    </Wrapper>
  );
}

【小结】
Project 的难度越来越高了，不过目前算是暂时结束前端罗。感觉自己目前的表现还算可圈可点，只是很多想做的事情因为对 React 不熟悉所以没办法实作，像是我搞了很久的思考怎麽在 JavsScript 的匿名函式里面 return 多个回传值或物件。希望之後我可以继续精进前端的部分。明天开始就要进入 MetaMask 以及 Ethereum 的怀抱啦！虽然还是会使用到大量的 React 不过不能畏惧，要继续加油！