Merge pull request #46 from PortalNetwork/develop

Subdomain Registrar

package.json

@@ -29,6 +29,7 @@
     "bluebird": "^3.4.7",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "classnames": "^2.2.6",
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
     "eslint": "4.10.0",
@@ -65,8 +66,10 @@
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.4.2",
     "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.0",
     "style-loader": "0.19.0",
+    "styled-components": "^3.4.9",
     "sw-precache-webpack-plugin": "0.11.4",
     "truffle-contract": "^1.1.8",
     "truffle-hdwallet-provider": "0.0.3",
@@ -76,9 +79,7 @@
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",
     "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3",
-    "classnames": "^2.2.6",
-    "styled-components": "^3.4.9"
+    "whatwg-fetch": "2.0.3"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src -o src",
@@ -106,7 +107,8 @@
     "npm-run-all": "^4.1.3",
     "react-scripts": "^2.0.5",
     "react-test-renderer": "^16.4.2",
-    "supertest": "^3.0.0"
+    "supertest": "^3.0.0",
+    "webcrypto-shim": "^0.1.4"
   },
   "jest": {
     "collectCoverageFrom": [

src/components/App.css

@@ -77,7 +77,7 @@ body {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 76px;
+  height: 54px;
   background-image: url("../images/bg_header.png");
   background-position: center center;
   background-repeat: no-repeat;

src/components/App.js

@@ -6,6 +6,7 @@ import { Warning } from './Warning/Warning';
 import Connect from './Connect/Connect';
 import './App.css';
 import logo from '../images/ic-ens-manager.svg';
+import claimSubmainlogo from '../images/ic-ens-claimSubmain.svg';
 import Clients from '../components/Clients';
 import Footer from '../components/Footer';
 import SetResolver from "./SetResolver";
@@ -25,31 +26,45 @@ const FilterDiv = styled.div`
 `
 
 class App extends Component {
-
   state = {
     web3: null,
     hasProvider: false,
     isConnect: false,
     isLock: false,
     isFooterOut: false,
-    reoverData:{},
+    reoverData: {},
     isFilter: false,
-    isEditResover: false,
-    isTransferOwner: false,
-    isSetSubdomain: false,
-    isSetAddress: false,
-    isSetIpfs: false,
-    accounts: ''
+    accounts: '',
+    SeachPageIdx: 0,
+    searchBarData: {
+      searchValue: '',
+      resolver: '',
+      owner: '',
+      entries: '',
+      address: '',
+      ipfsHash: '',
+      url: '',
+      isOpenResolver: false,
+      isOpenIPFS: false,
+      isOpenAddress: false,
+      isOpenURL: false,
+      isOpenSubdomain: false,
+    },
   };
 
+
+  SeachPageSwitch = (idx) => {
+    this.setState({ SeachPageIdx: idx });
+  }
+
   handleConnect = () => {
-    this.setState({isConnect: true});
+    this.setState({ isConnect: true });
   }
 
   async fetchAccount(web3) {
     web3.eth.getAccounts((err, accounts) => {
       if (accounts && accounts.length > 0) {
-        this.setState({accounts: accounts[0]})
+        this.setState({ accounts: accounts[0] })
         if (accounts[0] !== this.props.metaMask.account) {
           this.props.handleMetaMaskAccount(accounts[0]);
         }
@@ -58,139 +73,168 @@ class App extends Component {
     setTimeout(() => this.fetchAccount(web3), 1000)
   }
 
-  async initialize (web3, provider, account, network) {
-    this.setState({hasProvider: true, web3});
+  async initialize(web3, provider, account, network) {
+    this.setState({ hasProvider: true, web3 });
     this.props.handleMetaMaskAccount(account);
     this.props.handleMetaMaskNetwork(network);
     this.fetchAccount(web3);
   }
 
-  async initError (error) {
+  async initError(error) {
     console.log(error);
   }
 
-  footerOutFn = (isOut) =>{
-    this.setState({isFooterOut: isOut})
-  }
+  footerOutFn = (isOut) => {
+    this.props.handleToggleFooter(isOut);
 
-  // 打開編輯ResOver
-  EditResOverFn = () =>{
-    this.FilterOpen();
-    this.setState({isEditResover: true});
+    // this.setState({ 
+    //   isFooterOut: isOut,
+    // });
   }
 
-  // 關閉編輯ResOver
-  EditResCloseFn = () =>{
-    this.FilterClose();
-    this.setState({isEditResover: false});
+  // 打開編輯ResOver
+  EditResOverFn = () => {
+    this.props.handleOpenResolverEditor();
   }
 
   //打開TransferOwner
-  TransferOwnerOpen = () =>{
-    this.FilterOpen();
-    this.setState({isTransferOwner: true});
-
-  }
-
-  //關閉TransferOwner
-  TransferOwnerClose = () =>{
-    this.FilterClose();
-    this.setState({isTransferOwner: false});
+  TransferOwnerOpen = () => {
+    this.props.handleOpenTransferEditor();
   }
 
   //打開 Set Subdomain
-  SetSubdomainPopOpen = () =>{
-    this.FilterOpen();
-    this.setState({isSetSubdomain: true});
-  }
-  //關閉 Set Subdomain
-  SetSubdomainPopClose = () =>{
-    this.FilterClose();
-    this.setState({isSetSubdomain: false});
+  SetSubdomainPopOpen = () => {
+    this.props.handleOpenSubDomainEditor();
   }
 
-
   //打開 Set Address
-  SetAddressOpen = ()=>{
-    this.FilterOpen();
-    this.setState({isSetAddress: true});
+  SetAddressOpen = () => {
+    this.props.handleOpenAddressEditor();
   }
 
-  //關閉 Set Address
-  SetAddressClose = ()=>{
-    this.FilterClose();
-    this.setState({isSetAddress: false});
-  }
-
-
   //打開 Set ipfs
-  SetIpfsOpen = ()=>{
-    this.FilterOpen();
-    this.setState({isSetIpfs: true});
-  }
-
-  //關閉 Set ipfs
-  SetIpfsClose = ()=>{
-    this.FilterClose();
-    this.setState({isSetIpfs: false});
-  }
-
-  //打開模糊背景
-  FilterOpen = () =>{
-    this.setState({isFilter: true});
+  SetIpfsOpen = () => {
+    this.props.handleOpenIPFSEditor();
   }
 
-  //關閉模糊背景
-  FilterClose = () =>{
-    this.setState({isFilter: false});
+  // 關閉 pop up 編輯
+  handleClosePopUpEditor = (e) => {
+    this.props.handleClosePopUpEditor();
   }
 
-  getReoverData = (data) =>{
-    this.setState({reoverData: data});
+  getReoverData = (data) => {
+    this.setState({
+      searchBarData: Object.assign({}, data),
+    });
   }
 
   render() {
+    // FIXME: should be removed out of render function
     const funcs = {
-      onCheckSuccess : async (web3, provider, account, network) => await this.initialize(web3, provider, account, network),
+      onCheckSuccess: async (web3, provider, account, network) => await this.initialize(web3, provider, account, network),
       //onCheckError : async (error) => await this.initError(error)
     }
-    const {hasProvider, isConnect, reoverData, isEditResover, isFilter, isTransferOwner, isSetSubdomain, isSetAddress, isSetIpfs } = this.state;
+
+    const {
+      hasProvider,
+      isConnect,
+      reoverData,
+      SeachPageIdx,
+      searchBarData,
+      web3,
+    } = this.state;
+
+    const {
+      metaMask,
+      handleWarningClose,
+      handleWarningOpen,
+    } = this.props;
+
+    const {
+      isFoggy,
+      isEditResover,
+      isTransferOwner,
+      isSetSubdomain,
+      isSetAddress,
+      isSetIpfs,
+      isHiddenFooter,
+      warning,
+    } = this.props.app;
 
     return (
       <div className="wrap">
-        <FilterDiv Filter={isFilter}>
+        <FilterDiv Filter={isFoggy}>
           <div className="header">
-            <h1><img src={logo} alt=""/></h1>
+            {SeachPageIdx === 0 && <h1><img src={logo} alt="" /></h1>}
+            {SeachPageIdx === 1 && <h1><img src={claimSubmainlogo} alt="" /></h1>}
           </div>
-          <Warning {...this.props}/>
+
+          <Warning handleWarningClose={handleWarningClose} warning={warning} />
           <MetamaskChecker {...funcs} />
 
-          {(!hasProvider) ? <Clients/> : null}
-          {(hasProvider && !this.state.isConnect) ? <Connect {...this.props} {...this.state} handleConnect={this.handleConnect}/> : null}
-          {(isConnect) && 
-            <SearchBar 
-              {...this.props} 
+          {(!hasProvider) ? <Clients /> : null}
+          {(hasProvider && !this.state.isConnect) ? <Connect {...this.props} {...this.state} handleConnect={this.handleConnect} /> : null}
+
+          {isConnect &&
+            <SearchBar
+              {...this.props}
               {...this.state}
+              getReoverData={this.getReoverData}
+              EditResOverFn={this.EditResOverFn}
+              footerOutFn={this.footerOutFn}
+              SeachPageSwitch={this.SeachPageSwitch}
               SetSubdomainPopOpen={this.SetSubdomainPopOpen}
               SetIpfsOpen={this.SetIpfsOpen}
               TransferOwnerOpen={this.TransferOwnerOpen}
               SetAddressOpen={this.SetAddressOpen}
-              getReoverData={this.getReoverData} 
-              EditResOverFn={this.EditResOverFn} 
-              footerOutFn={this.footerOutFn}
-            />}
-
-
-          <Footer isFooterOut={this.state.isFooterOut}/>
-
-
+            />
+          }
+          <Footer isFooterOut={isHiddenFooter} />
         </FilterDiv>
-        {isEditResover && <SetResolver EditResCloseFn={this.EditResCloseFn} reoverData={reoverData}/>}
-        {isTransferOwner && <TransferOwnerPop TransferOwnerClose={this.TransferOwnerClose} reoverData={reoverData}/>}
-        {isSetSubdomain && <SetSubdomainPop SetSubdomainPopClose={this.SetSubdomainPopClose} reoverData={reoverData}/>}
-        {isSetAddress && <SetAddressPop SetAddressClose={this.SetAddressClose} reoverData={reoverData}/>}
-        {isSetIpfs && <SetIpfsPop SetIpfsClose={this.SetIpfsClose} reoverData={reoverData}/>}
 
+        {isEditResover && <SetResolver
+                            searchValue={searchBarData.searchValue}
+                            metaMask={metaMask}
+                            web3={web3}
+                            handleClose={this.handleClosePopUpEditor}
+                            handleWarningOpen={handleWarningOpen}
+                          />
+        }
+        {isTransferOwner && <TransferOwnerPop
+                              searchValue={searchBarData.searchValue}
+                              metaMask={metaMask}
+                              web3={web3}
+                              handleClose={this.handleClosePopUpEditor}
+                              handleWarningOpen={handleWarningOpen}
+                            />
+        }
+        {isSetSubdomain && <SetSubdomainPop
+                            searchValue={searchBarData.searchValue}
+                            owner={searchBarData.owner}
+                            reoverData={reoverData}
+                            metaMask={metaMask}
+                            web3={web3}
+                            handleClose={this.handleClosePopUpEditor}
+                            handleWarningOpen={handleWarningOpen}
+                          />
+        }
+        {isSetAddress && <SetAddressPop
+                          metaMask={metaMask}
+                          web3={web3}
+                          handleClose={this.handleClosePopUpEditor}
+                          handleWarningOpen={handleWarningOpen}
+                          searchValue={searchBarData.searchValue}
+                          handleClose={this.handleClosePopUpEditor}
+                        />
+        }
+        {isSetIpfs && <SetIpfsPop
+                        metaMask={metaMask}
+                        web3={web3}
+                        handleClose={this.handleClosePopUpEditor}
+                        handleWarningOpen={handleWarningOpen}
+                        searchValue={searchBarData.searchValue}
+                      />
+        }
       </div>
     );
   }

src/components/App.scss

@@ -85,7 +85,7 @@ body {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 76px;
+  height: 54px;
   background-image: url('../images/bg_header.png');
   background-position: center center;
   background-repeat: no-repeat;