배우고 사용하기 --React에서 Material UI 프레임 워크를 사용하여 Ethereum 지갑의 간단한 MetaMask와 유사한 웹 버전을 개발하십시오 (끝).

       지난 개발에서 우리 지갑의 주요 기능이 개발되었습니다. 그러나 코드 최적화, 테스트, 패키징 및 게시와 같은 온라인 응용 프로그램 배포에 대한 개발이 완료된 후에도 수행해야 할 작업이 있습니다. 시간 제약으로 인해 코드 최적화 및 테스트가 처리되지 않았으며 직접 패키징 및 릴리스되었습니다. 독자는 여기에서 코드에 오류, 사무 오류 또는 결함이있을 수 있음을 상기시킵니다.

       에테 리움 지갑이 간단한 MetaMask 웹 버전은 인터넷에 게시되었습니다. 당신은 할 수 있습니다 방문 : https://kaihua.xyz/khwallet/create을 그것을 경험 할 수 있습니다. 웹 페이지가 열리면 약간 느리게 열리고 Safari 브라우저를 사용하는 것이 더 빠르며 Chrome 브라우저는 모바일 모드 사용을 권장합니다. 지갑은 원래 휴대폰 모드 미리보기를 사용하여 개발되었으며 데스크톱에서 해당 조정이 이루어지지 않았습니다.

       이 개발은 주로 지갑 패키지 릴리스에 관한 것이지만 인터페이스에 대한 약간의 조정도 있습니다. 이 기사에서는 먼저 버튼 스타일을 사용자 정의하는 방법을 소개 한 다음 Apache 보조 디렉토리에 지갑을 게시하는 자세한 프로세스를 소개합니다.

       엄숙하게 선언 : 지갑 개인 키는 암호화되어 클라이언트에 저장되며 암호는 사용자의 손에 있으며 개발자는이를 얻을 수 없으며 코드에서도 확인할 수 있습니다.

하나의 맞춤 버튼 스타일

       여기서는 버튼 색상 사용자 지정에 중점을 둡니다. 머티리얼 UI에는 primary, secondary및과 inherit같은 제한된 수의 버튼 색상 만 있습니다. 각각 파란색, 빨간색 및 회색에 해당합니다. 하지만 MetaMask 로그인 인터페이스의 주황색 버튼은 매우 아름답 기 때문에 주황색 버튼도 사용하겠습니다.

       버튼 스타일을 정의하는 코드 스 니펫 :

import orange from '@material-ui/core/colors/orange';
const useStyles = makeStyles(theme => ({
    
    
    submit: {
    
    
        fontSize: 18,
        width: "40%",
        background:orange[700],
        margin: theme.spacing(0.5),
        marginTop:theme.spacing(2.5),
        '&:disabled':{
    
    
            background:orange[200],
        },
        '&:hover':{
    
    
            backgroundColor:orange[700],
        },
        '&:active':{
    
    
            backgroundColor:orange[700],
        }
    },
}));

       여기에서는 먼저 Material UI의 오렌지색을 가져옵니다 orange. 색상 개체입니다. 아래 첨자는 실제로 50, 100, 200 ... 900, A100, A200, A400 및 A700의 숫자입니다. A로 시작하는 속성은 사용할 때 따옴표로 묶어야합니다 orange["A100"]. 머티리얼 UI 색상 시스템에 대한 문서는 https://material-ui.com/zh/customization/color/ 입니다. 원하는 색상을 선택할 수 있습니다. 테스트 후 hover설정해야하는 스타일의 의사 스타일 설정에주의하십시오 . 그렇지 않으면 클릭 후 기본 회색이 표시됩니다.

       위 스타일을 적용하는 코드 스 니펫은 다음과 같습니다.

const classes = useStyles()
......
<Button variant="contained" className={
    
    classes.submit}>创建</Button>

       버튼이있는 효과를 살펴 보겠습니다 disabled.

       밝은 색상의 버튼은 클릭 할 수 없음을 의미합니다. 두 개의 비밀번호를 마음대로 입력하면 아래 그림과 같이 생성 버튼을 사용할

       수 있습니다. 버튼 색상이 더 어두워지고 전환이 매우 부드럽다는 것을 알 수 있습니다.

