signer implementation

package.json

@@ -87,14 +87,15 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@confio/relayer": "^0.4.0",
-    "@cosmjs/crypto": "^0.28.4",
-    "@cosmjs/encoding": "^0.28.4",
-    "@cosmjs/launchpad": "^0.27.1",
-    "@cosmjs/math": "^0.28.4",
-    "@cosmjs/proto-signing": "^0.28.4",
-    "@cosmjs/stargate": "^0.28.4",
-    "@cosmjs/tendermint-rpc": "^0.28.4",
-    "@cybercongress/cyber-js": "0.3.0",
+    "@cosmjs/amino": "0.28.4",
+    "@cosmjs/crypto": "0.28.4",
+    "@cosmjs/encoding": "0.28.4",
+    "@cosmjs/launchpad": "0.27.1",
+    "@cosmjs/math": "0.28.4",
+    "@cosmjs/proto-signing": "0.28.4",
+    "@cosmjs/stargate": "0.28.4",
+    "@cosmjs/tendermint-rpc": "0.28.4",
+    "@cybercongress/cyber-js": "0.3.1",
     "@cybercongress/gravity": "0.0.15",
     "@ledgerhq/hw-transport-u2f": "^4.72.1",
     "@ledgerhq/hw-transport-webusb": "5.53.0",

src/components/ledger/stageActionBar.jsx

@@ -93,6 +93,14 @@ const imgRead = require('../../image/duplicate-outline.svg');
 const imgEth = require('../../image/Ethereum_logo_2014.svg');
 const imgCyber = require('../../image/large-green.png');
 const imgCosmos = require('../../image/cosmos-2.svg');
+const imgCyberSigner = require('../../image/wallet-outline.svg');
+
+const imgData = {
+  ledger: imgLedger,
+  keplr: imgKeplr,
+  cyber: imgCyber,
+  cyberSigner: imgCyberSigner,
+};
 
 const T = new LocalizedStrings(i18n);
 const ledger = require('../../image/select-pin-nano2.svg');
