nft

package.json

@@ -1,6 +1,6 @@
 {
   "name": "toshi-frontend-boilerplate",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "boilerplate",
   "directories": {
     "test": "test"

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "iWallet Pro",
   "manifest_version": 3,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Brand New Version Wallet Extension for lOST",
   "action": {
     "default_popup": "index.html",

src/App.js

@@ -1,9 +1,31 @@
 import React, { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
-import { Login, Account, AccountImport, AccountManage, DeveloperMode, TokenTransfer, TokenTransferFailed, TokenTransferSuccess,
-  AccountQRCode, AccountCreateStep1, AccountCreateStep2, AccountCreateStep3, AccountSetting, ChangePwd,
-  Lock, AccountAdd, ChangeLanguage, IostWallet, UserAgreement, GasManage, RamManage, WhiteList, TokenDetail,
-  AssetManage
+import {
+  Login,
+  Account,
+  AccountImport,
+  AccountManage,
+  DeveloperMode,
+  TokenTransfer,
+  TokenTransferFailed,
+  TokenTransferSuccess,
+  AccountQRCode,
+  AccountCreateStep1,
+  AccountCreateStep2,
+  AccountCreateStep3,
+  AccountSetting,
+  ChangePwd,
+  Lock,
+  AccountAdd,
+  ChangeLanguage,
+  IostWallet,
+  UserAgreement,
+  GasManage,
+  RamManage,
+  WhiteList,
+  TokenDetail,
+  AssetManage,
+  NftDetail,
 } from 'components'
 import Settings from 'components/Settings'
 import Popup from 'components/Popup'
@@ -13,7 +35,7 @@ import utils from 'utils'
 import user from 'utils/user'
 import * as accountActions from 'actions/accounts'
 import './App.scss'
-import ui from "utils/ui";
+import ui from 'utils/ui'
 
 type Props = {
   children: React.DOM,
@@ -34,14 +56,14 @@ class App extends Component<Props> {
   init = async () => {
     try {
       const enpassword = await user.getEnPassword()
-      if(enpassword){
+      if (enpassword) {
         const lockState = await user.getLockState()
-        if(lockState === false){
+        if (lockState === false) {
           //解锁页面
           this.changeLocation('/lock')
-        }else {
+        } else {
           const accounts = await user.getUsers()
-          if (accounts.length){
+          if (accounts.length) {
             user.setUsers(accounts)
             const activeAccount = await user.getActiveAccount()
             const account = activeAccount || accounts[0]
@@ -55,22 +77,22 @@ class App extends Component<Props> {
             await user.setActiveAccount(account)
             this.changeLocation('/account')
 
-            chrome.storage.local.get(['activeAccount'], ({activeAccount}) => {
+            chrome.storage.local.get(['activeAccount'], ({ activeAccount }) => {
               // console.log('当前账号', activeAccount)
             })
-          }else {
+          } else {
             this.changeLocation('/accountImport')
           }
         }
-      }else {
+      } else {
         this.changeLocation('/login')
       }
     } catch (err) {
       console.log(err)
     }
   }
 
-  changeLocation = (location) => {
+  changeLocation = location => {
     this.setState({
       currentLocation: location,
     })
@@ -127,6 +149,8 @@ class App extends Component<Props> {
         return <RamManage changeLocation={this.changeLocation} />
       case '/tokenDetail':
         return <TokenDetail changeLocation={this.changeLocation} />
+      case '/nftDetail':
+        return <NftDetail changeLocation={this.changeLocation} />
       case '/assetManage':
         return <AssetManage changeLocation={this.changeLocation} />
     }
@@ -143,7 +167,7 @@ class App extends Component<Props> {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   locale: state.i18n.locale,
 })
 

src/actions/actionTypes.js

@@ -18,6 +18,7 @@ export const TOGGLE_OVERLAY = 'TOGGLE_OVERLAY'
 
 export const UPDATE_SAVED_TOKEN_SYMBOLS = 'UPDATE_SAVED_TOKEN_SYMBOLS'
 export const SELECT_TOKEN = 'SELECT_TOKEN'
+export const SELECT_NFT = 'SELECT_NFT'
 
 export const SET_USER_INFO = 'SET_USER_INFO'
 export const RESET_USER_INFO = 'RESET_USER_INFO'

src/actions/token.js

@@ -1,18 +1,22 @@
-import {
-  UPDATE_SAVED_TOKEN_SYMBOLS,
-  SELECT_TOKEN,
-} from 'actions/actionTypes'
+import { UPDATE_SAVED_TOKEN_SYMBOLS, SELECT_TOKEN, SELECT_NFT } from 'actions/actionTypes'
 
-export const updateSavedTokenSymbols = (tokenSymbols) => ({
+export const updateSavedTokenSymbols = tokenSymbols => ({
   type: UPDATE_SAVED_TOKEN_SYMBOLS,
   payload: {
     tokenSymbols,
-  }
+  },
 })
 
-export const selectToken = (tokenSymbol) => ({
+export const selectToken = tokenSymbol => ({
   type: SELECT_TOKEN,
   payload: {
     tokenSymbol: tokenSymbol,
-  }
-})
+  },
+})
+
+export const selectNft = nftId => ({
+  type: SELECT_NFT,
+  payload: {
+    nftId: nftId,
+  },
+})

src/components/Button.js

@@ -5,12 +5,10 @@ import LoadingImage from 'components/LoadingImage'
 
 import './Button.scss'
 
-type Props = {
+type Props = {}
 
-}
-
-const Button = (props) => (
-  <button {...props} className={cx('Button', props.className, {'btn-account': props.account})}>
+const Button = props => (
+  <button {...props} className={cx('Button', props.className, { 'btn-account': props.account })}>
     {props.children}
     {props.isLoading && <LoadingImage />}
   </button>

src/components/Button.scss

@@ -1,4 +1,4 @@
-@import "colors.scss";
+@import 'colors.scss';
 
 .Button {
   width: 300px;
@@ -14,14 +14,15 @@
   transition: background-color 300ms, color 300ms;
 
   &:hover {
-    background-color: rgba($brand-black2, .8);
+    background-color: rgba($brand-black2, 0.8);
   }
 
   &:focus {
-    background-color: rgba($brand-black2, .9);
+    background-color: rgba($brand-black2, 0.9);
   }
   &:disabled {
-    background-color: #e9e9e9;
+    background-color: #e9e9e9 !important;
+    cursor: not-allowed !important;
   }
 
   &.btn-account {
@@ -32,20 +33,19 @@
     border: 1px solid;
   }
 
-
   &--blue {
     color: $brand-blue;
     background-color: $white;
     border: 1px solid $brand-blue;
 
     &:hover {
       color: $white;
-      background-color: rgba($brand-blue, .8);
+      background-color: rgba($brand-blue, 0.8);
     }
 
     &:focus {
       color: $white;
-      background-color: rgba($brand-blue, .6);
+      background-color: rgba($brand-blue, 0.6);
     }
   }
 }