다음은 UI 구성 요소의 모양을 사용자 지정하는 방법이지만이 메서드에는 전제가 있습니다. CSS 규칙에 해당 가상 클래스가 있으며 이러한 방식으로 스타일을 지정할 수 있습니다. 예를 들어 <MenuItem />구성 요소의 속성에는 selected합계가 disabled있지만 CSS 규칙 selected에는 의사 클래스 만 있지만 disabled. 따라서이 방법을 사용하여 selected시간에 따라 모양 을 변경할 수 있지만 시간에 따라 모양 을 변경할 수는 없습니다 disabled.

       지갑에 몇 가지 다른 페이지 조정이 있으므로 여기서 소개하지 않겠습니다.

2. 패키지 출시 전 클라이언트 수정

       React 또는 Vue는 단일 페이지 애플리케이션이고 라우팅이 자주 사용되기 때문에 패키지 릴리스는 React 또는 Vue 프로젝트에서 여전히 매우 중요합니다. 따라서 일부 서버 측 설정이 필요한 경우가 있습니다. 저자는 Centos 7.6 + Apache를 웹측 서버로 사용하고 nginx 또는 기타 웹 서비스로 게시합니다. 관심있는 독자가 직접 학습 할 수 있기를 바랍니다.

2.1 소스 코드를 표시하지 마십시오

       프로젝트 루트 디렉터리에 .env.local다음 줄 을 추가합니다.

GENERATE_SOURCEMAP=false

2.2 벤치 마크 디렉토리 변수 정의

       지갑 링크는 이전에 제공되었습니다 : https://kaihua.xyz/khwallet/create . 여기에서 지갑이 보조 디렉토리에 구성되어 있음을 알 수 있습니다 khwallet. 마지막 create은 라우팅입니다. 신경 쓰지 마세요. 따라서 라우팅의 기본 디렉토리는입니다 khwallet. 여기 env.local에 다른 행을 추가하십시오.

REACT_APP_PATH_BASE ='/khwallet'

       이 커스텀 변수는 React 프로젝트의 참조 디렉토리를 나타 내기 위해 사용합니다. 물론 코드에 직접 작성할 수도 있습니다. 여기에서 수정하는 것이 편리하므로 둘러 볼 필요가 없습니다. 이 변수는 REACT_APP_접두사 가있는 한 사용자 지정 입니다.

2.3 코드에서 벤치 마크 디렉토리 설정

       src/index.js다음 코드를 추가하십시오.

//获取路由的基准路径，注意在开发环境和生产环境的区别
export function getPathBase() {
    
    
    return process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PATH_BASE : ''
}

       src/views/Main.jsx증가하는:

import {
    
     getPathBase } from 'utils'

Router추가 basename속성을        받는 구성 요소 :

<Router basename={
    
    getPathBase()}>

2.4 수정homepage

       수정 된 프로젝트 루트에서 package.json에서 dependencies이 줄 위의 속성 증가 :

"homepage":".",

       이는 모든 도메인 이름의 모든 디렉토리에서 프로젝트를 구성 할 수 있음을 의미합니다.

2.5 관련 html 파일 수정

       프로젝트 루트 디렉토리 public\index.html를 수정하고 제목을 수정 한 <title>다음 로고를이 디렉토리에 복사하고 이름을 favicon.ico. 해당 줄을 수정합니다 <meta>.

<meta name="viewport" content="width=device-width, initial-scale=1" />

       이 디렉토리를 열고 속성에서 React 로고와 관련된 콘텐츠를 manifest.json삭제 icons하고 favicon.ico관련 콘텐츠 만 유지합니다 .

2.6 패키지 출시

       터미널을 열고 프로젝트 루트 레코드로 전환 한 다음 npm run build. 그런 다음 프로젝트 루트 디렉토리 아래의 디렉토리에서 build패키징 된 파일을 볼 수 있습니다 .

세 가지, 서버 측 구성

       서버에서 다음 작업에는 root권한이 필요하며 루트 사용자 로그인 또는 sudo를 사용하십시오.

3.1 Apache 설치

       일반적으로 중국에서는 Alibaba Cloud이든 Tencent Cloud이든 상관없이 ECS를 구입하면 Apache가 사전 설치되어있을 것입니다. 가상 호스트를 사용하는 경우 php가 자동으로 설치합니다. 아파치가 설치되지 않은 경우 순서대로 실행하십시오.

sudo yum install httpd
sudo systemctl enable httpd 
sudo systemctl  start httpd 

MacBook Pro 개인용 컴퓨터를 사용하는 경우 Apache도 사전 설치되어 있지만 구성 파일 위치와 내용이 약간 다릅니다.