@@ -303,6 +311,7 @@ export const StartStageSearchActionBar = ({
   textBtn = 'Cyberlink',
   placeholder = 'add keywords, hash or file',
   keys = 'ledger',
+  node,
 }) => {
   return (
     <ActionBar>
@@ -378,9 +387,9 @@ export const StartStageSearchActionBar = ({
               />
             </Pane>
           }
-          disabled={!contentHash.length}
+          disabled={node === null && !contentHash.length}
           onClick={onClickBtn}
-          img={keys === 'ledger' ? imgLedger : imgKeplr}
+          img={imgData[keys]}
         />
       </Pane>
     </ActionBar>
@@ -1432,6 +1441,12 @@ export const ConnectAddress = ({
                   </Pane>
                 </LinkWindow>
               )}
+              <ButtonIcon
+                onClick={() => selectMethodFunc('cyberSigner')}
+                active={selectMethod === 'cyberSigner'}
+                img={imgCyberSigner}
+                text="cyberSigner"
+              />
             </>
           )}
           {web3 && web3 !== null && ethNetwork && (

src/components/tabBtn/index.jsx

@@ -2,8 +2,31 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Tab } from '@cybercongress/gravity';
 
-const TabBtn = ({ key, text, isSelected, onSelect, to, ...props }) => (
-  <Link to={to}>
+const TabBtn = ({ key, text, isSelected, onSelect, to, ...props }) => {
+  if (to) {
+    return (
+      <Link to={to}>
+        <Tab
+          key={key}
+          isSelected={isSelected}
+          onSelect={onSelect}
+          paddingX={10}
+          paddingY={20}
+          marginX={3}
+          borderRadius={5}
+          color="#36d6ae"
+          boxShadow="0px 0px 5px #36d6ae"
+          fontSize="16px"
+          whiteSpace="nowrap"
+          width="100%"
+          {...props}
+        >
+          {text}
+        </Tab>
+      </Link>
+    );
+  }
+  return (
     <Tab
       key={key}
       isSelected={isSelected}
@@ -21,7 +44,7 @@ const TabBtn = ({ key, text, isSelected, onSelect, to, ...props }) => (
     >
       {text}
     </Tab>
-  </Link>
-);
+  );
+};
 
 export default TabBtn;

src/containers/Search/ActionBar.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import InnerActionBarContainer from './ActionBarContainer';
+import { AppContext, AppContextSigner } from '../../context';
+
+const ActionBarContainer = (props) => {
+  return (
+    <AppContext.Consumer>
+      {(valueAppContext) => (
+        <AppContextSigner.Consumer>
+          {(valueAppContextSigner) => (
+            <InnerActionBarContainer
+              valueAppContext={valueAppContext}
+              valueAppContextSigner={valueAppContextSigner}
+              {...props}
+            />
+          )}
+        </AppContextSigner.Consumer>
+      )}
+    </AppContext.Consumer>
+  );
+};
+
+export default ActionBarContainer;

src/containers/Search/ActionBarContainer.jsx

@@ -35,11 +35,19 @@ import {
   DEFAULT_GAS_LIMITS,
 } from '../../utils/config';
 import { trimString } from '../../utils/utils';
-import { AppContext } from '../../context';
+import Msgs from '../../utils/msgs';
 
 const imgKeplr = require('../../image/keplr-icon.svg');
 const imgLedger = require('../../image/ledger.svg');
 const imgCyber = require('../../image/blue-circle.png');
+const imgCyberSigner = require('../../image/wallet-outline.svg');
+
+const imgData = {
+  ledger: imgLedger,
+  keplr: imgKeplr,
+  cyber: imgCyber,
+  cyberSigner: imgCyberSigner,
+};
 
 const {
   MEMO,
@@ -62,8 +70,9 @@ const ADD_ADDRESS = 11;
 const LEDGER_TX_ACOUNT_INFO = 12;
 const STAGE_IPFS_HASH = 3.1;
 const STAGE_KEPLR_APPROVE = 3.2;
+const STAGE_CHECK_TYPE_SIGNER = 8.1;
 
-class ActionBarContainer extends Component {
+class InnerActionBarContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -116,16 +125,18 @@ class ActionBarContainer extends Component {
       if (
         address !== null &&
         addressInfo !== null &&
+        toCid &&
         toCid !== null &&
+        fromCid &&
         fromCid !== null
       ) {
         this.stageReady();
       }
     }
 
     if (stage === STAGE_IPFS_HASH) {
-      if (toCid !== null && fromCid !== null) {
-        this.generateTx();
+      if (toCid && toCid !== null && fromCid && fromCid !== null) {
+        this.checkTypeSigner();
       }
     }
     if (prevProps.defaultAccount.name !== defaultAccount.name) {
@@ -282,9 +293,25 @@ class ActionBarContainer extends Component {
     });
   };
 
+  checkTypeSigner = () => {
+    const { addressLocalStor } = this.state;
+
+    this.setState({
+      stage: STAGE_CHECK_TYPE_SIGNER,
+    });
+
+    if (addressLocalStor.keys === 'keplr') {
+      this.generateTx();
+    }
+    if (addressLocalStor.keys === 'cyberSigner') {
+      this.sendTxSigner();
+    }
+  };
+
   generateTx = async () => {
     try {
-      const { keplr } = this.context;
+      const { valueAppContext } = this.props;
+      const { keplr } = valueAppContext;
       const { fromCid, toCid, addressLocalStor } = this.state;
 
       this.setState({
@@ -514,6 +541,50 @@ class ActionBarContainer extends Component {
     });
   };
 
+  updateCallbackFnc = (result) => {
+    const { valueAppContextSigner } = this.props;
+    const { updateCallbackSigner } = valueAppContextSigner;
+
+    if (result.code === 0) {
+      const hash = result.transactionHash;
+      updateCallbackSigner(null);
+      console.log('hash :>> ', hash);
+      this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
+      this.timeOut = setTimeout(this.confirmTx, 1500);
+    } else {
+      this.setState({
+        txHash: null,
+        stage: STAGE_ERROR,
+        errorMessage: result.rawLog.toString(),
+      });
+    }
+  };
+
+  sendTxSigner = async () => {
+    const { valueAppContextSigner } = this.props;
+    const { fromCid, toCid, addressLocalStor } = this.state;
+    const { cyberSigner, updateValueTxs, updateCallbackSigner } =
+      valueAppContextSigner;
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.signer.getAccounts();
+      // const fee = {
+      //   amount: [],
+      //   gas: DEFAULT_GAS_LIMITS.toString(),
+      // };
+      // const result = await cyberSigner.cyberlink(address, fromCid, toCid, fee);
+      // console.log('result', result);
+
+      const objMsgs = new Msgs();
+      const msgs = objMsgs.cyberlink(address, fromCid, toCid);
+
+      updateCallbackSigner(this.updateCallbackFnc);
+      updateValueTxs([msgs]);
+      this.setState({
+        stage: STAGE_KEPLR_APPROVE,
+      });
+    }
+  };
+
   onClickBtnRank = async () => {
     const { addressLocalStor } = this.state;
     const { rankLink } = this.props;
@@ -538,6 +609,9 @@ class ActionBarContainer extends Component {
     if (addressLocalStor.keys === 'keplr') {
       this.onClickInitKeplr();
     }
+    if (addressLocalStor.keys === 'cyberSigner') {
+      this.onClickInitKeplr();
+    }
   };
 
   render() {
@@ -558,7 +632,7 @@ class ActionBarContainer extends Component {
       addressLocalStor,
     } = this.state;
 
-    const { textBtn, placeholder, rankLink } = this.props;
+    const { textBtn, placeholder, rankLink, node } = this.props;
 
     if (stage === STAGE_INIT && addressLocalStor === null) {
       return (
@@ -606,7 +680,7 @@ class ActionBarContainer extends Component {
                 </Pane>
               }
               onClick={() => this.onClickBtnRank()}
-              img={keys === 'ledger' ? imgLedger : imgKeplr}
+              img={imgData[keys]}
             />
           </ActionBarContentText>
         </ActionBar>
@@ -629,6 +703,7 @@ class ActionBarContainer extends Component {
           onClickClear={this.onClickClear}
           file={file}
           placeholder={placeholder}
+          node={node}
         />
       );
     }
@@ -676,6 +751,16 @@ class ActionBarContainer extends Component {
       );
     }
 
+    if (stage === STAGE_CHECK_TYPE_SIGNER) {
+      return (
+        <ActionBar>
+          <ActionBarContentText>
+            <Dots big />
+          </ActionBarContentText>
+        </ActionBar>
+      );
+    }
+
     if (stage === STAGE_WAIT) {
       return (
         <JsonTransaction
@@ -721,6 +806,7 @@ const mapStateToProps = (store) => {
   };
 };
 
-ActionBarContainer.contextType = AppContext;
+// ActionBarContainer.contextType = AppContext;
+// ActionBarContainer.contextType = AppContextSigner;
 
-export default connect(mapStateToProps)(ActionBarContainer);
+export default connect(mapStateToProps)(InnerActionBarContainer);

src/containers/Search/SearchResults.jsx

@@ -24,7 +24,7 @@ import {
   NoItems,
   Dots,
 } from '../../components';
-import ActionBarContainer from './ActionBarContainer';
+import ActionBarContainer from './ActionBar';
 import {
   PATTERN,
   PATTERN_CYBER,