3.2 재 작성을 허용하도록 Apache 구성 수정

       을 사용 vim하거나 nano엽니 다 /etc/httpd/conf/httpd.conf. 찾기 <Directory "/var/www/html">이 열 및 변경 AllowOverride에 All. 저장하고 종료하고 실행 apachectl configtest하고 결과를 Syntax OK다시 실행합니다 apachectl restart.

       가상 호스트 인 경우 일반적으로 처음 두 단계를 설정할 필요가 없으며 설정되었으며 사용자 권한이 제한되어 설정할 수 없습니다.

3.3 새 보조 디렉터리 만들기

       앞서 언급했듯이 지갑은 보조 디렉토리에 게시됩니다 khwallet. /var/www/html디렉토리 에 새 디렉토리 를 khwallet만든 다음 디렉토리 로 전환하고 nano 또는 vim을 사용하여 새 디렉토리를 만듭니다 .htaccess. 내용은 다음과 같습니다.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{
    
    REQUEST_FILENAME} !-f
RewriteCond %{
    
    REQUEST_FILENAME} !-d
RewriteCond %{
    
    REQUEST_FILENAME} !-l
RewriteRule . khwallet/index.html [L]

.htaccess명령 파일이며, 명령의 주요 기능은 찾을 수없는 모든 파일을 다음 파일로 리디렉션하는 것 khwallet/index.html입니다. 자세한 내용은 https://baike.baidu.com/item/htaccess를 참조하십시오 . 권장 .htaccess하지는 않지만 운영의 ​​편의를 위해 매번 Apache 구성을 설정할 필요가 없으며 가상 호스트로 구축 된 사이트와 호환됩니다 .htaccess.

3.4 파일 업로드

scp명령을        사용 하여 파일을 업로드 할 수도 있지만 전문 도구를 사용하는 것이 좋습니다. 윈도우에서는 Winscp를 권장합니다. Yummy Ftp는 Mac에서 사용할 수 있지만 32 비트입니다. 시스템을 Catalina로 업그레이드 한 후에는 사용할 수 없으므로 현재 FileZilla를 사용할 수 있습니다. 앞서 언급 한 build디렉터리 의 모든 파일 을 서버 디렉터리 에 업로드 khwallet하면 완료됩니다. 브라우저에서 도메인 이름으로 khwallet디렉토리를 열면 다음 화면이 표시됩니다.

       당신은 당신이 크롬 개발자 도구 콘솔 열에서 모든 로그를 볼 수없는 것을 볼 수있다. 개발 제안으로 만 개발 환경에서 로그를 사용 console.log하고 모두 제거 하고 console.warn다른 로그 출력을 게시하기 전에 .

넷째, 결론

       2020 년 1 월 22 일부터 오늘까지 총 18 일인 2 월 8 일에 끝나는 우리의 모조 MetaMask 웹 지갑이 마침내 개발 및 출시되었습니다. 이 기간 동안 나는 처음부터 단계적으로 전체 과정을 기록하는 10 개의 기사를 썼다. 상용 지갑에 비해 우리가 만드는 기능은 매우 제한적이며 구현 방법이 효율적이지 않습니다. 그러나 우리의 주요 목적은 프론트 엔드 Materia UI 프레임 워크를 배우고 이더 리움 관련 지식을 조금 배우는 것입니다. 이번 개발에서 저는 React 및 Material UI와 관련된 많은 지식 (css, javascript 등의 일부 기술 포함)을 배웠을뿐만 아니라 Ethereum과 관련된 지식을 더욱 습득했습니다. 주는 것에 대한 보상은 항상있을 것입니다.

       이 지갑이 구현하는 기능에는 계정 생성, 가져 오기, 내보내기, 이더 스캔에서보기 및 로그인, ERC20 토큰 추가, 잔액 업데이트, 숨기기 및 전송, ETH 잔액의 실시간 업데이트 및 전송, 서명 거래 등이 포함됩니다.

       이 지갑에서 구현하지 않는 주요 기능은 다중 계정 관리, 이력 기록 보존 등입니다.

       이 지갑에는 확실히 많은 단점이나 버그가 있습니다. 한편으로는 앞으로 세부적인 테스트와 최적화를 기대하고, 다른 한편으로는 독자들이 수정하거나 개선을 제안 할 수 있기를 바랍니다.

       gitee에있는이 지갑의 창고 주소 : https://gitee.com/TianCaoJiangLin/khwallet 은 공공 창고이며 누구나 다운로드 할 수 있습니다.

       이 지갑의 온라인 게시 주소 : https://kaihua.xyz/khwallet/

       보상 저자 :
       0x2267E877215fC21514BF507F30f553AF2342b6c2