From 1dae8442ce1f11a0b0cefbfcbb67eeaf4f623ce0 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Sat, 5 Jun 2021 15:25:34 +0300
Subject: [PATCH 01/20] feat(context): add signer context

---
 src/context.jsx | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/context.jsx b/src/context.jsx
index e15518b7d..ab2d4f5ea 100644
--- a/src/context.jsx
+++ b/src/context.jsx
@@ -8,7 +8,14 @@ const valueContext = {
   ws: null,
 };
 
+const valueSignerContxt = {
+  tx: null,
+  isVisible: false,
+  cyberSigner: null,
+};
+
 export const AppContext = React.createContext(valueContext);
+export const AppContextSigner = React.createContext(valueSignerContxt);
 
 export const useContextProvider = () => useContext(AppContext);
 
@@ -91,6 +98,8 @@ export async function createClient(signer) {
 
 const AppContextProvider = ({ children }) => {
   const [value, setValue] = useState(valueContext);
+  const [valueSigner, setValueSigner] = useState(valueSignerContxt);
+
   const [signer, setSigner] = useState(null);
   const [client, setClient] = useState(null);
 
@@ -128,7 +137,32 @@ const AppContextProvider = ({ children }) => {
 
   console.log('value', value);
 
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+  const updateValueIsVisible = (isVisible) => {
+    setValueSigner((item) => ({ ...item, isVisible }));
+  };
+
+  const updateValueTxs = (tx) => {
+    setValueSigner((item) => ({ ...item, tx }));
+  };
+
+  const updateCyberSigner = (cyberSigner) => {
+    setValueSigner((item) => ({ ...item, cyberSigner }));
+  };
+
+  return (
+    <AppContext.Provider value={value}>
+      <AppContextSigner.Provider
+        value={{
+          ...valueSigner,
+          updateValueIsVisible,
+          updateValueTxs,
+          updateCyberSigner,
+        }}
+      >
+        {children}
+      </AppContextSigner.Provider>
+    </AppContext.Provider>
+  );
 };
 
 export default AppContextProvider;

From 246ee7745642bc759ae4872bf426505854a10e14 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Sat, 5 Jun 2021 15:26:38 +0300
Subject: [PATCH 02/20] fix(app): change router

- add signer  to router
---
 src/router.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/router.jsx b/src/router.jsx
index b97fb9436..70b6d1050 100644
--- a/src/router.jsx
+++ b/src/router.jsx
@@ -38,6 +38,7 @@ import ForceGraph from './containers/forceGraph/forceGraph';
 import ForceQuitter from './containers/forceGraph/forceQuitter';
 import PortPages from './containers/port';
 import TestKeplr from './containers/testKeplre';
+import AppSign from './containers/signer/app';
 
 export const history = createBrowserHistory({});
 
@@ -68,6 +69,7 @@ function AppRouter({
   return (
     <Router history={history}>
       <Route path="/" component={App} />
+      <AppSign />
       <Switch>
         <Route path="/" exact component={Home} />
         <Route exact path="/search/:query" component={SearchResults} />

From 42344e31fde572e93209f791118851cd51dd1fca Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Sat, 5 Jun 2021 15:55:43 +0300
Subject: [PATCH 03/20] fix(ipfs): change ipfs config

---
 src/ipfsHook.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/ipfsHook.js b/src/ipfsHook.js
index 53a534c08..e6a1a0a71 100644
--- a/src/ipfsHook.js
+++ b/src/ipfsHook.js
@@ -32,10 +32,6 @@ const initIpfsNode = async () => {
           ],
         },
         Bootstrap: [
-          // '/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd',
-          // '/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3',
-          // '/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm',
-          // '/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64',
           '/dns4/node0.preload.ipfs.io/tcp/443/wss/ipfs/QmZMxNdpMkewiVZLMRxaNxUeZpDUb34pWjZ1kZvsd16Zic',
           '/dns4/node1.preload.ipfs.io/tcp/443/wss/ipfs/Qmbut9Ywz9YEDrz8ySBSgWyJk41Uvm2QJPhwDJzJyGFsD6',
         ],
@@ -72,17 +68,12 @@ const initIpfsNode = async () => {
       config: {
         Addresses: {
           Swarm: [
-            // '/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star',
             '/dns4/ws-star.discovery.cybernode.ai/tcp/443/wss/p2p-webrtc-star',
             '/ip4/159.89.24.179/tcp/4001/p2p/QmZBfqaL2L92rrTWR2Cdmor3R3EBLaoYzeVLEEwE3AJmWe',
             '/ip6/2a03:b0c0:3:d0::4ed:8001/tcp/4001/p2p/QmZBfqaL2L92rrTWR2Cdmor3R3EBLaoYzeVLEEwE3AJmWe',
           ],
         },
         Bootstrap: [
-          // '/dns4/ams-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLer265NRgSp2LA3dPaeykiS1J6DifTC88f5uVQKNAd',
-          // '/dns4/lon-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLMeWqB7YGVLJN3pNLQpmmEk35v6wYtsMGLzSr5QBU3',
-          // '/dns4/nyc-1.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm',
-          // '/dns4/nyc-2.bootstrap.libp2p.io/tcp/443/wss/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64',
           '/dns4/node0.preload.ipfs.io/tcp/443/wss/ipfs/QmZMxNdpMkewiVZLMRxaNxUeZpDUb34pWjZ1kZvsd16Zic',
           '/dns4/node1.preload.ipfs.io/tcp/443/wss/ipfs/Qmbut9Ywz9YEDrz8ySBSgWyJk41Uvm2QJPhwDJzJyGFsD6',
         ],

From 8ec22cd870696b44c06b2f6d8a50916d4c56794a Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Sat, 5 Jun 2021 15:57:04 +0300
Subject: [PATCH 04/20] fix(search): add cyber signer to actionbar

---
 package.json                                 |  1 +
 src/components/ledger/stageActionBar.jsx     | 10 ++-
 src/containers/Search/ActionBar.jsx          | 23 ++++++
 src/containers/Search/ActionBarContainer.jsx | 86 ++++++++++++++++++--
 src/containers/Search/SearchResults.jsx      |  2 +-
 5 files changed, 111 insertions(+), 11 deletions(-)
 create mode 100644 src/containers/Search/ActionBar.jsx

diff --git a/package.json b/package.json
index 420f4ad07..b0cac4e30 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@babel/preset-react": "^7.0.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@cosmjs/crypto": "^0.25.3",
     "axios": "^0.21.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
diff --git a/src/components/ledger/stageActionBar.jsx b/src/components/ledger/stageActionBar.jsx
index 1c064e737..20ab6c3fa 100644
--- a/src/components/ledger/stageActionBar.jsx
+++ b/src/components/ledger/stageActionBar.jsx
@@ -92,6 +92,14 @@ const imgRead = require('../../image/duplicate-outline.svg');
 const imgEth = require('../../image/Ethereum_logo_2014.svg');
 const imgCyber = require('../../image/blue-circle.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');
@@ -368,7 +376,7 @@ export const StartStageSearchActionBar = ({
           }
           disabled={!contentHash.length}
           onClick={onClickBtn}
-          img={keys === 'ledger' ? imgLedger : imgKeplr}
+          img={imgData[keys]}
         />
       </Pane>
     </ActionBar>
diff --git a/src/containers/Search/ActionBar.jsx b/src/containers/Search/ActionBar.jsx
new file mode 100644
index 000000000..df15d0b40
--- /dev/null
+++ b/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;
diff --git a/src/containers/Search/ActionBarContainer.jsx b/src/containers/Search/ActionBarContainer.jsx
index dc2f1b997..0727c58eb 100644
--- a/src/containers/Search/ActionBarContainer.jsx
+++ b/src/containers/Search/ActionBarContainer.jsx
@@ -29,11 +29,18 @@ import {
 
 import { LEDGER, CYBER, PATTERN_IPFS_HASH } from '../../utils/config';
 import { trimString } from '../../utils/utils';
-import { AppContext } from '../../context';
 
 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,
@@ -56,8 +63,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 = {
@@ -110,7 +118,9 @@ class ActionBarContainer extends Component {
       if (
         address !== null &&
         addressInfo !== null &&
+        toCid &&
         toCid !== null &&
+        fromCid &&
         fromCid !== null
       ) {
         this.stageReady();
@@ -118,8 +128,8 @@ class ActionBarContainer extends Component {
     }
 
     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) {
@@ -272,8 +282,24 @@ 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 () => {
-    const { keplr } = this.context;
+    const { valueAppContext } = this.props;
+    const { keplr } = valueAppContext;
     const { fromCid, toCid, addressLocalStor } = this.state;
 
     this.setState({
@@ -283,7 +309,7 @@ class ActionBarContainer extends Component {
       const chainId = CYBER.CHAIN_ID;
       await window.keplr.enable(chainId);
       const { address } = await keplr.getAccount();
-      console.log('address', address)
+      console.log('address', address);
       if (addressLocalStor !== null && addressLocalStor.address === address) {
         const msgs = [];
         msgs.push({
@@ -497,6 +523,34 @@ class ActionBarContainer extends Component {
     });
   };
 
+  sendTxSigner = async () => {
+    const { valueAppContextSigner } = this.props;
+    const { fromCid, toCid, addressLocalStor } = this.state;
+    const { cyberSigner, updateValueTxs } = valueAppContextSigner;
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.getAccounts();
+      const msgs = [];
+      msgs.push({
+        type: 'cyber/Link',
+        value: {
+          address,
+          links: [
+            {
+              from: fromCid,
+              to: toCid,
+            },
+          ],
+        },
+      });
+
+      updateValueTxs(msgs);
+      this.setState({
+        stage: STAGE_INIT,
+      });
+      this.cleatState();
+    }
+  };
+
   onClickBtnRank = async () => {
     const { addressLocalStor } = this.state;
     const { rankLink } = this.props;
@@ -521,6 +575,9 @@ class ActionBarContainer extends Component {
     if (addressLocalStor.keys === 'keplr') {
       this.onClickInitKeplr();
     }
+    if (addressLocalStor.keys === 'cyberSigner') {
+      this.onClickInitKeplr();
+    }
   };
 
   render() {
@@ -590,7 +647,7 @@ class ActionBarContainer extends Component {
                 </Pane>
               }
               onClick={() => this.onClickBtnRank()}
-              img={keys === 'ledger' ? imgLedger : imgKeplr}
+              img={imgData[keys]}
             />
           </ActionBarContentText>
         </ActionBar>
@@ -660,6 +717,16 @@ class ActionBarContainer extends Component {
       );
     }
 
+    if (stage === STAGE_CHECK_TYPE_SIGNER) {
+      return (
+        <ActionBar>
+          <ActionBarContentText>
+            <Dots big />
+          </ActionBarContentText>
+        </ActionBar>
+      );
+    }
+
     if (stage === STAGE_WAIT) {
       return (
         <JsonTransaction
@@ -705,6 +772,7 @@ const mapStateToProps = (store) => {
   };
 };
 
-ActionBarContainer.contextType = AppContext;
+// ActionBarContainer.contextType = AppContext;
+// ActionBarContainer.contextType = AppContextSigner;
 
-export default connect(mapStateToProps)(ActionBarContainer);
+export default connect(mapStateToProps)(InnerActionBarContainer);
diff --git a/src/containers/Search/SearchResults.jsx b/src/containers/Search/SearchResults.jsx
index 9c0aa69de..2ae046be9 100644
--- a/src/containers/Search/SearchResults.jsx
+++ b/src/containers/Search/SearchResults.jsx
@@ -16,7 +16,7 @@ import {
   LinkWindow,
   Rank,
 } from '../../components';
-import ActionBarContainer from './ActionBarContainer';
+import ActionBarContainer from './ActionBar';
 import {
   PATTERN,
   PATTERN_CYBER,

From 0d998514faa907b7537c4f679a2e92bf5fb49077 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Sat, 5 Jun 2021 16:05:20 +0300
Subject: [PATCH 05/20] feat(signer): signer

- add new stage in signer
- gen. vanity address
- send txs
- add fnc for chek msgs tx
---
 src/components/tabBtn/index.jsx               |  31 ++-
 src/containers/Wallet/actionBar.jsx           |  24 ++
 .../Wallet/components/pocketCard.jsx          |   2 +
 src/containers/signer/app.jsx                 | 127 +++++++++
 .../signer/component/MsgsSigner.jsx           |   0
 src/containers/signer/component/ui.jsx        | 263 ++++++++++++++++++
 src/containers/signer/index.jsx               |  87 ++++++
 src/containers/testKeplre/index.jsx           | 100 +++----
 src/containers/txs/msgType.jsx                |   5 +-
 src/style/main.css                            |   3 +-
 src/style/signer.css                          |  18 ++
 src/utils/config.js                           |   1 +
 12 files changed, 591 insertions(+), 70 deletions(-)
 create mode 100644 src/containers/signer/app.jsx
 create mode 100644 src/containers/signer/component/MsgsSigner.jsx
 create mode 100644 src/containers/signer/component/ui.jsx
 create mode 100644 src/containers/signer/index.jsx
 create mode 100644 src/style/signer.css

diff --git a/src/components/tabBtn/index.jsx b/src/components/tabBtn/index.jsx
index 3b262da47..50dcdf993 100644
--- a/src/components/tabBtn/index.jsx
+++ b/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;
diff --git a/src/containers/Wallet/actionBar.jsx b/src/containers/Wallet/actionBar.jsx
index 121f13e0c..7596dd2f3 100644
--- a/src/containers/Wallet/actionBar.jsx
+++ b/src/containers/Wallet/actionBar.jsx
@@ -15,6 +15,7 @@ import ActionBarConnect from './actionBarConnect';
 const imgLedger = require('../../image/ledger.svg');
 const imgKeplr = require('../../image/keplr-icon.svg');
 const imgRead = require('../../image/duplicate-outline.svg');
+const imgCyberSigner = require('../../image/wallet-outline.svg');
 
 const STAGE_INIT = 1;
 const STAGE_CONNECT = 2;
@@ -271,6 +272,29 @@ function ActionBar({
     );
   }
 
+  if (typeActionBar === 'cyberSigner' && stage === STAGE_INIT) {
+    return (
+      <ActionBarGravity>
+        <Pane>
+          {connect && (
+            <Button marginX={10} onClick={() => setStage(STAGE_CONNECT)}>
+              Connect
+            </Button>
+          )}
+          <ButtonImgText
+            img={imgCyberSigner}
+            // onClick={() => setStage(STAGE_SEND_READ_ONLY)}
+          />
+          {makeActive && (
+            <Button marginX={10} onClick={() => changeDefaultAccounts()}>
+              Activate
+            </Button>
+          )}
+        </Pane>
+      </ActionBarGravity>
+    );
+  }
+
   if (typeActionBar === 'gol' && stage === STAGE_INIT) {
     return (
       <ActionBarGravity>
diff --git a/src/containers/Wallet/components/pocketCard.jsx b/src/containers/Wallet/components/pocketCard.jsx
index 85716ac92..23092ba20 100644
--- a/src/containers/Wallet/components/pocketCard.jsx
+++ b/src/containers/Wallet/components/pocketCard.jsx
@@ -14,6 +14,7 @@ const deleteIcon = require('../../../image/trash-outline.svg');
 const imgEth = require('../../../image/Ethereum_logo_2014.svg');
 const imgCyber = require('../../../image/blue-circle.png');
 const imgCosmos = require('../../../image/cosmos-2.svg');
+const imgCyberSigner = require('../../../image/wallet-outline.svg');
 
 const imgData = {
   ledger: imgLedger,
@@ -23,6 +24,7 @@ const imgData = {
   cyber: imgCyber,
   cosmos: imgCosmos,
   eth: imgEth,
+  cyberSigner: imgCyberSigner,
 };
 
 export const FormatNumber = ({
diff --git a/src/containers/signer/app.jsx b/src/containers/signer/app.jsx
new file mode 100644
index 000000000..230a67b52
--- /dev/null
+++ b/src/containers/signer/app.jsx
@@ -0,0 +1,127 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import Signer from './index';
+import { AppContextSigner } from '../../context';
+import {
+  StateSign,
+  StateBroadcast,
+  StateConfirmed,
+  StateInitAccount,
+  StateCreateNew,
+  StateRestore,
+} from './component/ui';
+
+const STAGE_INIT = 0;
+const STAGE_SIGN = 1;
+const STAGE_CONFIRMING = 2;
+const STAGE_CONFIRMED = 3;
+const STAGE_INIT_ACC = 1.1;
+const STAGE_CREATE_NEW_ACCOUNT = 1.2;
+const STAGE_RESTORE_PHARSE = 1.3;
+
+function AppSign() {
+  const {
+    tx,
+    isVisible,
+    cyberSigner,
+    updateValueIsVisible,
+    updateValueTxs,
+    updateCyberSigner,
+  } = useContext(AppContextSigner);
+  const location = useLocation();
+  const [stage, setStage] = useState(STAGE_INIT);
+  const [msgData, setMsgData] = useState(null);
+  const [txHash, setTxHash] = useState(null);
+
+  useEffect(() => {
+    rejectStage();
+  }, [location.pathname]);
+
+  useEffect(() => {
+    const getSigner = async () => {
+      const signerObj = new Signer();
+      const signerCyber = await signerObj.initSigner();
+      const pk = Buffer.from(signerCyber.pubkey).toString('hex');
+      console.log(`pk`, pk);
+      console.log(`signerCyber`, signerCyber);
+      updateCyberSigner(signerCyber);
+    };
+    getSigner();
+  }, []);
+
+  useEffect(() => {
+    if (tx !== null) {
+      setMsgData(tx);
+      setStage(STAGE_SIGN);
+      updateValueIsVisible(true);
+    }
+  }, [tx]);
+
+  useEffect(() => {
+    if (txHash !== null) {
+      setStage(STAGE_CONFIRMED);
+    }
+  }, [txHash]);
+
+  const signTx = async () => {
+    console.log(`signer`, cyberSigner);
+    console.log(`msgData`, msgData);
+    if (cyberSigner !== null && msgData !== null) {
+      const signerObj = new Signer();
+      setStage(STAGE_CONFIRMING);
+      const response = await signerObj.sendTxs(cyberSigner, msgData);
+      console.log(`response Txs`, response);
+      setTxHash(response.transactionHash);
+      updateValueTxs(null);
+      setMsgData(null);
+    }
+  };
+
+  const cleaneStage = () => {
+    setStage(STAGE_INIT);
+    setTxHash(null);
+    updateValueIsVisible(false);
+  };
+
+  const rejectStage = () => {
+    setStage(STAGE_INIT);
+    setMsgData(null);
+    setTxHash(null);
+    updateValueTxs(null);
+    updateValueIsVisible(false);
+  };
+
+  if (isVisible && stage === STAGE_SIGN) {
+    return (
+      <StateSign
+        msgData={msgData}
+        onClickReject={rejectStage}
+        onClick={signTx}
+      />
+    );
+  }
+
+  if (isVisible && stage === STAGE_CONFIRMING) {
+    return <StateBroadcast />;
+  }
+
+  if (isVisible && stage === STAGE_CONFIRMED) {
+    return <StateConfirmed txHash={txHash} onClick={rejectStage} />;
+  }
+
+  if (isVisible && stage === STAGE_INIT_ACC) {
+    return <StateInitAccount />;
+  }
+
+  if (isVisible && stage === STAGE_CREATE_NEW_ACCOUNT) {
+    return <StateCreateNew />;
+  }
+
+  if (isVisible && stage === STAGE_RESTORE_PHARSE) {
+    return <StateRestore />;
+  }
+
+  return null;
+}
+
+export default AppSign;
diff --git a/src/containers/signer/component/MsgsSigner.jsx b/src/containers/signer/component/MsgsSigner.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/containers/signer/component/ui.jsx b/src/containers/signer/component/ui.jsx
new file mode 100644
index 000000000..c11e8e2ea
--- /dev/null
+++ b/src/containers/signer/component/ui.jsx
@@ -0,0 +1,263 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Pane, Button, Tablist } from '@cybercongress/gravity';
+import MsgType from '../../txs/msgType';
+import { PillNumber, TabBtn, Dots } from '../../../components';
+import { trimString } from '../../../utils/utils';
+
+const HeaderSigner = ({ children }) => (
+  <Pane
+    fontSize="18px"
+    textAlign="center"
+    borderBottom="1px solid #ffffff52"
+    paddingY={10}
+  >
+    {children}
+  </Pane>
+);
+
+function StateSign({ msgData, onClick, onClickReject }) {
+  const [selected, setSelected] = useState('details');
+
+  let content;
+
+  if (selected === 'details' && msgData !== null) {
+    content = (
+      <Pane overflow="auto" width="100%" paddingY={5} paddingX={10}>
+        <Pane display="flex">
+          Messages{' '}
+          <PillNumber marginLeft={5} height="20px">
+            {Object.keys(msgData).length}
+          </PillNumber>{' '}
+        </Pane>
+        <Pane width="100%" paddingLeft={20}>
+          {Object.keys(msgData).map((key) => (
+            <Pane paddingY={5} width="100%">
+              <MsgType type={msgData[key].type} />
+              {/* {msgData[key].type} */}
+              <Pane borderBottom="1px solid #ffffff52" />
+            </Pane>
+          ))}
+        </Pane>
+      </Pane>
+    );
+  }
+
+  if (selected === 'data' && msgData !== null) {
+    content = (
+      <Pane width="100%" overflow="auto">
+        <pre>{JSON.stringify(msgData, null, 2)}</pre>
+      </Pane>
+    );
+  }
+
+  return (
+    <Pane
+      position="fixed"
+      backgroundColor="#6b696954"
+      zIndex="999999"
+      top={0}
+      bottom={0}
+      right={0}
+      left={0}
+    >
+      <Pane className="signer-container">
+        <HeaderSigner>sign tx</HeaderSigner>
+        <Pane
+          display="flex"
+          height="100%"
+          width="100%"
+          alignItems="flex-start"
+          paddingY={10}
+          flexDirection="column"
+          overflow="hidden"
+        >
+          <Tablist
+            display="grid"
+            gridTemplateColumns="repeat(auto-fit, minmax(100px, 1fr))"
+            gridGap="10px"
+            marginBottom={10}
+            width="100%"
+            paddingX={20}
+            paddingTop={5}
+          >
+            <TabBtn
+              key="details"
+              isSelected={selected === 'details'}
+              text="details"
+              onClick={() => setSelected('details')}
+            />
+            <TabBtn
+              key="data"
+              isSelected={selected === 'data'}
+              text="data"
+              onClick={() => setSelected('data')}
+            />
+          </Tablist>
+          {content}
+        </Pane>
+        <Pane display="flex" justifyContent="center" paddingY={10}>
+          <Button marginX={10} onClick={() => onClickReject()}>
+            reject
+          </Button>
+          <Button marginX={10} onClick={() => onClick()}>
+            sign
+          </Button>
+        </Pane>
+      </Pane>
+    </Pane>
+  );
+}
+
+function StateBroadcast() {
+  return (
+    <Pane className="signer-container">
+      <HeaderSigner>Broadcast txs</HeaderSigner>
+      <Pane position="relative" height="100%">
+        <Pane position="absolute" top="20%" paddingX={20} fontSize="18px">
+          Please wait while we confirm the transaction on the blockchain{' '}
+          <Dots big />
+        </Pane>
+      </Pane>
+    </Pane>
+  );
+}
+
+function StateConfirmed({ txHash, onClick }) {
+  return (
+    <Pane className="signer-container">
+      <HeaderSigner>Confirmed</HeaderSigner>
+      <Pane position="relative" height="100%">
+        <Pane
+          position="absolute"
+          top="20%"
+          paddingX={20}
+          whiteSpace="nowrap"
+          fontSize="18px"
+        >
+          Transaction hash:{' '}
+          <Link to={`/network/euler/tx/${txHash}`}>
+            {trimString(txHash, 6, 6)}
+          </Link>
+        </Pane>
+      </Pane>
+      <Pane
+        paddingY={10}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Button onClick={() => onClick()}>Fuck Google</Button>
+      </Pane>
+    </Pane>
+  );
+}
+
+function StateInitAccount({ onClickCreateNew, onClickRestore }) {
+  return (
+    <Pane className="signer-container">
+      <HeaderSigner>Init Account</HeaderSigner>
+      <Pane position="relative" height="100%">
+        <Pane
+          position="absolute"
+          top="20%"
+          fontSize="18px"
+          width="100%"
+          display="grid"
+          gridTemplateColumns="200px"
+          gridAutoRows="50px 50px"
+          gridGap="20px"
+          justifyContent="center"
+        >
+          <Button onClick={() => onClickCreateNew()}>create new</Button>
+          <Button onClick={() => onClickRestore()}>restore phrase</Button>
+        </Pane>
+      </Pane>
+    </Pane>
+  );
+}
+
+function StateRestore({ valuePhrase, onChangeInputPhrase, onClick }) {
+  return (
+    <Pane className="signer-container">
+      <HeaderSigner>Restore phrase</HeaderSigner>
+      <Pane position="relative" height="100%">
+        <Pane
+          position="absolute"
+          top="10%"
+          width="100%"
+          paddingX={20}
+          fontSize="18px"
+        >
+          <Pane paddingY={10}>Input your seed :</Pane>
+          <textarea
+            style={{ minHeight: '130px', padding: '8px' }}
+            onChange={onChangeInputPhrase}
+            value={valuePhrase}
+            className="resize-none"
+            placeholder="Type your mnemonic"
+          />
+        </Pane>
+      </Pane>
+      <Pane
+        paddingY={10}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Button onClick={() => onClick()}>Fuck Google</Button>
+      </Pane>
+    </Pane>
+  );
+}
+
+function StateCreateNew({ valuePhrase = '', onClick }) {
+  const [copyPhrase, setCopyPhrase] = useState(false);
+
+  return (
+    <Pane className="signer-container">
+      <HeaderSigner>Create new account</HeaderSigner>
+      <Pane position="relative" height="100%">
+        <Pane paddingX={20} fontSize="18px">
+          <Pane textAlign="center" paddingY={10} fontWeight="600">
+            Backup your mnemonic seed securely.
+          </Pane>
+          <Pane paddingY={10}>Mnemonic Seed:</Pane>
+          <textarea
+            style={{ minHeight: '130px', padding: '8px' }}
+            value={valuePhrase}
+            className="resize-none"
+          />
+          <Pane display="flex" alignItems="center" marginTop={30}>
+            <input
+              type="checkbox"
+              style={{ marginRight: '8px' }}
+              className="checkbox"
+              onChange={() => setCopyPhrase(!copyPhrase)}
+            />{' '}
+            I saved the mnemonic phrase
+          </Pane>
+        </Pane>
+      </Pane>
+      <Pane
+        paddingY={10}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Button disabled={!copyPhrase} onClick={() => onClick()}>
+          Fuck Google
+        </Button>
+      </Pane>
+    </Pane>
+  );
+}
+
+export {
+  StateSign,
+  StateBroadcast,
+  StateConfirmed,
+  StateInitAccount,
+  StateCreateNew,
+  StateRestore,
+};
diff --git a/src/containers/signer/index.jsx b/src/containers/signer/index.jsx
new file mode 100644
index 000000000..4c7e64a47
--- /dev/null
+++ b/src/containers/signer/index.jsx
@@ -0,0 +1,87 @@
+/* eslint-disable no-await-in-loop */
+import React from 'react';
+import {
+  Secp256k1HdWallet,
+  SigningCosmosClient,
+  coins,
+} from '@cosmjs/launchpad';
+import { stringToPath } from '@cosmjs/crypto';
+import { CYBER } from '../../utils/config';
+
+class Signer {
+  constructor() {
+    this.prefix = CYBER.BECH32_PREFIX_ACC_ADDR_CYBER;
+    this.word = 24;
+    this.hdPath = stringToPath("m/44'/118'/0'/0/0");
+  }
+
+  initSigner = async () => {
+    const localStorageSecret = localStorage.getItem('secret');
+    if (localStorageSecret !== null) {
+      const localStorageSecretData = JSON.parse(localStorageSecret);
+      const mnemonic = localStorageSecretData;
+      const signer = await Secp256k1HdWallet.fromMnemonic(
+        mnemonic,
+        this.hdPath,
+        this.prefix
+      );
+
+      return signer;
+    }
+    return null;
+  };
+
+  generationAccount = async () => {
+    const address = await this.getVanityAccount();
+    return address;
+  };
+
+  getVanityAccount = async () => {
+    try {
+      let condition = true;
+      while (condition) {
+        const signer = await Secp256k1HdWallet.generate(
+          this.word,
+          this.hdPath,
+          this.prefix
+        );
+        const [{ address }] = await signer.getAccounts();
+        if (address.match(/^cyber1a[a-zA-Z0-9]{37}$/g)) {
+          condition = false;
+          return signer;
+        }
+      }
+    } catch (error) {
+      console.log(`error`, error);
+      return error;
+    }
+  };
+
+  sendTxs = async (signer, msgs) => {
+    try {
+      const [{ address }] = await signer.getAccounts();
+      const client = new SigningCosmosClient(
+        CYBER.CYBER_NODE_URL_LCD,
+        address,
+        signer
+      );
+
+      const fee = {
+        amount: coins(0, 'uatom'),
+        gas: '100000',
+      };
+
+      const response = await client.signAndBroadcast(
+        msgs,
+        fee,
+        CYBER.MEMO_CYBER_SIGNER
+      );
+      return response;
+    } catch (error) {
+      console.log(`error`, error);
+      return error;
+    }
+  };
+}
+
+export default Signer;
diff --git a/src/containers/testKeplre/index.jsx b/src/containers/testKeplre/index.jsx
index 6b26e8189..d33f15734 100644
--- a/src/containers/testKeplre/index.jsx
+++ b/src/containers/testKeplre/index.jsx
@@ -1,82 +1,45 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { coins } from '@cosmjs/launchpad';
-import { AppContext } from '../../context';
+import { AppContext, AppContextSigner } from '../../context';
 import { CYBER } from '../../utils/config';
 
+import Signer from '../signer';
+
 function TestKeplr() {
   const { keplr } = useContext(AppContext);
+  const { cyberSigner, updateValueTxs, updateValueIsVisible } = useContext(
+    AppContextSigner
+  );
+
   const [hashTx, setHashTx] = useState('');
 
   console.log('keplr', keplr);
-    //   cybervaloper15zs0cjct43xs4z4sesxcrynar5mxm82ftahux2;
+  //   cybervaloper15zs0cjct43xs4z4sesxcrynar5mxm82ftahux2;
 
-  const sendTx = async () => {
-    if (keplr !== null) {
-      const chainId = CYBER.CHAIN_ID;
-      await window.keplr.enable(chainId);
-      const { address } = await keplr.getAccount();
-      const msgs = [];
-      msgs.push({
-        type: 'cosmos-sdk/MsgSend',
-        value: {
-          amount: coins(10, 'eul'),
-          from_address: address,
-          to_address: address,
-        },
-      });
+  const signerTest = async () => {
+    const signer = new Signer();
+    const addT = await signer.generationAccount();
+    console.log(`addT`, addT);
+  };
 
-      const fee = {
-        amount: coins(0, 'uatom'),
-        gas: '100000',
-      };
-      if (Object.keys(msgs).length > 0) {
-        console.log('msgs', msgs);
-        const result = await keplr.signAndBroadcast(
-          msgs,
-          fee,
-          CYBER.MEMO_KEPLR
-        );
-        console.log('result: ', result);
-        const hash = result.transactionHash;
-        console.log('hash :>> ', hash);
-      }
-    }
+  const changeValue = () => {
+    updateValueIsVisible(true);
   };
 
-  const delegateTx = async () => {
-    if (keplr !== null) {
-      const chainId = CYBER.CHAIN_ID;
-      await window.keplr.enable(chainId);
-      const { address } = await keplr.getAccount();
+  const sendTxSigner = async () => {
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.getAccounts();
       const msgs = [];
       msgs.push({
-        type: 'cosmos-sdk/MsgDelegate',
+        type: 'cosmos-sdk/MsgSend',
         value: {
-          amount: {
-            amount: '10',
-            denom: 'eul',
-          },
-          delegator_address: address,
-          validator_address:
-            'cybervaloper15zs0cjct43xs4z4sesxcrynar5mxm82ftahux2',
+          amount: coins(10, 'eul'),
+          from_address: address,
+          to_address: 'cyber1ak2zkkde8zaq3fv8dh8d5hclhm80e9q587wmnz',
         },
       });
 
-      const fee = {
-        amount: coins(0, 'uatom'),
-        gas: '100000',
-      };
-      if (Object.keys(msgs).length > 0) {
-        console.log('msgs', msgs);
-        const result = await keplr.signAndBroadcast(
-          msgs,
-          fee,
-          CYBER.MEMO_KEPLR
-        );
-        console.log('result: ', result);
-        const hash = result.transactionHash;
-        console.log('hash :>> ', hash);
-      }
+      updateValueTxs(msgs);
     }
   };
 
@@ -85,18 +48,27 @@ function TestKeplr() {
       <button
         className="btn"
         style={{ maxWidth: 200, marginTop: 50 }}
-        onClick={sendTx}
+        onClick={sendTxSigner}
+        type="button"
+      >
+        sendTxSigner
+      </button>
+
+      <button
+        className="btn"
+        style={{ maxWidth: 200, marginTop: 50 }}
+        onClick={changeValue}
         type="button"
       >
-        send
+        inViseble
       </button>
       <button
         className="btn"
         style={{ maxWidth: 200, marginTop: 50 }}
-        onClick={delegateTx}
+        onClick={signerTest}
         type="button"
       >
-        delegate
+        signerTest
       </button>
       <span>{hashTx}</span>
     </main>
diff --git a/src/containers/txs/msgType.jsx b/src/containers/txs/msgType.jsx
index f332f854f..e1f69d4f9 100644
--- a/src/containers/txs/msgType.jsx
+++ b/src/containers/txs/msgType.jsx
@@ -31,6 +31,9 @@ const MsgType = ({ type }) => {
     case 'cyberd/Link':
       return <ContainerTitle img={link}>Link</ContainerTitle>;
 
+    case 'cyber/Link':
+      return <ContainerTitle img={link}>Link</ContainerTitle>;
+
     // bank
     case 'cosmos-sdk/MsgSend':
       return <ContainerTitle img={bank}>Send</ContainerTitle>;
@@ -84,7 +87,7 @@ const MsgType = ({ type }) => {
       return 'IBC Receive';
 
     default:
-      return { type };
+      return <Pane>{type}</Pane>;
   }
 };
 
diff --git a/src/style/main.css b/src/style/main.css
index c238db8de..184207ddb 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -12,4 +12,5 @@
 
 @import './story.css';
 
-@import './components.css';
\ No newline at end of file
+@import './components.css';
+@import './signer.css';
\ No newline at end of file
diff --git a/src/style/signer.css b/src/style/signer.css
new file mode 100644
index 000000000..10e2a091a
--- /dev/null
+++ b/src/style/signer.css
@@ -0,0 +1,18 @@
+.signer-container {
+    width: 350px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: 5px;
+    box-shadow: 0 0 7px 1px #3ab793;
+    position: fixed;
+    background-color: #000;
+    top: 50%;
+    right: 10%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    margin-right: -50%;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/src/utils/config.js b/src/utils/config.js
index b5603c54e..24cb0b3ca 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -76,6 +76,7 @@ const CYBER = {
   BECH32_PREFIX_ACC_ADDR_CYBERVALOPER: 'cybervaloper',
   CHAIN_ID: 'euler-6',
   MEMO_KEPLR: 'cyber.page, using keplr',
+  MEMO_CYBER_SIGNER: 'cyber.page, using cyberSigner',
 };
 
 const LEDGER = {

From 70fcc1ef6ee3a030367af8107e6823c3076d5266 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 9 Jun 2021 10:36:03 +0300
Subject: [PATCH 06/20] fix(ledger): @ledgerhq/hw-transport-webusb

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b0cac4e30..c4ed07a88 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@cosmjs/math": "^0.23.1",
     "@cybercongress/gravity": "0.0.15",
     "@ledgerhq/hw-transport-u2f": "^4.72.1",
-    "@ledgerhq/hw-transport-webusb": "^5.15.0",
+    "@ledgerhq/hw-transport-webusb": "5.53.0",
     "@tableflip/react-inspector": "^2.3.0",
     "@uniswap/sdk": "^3.0.3",
     "apollo-boost": "^0.4.7",

From 04d63798f4ca987d601471c80379318b177efdc0 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 00:28:18 +0300
Subject: [PATCH 07/20] fix(context): update cyber signer context

- add new fields to value context cyber signer
---
 src/context.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/context.jsx b/src/context.jsx
index ab2d4f5ea..10452dca2 100644
--- a/src/context.jsx
+++ b/src/context.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { SigningCosmosClient, GasPrice } from '@cosmjs/launchpad';
 import { Decimal } from '@cosmjs/math';
-import { CYBER } from './utils/config';
+import { CYBER, CYBER_SIGNER } from './utils/config';
 
 const valueContext = {
   keplr: null,
@@ -12,6 +12,8 @@ const valueSignerContxt = {
   tx: null,
   isVisible: false,
   cyberSigner: null,
+  callbackFnc: null,
+  stage: CYBER_SIGNER.STAGE_INIT,
 };
 
 export const AppContext = React.createContext(valueContext);
@@ -149,6 +151,14 @@ const AppContextProvider = ({ children }) => {
     setValueSigner((item) => ({ ...item, cyberSigner }));
   };
 
+  const updateCallbackSigner = (callbackFnc) => {
+    setValueSigner((item) => ({ ...item, callbackFnc }));
+  };
+
+  const updateStageSigner = (stage) => {
+    setValueSigner((item) => ({ ...item, stage }));
+  };
+
   return (
     <AppContext.Provider value={value}>
       <AppContextSigner.Provider
@@ -157,6 +167,8 @@ const AppContextProvider = ({ children }) => {
           updateValueIsVisible,
           updateValueTxs,
           updateCyberSigner,
+          updateCallbackSigner,
+          updateStageSigner,
         }}
       >
         {children}

From 81a318f5ea32c654cb5dc78ca74939d3f5aa63bd Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 00:56:40 +0300
Subject: [PATCH 08/20] feat(gov): actionBar

- add cyberSigner to gov
-add cyberSigner to gov Details
---
 src/containers/governance/actionBar.jsx       | 218 ++++++++++--------
 .../governance/actionBarContainer.jsx         |  23 ++
 src/containers/governance/actionBarDatail.jsx | 117 +++++++---
 .../governance/actionBarDetailsContainer.jsx  |  23 ++
 src/containers/governance/governance.jsx      |  24 +-
 src/containers/governance/proposalsDetail.jsx |   4 +-
 6 files changed, 277 insertions(+), 132 deletions(-)
 create mode 100644 src/containers/governance/actionBarContainer.jsx
 create mode 100644 src/containers/governance/actionBarDetailsContainer.jsx

diff --git a/src/containers/governance/actionBar.jsx b/src/containers/governance/actionBar.jsx
index 5b46a1714..566e403b9 100644
--- a/src/containers/governance/actionBar.jsx
+++ b/src/containers/governance/actionBar.jsx
@@ -49,7 +49,7 @@ const {
 
 const LEDGER_TX_ACOUNT_INFO = 10;
 
-class ActionBar extends Component {
+class InnerActionBarContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -141,7 +141,7 @@ class ActionBar extends Component {
     }
   };
 
-  generateTxKeplr = async () => {
+  getTxsMsgs = async (address) => {
     const {
       valueSelect,
       valueDescription,
@@ -153,105 +153,140 @@ class ActionBar extends Component {
       nameUpgrade,
       heightUpgrade,
     } = this.state;
-    const { keplr } = this.context;
-    console.log('keplr', keplr);
-    if (keplr !== null) {
-      let deposit = [];
-      const title = valueTitle;
-      const description = valueDescription;
-      const recipient = valueAddressRecipient;
-      let amount = [];
-      let msgs = [];
-      const chainId = CYBER.CHAIN_ID;
-      await window.keplr.enable(chainId);
-      const accounts = await keplr.getAccount();
+    let deposit = [];
+    const title = valueTitle;
+    const description = valueDescription;
+    const recipient = valueAddressRecipient;
+    let amount = [];
+    let msgs = [];
 
-      if (valueDeposit > 0) {
-        deposit = coins(valueDeposit * CYBER.DIVISOR_CYBER_G, 'eul');
-      }
+    if (valueDeposit > 0) {
+      deposit = coins(valueDeposit * CYBER.DIVISOR_CYBER_G, 'eul');
+    }
 
-      if (valueAmountRecipient > 0) {
-        amount = coins(valueAmountRecipient * CYBER.DIVISOR_CYBER_G, 'eul');
-      }
+    if (valueAmountRecipient > 0) {
+      amount = coins(valueAmountRecipient * CYBER.DIVISOR_CYBER_G, 'eul');
+    }
 
-      switch (valueSelect) {
-        case 'textProposal': {
-          msgs.push({
-            type: 'cosmos-sdk/MsgSubmitProposal',
-            value: {
-              content: {
-                type: 'cosmos-sdk/TextProposal',
-                value: {
-                  description,
-                  title,
-                },
+    switch (valueSelect) {
+      case 'textProposal': {
+        msgs.push({
+          type: 'cosmos-sdk/MsgSubmitProposal',
+          value: {
+            content: {
+              type: 'cosmos-sdk/TextProposal',
+              value: {
+                description,
+                title,
               },
-              proposer: accounts.address,
-              initial_deposit: deposit,
             },
-          });
-          break;
-        }
-        case 'communityPool': {
-          msgs.push({
-            type: 'cosmos-sdk/MsgSubmitProposal',
-            value: {
-              content: {
-                type: 'cosmos-sdk/CommunityPoolSpendProposal',
-                value: {
-                  amount,
-                  description,
-                  recipient,
-                  title,
-                },
+            proposer: address,
+            initial_deposit: deposit,
+          },
+        });
+        break;
+      }
+      case 'communityPool': {
+        msgs.push({
+          type: 'cosmos-sdk/MsgSubmitProposal',
+          value: {
+            content: {
+              type: 'cosmos-sdk/CommunityPoolSpendProposal',
+              value: {
+                amount,
+                description,
+                recipient,
+                title,
               },
-              initial_deposit: deposit,
-              proposer: accounts.address,
             },
-          });
-          break;
-        }
-        case 'paramChange': {
-          msgs.push({
-            type: 'cosmos-sdk/MsgSubmitProposal',
-            value: {
-              content: {
-                type: 'cosmos-sdk/ParameterChangeProposal',
-                value: {
-                  changes: changeParam,
-                  description,
-                  title,
-                },
+            initial_deposit: deposit,
+            proposer: address,
+          },
+        });
+        break;
+      }
+      case 'paramChange': {
+        msgs.push({
+          type: 'cosmos-sdk/MsgSubmitProposal',
+          value: {
+            content: {
+              type: 'cosmos-sdk/ParameterChangeProposal',
+              value: {
+                changes: changeParam,
+                description,
+                title,
               },
-              proposer: accounts.address,
-              initial_deposit: deposit,
             },
-          });
-          break;
-        }
+            proposer: address,
+            initial_deposit: deposit,
+          },
+        });
+        break;
+      }
 
-        case 'softwareUpgrade': {
-          msgs.push({
-            type: 'cosmos-sdk/MsgSubmitProposal',
-            value: {
-              content: {
-                type: 'cosmos-sdk/SoftwareUpgradeProposal',
-                value: {
-                  description,
-                  title,
-                  plan: { name: nameUpgrade, height: heightUpgrade },
-                },
+      case 'softwareUpgrade': {
+        msgs.push({
+          type: 'cosmos-sdk/MsgSubmitProposal',
+          value: {
+            content: {
+              type: 'cosmos-sdk/SoftwareUpgradeProposal',
+              value: {
+                description,
+                title,
+                plan: { name: nameUpgrade, height: heightUpgrade },
               },
-              proposer: accounts.address,
-              initial_deposit: deposit,
             },
-          });
-          break;
-        }
-        default: {
-          msgs = [];
-        }
+            proposer: address,
+            initial_deposit: deposit,
+          },
+        });
+        break;
       }
+      default: {
+        msgs = [];
+      }
+    }
+    return msgs;
+  };
+
+  updateCallbackFnc = (result) => {
+    const { valueAppContextSigner } = this.props;
+    const { updateCallbackSigner } = valueAppContextSigner;
+    const hash = result.transactionHash;
+    updateCallbackSigner(null);
+    console.log('hash :>> ', hash);
+    this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
+    this.timeOut = setTimeout(this.confirmTx, 1500);
+  };
+
+  generateTxCyberSigner = async () => {
+    const { valueAppContextSigner } = this.props;
+    const {
+      cyberSigner,
+      updateValueTxs,
+      updateCallbackSigner,
+    } = valueAppContextSigner;
+
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.getAccounts();
+      const msg = await this.getTxsMsgs(address);
+      console.log(`msg`, msg);
+      if (msg.length > 0) {
+        updateCallbackSigner(this.updateCallbackFnc);
+        updateValueTxs(msg);
+      }
+    }
+  };
+
+  generateTxKeplr = async () => {
+    const { valueAppContext } = this.props;
+    const { keplr } = valueAppContext;
+    console.log('keplr', keplr);
+    if (keplr !== null) {
+      const chainId = CYBER.CHAIN_ID;
+      await window.keplr.enable(chainId);
+      const { address } = await keplr.getAccount();
+      const msgs = await this.getTxsMsgs(address);
 
       const fee = {
         amount: coins(0, 'uatom'),
@@ -486,6 +521,9 @@ class ActionBar extends Component {
       if (account.keys === 'keplr') {
         this.generateTxKeplr();
       }
+      if (account.keys === 'cyberSigner') {
+        this.generateTxCyberSigner();
+      }
     }
   };
 
@@ -807,6 +845,4 @@ class ActionBar extends Component {
   }
 }
 
-ActionBar.contextType = AppContext;
-
-export default ActionBar;
+export default InnerActionBarContainer;
diff --git a/src/containers/governance/actionBarContainer.jsx b/src/containers/governance/actionBarContainer.jsx
new file mode 100644
index 000000000..f1dd656ed
--- /dev/null
+++ b/src/containers/governance/actionBarContainer.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import InnerActionBarContainer from './actionBar';
+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;
diff --git a/src/containers/governance/actionBarDatail.jsx b/src/containers/governance/actionBarDatail.jsx
index 630399eb3..fecea8973 100644
--- a/src/containers/governance/actionBarDatail.jsx
+++ b/src/containers/governance/actionBarDatail.jsx
@@ -32,6 +32,14 @@ import { LEDGER, CYBER, PATTERN_CYBER } from '../../utils/config';
 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,
@@ -52,7 +60,7 @@ const LEDGER_TX_ACOUNT_INFO = 10;
 const STAGE_CLI_ADD_ADDRESS = 1.3;
 const STAGE_GENERATION_TX = 12.2;
 
-class ActionBarDetail extends Component {
+class InnerActionBarContainerDetail extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -143,45 +151,81 @@ class ActionBarDetail extends Component {
     }
   };
 
-  generateTxKeplr = async () => {
+  getTxsMsgs = async (address) => {
     const { valueSelect, valueDeposit } = this.state;
     const { period, id } = this.props;
-    const { keplr } = this.context;
+    const msgs = [];
+
+    let amount = [];
+    if (parseFloat(valueDeposit) > 0) {
+      amount = coins(valueDeposit * CYBER.DIVISOR_CYBER_G, 'eul');
+    }
+
+    if (period === 'deposit') {
+      msgs.push({
+        type: 'cosmos-sdk/MsgDeposit',
+        value: {
+          amount,
+          depositor: address,
+          proposal_id: id,
+        },
+      });
+    }
+
+    if (period === 'vote') {
+      msgs.push({
+        type: 'cosmos-sdk/MsgVote',
+        value: {
+          option: valueSelect,
+          voter: address,
+          proposal_id: id,
+        },
+      });
+    }
+    return msgs;
+  };
+
+  updateCallbackFnc = (result) => {
+    const { valueAppContextSigner } = this.props;
+    const { updateCallbackSigner } = valueAppContextSigner;
+    const hash = result.transactionHash;
+    updateCallbackSigner(null);
+    console.log('hash :>> ', hash);
+    this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
+    this.timeOut = setTimeout(this.confirmTx, 1500);
+  };
+
+  generateTxCyberSigner = async () => {
+    const { valueAppContextSigner } = this.props;
+    const {
+      cyberSigner,
+      updateValueTxs,
+      updateCallbackSigner,
+    } = valueAppContextSigner;
+
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.getAccounts();
+      const msg = await this.getTxs(address);
+      console.log(`msg`, msg);
+      if (msg.length > 0) {
+        updateCallbackSigner(this.updateCallbackFnc);
+        updateValueTxs(msg);
+      }
+    }
+  };
+
+  generateTxKeplr = async () => {
+    const { valueAppContext } = this.props;
+    const { keplr } = valueAppContext;
     if (keplr !== null) {
       const chainId = CYBER.CHAIN_ID;
       await window.keplr.enable(chainId);
-      const accounts = await keplr.getAccount();
+      const { address } = await keplr.getAccount();
       this.setState({
         stage: STAGE_GENERATION_TX,
       });
 
-      let amount = [];
-      if (parseFloat(valueDeposit) > 0) {
-        amount = coins(valueDeposit * CYBER.DIVISOR_CYBER_G, 'eul');
-      }
-      const msgs = [];
-
-      if (period === 'deposit') {
-        msgs.push({
-          type: 'cosmos-sdk/MsgDeposit',
-          value: {
-            amount,
-            depositor: accounts.address,
-            proposal_id: id,
-          },
-        });
-      }
-
-      if (period === 'vote') {
-        msgs.push({
-          type: 'cosmos-sdk/MsgVote',
-          value: {
-            option: valueSelect,
-            voter: accounts.address,
-            proposal_id: id,
-          },
-        });
-      }
+      const msgs = await this.getTxsMsgs(address);
 
       const fee = {
         amount: coins(0, 'uatom'),
@@ -438,6 +482,9 @@ class ActionBarDetail extends Component {
     if (defaultAccount.keys === 'keplr') {
       this.generateTxKeplr();
     }
+    if (defaultAccount.keys === 'cyberSigner') {
+      this.generateTxCyberSigner();
+    }
   };
 
   onChangeValueAddress = (e) => {
@@ -505,7 +552,7 @@ class ActionBarDetail extends Component {
             }
             disabled={!parseFloat(valueDeposit) > 0}
             onClick={this.onClickUsingLedger}
-            img={defaultAccount.keys === 'ledger' ? imgLedger : imgKeplr}
+            img={imgData[defaultAccount.keys]}
           />
         </ActionBar>
       );
@@ -545,7 +592,7 @@ class ActionBarDetail extends Component {
               </Pane>
             }
             onClick={this.onClickUsingLedger}
-            img={defaultAccount.keys === 'ledger' ? imgLedger : imgKeplr}
+            img={imgData[defaultAccount.keys]}
           />
         </ActionBar>
       );
@@ -636,6 +683,4 @@ class ActionBarDetail extends Component {
   }
 }
 
-ActionBarDetail.contextType = AppContext;
-
-export default ActionBarDetail;
+export default InnerActionBarContainerDetail;
diff --git a/src/containers/governance/actionBarDetailsContainer.jsx b/src/containers/governance/actionBarDetailsContainer.jsx
new file mode 100644
index 000000000..5f71ed4e1
--- /dev/null
+++ b/src/containers/governance/actionBarDetailsContainer.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import InnerActionBarContainerDetail from './actionBarDatail';
+import { AppContext, AppContextSigner } from '../../context';
+
+const ActionBarContainer = (props) => {
+  return (
+    <AppContext.Consumer>
+      {(valueAppContext) => (
+        <AppContextSigner.Consumer>
+          {(valueAppContextSigner) => (
+            <InnerActionBarContainerDetail
+              valueAppContext={valueAppContext}
+              valueAppContextSigner={valueAppContextSigner}
+              {...props}
+            />
+          )}
+        </AppContextSigner.Consumer>
+      )}
+    </AppContext.Consumer>
+  );
+};
+
+export default ActionBarContainer;
diff --git a/src/containers/governance/governance.jsx b/src/containers/governance/governance.jsx
index db8b8080b..c13cd12fc 100644
--- a/src/containers/governance/governance.jsx
+++ b/src/containers/governance/governance.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Pane } from '@cybercongress/gravity';
+import { Pane, ActionBar } from '@cybercongress/gravity';
 import { connect } from 'react-redux';
-import ActionBar from './actionBar';
+import ActionBarContainer from './actionBarContainer';
 import { getProposals, getMinDeposit } from '../../utils/governance';
 import Columns from './components/columns';
 import { AcceptedCard, ActiveCard, RejectedCard } from './components/card';
@@ -166,7 +166,25 @@ console.log('tableData', tableData)
           <Columns title="Rejected">{rejected}</Columns>
         </Pane>
       </main>
-      <ActionBar account={account} update={feachProposals} />
+      {account !== null ? (
+        <ActionBarContainer account={account} update={feachProposals} />
+      ) : (
+        <ActionBar>
+          <Pane>
+            <Link
+              style={{
+                paddingTop: 10,
+                paddingBottom: 10,
+                display: 'block',
+              }}
+              className="btn"
+              to="/pocket"
+            >
+              add address to your pocket
+            </Link>
+          </Pane>
+        </ActionBar>
+      )}
     </div>
   );
 }
diff --git a/src/containers/governance/proposalsDetail.jsx b/src/containers/governance/proposalsDetail.jsx
index 548d8134f..5de9d24a6 100644
--- a/src/containers/governance/proposalsDetail.jsx
+++ b/src/containers/governance/proposalsDetail.jsx
@@ -28,7 +28,7 @@ import {
   getTableVoters,
   getTallyingProposals,
 } from '../../utils/governance';
-import ActionBarDetail from './actionBarDatail';
+import ActionBarContainer from './actionBarDetailsContainer';
 
 import { formatNumber } from '../../utils/utils';
 
@@ -437,7 +437,7 @@ class ProposalsDetail extends React.Component {
         {defaultAccount.account !== null &&
         defaultAccount.account.cyber &&
         defaultAccount.account.cyber.keys !== 'read-only' ? (
-          <ActionBarDetail
+          <ActionBarContainer
             id={id}
             period={period}
             minDeposit={minDeposit}

From e1f2e6baf485a22a95d57fcc26ff5bf0b0fad8ea Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 00:57:27 +0300
Subject: [PATCH 09/20] feat(heroes): actionBar

- add cyberSigner to heroes
---
 .../Validators/ActionBarContainer.jsx         | 151 ++++++++++++------
 src/containers/Validators/Validators.jsx      |   2 +-
 src/containers/Validators/actionBar.jsx       |  23 +++
 3 files changed, 126 insertions(+), 50 deletions(-)
 create mode 100644 src/containers/Validators/actionBar.jsx

diff --git a/src/containers/Validators/ActionBarContainer.jsx b/src/containers/Validators/ActionBarContainer.jsx
index cf9d4919f..b974ba5ec 100644
--- a/src/containers/Validators/ActionBarContainer.jsx
+++ b/src/containers/Validators/ActionBarContainer.jsx
@@ -69,7 +69,7 @@ const ActionBarContentText = ({ children, ...props }) => (
   </Pane>
 );
 
-class ActionBarContainer extends Component {
+class InnerActionBarContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -207,59 +207,66 @@ class ActionBarContainer extends Component {
     }
   };
 
-  generateTxKeplr = async () => {
-    const { validators, addressPocket } = this.props;
-    const { keplr } = this.context;
+  getTxsMsgs = async (address) => {
+    const { validators } = this.props;
     const { toSend, txType, valueSelect } = this.state;
     const amount = parseFloat(toSend) * DIVISOR_CYBER_G;
     const validatorAddres = validators.operator_address;
+    const msgs = [];
+    if (txType === TXTYPE_DELEGATE) {
+      msgs.push({
+        type: 'cosmos-sdk/MsgDelegate',
+        value: {
+          amount: {
+            amount: amount.toString(),
+            denom: CYBER.DENOM_CYBER,
+          },
+          delegator_address: address,
+          validator_address: validatorAddres,
+        },
+      });
+    }
+    if (txType === TXTYPE_UNDELEGATE) {
+      msgs.push({
+        type: 'cosmos-sdk/MsgUndelegate',
+        value: {
+          amount: {
+            amount: amount.toString(),
+            denom: CYBER.DENOM_CYBER,
+          },
+          delegator_address: address,
+          validator_address: validatorAddres,
+        },
+      });
+    }
+    if (txType === TXTYPE_REDELEGATE) {
+      msgs.push({
+        type: 'cosmos-sdk/MsgBeginRedelegate',
+        value: {
+          amount: {
+            amount: amount.toString(),
+            denom: CYBER.DENOM_CYBER,
+          },
+          delegator_address: address,
+          validator_dst_address: valueSelect,
+          validator_src_address: validatorAddres,
+        },
+      });
+    }
+
+    return msgs;
+  };
+
+  generateTxKeplr = async () => {
+    const { addressPocket, valueAppContext } = this.props;
+    const { keplr } = valueAppContext;
 
     if (keplr !== null) {
       const chainId = CYBER.CHAIN_ID;
       await window.keplr.enable(chainId);
       const { address } = await keplr.getAccount();
       if (addressPocket !== null && addressPocket.bech32 === address) {
-        const msgs = [];
-        if (txType === TXTYPE_DELEGATE) {
-          msgs.push({
-            type: 'cosmos-sdk/MsgDelegate',
-            value: {
-              amount: {
-                amount: amount.toString(),
-                denom: CYBER.DENOM_CYBER,
-              },
-              delegator_address: address,
-              validator_address: validatorAddres,
-            },
-          });
-        }
-        if (txType === TXTYPE_UNDELEGATE) {
-          msgs.push({
-            type: 'cosmos-sdk/MsgUndelegate',
-            value: {
-              amount: {
-                amount: amount.toString(),
-                denom: CYBER.DENOM_CYBER,
-              },
-              delegator_address: address,
-              validator_address: validatorAddres,
-            },
-          });
-        }
-        if (txType === TXTYPE_REDELEGATE) {
-          msgs.push({
-            type: 'cosmos-sdk/MsgBeginRedelegate',
-            value: {
-              amount: {
-                amount: amount.toString(),
-                denom: CYBER.DENOM_CYBER,
-              },
-              delegator_address: address,
-              validator_dst_address: valueSelect,
-              validator_src_address: validatorAddres,
-            },
-          });
-        }
+        const msgs = await this.getTxsMsgs(address);
         const fee = {
           amount: coins(0, 'uatom'),
           gas: '100000',
@@ -288,6 +295,48 @@ class ActionBarContainer extends Component {
     }
   };
 
+  generateTxCyberSigner = async () => {
+    const { addressPocket, valueAppContextSigner } = this.props;
+    const {
+      cyberSigner,
+      updateValueTxs,
+      updateCallbackSigner,
+    } = valueAppContextSigner;
+
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.getAccounts();
+      if (addressPocket !== null && addressPocket.bech32 === address) {
+        const msgs = await this.getTxsMsgs(address);
+
+        updateCallbackSigner(this.updateCallbackFnc);
+        updateValueTxs(msgs);
+        this.setState({
+          stage: LEDGER_GENERATION,
+        });
+      } else {
+        this.setState({
+          stage: STAGE_ERROR,
+          errorMessage: `Add address ${trimString(
+            address,
+            9,
+            5
+          )} to your pocket or make active `,
+        });
+      }
+    }
+  };
+
+  updateCallbackFnc = (result) => {
+    const { valueAppContextSigner } = this.props;
+    const { updateCallbackSigner } = valueAppContextSigner;
+
+    const hash = result.transactionHash;
+    updateCallbackSigner(null);
+    console.log('hash :>> ', hash);
+    this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
+    this.timeOut = setTimeout(this.confirmTx, 1500);
+  };
+
   generateTx = async () => {
     const { address, addressInfo, toSend, txType, valueSelect } = this.state;
     const { validators } = this.props;
@@ -430,9 +479,15 @@ class ActionBarContainer extends Component {
     const { addressPocket } = this.props;
     if (addressPocket !== null && addressPocket.keys === 'keplr') {
       this.generateTxKeplr();
-    } else {
+    }
+
+    if (addressPocket !== null && addressPocket.keys === 'ledger') {
       this.getLedgerAddress();
     }
+
+    if (addressPocket !== null && addressPocket.keys === 'cyberSigner') {
+      this.generateTxCyberSigner();
+    }
   };
 
   onChangeInputAmount = (e) => {
@@ -740,6 +795,4 @@ class ActionBarContainer extends Component {
   }
 }
 
-ActionBarContainer.contextType = AppContext;
-
-export default ActionBarContainer;
+export default InnerActionBarContainer;
diff --git a/src/containers/Validators/Validators.jsx b/src/containers/Validators/Validators.jsx
index a5f46d7cd..90167ef15 100644
--- a/src/containers/Validators/Validators.jsx
+++ b/src/containers/Validators/Validators.jsx
@@ -39,7 +39,7 @@ import {
   Dots,
   TabBtn,
 } from '../../components';
-import ActionBarContainer from './ActionBarContainer';
+import ActionBarContainer from './actionBar';
 import { i18n } from '../../i18n/en';
 import { CYBER } from '../../utils/config';
 
diff --git a/src/containers/Validators/actionBar.jsx b/src/containers/Validators/actionBar.jsx
new file mode 100644
index 000000000..df15d0b40
--- /dev/null
+++ b/src/containers/Validators/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;

From cb1b310364d0f52d734b0733d793affcf47ec4cd Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 00:58:02 +0300
Subject: [PATCH 10/20] feat(pocket): actionBar

- add cyberSigner to pocket
---
 src/containers/Wallet/actionBar.jsx           |  14 +-
 src/containers/Wallet/actionBarConnect.jsx    | 125 +++++++++-
 .../Wallet/actionBarCyberSigner.jsx           | 223 ++++++++++++++++++
 src/containers/Wallet/actionBarTweet.jsx      |   3 +-
 src/containers/testKeplre/index.jsx           |  38 ++-
 5 files changed, 396 insertions(+), 7 deletions(-)
 create mode 100644 src/containers/Wallet/actionBarCyberSigner.jsx

diff --git a/src/containers/Wallet/actionBar.jsx b/src/containers/Wallet/actionBar.jsx
index 7596dd2f3..cf0c6a670 100644
--- a/src/containers/Wallet/actionBar.jsx
+++ b/src/containers/Wallet/actionBar.jsx
@@ -11,6 +11,7 @@ import ActionBarWeb3 from './actionBarWeb3';
 import ActionBarUser from './actionBarUser';
 import ActionBarLedger from './actionBarLedger';
 import ActionBarConnect from './actionBarConnect';
+import ActionBarCyberSigner from './actionBarCyberSigner';
 
 const imgLedger = require('../../image/ledger.svg');
 const imgKeplr = require('../../image/keplr-icon.svg');
@@ -22,6 +23,7 @@ const STAGE_CONNECT = 2;
 const STAGE_SEND_LEDGER = 3.1;
 const STAGE_SEND_KEPLR = 4.1;
 const STAGE_SEND_READ_ONLY = 5.1;
+const STAGE_SEND_CYBER_SIGNER = 6.1;
 
 const ButtonImgText = ({ img, text = 'Send', ...props }) => (
   <Button marginX={10} {...props}>
@@ -283,7 +285,7 @@ function ActionBar({
           )}
           <ButtonImgText
             img={imgCyberSigner}
-            // onClick={() => setStage(STAGE_SEND_READ_ONLY)}
+            onClick={() => setStage(STAGE_SEND_CYBER_SIGNER)}
           />
           {makeActive && (
             <Button marginX={10} onClick={() => changeDefaultAccounts()}>
@@ -340,6 +342,16 @@ function ActionBar({
     );
   }
 
+  if (stage === STAGE_SEND_CYBER_SIGNER) {
+    return (
+      <ActionBarCyberSigner
+        selectAccount={selectAccount}
+        updateAddress={updateFuncActionBar}
+        updateBalance={updateAddress}
+      />
+    );
+  }
+
   if (stage === STAGE_SEND_LEDGER) {
     return (
       <ActionBarLedger
diff --git a/src/containers/Wallet/actionBarConnect.jsx b/src/containers/Wallet/actionBarConnect.jsx
index 0040bf3a6..76ce7c9f3 100644
--- a/src/containers/Wallet/actionBarConnect.jsx
+++ b/src/containers/Wallet/actionBarConnect.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import TransportWebUSB from '@ledgerhq/hw-transport-webusb';
 import { Link } from 'react-router-dom';
 import { Pane, Input, Text, ActionBar, Button } from '@cybercongress/gravity';
@@ -17,8 +17,10 @@ import {
   PATTERN_COSMOS,
   PATTERN_CYBER,
   POCKET,
+  CYBER_SIGNER,
 } from '../../utils/config';
 import { fromBech32, trimString } from '../../utils/utils';
+import { AppContextSigner } from '../../context';
 
 const {
   STAGE_INIT,
@@ -52,6 +54,13 @@ function ActionBarConnect({
   accountsETH,
   selectAccount,
 }) {
+  const {
+    cyberSigner,
+    updateValueTxs,
+    updateValueIsVisible,
+    updateCallbackSigner,
+    updateStageSigner,
+  } = useContext(AppContextSigner);
   const [stage, setStage] = useState(STAGE_INIT);
   const [hdpath, setHDpath] = useState([44, 118, 0, 0, 0]);
   const [connectLedger, setConnectLedger] = useState(null);
@@ -145,6 +154,10 @@ function ActionBarConnect({
         onClickConnectWeb3();
         break;
 
+      case 'cyberSigner':
+        onClickConnectCyberSigner();
+        break;
+
       default:
         onClickAddAddressUser();
         break;
@@ -476,6 +489,116 @@ function ActionBarConnect({
     }
   };
 
+  const callbackSigner = async (signerCyber) => {
+    console.log(`callbackSigner`, signerCyber);
+    const [{ address }] = await signerCyber.getAccounts();
+    const pk = Buffer.from(signerCyber.pubkey).toString('hex');
+    console.log(`callbackSigner address`, address);
+    console.log(`callbackSigner pk`, pk);
+    updateCallbackSigner(null);
+    const accounts = {};
+    let key = 'Account 1';
+    let dataPocketAccount = null;
+    let valueObj = {};
+    let pocketAccount = {};
+    let count = 1;
+
+    const localStorageStory = await localStorage.getItem('pocketAccount');
+    const localStoragePocket = await localStorage.getItem('pocket');
+    const localStorageCount = await localStorage.getItem('count');
+    if (localStorageCount !== null) {
+      const dataCount = JSON.parse(localStorageCount);
+      count = parseFloat(dataCount);
+      key = `Account ${count}`;
+    }
+    localStorage.setItem('count', JSON.stringify(count + 1));
+    if (localStorageStory !== null) {
+      dataPocketAccount = JSON.parse(localStorageStory);
+      valueObj = Object.values(dataPocketAccount);
+      if (selectAccount !== null) {
+        key = selectAccount.key;
+      }
+    }
+    if (selectNetwork === 'cyber' || addCyberAddress) {
+      const cyberBech32 = address;
+      if (
+        selectAccount !== null ||
+        !checkAddress(valueObj, 'cyber', cyberBech32)
+      ) {
+        accounts.cyber = {
+          bech32: cyberBech32,
+          keys: 'cyberSigner',
+          pk,
+          path: HDPATH,
+          secret: signerCyber.secret.data,
+        };
+      }
+    }
+    if (selectNetwork === 'cosmos') {
+      const cosmosAddress = fromBech32(address, 'cosmos');
+      const cosmosBech32 = cosmosAddress;
+      if (
+        selectAccount !== null ||
+        !checkAddress(valueObj, 'cosmos', cosmosBech32)
+      ) {
+        accounts.cosmos = {
+          bech32: cosmosBech32,
+          keys: 'cyberSigner',
+          pk,
+          path: HDPATH,
+        };
+      }
+    }
+    setStage(STAGE_ADD_ADDRESS_OK);
+    if (selectAccount === null) {
+      if (localStorageStory !== null) {
+        if (Object.keys(accounts).length > 0) {
+          pocketAccount = { [key]: accounts, ...dataPocketAccount };
+        }
+      } else {
+        pocketAccount = { [key]: accounts };
+      }
+      if (Object.keys(pocketAccount).length > 0) {
+        localStorage.setItem('pocketAccount', JSON.stringify(pocketAccount));
+      }
+    } else {
+      dataPocketAccount[selectAccount.key][selectNetwork] =
+        accounts[selectNetwork];
+      console.log('dataPocketAccount', dataPocketAccount);
+      if (Object.keys(dataPocketAccount).length > 0) {
+        localStorage.setItem(
+          'pocketAccount',
+          JSON.stringify(dataPocketAccount)
+        );
+      }
+      if (localStoragePocket !== null) {
+        const localStoragePocketData = JSON.parse(localStoragePocket);
+        const keyPocket = Object.keys(localStoragePocketData)[0];
+        localStoragePocketData[keyPocket][selectNetwork] =
+          accounts[selectNetwork];
+        if (keyPocket === selectAccount.key) {
+          localStorage.setItem(
+            'pocket',
+            JSON.stringify(localStoragePocketData)
+          );
+        }
+      }
+    }
+    cleatState();
+    if (updateAddress) {
+      updateAddress();
+    }
+    if (updateFuncActionBar) {
+      updateFuncActionBar();
+    }
+  };
+
+  const onClickConnectCyberSigner = () => {
+    updateCallbackSigner(callbackSigner);
+    updateValueIsVisible(true);
+    updateStageSigner(CYBER_SIGNER.STAGE_INIT_ACC);
+  };
+
   const connectKeplr = async () => {
     const accounts = {};
     let key = 'Account 1';
diff --git a/src/containers/Wallet/actionBarCyberSigner.jsx b/src/containers/Wallet/actionBarCyberSigner.jsx
new file mode 100644
index 000000000..5525b6883
--- /dev/null
+++ b/src/containers/Wallet/actionBarCyberSigner.jsx
@@ -0,0 +1,223 @@
+import React, { useEffect, useState, useContext } from 'react';
+import TransportWebUSB from '@ledgerhq/hw-transport-webusb';
+import { Link } from 'react-router-dom';
+import { Pane, Text, ActionBar, Button, Input } from '@cybercongress/gravity';
+import { coins } from '@cosmjs/launchpad';
+import { CosmosDelegateTool } from '../../utils/ledger';
+import { AppContextSigner } from '../../context';
+import {
+  ConnectLadger,
+  Dots,
+  ActionBarContentText,
+  TransactionSubmitted,
+  Confirmed,
+  TransactionError,
+} from '../../components';
+import {
+  LEDGER,
+  CYBER,
+  PATTERN_COSMOS,
+  PATTERN_CYBER,
+  POCKET,
+} from '../../utils/config';
+import { getTxs } from '../../utils/search/utils';
+import { deletPubkey } from './utils';
+
+const imgKeplr = require('../../image/keplr-icon.svg');
+
+const {
+  STAGE_INIT,
+  STAGE_ERROR,
+  STAGE_SUBMITTED,
+  STAGE_CONFIRMING,
+  STAGE_CONFIRMED,
+} = LEDGER;
+
+const STAGE_SEND = 1.1;
+
+function ActionBarCyberSigner({ updateAddress, updateBalance, selectAccount }) {
+  const { cyberSigner, updateValueTxs, updateCallbackSigner } = useContext(
+    AppContextSigner
+  );
+  const [stage, setStage] = useState(STAGE_SEND);
+  const [amountSend, setAmountSend] = useState('');
+  const [recipient, setRecipient] = useState('');
+  const [recipientInputValid, setRecipientInputValid] = useState(null);
+  const [amountSendInputValid, setAmountSendInputValid] = useState(null);
+  const [txHash, setTxHash] = useState(null);
+  const [txHeight, setTxHeight] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [disabledGenerate, setDisabledGenerate] = useState(true);
+
+  const generateTxSend = async () => {
+    const amount = parseFloat(amountSend);
+    if (cyberSigner !== null) {
+      setStage(STAGE_SUBMITTED);
+      const [{ address }] = await cyberSigner.getAccounts();
+      const msgs = [];
+      msgs.push({
+        type: 'cosmos-sdk/MsgSend',
+        value: {
+          amount: coins(amount, CYBER.DENOM_CYBER),
+          from_address: address,
+          to_address: recipient,
+        },
+      });
+
+      updateCallbackSigner(updateCallbackFnc);
+      updateValueTxs(msgs);
+    }
+  };
+
+  const updateCallbackFnc = (result) => {
+    const hash = result.transactionHash;
+    updateCallbackSigner(null);
+    console.log('hash :>> ', hash);
+    setTxHash(hash);
+  };
+
+  const cleatState = () => {
+    setStage(STAGE_SEND);
+    setRecipientInputValid(null);
+    setAmountSendInputValid(null);
+    setRecipient('');
+    setAmountSend('');
+    setErrorMessage(null);
+    setTxHeight(null);
+    setTxHash(null);
+    if (updateAddress) {
+      updateAddress();
+    }
+  };
+
+  useEffect(() => {
+    const confirmTx = async () => {
+      console.log('txHash :>> ', txHash);
+      if (txHash && txHash !== null) {
+        setStage(STAGE_CONFIRMING);
+        const response = await getTxs(txHash);
+        console.log('response :>> ', response);
+        if (response && response !== null) {
+          if (response.logs) {
+            setStage(STAGE_CONFIRMED);
+            setTxHeight(response.height);
+            if (updateBalance) {
+              updateBalance();
+            }
+            return;
+          }
+          if (response.code) {
+            setStage(STAGE_ERROR);
+            setTxHeight(response.height);
+            setErrorMessage(response.raw_log);
+            return;
+          }
+        }
+        setTimeout(confirmTx, 1500);
+      }
+    };
+    confirmTx();
+  }, [txHash]);
+
+  useEffect(() => {
+    if (parseFloat(amountSend) === 0) {
+      setAmountSendInputValid('Invalid amount');
+    } else {
+      setAmountSendInputValid(null);
+    }
+  }, [amountSend]);
+
+  useEffect(() => {
+    if (recipient !== '') {
+      if (!recipient.match(PATTERN_CYBER)) {
+        setRecipientInputValid('Invalid bech32 address');
+      } else {
+        setRecipientInputValid(null);
+      }
+    }
+  }, [recipient]);
+
+  useEffect(() => {
+    if (recipient.match(PATTERN_CYBER) && parseFloat(amountSend) > 0) {
+      setDisabledGenerate(false);
+    } else {
+      setDisabledGenerate(true);
+    }
+  }, [recipient, amountSend]);
+
+  if (stage === STAGE_SEND) {
+    return (
+      <ActionBar>
+        <Pane display="flex" className="contentItem">
+          <ActionBarContentText>
+            <Input
+              value={recipient}
+              height={42}
+              marginRight={10}
+              width="300px"
+              onChange={(e) => setRecipient(e.target.value)}
+              placeholder="cyber address To"
+              isInvalid={recipientInputValid !== null}
+              message={recipientInputValid}
+            />
+
+            <Input
+              value={amountSend}
+              height={42}
+              width="24%"
+              onChange={(e) => setAmountSend(e.target.value)}
+              placeholder="EUL"
+              isInvalid={amountSendInputValid !== null}
+              message={amountSendInputValid}
+            />
+          </ActionBarContentText>
+
+          <button
+            type="button"
+            className="btn-disabled"
+            disabled={disabledGenerate}
+            onClick={() => generateTxSend()}
+          >
+            Generate Tx
+          </button>
+        </Pane>
+      </ActionBar>
+    );
+  }
+  if (stage === STAGE_SUBMITTED) {
+    return (
+      <ActionBar>
+        <ActionBarContentText>
+          check the transaction <Dots big />
+        </ActionBarContentText>
+      </ActionBar>
+    );
+  }
+
+  if (stage === STAGE_CONFIRMING) {
+    return <TransactionSubmitted />;
+  }
+
+  if (stage === STAGE_CONFIRMED) {
+    return (
+      <Confirmed
+        txHash={txHash}
+        txHeight={txHeight}
+        onClickBtnCloce={() => cleatState()}
+      />
+    );
+  }
+
+  if (stage === STAGE_ERROR && errorMessage !== null) {
+    return (
+      <TransactionError
+        errorMessage={errorMessage}
+        onClickBtn={() => cleatState()}
+      />
+    );
+  }
+
+  return null;
+}
+
+export default ActionBarCyberSigner;
diff --git a/src/containers/Wallet/actionBarTweet.jsx b/src/containers/Wallet/actionBarTweet.jsx
index ab657b8fa..f1c77286f 100644
--- a/src/containers/Wallet/actionBarTweet.jsx
+++ b/src/containers/Wallet/actionBarTweet.jsx
@@ -89,7 +89,8 @@ class ActionBarTweet extends Component {
   async componentDidMount() {
     this.getNameBtn();
     console.warn('Looking for Ledger Nano');
-    this.ledger = new CosmosDelegateTool();
+    this.transport = await TransportWebUSB.create(120 * 1000);
+    this.ledger = new CosmosDelegateTool(this.transport);
   }
 
   componentDidUpdate(prevProps) {
diff --git a/src/containers/testKeplre/index.jsx b/src/containers/testKeplre/index.jsx
index d33f15734..9338f5c39 100644
--- a/src/containers/testKeplre/index.jsx
+++ b/src/containers/testKeplre/index.jsx
@@ -1,15 +1,21 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { coins } from '@cosmjs/launchpad';
 import { AppContext, AppContextSigner } from '../../context';
-import { CYBER } from '../../utils/config';
+import { CYBER, CYBER_SIGNER } from '../../utils/config';
 
 import Signer from '../signer';
 
+// dune pottery shield bracket shuffle orchard frown mail exercise destroy enroll nothing scheme allow pudding match mass world glow razor that attend blame follow
+
 function TestKeplr() {
   const { keplr } = useContext(AppContext);
-  const { cyberSigner, updateValueTxs, updateValueIsVisible } = useContext(
-    AppContextSigner
-  );
+  const {
+    cyberSigner,
+    updateValueTxs,
+    updateValueIsVisible,
+    updateCallbackSigner,
+    updateStageSigner,
+  } = useContext(AppContextSigner);
 
   const [hashTx, setHashTx] = useState('');
 
@@ -43,6 +49,21 @@ function TestKeplr() {
     }
   };
 
+  const callbackSigner = async (signerCyber) => {
+    console.log(`callbackSigner`, signerCyber);
+    const [{ address }] = await signerCyber.getAccounts();
+    const pk = Buffer.from(signerCyber.pubkey).toString('hex');
+    console.log(`callbackSigner address`, address);
+    console.log(`callbackSigner pk`, pk);
+    updateCallbackSigner(null);
+  };
+
+  const restore = () => {
+    updateCallbackSigner(callbackSigner);
+    updateValueIsVisible(true);
+    updateStageSigner(CYBER_SIGNER.STAGE_INIT_ACC);
+  };
+
   return (
     <main className="block-body">
       <button
@@ -70,6 +91,15 @@ function TestKeplr() {
       >
         signerTest
       </button>
+
+      <button
+        className="btn"
+        style={{ maxWidth: 200, marginTop: 50 }}
+        onClick={restore}
+        type="button"
+      >
+        StateRestore
+      </button>
       <span>{hashTx}</span>
     </main>
   );

From efff83ec783fcb4bed6dd1b484f9761271d08473 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 00:58:29 +0300
Subject: [PATCH 11/20] feat(account): actionBar

- add cyberSigner to account
---
 src/containers/account/ActionBarContainer.jsx |  23 +++
 src/containers/account/actionBar.jsx          | 183 +++++++++++-------
 2 files changed, 131 insertions(+), 75 deletions(-)
 create mode 100644 src/containers/account/ActionBarContainer.jsx

diff --git a/src/containers/account/ActionBarContainer.jsx b/src/containers/account/ActionBarContainer.jsx
new file mode 100644
index 000000000..f1dd656ed
--- /dev/null
+++ b/src/containers/account/ActionBarContainer.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import InnerActionBarContainer from './actionBar';
+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;
diff --git a/src/containers/account/actionBar.jsx b/src/containers/account/actionBar.jsx
index 5ccf7daf9..aa06f6c0b 100644
--- a/src/containers/account/actionBar.jsx
+++ b/src/containers/account/actionBar.jsx
@@ -30,8 +30,6 @@ import {
   getPin,
 } from '../../utils/search/utils';
 
-import { AppContext } from '../../context';
-
 const { DIVISOR_CYBER_G } = CYBER;
 
 const {
@@ -61,7 +59,7 @@ const groupLink = (linkArr) => {
   return link;
 };
 
-class ActionBarContainer extends Component {
+class InnerActionBarContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -200,76 +198,14 @@ class ActionBarContainer extends Component {
   };
 
   generateTxSendKplr = async () => {
-    const { contentHash, toSendAddres, toSend } = this.state;
-    const { keplr } = this.context;
-    const { type, addressSend, node, follow, tweets } = this.props;
-    const amount = parseFloat(toSend) * DIVISOR_CYBER_G;
+    const { valueAppContext } = this.props;
+    const { keplr } = valueAppContext;
 
     if (keplr !== null) {
       await window.keplr.enable(CYBER.CHAIN_ID);
       const { address } = await keplr.getAccount();
-
-      const msg = [];
-      if (type === 'heroes') {
-        if (address === addressSend) {
-          const dataTotalRewards = await getTotalRewards(address);
-          if (dataTotalRewards !== null && dataTotalRewards.rewards) {
-            const { rewards } = dataTotalRewards;
-            Object.keys(rewards).forEach((key) => {
-              if (rewards[key].reward !== null) {
-                const tempMsg = {
-                  type: 'cosmos-sdk/MsgWithdrawDelegationReward',
-                  value: {
-                    delegator_address: address,
-                    validator_address: rewards[key].validator_address,
-                  },
-                };
-                msg.push(tempMsg);
-              }
-            });
-          }
-        }
-      } else if (type === 'tweets' && follow) {
-        const fromCid = await getPin(node, 'follow');
-        const toCid = await getPin(node, addressSend);
-        msg.push({
-          type: 'cyber/Link',
-          value: {
-            address,
-            links: [
-              {
-                from: fromCid,
-                to: toCid,
-              },
-            ],
-          },
-        });
-      } else if (type === 'tweets' && tweets) {
-        const fromCid = await getPin(node, 'tweet');
-        const toCid = await this.calculationIpfsTo(contentHash);
-        msg.push({
-          type: 'cyber/Link',
-          value: {
-            address,
-            links: [
-              {
-                from: fromCid,
-                to: toCid,
-              },
-            ],
-          },
-        });
-      } else {
-        msg.push({
-          type: 'cosmos-sdk/MsgSend',
-          value: {
-            amount: coins(amount, CYBER.DENOM_CYBER),
-            from_address: address,
-            to_address: toSendAddres,
-          },
-        });
-      }
-      console.log(`msg`, msg)
+      const msg = await this.getTxs(address);
+      console.log(`msg`, msg);
       if (msg.length > 0) {
         const fee = {
           amount: coins(0, 'uatom'),
@@ -285,6 +221,74 @@ class ActionBarContainer extends Component {
     }
   };
 
+  getTxs = async (address) => {
+    const { type, addressSend, node, follow, tweets } = this.props;
+    const { contentHash, toSendAddres, toSend } = this.state;
+    const amount = parseFloat(toSend) * DIVISOR_CYBER_G;
+
+    const msg = [];
+    if (type === 'heroes') {
+      if (address === addressSend) {
+        const dataTotalRewards = await getTotalRewards(address);
+        if (dataTotalRewards !== null && dataTotalRewards.rewards) {
+          const { rewards } = dataTotalRewards;
+          Object.keys(rewards).forEach((key) => {
+            if (rewards[key].reward !== null) {
+              const tempMsg = {
+                type: 'cosmos-sdk/MsgWithdrawDelegationReward',
+                value: {
+                  delegator_address: address,
+                  validator_address: rewards[key].validator_address,
+                },
+              };
+              msg.push(tempMsg);
+            }
+          });
+        }
+      }
+    } else if (type === 'tweets' && follow) {
+      const fromCid = await getPin(node, 'follow');
+      const toCid = await getPin(node, addressSend);
+      msg.push({
+        type: 'cyber/Link',
+        value: {
+          address,
+          links: [
+            {
+              from: fromCid,
+              to: toCid,
+            },
+          ],
+        },
+      });
+    } else if (type === 'tweets' && tweets) {
+      const fromCid = await getPin(node, 'tweet');
+      const toCid = await this.calculationIpfsTo(contentHash);
+      msg.push({
+        type: 'cyber/Link',
+        value: {
+          address,
+          links: [
+            {
+              from: fromCid,
+              to: toCid,
+            },
+          ],
+        },
+      });
+    } else {
+      msg.push({
+        type: 'cosmos-sdk/MsgSend',
+        value: {
+          amount: coins(amount, CYBER.DENOM_CYBER),
+          from_address: address,
+          to_address: toSendAddres,
+        },
+      });
+    }
+    return msg;
+  };
+
   getTxType = async (type, txContext) => {
     const {
       address,
@@ -449,6 +453,36 @@ class ActionBarContainer extends Component {
     this.timeOut = setTimeout(this.confirmTx, 1500);
   };
 
+  generateTxCyberSigner = async () => {
+    const { valueAppContextSigner } = this.props;
+    const {
+      cyberSigner,
+      updateValueTxs,
+      updateCallbackSigner,
+    } = valueAppContextSigner;
+
+    if (cyberSigner !== null) {
+      await window.keplr.enable(CYBER.CHAIN_ID);
+      const [{ address }] = await cyberSigner.getAccounts();
+      const msg = await this.getTxs(address);
+      console.log(`msg`, msg);
+      if (msg.length > 0) {
+        updateCallbackSigner(this.updateCallbackFnc);
+        updateValueTxs(msg);
+      }
+    }
+  };
+
+  updateCallbackFnc = (result) => {
+    const { valueAppContextSigner } = this.props;
+    const { updateCallbackSigner } = valueAppContextSigner;
+    const hash = result.transactionHash;
+    updateCallbackSigner(null);
+    console.log('hash :>> ', hash);
+    this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
+    this.timeOut = setTimeout(this.confirmTx, 1500);
+  };
+
   onChangeInputAmount = (e) => {
     this.setState({
       toSend: e.target.value,
@@ -472,6 +506,9 @@ class ActionBarContainer extends Component {
     if (defaultAccount.keys === 'keplr') {
       this.generateTxSendKplr();
     }
+    if (defaultAccount.keys === 'cyberSigner') {
+      this.generateTxCyberSigner();
+    }
   };
 
   cleatState = () => {
@@ -494,8 +531,6 @@ class ActionBarContainer extends Component {
       contentHash: '',
     });
     this.timeOut = null;
-    this.ledger = null;
-    this.transport = null;
   };
 
   onChangeInput = async (e) => {
@@ -606,7 +641,7 @@ class ActionBarContainer extends Component {
       stage === STAGE_INIT &&
       type === 'heroes' &&
       defaultAccount !== null &&
-      defaultAccount.keys === 'keplr'
+      defaultAccount.keys !== 'ledger'
     ) {
       return (
         <ActionBar>
@@ -732,6 +767,4 @@ const mapStateToProps = (store) => {
   };
 };
 
-ActionBarContainer.contextType = AppContext;
-
-export default connect(mapStateToProps)(ActionBarContainer);
+export default connect(mapStateToProps)(InnerActionBarContainer);

From daf1fad1fe324f572b1e0e56fc979a95112f45dc Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 00:58:49 +0300
Subject: [PATCH 12/20] feat(brain): actionBar

- add cyberSigner to brain
---
 src/containers/account/index.jsx | 2 +-
 src/containers/brain/brain.jsx   | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/containers/account/index.jsx b/src/containers/account/index.jsx
index d4d09fc58..43a38d796 100644
--- a/src/containers/account/index.jsx
+++ b/src/containers/account/index.jsx
@@ -26,7 +26,7 @@ import Heroes from './heroes';
 import Unbondings from './unbondings';
 import { fromBech32, formatNumber, asyncForEach } from '../../utils/utils';
 import { Loading, Copy, ContainerCard, Card, Dots } from '../../components';
-import ActionBarContainer from './actionBar';
+import ActionBarContainer from './ActionBarContainer';
 import GetTxs from './txs';
 import Main from './main';
 import GetMentions from './mentions';
diff --git a/src/containers/brain/brain.jsx b/src/containers/brain/brain.jsx
index 2c9954ffa..d8289aeaa 100644
--- a/src/containers/brain/brain.jsx
+++ b/src/containers/brain/brain.jsx
@@ -15,7 +15,7 @@ import { TabBtn } from '../../components';
 
 import { CYBER, TAKEOFF } from '../../utils/config';
 
-import ActionBarContainer from './actionBarContainer';
+import ActionBarContainer from '../Search/ActionBar';
 import {
   GovernmentTab,
   MainTab,
@@ -301,7 +301,11 @@ function Brain({ node, mobile, defaultAccount }) {
         addressActive !== null &&
         selected !== 'port' &&
         (addressActive.keys !== 'read-only' ? (
-          <ActionBarContainer addressPocket={addressActive} />
+          <ActionBarContainer
+            placeholder="What's happening?"
+            textBtn="Tweet"
+            keywordHash="tweet"
+          />
         ) : (
           <ActionBar>
             <Pane fontSize="18px">

From d3109b068af2cdb88f5fc638984557ada83b6d86 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 01:00:04 +0300
Subject: [PATCH 13/20] feat(signer): ui

- render msgs
- generatin tx
- init signer
- send txs
---
 src/containers/signer/app.jsx                 | 122 +++++++++-----
 .../signer/component/MsgsSigner.jsx           | 151 ++++++++++++++++++
 src/containers/signer/index.jsx               |  61 +++++--
 3 files changed, 277 insertions(+), 57 deletions(-)

diff --git a/src/containers/signer/app.jsx b/src/containers/signer/app.jsx
index 230a67b52..147dd9265 100644
--- a/src/containers/signer/app.jsx
+++ b/src/containers/signer/app.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
+import { connect } from 'react-redux';
 import Signer from './index';
 import { AppContextSigner } from '../../context';
 import {
@@ -10,28 +11,32 @@ import {
   StateCreateNew,
   StateRestore,
 } from './component/ui';
+import { CYBER_SIGNER } from '../../utils/config';
 
-const STAGE_INIT = 0;
-const STAGE_SIGN = 1;
-const STAGE_CONFIRMING = 2;
-const STAGE_CONFIRMED = 3;
-const STAGE_INIT_ACC = 1.1;
-const STAGE_CREATE_NEW_ACCOUNT = 1.2;
-const STAGE_RESTORE_PHARSE = 1.3;
+const {
+  STAGE_INIT,
+  STAGE_SIGN,
+  STAGE_INIT_ACC,
+  STAGE_CREATE_NEW_ACCOUNT,
+  STAGE_RESTORE_PHARSE,
+} = CYBER_SIGNER;
 
-function AppSign() {
+function AppSign({ defaultAccount }) {
   const {
     tx,
+    stage,
     isVisible,
     cyberSigner,
+    callbackFnc,
     updateValueIsVisible,
     updateValueTxs,
     updateCyberSigner,
+    updateStageSigner,
   } = useContext(AppContextSigner);
   const location = useLocation();
-  const [stage, setStage] = useState(STAGE_INIT);
   const [msgData, setMsgData] = useState(null);
-  const [txHash, setTxHash] = useState(null);
+  const [cyberSignerTemp, SetCyberSignerTemp] = useState(null);
+  const [valuePhrase, setValuePhrase] = useState('');
 
   useEffect(() => {
     rejectStage();
@@ -40,53 +45,62 @@ function AppSign() {
   useEffect(() => {
     const getSigner = async () => {
       const signerObj = new Signer();
-      const signerCyber = await signerObj.initSigner();
-      const pk = Buffer.from(signerCyber.pubkey).toString('hex');
-      console.log(`pk`, pk);
+      const signerCyber = await signerObj.initSigner(defaultAccount);
+      if (signerCyber !== null) {
+        const pk = Buffer.from(signerCyber.pubkey).toString('hex');
+        console.log(`pk`, pk);
+      }
       console.log(`signerCyber`, signerCyber);
       updateCyberSigner(signerCyber);
     };
     getSigner();
-  }, []);
+  }, [defaultAccount.name]);
 
   useEffect(() => {
     if (tx !== null) {
       setMsgData(tx);
-      setStage(STAGE_SIGN);
+      updateStageSigner(STAGE_SIGN);
       updateValueIsVisible(true);
     }
   }, [tx]);
 
-  useEffect(() => {
-    if (txHash !== null) {
-      setStage(STAGE_CONFIRMED);
-    }
-  }, [txHash]);
+  const restorePhrase = async () => {
+    const signerObj = new Signer();
+    const signerCyber = await signerObj.restorePhrase(valuePhrase, callbackFnc);
+    updateCyberSigner(signerCyber);
+    setValuePhrase('');
+    updateStageSigner(STAGE_INIT);
+  };
+
+  const createNewAcc = async () => {
+    updateStageSigner(CYBER_SIGNER.STAGE_CREATE_NEW_ACCOUNT);
+    const signerObj = new Signer();
+    const signerCyber = await signerObj.getVanityAccount();
+    // updateCyberSigner(signerCyber);
+    SetCyberSignerTemp(signerCyber);
+    setValuePhrase(signerCyber.secret.data);
+  };
 
   const signTx = async () => {
     console.log(`signer`, cyberSigner);
     console.log(`msgData`, msgData);
     if (cyberSigner !== null && msgData !== null) {
       const signerObj = new Signer();
-      setStage(STAGE_CONFIRMING);
-      const response = await signerObj.sendTxs(cyberSigner, msgData);
+      const response = await signerObj.sendTxs(
+        cyberSigner,
+        msgData,
+        callbackFnc
+      );
       console.log(`response Txs`, response);
-      setTxHash(response.transactionHash);
       updateValueTxs(null);
       setMsgData(null);
+      rejectStage();
     }
   };
 
-  const cleaneStage = () => {
-    setStage(STAGE_INIT);
-    setTxHash(null);
-    updateValueIsVisible(false);
-  };
-
   const rejectStage = () => {
-    setStage(STAGE_INIT);
+    updateStageSigner(STAGE_INIT);
     setMsgData(null);
-    setTxHash(null);
     updateValueTxs(null);
     updateValueIsVisible(false);
   };
@@ -101,27 +115,51 @@ function AppSign() {
     );
   }
 
-  if (isVisible && stage === STAGE_CONFIRMING) {
-    return <StateBroadcast />;
-  }
-
-  if (isVisible && stage === STAGE_CONFIRMED) {
-    return <StateConfirmed txHash={txHash} onClick={rejectStage} />;
-  }
+  const fuckGoogleCreateAcc = async () => {
+    updateStageSigner(STAGE_INIT);
+    setValuePhrase('');
+    if (callbackFnc !== null) {
+      callbackFnc(cyberSignerTemp);
+    }
+  };
 
   if (isVisible && stage === STAGE_INIT_ACC) {
-    return <StateInitAccount />;
+    return (
+      <StateInitAccount
+        onClickCreateNew={() => createNewAcc()}
+        onClickRestore={() =>
+          updateStageSigner(CYBER_SIGNER.STAGE_RESTORE_PHARSE)
+        }
+      />
+    );
   }
 
   if (isVisible && stage === STAGE_CREATE_NEW_ACCOUNT) {
-    return <StateCreateNew />;
+    return (
+      <StateCreateNew
+        valuePhrase={valuePhrase}
+        onClick={() => fuckGoogleCreateAcc()}
+      />
+    );
   }
 
   if (isVisible && stage === STAGE_RESTORE_PHARSE) {
-    return <StateRestore />;
+    return (
+      <StateRestore
+        valuePhrase={valuePhrase}
+        onChangeInputPhrase={(e) => setValuePhrase(e.target.value)}
+        onClick={() => restorePhrase()}
+      />
+    );
   }
 
   return null;
 }
 
-export default AppSign;
+const mapStateToProps = (store) => {
+  return {
+    defaultAccount: store.pocket.defaultAccount,
+  };
+};
+
+export default connect(mapStateToProps)(AppSign);
diff --git a/src/containers/signer/component/MsgsSigner.jsx b/src/containers/signer/component/MsgsSigner.jsx
index e69de29bb..99e520e76 100644
--- a/src/containers/signer/component/MsgsSigner.jsx
+++ b/src/containers/signer/component/MsgsSigner.jsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { Pane } from '@cybercongress/gravity';
+
+import { trimString, formatNumber } from '../../../utils/utils';
+import MsgType from '../../txs/msgType';
+
+const CT = ({ children }) => (
+  <span style={{ color: '#3ab793' }}>{children}</span>
+);
+
+function MsgsSigner({ msgData }) {
+  if (msgData.type === 'cosmos-sdk/MsgSend') {
+    let recipient;
+    let amount;
+    if (msgData.value.to_address && msgData.value.amount) {
+      recipient = trimString(msgData.value.to_address, 8, 4);
+      amount = msgData.value.amount.map((coin, j) => {
+        return (
+          <span key={j}>
+            {' '}
+            {formatNumber(coin.amount)} {coin.denom.toUpperCase()}
+          </span>
+        );
+      });
+    }
+    return (
+      <div>
+        <MsgType type={msgData.type} />
+        <Pane paddingLeft={5}>
+          <CT>{recipient}</CT> will receive <CT>{amount}</CT>
+        </Pane>
+      </div>
+    );
+  }
+
+  if (msgData.type === 'cosmos-sdk/MsgDelegate') {
+    let amount;
+    let validator;
+    if (msgData.value.validator_address && msgData.value.amount) {
+      amount = `${formatNumber(
+        msgData.value.amount.amount
+      )} ${msgData.value.amount.denom.toUpperCase()}`;
+      validator = trimString(msgData.value.validator_address, 16);
+    }
+
+    return (
+      <div>
+        <MsgType type={msgData.type} />
+        Delegate Delegate <CT>{amount}</CT> to <CT>{validator}</CT>
+      </div>
+    );
+  }
+
+  if (msgData.type === 'cosmos-sdk/MsgUndelegate') {
+    let amount;
+    let validator;
+    if (msgData.value.validator_address && msgData.value.amount) {
+      amount = `${formatNumber(
+        msgData.value.amount.amount
+      )} ${msgData.value.amount.denom.toUpperCase()}`;
+      validator = trimString(msgData.value.validator_address, 16, 4);
+    }
+    return (
+      <div>
+        <MsgType type={msgData.type} />
+        Undelegate Undelegate <CT>{amount}</CT> from <CT>{validator}</CT>
+        <br />
+        Asset will be liquid after unbonding period
+      </div>
+    );
+  }
+
+  if (msgData.type === 'cosmos-sdk/MsgBeginRedelegate') {
+    let amount;
+    let fromValidator;
+    let toValidator;
+    if (
+      msgData.value.validator_dst_address &&
+      msgData.value.validator_src_address &&
+      msgData.value.amount
+    ) {
+      amount = `${formatNumber(
+        msgData.value.amount.amount
+      )} ${msgData.value.amount.denom.toUpperCase()}`;
+      fromValidator = trimString(msgData.value.validator_src_address, 16, 4);
+      toValidator = trimString(msgData.value.validator_dst_address, 16, 4);
+    }
+
+    return (
+      <div>
+        <MsgType type={msgData.type} />
+        Redelegate Redelegate <CT>{amount}</CT> from <CT>{fromValidator}</CT> to{' '}
+        <CT>{toValidator}</CT>
+      </div>
+    );
+  }
+
+  if (msgData.type === 'cosmos-sdk/MsgWithdrawDelegatorReward') {
+    let validator;
+    if (msgData.value.validator_address) {
+      validator = trimString(msgData.value.validator_address, 16, 4);
+    }
+    return (
+      <div>
+        <MsgType type={msgData.type} />
+        Claim Staking Reward Claim pending staking reward from{' '}
+        <CT>{validator}</CT>
+      </div>
+    );
+  }
+
+  if (msgData.type === 'cyber/Link') {
+    let links;
+    let address;
+    const cyberlinks = [];
+    if (msgData.value.address) {
+      address = trimString(msgData.value.address, 8, 4);
+    }
+    if (msgData.value.links) {
+      msgData.value.links.forEach((link) => {
+        cyberlinks.push({
+          from: link.from,
+          to: link.to,
+        });
+      });
+    }
+    if (cyberlinks.length > 0) {
+      links = cyberlinks
+        .map((link) => {
+          return `${trimString(link.from, 4, 4)} → ${trimString(
+            link.to,
+            4,
+            4
+          )}`;
+        })
+        .join(', ');
+    }
+
+    return (
+      <div>
+        <MsgType type={msgData.type} />
+        <CT>{address}</CT> create link <br />
+        <CT>{links}</CT>
+      </div>
+    );
+  }
+
+  return <div>{msgData.type}</div>;
+}
+
+export default MsgsSigner;
diff --git a/src/containers/signer/index.jsx b/src/containers/signer/index.jsx
index 4c7e64a47..6d83bb306 100644
--- a/src/containers/signer/index.jsx
+++ b/src/containers/signer/index.jsx
@@ -4,7 +4,9 @@ import {
   Secp256k1HdWallet,
   SigningCosmosClient,
   coins,
+  GasPrice,
 } from '@cosmjs/launchpad';
+import { Decimal } from '@cosmjs/math';
 import { stringToPath } from '@cosmjs/crypto';
 import { CYBER } from '../../utils/config';
 
@@ -15,28 +17,46 @@ class Signer {
     this.hdPath = stringToPath("m/44'/118'/0'/0/0");
   }
 
-  initSigner = async () => {
-    const localStorageSecret = localStorage.getItem('secret');
-    if (localStorageSecret !== null) {
-      const localStorageSecretData = JSON.parse(localStorageSecret);
-      const mnemonic = localStorageSecretData;
-      const signer = await Secp256k1HdWallet.fromMnemonic(
-        mnemonic,
-        this.hdPath,
-        this.prefix
-      );
-
-      return signer;
+  initSigner = async (defaultAccount) => {
+    const { account } = defaultAccount;
+    if (
+      account &&
+      account !== null &&
+      Object.prototype.hasOwnProperty.call(account, 'cyber')
+    ) {
+      if (account.cyber.keys === 'cyberSigner' && account.cyber.secret) {
+        const mnemonic = account.cyber.secret;
+        const signer = await Secp256k1HdWallet.fromMnemonic(
+          mnemonic,
+          this.hdPath,
+          this.prefix
+        );
+        return signer;
+      }
     }
+
     return null;
   };
 
+  restorePhrase = async (mnemonic, callback) => {
+    console.log(`mnemonic`, mnemonic);
+    const signer = await Secp256k1HdWallet.fromMnemonic(
+      mnemonic,
+      this.hdPath,
+      this.prefix
+    );
+    if (callback) {
+      callback(signer);
+    }
+    return signer;
+  };
+
   generationAccount = async () => {
     const address = await this.getVanityAccount();
     return address;
   };
 
-  getVanityAccount = async () => {
+  getVanityAccount = async (callback) => {
     try {
       let condition = true;
       while (condition) {
@@ -48,6 +68,9 @@ class Signer {
         const [{ address }] = await signer.getAccounts();
         if (address.match(/^cyber1a[a-zA-Z0-9]{37}$/g)) {
           condition = false;
+          if (callback) {
+            callback(signer);
+          }
           return signer;
         }
       }
@@ -57,13 +80,18 @@ class Signer {
     }
   };
 
-  sendTxs = async (signer, msgs) => {
+  sendTxs = async (signer, msgs, callback) => {
     try {
       const [{ address }] = await signer.getAccounts();
+      const gasPrice = new GasPrice(Decimal.fromAtomics(0, 0), 'uatom');
+      const gasLimits = { send: 100000 };
       const client = new SigningCosmosClient(
         CYBER.CYBER_NODE_URL_LCD,
         address,
-        signer
+        signer,
+        gasPrice,
+        gasLimits,
+        'sync'
       );
 
       const fee = {
@@ -76,6 +104,9 @@ class Signer {
         fee,
         CYBER.MEMO_CYBER_SIGNER
       );
+      if (callback && callback !== null) {
+        callback(response);
+      }
       return response;
     } catch (error) {
       console.log(`error`, error);

From cf68f65fbd3b192430c47ace815440e3016e7025 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 01:00:50 +0300
Subject: [PATCH 14/20] feat(action bar): stage

- update stage actionBar
---
 src/components/ledger/stageActionBar.jsx     |   6 +
 src/containers/Search/ActionBarContainer.jsx |  22 +++-
 src/containers/signer/component/ui.jsx       | 117 +++++++------------
 src/utils/config.js                          |   9 ++
 4 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/src/components/ledger/stageActionBar.jsx b/src/components/ledger/stageActionBar.jsx
index 20ab6c3fa..3e3468aaf 100644
--- a/src/components/ledger/stageActionBar.jsx
+++ b/src/components/ledger/stageActionBar.jsx
@@ -1377,6 +1377,12 @@ export const ConnectAddress = ({
                   text="keplr"
                 />
               )}
+              <ButtonIcon
+                onClick={() => selectMethodFunc('cyberSigner')}
+                active={selectMethod === 'cyberSigner'}
+                img={imgCyberSigner}
+                text="cyberSigner"
+              />
             </>
           )}
           {web3 && web3 !== null && ethNetwork && (
diff --git a/src/containers/Search/ActionBarContainer.jsx b/src/containers/Search/ActionBarContainer.jsx
index 0727c58eb..b4b6c3f9a 100644
--- a/src/containers/Search/ActionBarContainer.jsx
+++ b/src/containers/Search/ActionBarContainer.jsx
@@ -523,10 +523,25 @@ class InnerActionBarContainer extends Component {
     });
   };
 
+  updateCallbackFnc = (result) => {
+    const { valueAppContextSigner } = this.props;
+    const { updateCallbackSigner } = valueAppContextSigner;
+
+    const hash = result.transactionHash;
+    updateCallbackSigner(null);
+    console.log('hash :>> ', hash);
+    this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
+    this.timeOut = setTimeout(this.confirmTx, 1500);
+  };
+
   sendTxSigner = async () => {
     const { valueAppContextSigner } = this.props;
     const { fromCid, toCid, addressLocalStor } = this.state;
-    const { cyberSigner, updateValueTxs } = valueAppContextSigner;
+    const {
+      cyberSigner,
+      updateValueTxs,
+      updateCallbackSigner,
+    } = valueAppContextSigner;
     if (cyberSigner !== null) {
       const [{ address }] = await cyberSigner.getAccounts();
       const msgs = [];
@@ -542,12 +557,11 @@ class InnerActionBarContainer extends Component {
           ],
         },
       });
-
+      updateCallbackSigner(this.updateCallbackFnc);
       updateValueTxs(msgs);
       this.setState({
-        stage: STAGE_INIT,
+        stage: STAGE_KEPLR_APPROVE,
       });
-      this.cleatState();
     }
   };
 
diff --git a/src/containers/signer/component/ui.jsx b/src/containers/signer/component/ui.jsx
index c11e8e2ea..824010316 100644
--- a/src/containers/signer/component/ui.jsx
+++ b/src/containers/signer/component/ui.jsx
@@ -4,6 +4,7 @@ import { Pane, Button, Tablist } from '@cybercongress/gravity';
 import MsgType from '../../txs/msgType';
 import { PillNumber, TabBtn, Dots } from '../../../components';
 import { trimString } from '../../../utils/utils';
+import MsgsSigner from './MsgsSigner';
 
 const HeaderSigner = ({ children }) => (
   <Pane
@@ -16,12 +17,24 @@ const HeaderSigner = ({ children }) => (
   </Pane>
 );
 
-function StateSign({ msgData, onClick, onClickReject }) {
-  const [selected, setSelected] = useState('details');
+const ContainerSigner = ({ children }) => (
+  <Pane
+    position="fixed"
+    backgroundColor="#6b696954"
+    zIndex="999999"
+    top={0}
+    bottom={0}
+    right={0}
+    left={0}
+  >
+    <Pane className="signer-container">{children}</Pane>
+  </Pane>
+);
 
+function StateSign({ msgData, onClick, onClickReject }) {
   let content;
 
-  if (selected === 'details' && msgData !== null) {
+  if (msgData !== null) {
     content = (
       <Pane overflow="auto" width="100%" paddingY={5} paddingX={10}>
         <Pane display="flex">
@@ -33,9 +46,9 @@ function StateSign({ msgData, onClick, onClickReject }) {
         <Pane width="100%" paddingLeft={20}>
           {Object.keys(msgData).map((key) => (
             <Pane paddingY={5} width="100%">
-              <MsgType type={msgData[key].type} />
+              <MsgsSigner msgData={msgData[key]} />
               {/* {msgData[key].type} */}
-              <Pane borderBottom="1px solid #ffffff52" />
+              <Pane paddingTop={5} borderBottom="1px solid #ffffff52" />
             </Pane>
           ))}
         </Pane>
@@ -43,69 +56,29 @@ function StateSign({ msgData, onClick, onClickReject }) {
     );
   }
 
-  if (selected === 'data' && msgData !== null) {
-    content = (
-      <Pane width="100%" overflow="auto">
-        <pre>{JSON.stringify(msgData, null, 2)}</pre>
-      </Pane>
-    );
-  }
-
   return (
-    <Pane
-      position="fixed"
-      backgroundColor="#6b696954"
-      zIndex="999999"
-      top={0}
-      bottom={0}
-      right={0}
-      left={0}
-    >
-      <Pane className="signer-container">
-        <HeaderSigner>sign tx</HeaderSigner>
-        <Pane
-          display="flex"
-          height="100%"
-          width="100%"
-          alignItems="flex-start"
-          paddingY={10}
-          flexDirection="column"
-          overflow="hidden"
-        >
-          <Tablist
-            display="grid"
-            gridTemplateColumns="repeat(auto-fit, minmax(100px, 1fr))"
-            gridGap="10px"
-            marginBottom={10}
-            width="100%"
-            paddingX={20}
-            paddingTop={5}
-          >
-            <TabBtn
-              key="details"
-              isSelected={selected === 'details'}
-              text="details"
-              onClick={() => setSelected('details')}
-            />
-            <TabBtn
-              key="data"
-              isSelected={selected === 'data'}
-              text="data"
-              onClick={() => setSelected('data')}
-            />
-          </Tablist>
-          {content}
-        </Pane>
-        <Pane display="flex" justifyContent="center" paddingY={10}>
-          <Button marginX={10} onClick={() => onClickReject()}>
-            reject
-          </Button>
-          <Button marginX={10} onClick={() => onClick()}>
-            sign
-          </Button>
-        </Pane>
+    <ContainerSigner>
+      <HeaderSigner>sign tx</HeaderSigner>
+      <Pane
+        display="flex"
+        height="100%"
+        width="100%"
+        alignItems="flex-start"
+        paddingY={10}
+        flexDirection="column"
+        overflow="hidden"
+      >
+        {content}
       </Pane>
-    </Pane>
+      <Pane display="flex" justifyContent="center" paddingY={10}>
+        <Button marginX={10} onClick={() => onClickReject()}>
+          reject
+        </Button>
+        <Button marginX={10} onClick={() => onClick()}>
+          sign
+        </Button>
+      </Pane>
+    </ContainerSigner>
   );
 }
 
@@ -155,7 +128,7 @@ function StateConfirmed({ txHash, onClick }) {
 
 function StateInitAccount({ onClickCreateNew, onClickRestore }) {
   return (
-    <Pane className="signer-container">
+    <ContainerSigner>
       <HeaderSigner>Init Account</HeaderSigner>
       <Pane position="relative" height="100%">
         <Pane
@@ -173,13 +146,13 @@ function StateInitAccount({ onClickCreateNew, onClickRestore }) {
           <Button onClick={() => onClickRestore()}>restore phrase</Button>
         </Pane>
       </Pane>
-    </Pane>
+    </ContainerSigner>
   );
 }
 
 function StateRestore({ valuePhrase, onChangeInputPhrase, onClick }) {
   return (
-    <Pane className="signer-container">
+    <ContainerSigner>
       <HeaderSigner>Restore phrase</HeaderSigner>
       <Pane position="relative" height="100%">
         <Pane
@@ -207,7 +180,7 @@ function StateRestore({ valuePhrase, onChangeInputPhrase, onClick }) {
       >
         <Button onClick={() => onClick()}>Fuck Google</Button>
       </Pane>
-    </Pane>
+    </ContainerSigner>
   );
 }
 
@@ -215,7 +188,7 @@ function StateCreateNew({ valuePhrase = '', onClick }) {
   const [copyPhrase, setCopyPhrase] = useState(false);
 
   return (
-    <Pane className="signer-container">
+    <ContainerSigner>
       <HeaderSigner>Create new account</HeaderSigner>
       <Pane position="relative" height="100%">
         <Pane paddingX={20} fontSize="18px">
@@ -249,7 +222,7 @@ function StateCreateNew({ valuePhrase = '', onClick }) {
           Fuck Google
         </Button>
       </Pane>
-    </Pane>
+    </ContainerSigner>
   );
 }
 
diff --git a/src/utils/config.js b/src/utils/config.js
index 24cb0b3ca..fb79db749 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -131,6 +131,14 @@ const POCKET = {
   },
 };
 
+const CYBER_SIGNER = {
+  STAGE_INIT: 0,
+  STAGE_SIGN: 1,
+  STAGE_INIT_ACC: 2.1,
+  STAGE_CREATE_NEW_ACCOUNT: 2.2,
+  STAGE_RESTORE_PHARSE: 2.3,
+};
+
 const PATTERN = /^0x[a-fA-F0-9]{40}$|^cybervaloper[a-zA-Z0-9]{39}$|^cyber[a-zA-Z0-9]{39}$|^cosmos[a-zA-Z0-9]{39}$/g;
 const PATTERN_CYBER = /^cyber[a-zA-Z0-9]{39}$/g;
 const PATTERN_COSMOS = /^cosmos[a-zA-Z0-9]{39}$/g;
@@ -167,4 +175,5 @@ export {
   INFINITY,
   ADD_ARAGON_FINANCE,
   DISTRIBUTION_PRIZE,
+  CYBER_SIGNER,
 };

From 72f90a1b6a7c36420f7d1ebf19ce60eb120a888e Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 01:28:37 +0300
Subject: [PATCH 15/20] fix(link): check node ipfs

---
 src/components/ledger/stageActionBar.jsx     | 3 ++-
 src/containers/Search/ActionBarContainer.jsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ledger/stageActionBar.jsx b/src/components/ledger/stageActionBar.jsx
index 3e3468aaf..70dfa734b 100644
--- a/src/components/ledger/stageActionBar.jsx
+++ b/src/components/ledger/stageActionBar.jsx
@@ -300,6 +300,7 @@ export const StartStageSearchActionBar = ({
   textBtn = 'Cyberlink',
   placeholder = 'add keywords, hash or file',
   keys = 'ledger',
+  node,
 }) => {
   return (
     <ActionBar>
@@ -374,7 +375,7 @@ export const StartStageSearchActionBar = ({
               />
             </Pane>
           }
-          disabled={!contentHash.length}
+          disabled={node === null && !contentHash.length}
           onClick={onClickBtn}
           img={imgData[keys]}
         />
diff --git a/src/containers/Search/ActionBarContainer.jsx b/src/containers/Search/ActionBarContainer.jsx
index b4b6c3f9a..8601e7eaa 100644
--- a/src/containers/Search/ActionBarContainer.jsx
+++ b/src/containers/Search/ActionBarContainer.jsx
@@ -612,7 +612,7 @@ class InnerActionBarContainer 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 (
@@ -684,6 +684,7 @@ class InnerActionBarContainer extends Component {
           onClickClear={this.onClickClear}
           file={file}
           placeholder={placeholder}
+          node={node}
         />
       );
     }

From b46cadf1a14199b3a3b2dfa92334034ba4d412ba Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 01:29:01 +0300
Subject: [PATCH 16/20] fix(tweet): fix ledger

---
 src/containers/Wallet/actionBarTweet.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/containers/Wallet/actionBarTweet.jsx b/src/containers/Wallet/actionBarTweet.jsx
index f1c77286f..ab657b8fa 100644
--- a/src/containers/Wallet/actionBarTweet.jsx
+++ b/src/containers/Wallet/actionBarTweet.jsx
@@ -89,8 +89,7 @@ class ActionBarTweet extends Component {
   async componentDidMount() {
     this.getNameBtn();
     console.warn('Looking for Ledger Nano');
-    this.transport = await TransportWebUSB.create(120 * 1000);
-    this.ledger = new CosmosDelegateTool(this.transport);
+    this.ledger = new CosmosDelegateTool();
   }
 
   componentDidUpdate(prevProps) {

From cf5487ee10b4378a0dfba636ad732e821c69f948 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 16 Jun 2021 14:18:26 +0300
Subject: [PATCH 17/20] fix(singer): to  base64

---
 src/containers/Wallet/actionBarConnect.jsx |  3 ++-
 src/containers/signer/index.jsx            |  4 ++--
 src/containers/testKeplre/index.jsx        | 12 ++++++++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/containers/Wallet/actionBarConnect.jsx b/src/containers/Wallet/actionBarConnect.jsx
index 76ce7c9f3..e011a84a2 100644
--- a/src/containers/Wallet/actionBarConnect.jsx
+++ b/src/containers/Wallet/actionBarConnect.jsx
@@ -525,12 +525,13 @@ function ActionBarConnect({
         selectAccount !== null ||
         !checkAddress(valueObj, 'cyber', cyberBech32)
       ) {
+        const seedBase64 = btoa(signerCyber.secret.data);
         accounts.cyber = {
           bech32: cyberBech32,
           keys: 'cyberSigner',
           pk,
           path: HDPATH,
-          secret: signerCyber.secret.data,
+          secret: seedBase64,
         };
       }
     }
diff --git a/src/containers/signer/index.jsx b/src/containers/signer/index.jsx
index 6d83bb306..9622646d9 100644
--- a/src/containers/signer/index.jsx
+++ b/src/containers/signer/index.jsx
@@ -26,8 +26,9 @@ class Signer {
     ) {
       if (account.cyber.keys === 'cyberSigner' && account.cyber.secret) {
         const mnemonic = account.cyber.secret;
+        const mnemonicString = atob(mnemonic);
         const signer = await Secp256k1HdWallet.fromMnemonic(
-          mnemonic,
+          mnemonicString,
           this.hdPath,
           this.prefix
         );
@@ -39,7 +40,6 @@ class Signer {
   };
 
   restorePhrase = async (mnemonic, callback) => {
-    console.log(`mnemonic`, mnemonic);
     const signer = await Secp256k1HdWallet.fromMnemonic(
       mnemonic,
       this.hdPath,
diff --git a/src/containers/testKeplre/index.jsx b/src/containers/testKeplre/index.jsx
index 9338f5c39..5a7dcfe5b 100644
--- a/src/containers/testKeplre/index.jsx
+++ b/src/containers/testKeplre/index.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect, useContext } from 'react';
 import { coins } from '@cosmjs/launchpad';
 import { AppContext, AppContextSigner } from '../../context';
 import { CYBER, CYBER_SIGNER } from '../../utils/config';
+const uint8ArrayConcat = require('uint8arrays/concat');
+
 
 import Signer from '../signer';
 
@@ -19,6 +21,16 @@ function TestKeplr() {
 
   const [hashTx, setHashTx] = useState('');
 
+  useEffect(() => {
+    const seed =
+      'dune pottery shield bracket shuffle orchard frown mail exercise destroy enroll nothing scheme allow pudding match mass world glow razor that attend blame follow';
+    const seedBase64 = btoa(seed);
+    console.log(`seedBase64`, seedBase64);
+
+    const string = atob(seedBase64);
+    console.log(`string`, string)
+  }, []);
+
   console.log('keplr', keplr);
   //   cybervaloper15zs0cjct43xs4z4sesxcrynar5mxm82ftahux2;
 

From 080a369ee84b03dfcbbf826c58856145cf4eb4e5 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Wed, 24 Aug 2022 17:01:29 +0300
Subject: [PATCH 18/20] fix(signer): merge

---
 package.json                                  | 16 +++----
 src/containers/Wallet/actionBarConnect.jsx    |  4 +-
 .../Wallet/actionBarCyberSigner.jsx           |  2 +-
 src/containers/signer/app.jsx                 |  5 +-
 src/containers/signer/index.jsx               | 47 +++++++++----------
 src/containers/testKeplre/index.jsx           | 22 ++++-----
 src/utils/config.js                           | 24 +++++-----
 7 files changed, 58 insertions(+), 62 deletions(-)

diff --git a/package.json b/package.json
index 2d153fae8..602d0fa65 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@rjsf/core": "^3.2.1",
     "ajv": "^8.8.2",
-    "@cosmjs/crypto": "^0.25.3",
     "axios": "^0.21.1",
     "babel-loader": "8.2.3",
     "clean-webpack-plugin": "^3.0.0",
@@ -88,13 +87,14 @@
   "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",
+    "@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.0",
     "@cybercongress/gravity": "0.0.15",
     "@ledgerhq/hw-transport-u2f": "^4.72.1",
diff --git a/src/containers/Wallet/actionBarConnect.jsx b/src/containers/Wallet/actionBarConnect.jsx
index 9d98918fa..d7a94855a 100644
--- a/src/containers/Wallet/actionBarConnect.jsx
+++ b/src/containers/Wallet/actionBarConnect.jsx
@@ -491,8 +491,8 @@ function ActionBarConnect({
 
   const callbackSigner = async (signerCyber) => {
     console.log(`callbackSigner`, signerCyber);
-    const [{ address }] = await signerCyber.getAccounts();
-    const pk = Buffer.from(signerCyber.pubkey).toString('hex');
+    const [{ address, pubkey }] = await signerCyber.getAccounts();
+    const pk = Buffer.from(pubkey).toString('hex');
     console.log(`callbackSigner address`, address);
     console.log(`callbackSigner pk`, pk);
     updateCallbackSigner(null);
diff --git a/src/containers/Wallet/actionBarCyberSigner.jsx b/src/containers/Wallet/actionBarCyberSigner.jsx
index 5525b6883..e59e85724 100644
--- a/src/containers/Wallet/actionBarCyberSigner.jsx
+++ b/src/containers/Wallet/actionBarCyberSigner.jsx
@@ -166,7 +166,7 @@ function ActionBarCyberSigner({ updateAddress, updateBalance, selectAccount }) {
               height={42}
               width="24%"
               onChange={(e) => setAmountSend(e.target.value)}
-              placeholder="EUL"
+              placeholder="BOOT"
               isInvalid={amountSendInputValid !== null}
               message={amountSendInputValid}
             />
diff --git a/src/containers/signer/app.jsx b/src/containers/signer/app.jsx
index 147dd9265..8185452b2 100644
--- a/src/containers/signer/app.jsx
+++ b/src/containers/signer/app.jsx
@@ -46,10 +46,7 @@ function AppSign({ defaultAccount }) {
     const getSigner = async () => {
       const signerObj = new Signer();
       const signerCyber = await signerObj.initSigner(defaultAccount);
-      if (signerCyber !== null) {
-        const pk = Buffer.from(signerCyber.pubkey).toString('hex');
-        console.log(`pk`, pk);
-      }
+
       console.log(`signerCyber`, signerCyber);
       updateCyberSigner(signerCyber);
     };
diff --git a/src/containers/signer/index.jsx b/src/containers/signer/index.jsx
index 9622646d9..db55de8ee 100644
--- a/src/containers/signer/index.jsx
+++ b/src/containers/signer/index.jsx
@@ -1,13 +1,15 @@
 /* eslint-disable no-await-in-loop */
 import React from 'react';
 import {
-  Secp256k1HdWallet,
   SigningCosmosClient,
   coins,
   GasPrice,
+  BroadcastMode,
 } from '@cosmjs/launchpad';
+import { SigningCyberClient, CyberClient } from '@cybercongress/cyber-js';
 import { Decimal } from '@cosmjs/math';
 import { stringToPath } from '@cosmjs/crypto';
+import { Secp256k1HdWallet } from '@cosmjs/amino';
 import { CYBER } from '../../utils/config';
 
 class Signer {
@@ -27,11 +29,9 @@ class Signer {
       if (account.cyber.keys === 'cyberSigner' && account.cyber.secret) {
         const mnemonic = account.cyber.secret;
         const mnemonicString = atob(mnemonic);
-        const signer = await Secp256k1HdWallet.fromMnemonic(
-          mnemonicString,
-          this.hdPath,
-          this.prefix
-        );
+        const signer = await Secp256k1HdWallet.fromMnemonic(mnemonicString, {
+          prefix: this.prefix,
+        });
         return signer;
       }
     }
@@ -40,11 +40,9 @@ class Signer {
   };
 
   restorePhrase = async (mnemonic, callback) => {
-    const signer = await Secp256k1HdWallet.fromMnemonic(
-      mnemonic,
-      this.hdPath,
-      this.prefix
-    );
+    const signer = await Secp256k1HdWallet.fromMnemonic(mnemonic, {
+      prefix: this.prefix,
+    });
     if (callback) {
       callback(signer);
     }
@@ -60,13 +58,11 @@ class Signer {
     try {
       let condition = true;
       while (condition) {
-        const signer = await Secp256k1HdWallet.generate(
-          this.word,
-          this.hdPath,
-          this.prefix
-        );
+        const signer = await Secp256k1HdWallet.generate(this.word, {
+          prefix: this.prefix,
+        });
         const [{ address }] = await signer.getAccounts();
-        if (address.match(/^cyber1a[a-zA-Z0-9]{37}$/g)) {
+        if (address.match(/^bostrom1a[a-zA-Z0-9]{37}$/g)) {
           condition = false;
           if (callback) {
             callback(signer);
@@ -83,7 +79,7 @@ class Signer {
   sendTxs = async (signer, msgs, callback) => {
     try {
       const [{ address }] = await signer.getAccounts();
-      const gasPrice = new GasPrice(Decimal.fromAtomics(0, 0), 'uatom');
+      const gasPrice = new GasPrice(Decimal.fromAtomics(0, 0), 'boot');
       const gasLimits = { send: 100000 };
       const client = new SigningCosmosClient(
         CYBER.CYBER_NODE_URL_LCD,
@@ -91,11 +87,13 @@ class Signer {
         signer,
         gasPrice,
         gasLimits,
-        'sync'
+        BroadcastMode.Sync
       );
 
+      console.log('client', client)
+
       const fee = {
-        amount: coins(0, 'uatom'),
+        amount: [],
         gas: '100000',
       };
 
@@ -104,10 +102,11 @@ class Signer {
         fee,
         CYBER.MEMO_CYBER_SIGNER
       );
-      if (callback && callback !== null) {
-        callback(response);
-      }
-      return response;
+      console.log('response', response)
+      // if (callback && callback !== null) {
+      //   callback(response);
+      // }
+      // return response;
     } catch (error) {
       console.log(`error`, error);
       return error;
diff --git a/src/containers/testKeplre/index.jsx b/src/containers/testKeplre/index.jsx
index 5a7dcfe5b..bef31a13a 100644
--- a/src/containers/testKeplre/index.jsx
+++ b/src/containers/testKeplre/index.jsx
@@ -21,17 +21,17 @@ function TestKeplr() {
 
   const [hashTx, setHashTx] = useState('');
 
-  useEffect(() => {
-    const seed =
-      'dune pottery shield bracket shuffle orchard frown mail exercise destroy enroll nothing scheme allow pudding match mass world glow razor that attend blame follow';
-    const seedBase64 = btoa(seed);
-    console.log(`seedBase64`, seedBase64);
+  // useEffect(() => {
+  //   const seed =
+  //     'dune pottery shield bracket shuffle orchard frown mail exercise destroy enroll nothing scheme allow pudding match mass world glow razor that attend blame follow';
+  //   const seedBase64 = btoa(seed);
+  //   console.log(`seedBase64`, seedBase64);
 
-    const string = atob(seedBase64);
-    console.log(`string`, string)
-  }, []);
+  //   const string = atob(seedBase64);
+  //   console.log(`string`, string)
+  // }, []);
 
-  console.log('keplr', keplr);
+  // console.log('keplr', keplr);
   //   cybervaloper15zs0cjct43xs4z4sesxcrynar5mxm82ftahux2;
 
   const signerTest = async () => {
@@ -63,8 +63,8 @@ function TestKeplr() {
 
   const callbackSigner = async (signerCyber) => {
     console.log(`callbackSigner`, signerCyber);
-    const [{ address }] = await signerCyber.getAccounts();
-    const pk = Buffer.from(signerCyber.pubkey).toString('hex');
+    const [{ address, pubkey }] = await signerCyber.getAccounts();
+    const pk = Buffer.from(pubkey).toString('hex');
     console.log(`callbackSigner address`, address);
     console.log(`callbackSigner pk`, pk);
     updateCallbackSigner(null);
diff --git a/src/utils/config.js b/src/utils/config.js
index e8f5f3304..a0fdc4b53 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -75,19 +75,19 @@ const CYBER = {
   // CYBER_WEBSOCKET_URL: 'ws://localhost:26657/websocket',
   // CYBER_NODE_URL_LCD: 'http://localhost:1317',
 
-  CHAIN_ID: 'bostrom',
-  CYBER_NODE_URL_API: 'https://rpc.bostrom.cybernode.ai',
-  CYBER_WEBSOCKET_URL: 'wss://rpc.bostrom.cybernode.ai/websocket',
-  CYBER_NODE_URL_LCD: 'https://lcd.bostrom.cybernode.ai',
-  CYBER_INDEX_HTTPS: 'https://index.bostrom.cybernode.ai/v1/graphql',
-  CYBER_INDEX_WEBSOCKET: 'wss://index.bostrom.cybernode.ai/v1/graphql',
+  // CHAIN_ID: 'bostrom',
+  // CYBER_NODE_URL_API: 'https://rpc.bostrom.cybernode.ai',
+  // CYBER_WEBSOCKET_URL: 'wss://rpc.bostrom.cybernode.ai/websocket',
+  // CYBER_NODE_URL_LCD: 'https://lcd.bostrom.cybernode.ai',
+  // CYBER_INDEX_HTTPS: 'https://index.bostrom.cybernode.ai/v1/graphql',
+  // CYBER_INDEX_WEBSOCKET: 'wss://index.bostrom.cybernode.ai/v1/graphql',
 
-  // CHAIN_ID: 'space-pussy-1',
-  // CYBER_NODE_URL_API: 'https://rpc.space-pussy-1.cybernode.ai',
-  // CYBER_WEBSOCKET_URL: 'wss://rpc.space-pussy-1.cybernode.ai/websocket',
-  // CYBER_NODE_URL_LCD: 'https://lcd.space-pussy-1.cybernode.ai',
-  // CYBER_INDEX_HTTPS: 'https://index.space-pussy-1.cybernode.ai/v1/graphql',
-  // CYBER_INDEX_WEBSOCKET: 'wss://index.space-pussy-1.cybernode.ai/v1/graphql',
+  CHAIN_ID: 'space-pussy-1',
+  CYBER_NODE_URL_API: 'https://rpc.space-pussy-1.cybernode.ai',
+  CYBER_WEBSOCKET_URL: 'wss://rpc.space-pussy-1.cybernode.ai/websocket',
+  CYBER_NODE_URL_LCD: 'https://lcd.space-pussy-1.cybernode.ai',
+  CYBER_INDEX_HTTPS: 'https://index.space-pussy-1.cybernode.ai/v1/graphql',
+  CYBER_INDEX_WEBSOCKET: 'wss://index.space-pussy-1.cybernode.ai/v1/graphql',
 
   CYBER_GATEWAY: 'https://gateway.ipfs.cybernode.ai',
 

From c8b77a1bcd3960ee2325631172a0fec5ac859d65 Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Fri, 2 Sep 2022 13:06:26 +0300
Subject: [PATCH 19/20] fix(signer): update signer

---
 src/containers/Search/ActionBarContainer.jsx  |  53 ++--
 .../Validators/ActionBarContainer.jsx         | 131 +++++++-
 src/containers/Validators/actionBar.jsx       |  23 --
 src/containers/Wallet/actionBarConnect.jsx    |   4 +-
 .../Wallet/actionBarCyberSigner.jsx           |  20 +-
 src/containers/mint/actionBar.jsx             |  74 ++++-
 src/containers/mint/index.jsx                 |  18 +-
 src/containers/signer/app.jsx                 |  16 +-
 .../signer/component/MsgsSigner.jsx           |   6 +-
 src/containers/signer/component/ui.jsx        |   9 +-
 src/containers/signer/index.jsx               |  92 +++---
 src/containers/testKeplre/index.jsx           | 107 ++-----
 src/containers/txs/ActionBarWalletTxs.jsx     | 203 +++++++++++++
 src/containers/txs/informationTxs.jsx         |  42 ++-
 src/containers/txs/utils.js                   |  74 +++++
 src/containers/txs/wallet.jsx                 | 106 +++++++
 src/containers/wasm/ui/ui.jsx                 |   5 +-
 src/context.jsx                               |   1 +
 src/router.jsx                                |   2 +
 src/utils/msgs.js                             | 282 ++++++++++++++++++
 src/utils/search/utils.js                     |  13 +
 21 files changed, 1052 insertions(+), 229 deletions(-)
 delete mode 100644 src/containers/Validators/actionBar.jsx
 create mode 100644 src/containers/txs/ActionBarWalletTxs.jsx
 create mode 100644 src/containers/txs/utils.js
 create mode 100644 src/containers/txs/wallet.jsx
 create mode 100644 src/utils/msgs.js

diff --git a/src/containers/Search/ActionBarContainer.jsx b/src/containers/Search/ActionBarContainer.jsx
index cd88b5213..451541acb 100644
--- a/src/containers/Search/ActionBarContainer.jsx
+++ b/src/containers/Search/ActionBarContainer.jsx
@@ -35,6 +35,7 @@ import {
   DEFAULT_GAS_LIMITS,
 } from '../../utils/config';
 import { trimString } from '../../utils/utils';
+import Msgs from '../../utils/msgs';
 
 const imgKeplr = require('../../image/keplr-icon.svg');
 const imgLedger = require('../../image/ledger.svg');
@@ -544,38 +545,40 @@ class InnerActionBarContainer extends Component {
     const { valueAppContextSigner } = this.props;
     const { updateCallbackSigner } = valueAppContextSigner;
 
-    const hash = result.transactionHash;
-    updateCallbackSigner(null);
-    console.log('hash :>> ', hash);
-    this.setState({ stage: STAGE_SUBMITTED, txHash: hash });
-    this.timeOut = setTimeout(this.confirmTx, 1500);
+    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;
+    const { cyberSigner, updateValueTxs, updateCallbackSigner } =
+      valueAppContextSigner;
     if (cyberSigner !== null) {
-      const [{ address }] = await cyberSigner.getAccounts();
-      const msgs = [];
-      msgs.push({
-        type: 'cyber/Link',
-        value: {
-          address,
-          links: [
-            {
-              from: fromCid,
-              to: toCid,
-            },
-          ],
-        },
-      });
+      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);
+      updateValueTxs([msgs]);
       this.setState({
         stage: STAGE_KEPLR_APPROVE,
       });
diff --git a/src/containers/Validators/ActionBarContainer.jsx b/src/containers/Validators/ActionBarContainer.jsx
index fca9f78c9..42546d54b 100644
--- a/src/containers/Validators/ActionBarContainer.jsx
+++ b/src/containers/Validators/ActionBarContainer.jsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useContext, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useMemo,
+  useCallback,
+} from 'react';
 import { Pane, Text, ActionBar, Button } from '@cybercongress/gravity';
 import { coins, coin } from '@cosmjs/launchpad';
 import { useHistory } from 'react-router-dom';
@@ -18,9 +24,10 @@ import {
 } from '../../components';
 
 import { trimString, formatNumber } from '../../utils/utils';
+import Msgs from '../../utils/msgs';
 
 import { LEDGER, CYBER, DEFAULT_GAS_LIMITS } from '../../utils/config';
-import { AppContext } from '../../context';
+import { AppContext, AppContextSigner } from '../../context';
 
 const {
   MEMO,
@@ -190,6 +197,13 @@ function ActionBarContainer({
   updateFnc,
 }) {
   const { keplr, jsCyber } = useContext(AppContext);
+  const {
+    cyberSigner,
+    updateValueTxs,
+    updateValueIsVisible,
+    updateCallbackSigner,
+    updateStageSigner,
+  } = useContext(AppContextSigner);
   const history = useHistory();
   const [stage, setStage] = useState(STAGE_INIT);
   const [txType, setTxType] = useState(null);
@@ -219,6 +233,97 @@ function ActionBarContainer({
     setStage(STAGE_INIT);
   };
 
+  const getTxsMsgs = useCallback(
+    async (address) => {
+      const validatorAddres = getValidatorAddres(validators);
+      const msgs = [];
+      const dataMsgs = new Msgs();
+      if (txType === TXTYPE_DELEGATE) {
+        const tempMsg = await dataMsgs.delegateTokens(
+          address,
+          validatorAddres,
+          coin(parseFloat(amount), CYBER.DENOM_CYBER)
+        );
+        msgs.push(tempMsg);
+      }
+      if (txType === TXTYPE_UNDELEGATE) {
+        const tempMsg = await dataMsgs.undelegateTokens(
+          address,
+          validatorAddres,
+          coin(parseFloat(amount), CYBER.DENOM_CYBER)
+        );
+        msgs.push(tempMsg);
+      }
+      if (txType === TXTYPE_REDELEGATE) {
+        const tempMsg = await dataMsgs.redelegateTokens(
+          address,
+          validatorAddres,
+          valueSelect,
+          coin(parseFloat(amount), CYBER.DENOM_CYBER)
+        );
+        msgs.push(tempMsg);
+      }
+
+      return msgs;
+    },
+    [txType, valueSelect, amount]
+  );
+
+  const updateCallbackFnc = (response) => {
+    checkTxs(response, { setTxHash, setErrorMessage, setStage });
+  };
+
+  const generateTxCyberSigner = useCallback(async () => {
+    if (cyberSigner !== null) {
+      const [{ address }] = await cyberSigner.signer.getAccounts();
+      if (addressPocket !== null && addressPocket.bech32 === address) {
+        const msgs = await getTxsMsgs(address);
+        console.log('msgs', msgs);
+        updateCallbackSigner(updateCallbackFnc);
+        updateValueTxs(msgs);
+        setStage(LEDGER_GENERATION);
+      } else {
+        setStage(STAGE_ERROR);
+        setErrorMessage(
+          `Add address ${trimString(
+            address,
+            9,
+            5
+          )} to your pocket or make active `
+        );
+      }
+    }
+  }, [cyberSigner, amount, valueSelect]);
+
+  const generateTxKeplr = useCallback(async () => {
+    if (keplr !== null) {
+      const [{ address }] = await keplr.signer.getAccounts();
+      if (addressPocket !== null && addressPocket.bech32 === address) {
+        const msgs = await getTxsMsgs(address);
+
+        console.log('msgs', msgs);
+
+        const result = await keplr.signAndBroadcast(
+          address,
+          msgs,
+          fee,
+          CYBER.MEMO_KEPLR
+        );
+        console.log('result: ', result);
+        checkTxs(result, { setTxHash, setErrorMessage, setStage });
+      } else {
+        setStage(STAGE_ERROR);
+        setErrorMessage(
+          `Add address ${trimString(
+            address,
+            9,
+            5
+          )} to your pocket or make active `
+        );
+      }
+    }
+  }, [keplr, addressPocket, amount, valueSelect]);
+
   const delegateTokens = async () => {
     console.log('delegateTokens', delegateTokens);
     try {
@@ -343,6 +448,16 @@ function ActionBarContainer({
     setStage(STAGE_READY);
   };
 
+  const initDevice = () => {
+    if (addressPocket !== null && addressPocket.keys === 'keplr') {
+      generateTxKeplr();
+    }
+
+    if (addressPocket !== null && addressPocket.keys === 'cyberSigner') {
+      generateTxCyberSigner();
+    }
+  };
+
   // console.log('addressPocket', addressPocket);
   // console.log('loadingBalanceInfo', loadingBalanceInfo);
   // console.log('balance', balance);
@@ -412,7 +527,7 @@ function ActionBarContainer({
   if (
     Object.keys(validators).length === 0 &&
     stage === STAGE_INIT &&
-    balance.delegation  &&
+    balance.delegation &&
     balance.delegation === 0
   ) {
     return (
@@ -532,9 +647,10 @@ function ActionBarContainer({
         onChangeInputAmount={(e) => setAmount(e.target.value)}
         toSend={amount}
         disabledBtn={amount.length === 0}
-        generateTx={
-          txType === TXTYPE_DELEGATE ? delegateTokens : undelegateTokens
-        }
+        generateTx={() => initDevice()}
+        // generateTx={
+        //   txType === TXTYPE_DELEGATE ? delegateTokens : undelegateTokens
+        // }
         delegate={txType === TXTYPE_DELEGATE}
       />
     );
@@ -543,7 +659,8 @@ function ActionBarContainer({
   if (stage === STAGE_READY && txType === TXTYPE_REDELEGATE) {
     return (
       <ReDelegate
-        generateTx={() => redelegateTokens()}
+        generateTx={() => initDevice()}
+        // generateTx={() => redelegateTokens()}
         onChangeInputAmount={(e) => setAmount(e.target.value)}
         toSend={amount}
         disabledBtn={!validRestakeBtn}
diff --git a/src/containers/Validators/actionBar.jsx b/src/containers/Validators/actionBar.jsx
deleted file mode 100644
index df15d0b40..000000000
--- a/src/containers/Validators/actionBar.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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;
diff --git a/src/containers/Wallet/actionBarConnect.jsx b/src/containers/Wallet/actionBarConnect.jsx
index d7a94855a..2d41fd5a9 100644
--- a/src/containers/Wallet/actionBarConnect.jsx
+++ b/src/containers/Wallet/actionBarConnect.jsx
@@ -491,7 +491,7 @@ function ActionBarConnect({
 
   const callbackSigner = async (signerCyber) => {
     console.log(`callbackSigner`, signerCyber);
-    const [{ address, pubkey }] = await signerCyber.getAccounts();
+    const [{ address, pubkey }] = await signerCyber.signer.getAccounts();
     const pk = Buffer.from(pubkey).toString('hex');
     console.log(`callbackSigner address`, address);
     console.log(`callbackSigner pk`, pk);
@@ -525,7 +525,7 @@ function ActionBarConnect({
         selectAccount !== null ||
         !checkAddress(valueObj, 'cyber', cyberBech32)
       ) {
-        const seedBase64 = btoa(signerCyber.secret.data);
+        const seedBase64 = btoa(signerCyber.signer.secret.data);
         accounts.cyber = {
           bech32: cyberBech32,
           keys: 'cyberSigner',
diff --git a/src/containers/Wallet/actionBarCyberSigner.jsx b/src/containers/Wallet/actionBarCyberSigner.jsx
index e59e85724..c450673d1 100644
--- a/src/containers/Wallet/actionBarCyberSigner.jsx
+++ b/src/containers/Wallet/actionBarCyberSigner.jsx
@@ -22,6 +22,7 @@ import {
 } from '../../utils/config';
 import { getTxs } from '../../utils/search/utils';
 import { deletPubkey } from './utils';
+import Msgs from '../../utils/msgs';
 
 const imgKeplr = require('../../image/keplr-icon.svg');
 
@@ -53,19 +54,16 @@ function ActionBarCyberSigner({ updateAddress, updateBalance, selectAccount }) {
     const amount = parseFloat(amountSend);
     if (cyberSigner !== null) {
       setStage(STAGE_SUBMITTED);
-      const [{ address }] = await cyberSigner.getAccounts();
-      const msgs = [];
-      msgs.push({
-        type: 'cosmos-sdk/MsgSend',
-        value: {
-          amount: coins(amount, CYBER.DENOM_CYBER),
-          from_address: address,
-          to_address: recipient,
-        },
-      });
+      const [{ address }] = await cyberSigner.signer.getAccounts();
+      const dataMsgs = new Msgs();
+      const msgs = dataMsgs.sendTokens(
+        address,
+        recipient,
+        coins(amount, CYBER.DENOM_CYBER)
+      );
 
       updateCallbackSigner(updateCallbackFnc);
-      updateValueTxs(msgs);
+      updateValueTxs([msgs]);
     }
   };
 
diff --git a/src/containers/mint/actionBar.jsx b/src/containers/mint/actionBar.jsx
index c612544c7..ae7be5414 100644
--- a/src/containers/mint/actionBar.jsx
+++ b/src/containers/mint/actionBar.jsx
@@ -13,10 +13,11 @@ import {
   TransactionError,
   Account,
 } from '../../components';
-import { AppContext } from '../../context';
+import { AppContext, AppContextSigner } from '../../context';
 import { CYBER, LEDGER, DEFAULT_GAS_LIMITS } from '../../utils/config';
 import { getTxs } from '../../utils/search/utils';
 import { trimString } from '../../utils/utils';
+import Msgs from '../../utils/msgs';
 
 const {
   STAGE_INIT,
@@ -29,6 +30,21 @@ const {
 const VESTING_TIME_HOURS = 3601;
 const BASE_VESTING_TIME = 86401;
 
+const checkTxs = (response, updateState) => {
+  console.log('response', response);
+  const { setStage, setTxHash, setErrorMessage } = updateState;
+  if (response.code === 0) {
+    const hash = response.transactionHash;
+    console.log('hash :>> ', hash);
+    setStage(STAGE_SUBMITTED);
+    setTxHash(hash);
+  } else {
+    setStage(STAGE_ERROR);
+    setTxHash(null);
+    setErrorMessage(response.rawLog.toString());
+  }
+};
+
 function ActionBar({
   value,
   selected,
@@ -38,6 +54,13 @@ function ActionBar({
   addressActive,
 }) {
   const { keplr, jsCyber } = useContext(AppContext);
+  const {
+    cyberSigner,
+    updateValueTxs,
+    updateValueIsVisible,
+    updateCallbackSigner,
+    updateStageSigner,
+  } = useContext(AppContextSigner);
   const [stage, setStage] = useState(STAGE_INIT);
   const [txHash, setTxHash] = useState(null);
   const [txHeight, setTxHeight] = useState(null);
@@ -73,7 +96,6 @@ function ActionBar({
 
   const investmint = async () => {
     if (keplr !== null) {
-      setStage(STAGE_SUBMITTED);
       const [{ address }] = await keplr.signer.getAccounts();
       const fee = {
         amount: [],
@@ -88,19 +110,7 @@ function ActionBar({
           fee
         );
         console.log(`response`, response);
-        if (response.code === 0) {
-          setTxHash(response.transactionHash);
-        } else if (response.code === 4) {
-          setTxHash(null);
-          setErrorMessage(
-            'Cyberlinking and investmint is not working. Wait for updates.'
-          );
-          setStage(STAGE_ERROR);
-        } else {
-          setTxHash(null);
-          setErrorMessage(response.rawLog.toString());
-          setStage(STAGE_ERROR);
-        }
+        checkTxs(response, { setTxHash, setErrorMessage, setStage });
       } else {
         setErrorMessage(
           <span>
@@ -113,6 +123,38 @@ function ActionBar({
     }
   };
 
+  const updateCallbackFnc = (response) => {
+    checkTxs(response, { setTxHash, setErrorMessage, setStage });
+  };
+
+  const investmintCyberCigner = async () => {
+    if (cyberSigner !== null) {
+      const dataMsgs = new Msgs();
+      const [{ address }] = await cyberSigner.signer.getAccounts();
+
+      const msgs = dataMsgs.investmint(
+        address,
+        coin(parseFloat(value), 'hydrogen'),
+        selected,
+        parseFloat(BASE_VESTING_TIME * valueDays)
+      );
+      updateValueTxs([msgs]);
+      updateCallbackSigner(updateCallbackFnc);
+    }
+  };
+
+  const chooseSigner = () => {
+    if (addressActive !== null) {
+      if (addressActive.keys === 'keplr') {
+        investmint();
+      }
+
+      if (addressActive.keys === 'cyberSigner') {
+        investmintCyberCigner();
+      }
+    }
+  };
+
   const cleatState = () => {
     setStage(STAGE_INIT);
     setTxHash(null);
@@ -145,7 +187,7 @@ function ActionBar({
   if (stage === STAGE_INIT) {
     return (
       <ActionBarContainer>
-        <Button disabled={resourceToken === 0} onClick={investmint}>
+        <Button disabled={resourceToken === 0} onClick={chooseSigner}>
           Investmint
         </Button>
       </ActionBarContainer>
diff --git a/src/containers/mint/index.jsx b/src/containers/mint/index.jsx
index ae6ecf6fb..fca89bb9e 100644
--- a/src/containers/mint/index.jsx
+++ b/src/containers/mint/index.jsx
@@ -78,12 +78,8 @@ function Mint({ defaultAccount }) {
   const [addressActive, setAddressActive] = useState(null);
   const [updateAddress, setUpdateAddress] = useState(0);
   // const { balance } = useGetBalance(addressActive, updateAddress);
-  const {
-    slotsData,
-    vested,
-    loadingAuthAccounts,
-    originalVesting,
-  } = useGetSlots(addressActive, updateAddress);
+  const { slotsData, vested, loadingAuthAccounts, originalVesting } =
+    useGetSlots(addressActive, updateAddress);
   const [selected, setSelected] = useState('millivolt');
   const [value, setValue] = useState(0);
   const [valueDays, setValueDays] = useState(1);
@@ -140,7 +136,7 @@ function Mint({ defaultAccount }) {
       Object.prototype.hasOwnProperty.call(account, 'cyber')
     ) {
       const { keys, bech32 } = account.cyber;
-      if (keys === 'keplr') {
+      if (keys === 'keplr' || keys === 'cyberSigner') {
         addressPocket = bech32;
       }
     }
@@ -394,10 +390,10 @@ function Mint({ defaultAccount }) {
               }}
             >
               You’re freezing {formatNumber(value)} H for {valueDays} days. It
-              will release {resourceToken} {<ValueImg text={selected} />} for
-              you. At the end of the period, {selected} becomes liquid
-              automatically, but you can use it to boost ranking during the
-              freeze. You can have only 8 slots for investmint at a time.
+              will release {resourceToken} <ValueImg text={selected} /> for you.
+              At the end of the period, {selected} becomes liquid automatically,
+              but you can use it to boost ranking during the freeze. You can
+              have only 8 slots for investmint at a time.
             </div>
           )}
         </div>
diff --git a/src/containers/signer/app.jsx b/src/containers/signer/app.jsx
index 8185452b2..604461b4e 100644
--- a/src/containers/signer/app.jsx
+++ b/src/containers/signer/app.jsx
@@ -21,6 +21,8 @@ const {
   STAGE_RESTORE_PHARSE,
 } = CYBER_SIGNER;
 
+const signerObj = new Signer();
+
 function AppSign({ defaultAccount }) {
   const {
     tx,
@@ -44,8 +46,8 @@ function AppSign({ defaultAccount }) {
 
   useEffect(() => {
     const getSigner = async () => {
-      const signerObj = new Signer();
       const signerCyber = await signerObj.initSigner(defaultAccount);
+      console.log('clientCyber', signerCyber);
 
       console.log(`signerCyber`, signerCyber);
       updateCyberSigner(signerCyber);
@@ -62,8 +64,8 @@ function AppSign({ defaultAccount }) {
   }, [tx]);
 
   const restorePhrase = async () => {
-    const signerObj = new Signer();
     const signerCyber = await signerObj.restorePhrase(valuePhrase, callbackFnc);
+    console.log('signerCyber', signerCyber)
     updateCyberSigner(signerCyber);
     setValuePhrase('');
     updateStageSigner(STAGE_INIT);
@@ -71,23 +73,17 @@ function AppSign({ defaultAccount }) {
 
   const createNewAcc = async () => {
     updateStageSigner(CYBER_SIGNER.STAGE_CREATE_NEW_ACCOUNT);
-    const signerObj = new Signer();
     const signerCyber = await signerObj.getVanityAccount();
     // updateCyberSigner(signerCyber);
     SetCyberSignerTemp(signerCyber);
-    setValuePhrase(signerCyber.secret.data);
+    setValuePhrase(signerCyber.signer.secret.data);
   };
 
   const signTx = async () => {
     console.log(`signer`, cyberSigner);
     console.log(`msgData`, msgData);
     if (cyberSigner !== null && msgData !== null) {
-      const signerObj = new Signer();
-      const response = await signerObj.sendTxs(
-        cyberSigner,
-        msgData,
-        callbackFnc
-      );
+      const response = await signerObj.sendTxs(msgData, callbackFnc);
       console.log(`response Txs`, response);
       updateValueTxs(null);
       setMsgData(null);
diff --git a/src/containers/signer/component/MsgsSigner.jsx b/src/containers/signer/component/MsgsSigner.jsx
index 99e520e76..15537b945 100644
--- a/src/containers/signer/component/MsgsSigner.jsx
+++ b/src/containers/signer/component/MsgsSigner.jsx
@@ -9,11 +9,11 @@ const CT = ({ children }) => (
 );
 
 function MsgsSigner({ msgData }) {
-  if (msgData.type === 'cosmos-sdk/MsgSend') {
+  if (msgData.typeUrl === '/cosmos.bank.v1beta1.MsgSend') {
     let recipient;
     let amount;
-    if (msgData.value.to_address && msgData.value.amount) {
-      recipient = trimString(msgData.value.to_address, 8, 4);
+    if (msgData.value.toAddress && msgData.value.amount) {
+      recipient = trimString(msgData.value.toAddress, 8, 4);
       amount = msgData.value.amount.map((coin, j) => {
         return (
           <span key={j}>
diff --git a/src/containers/signer/component/ui.jsx b/src/containers/signer/component/ui.jsx
index 824010316..dc6119ad3 100644
--- a/src/containers/signer/component/ui.jsx
+++ b/src/containers/signer/component/ui.jsx
@@ -5,6 +5,7 @@ import MsgType from '../../txs/msgType';
 import { PillNumber, TabBtn, Dots } from '../../../components';
 import { trimString } from '../../../utils/utils';
 import MsgsSigner from './MsgsSigner';
+import { JsonView } from '../../wasm/ui/ui';
 
 const HeaderSigner = ({ children }) => (
   <Pane
@@ -43,14 +44,14 @@ function StateSign({ msgData, onClick, onClickReject }) {
             {Object.keys(msgData).length}
           </PillNumber>{' '}
         </Pane>
-        <Pane width="100%" paddingLeft={20}>
-          {Object.keys(msgData).map((key) => (
+        <Pane width="100%" paddingLeft={0}>
+          <JsonView src={msgData} />
+          {/* {Object.keys(msgData).map((key) => (
             <Pane paddingY={5} width="100%">
               <MsgsSigner msgData={msgData[key]} />
-              {/* {msgData[key].type} */}
               <Pane paddingTop={5} borderBottom="1px solid #ffffff52" />
             </Pane>
-          ))}
+          ))} */}
         </Pane>
       </Pane>
     );
diff --git a/src/containers/signer/index.jsx b/src/containers/signer/index.jsx
index db55de8ee..ac1b44678 100644
--- a/src/containers/signer/index.jsx
+++ b/src/containers/signer/index.jsx
@@ -5,6 +5,7 @@ import {
   coins,
   GasPrice,
   BroadcastMode,
+  OfflineSigner,
 } from '@cosmjs/launchpad';
 import { SigningCyberClient, CyberClient } from '@cybercongress/cyber-js';
 import { Decimal } from '@cosmjs/math';
@@ -12,11 +13,24 @@ import { stringToPath } from '@cosmjs/crypto';
 import { Secp256k1HdWallet } from '@cosmjs/amino';
 import { CYBER } from '../../utils/config';
 
+// ччы
+
 class Signer {
   constructor() {
     this.prefix = CYBER.BECH32_PREFIX_ACC_ADDR_CYBER;
     this.word = 24;
     this.hdPath = stringToPath("m/44'/118'/0'/0/0");
+    this.client = null;
+    this.signer = null;
+    this.msgsArr = [];
+  }
+
+  get getClient() {
+    return this.client;
+  }
+
+  get getSigner() {
+    return this.signer;
   }
 
   initSigner = async (defaultAccount) => {
@@ -32,7 +46,10 @@ class Signer {
         const signer = await Secp256k1HdWallet.fromMnemonic(mnemonicString, {
           prefix: this.prefix,
         });
-        return signer;
+        this.signer = signer;
+        this.client = await this.createClient();
+
+        return this.client;
       }
     }
 
@@ -43,10 +60,14 @@ class Signer {
     const signer = await Secp256k1HdWallet.fromMnemonic(mnemonic, {
       prefix: this.prefix,
     });
+
+    this.signer = signer;
+    this.client = await this.createClient();
+
     if (callback) {
-      callback(signer);
+      callback(this.client);
     }
-    return signer;
+    return this.client;
   };
 
   generationAccount = async () => {
@@ -67,7 +88,10 @@ class Signer {
           if (callback) {
             callback(signer);
           }
-          return signer;
+          this.signer = signer;
+          this.client = await this.createClient();
+
+          return this.client;
         }
       }
     } catch (error) {
@@ -76,37 +100,37 @@ class Signer {
     }
   };
 
-  sendTxs = async (signer, msgs, callback) => {
+  createClient = async () => {
+    const client = await SigningCyberClient.connectWithSigner(
+      CYBER.CYBER_NODE_URL_API,
+      this.signer
+    );
+
+    return client;
+  };
+
+  sendTxs = async (msgs, callback) => {
     try {
-      const [{ address }] = await signer.getAccounts();
-      const gasPrice = new GasPrice(Decimal.fromAtomics(0, 0), 'boot');
-      const gasLimits = { send: 100000 };
-      const client = new SigningCosmosClient(
-        CYBER.CYBER_NODE_URL_LCD,
-        address,
-        signer,
-        gasPrice,
-        gasLimits,
-        BroadcastMode.Sync
-      );
-
-      console.log('client', client)
-
-      const fee = {
-        amount: [],
-        gas: '100000',
-      };
-
-      const response = await client.signAndBroadcast(
-        msgs,
-        fee,
-        CYBER.MEMO_CYBER_SIGNER
-      );
-      console.log('response', response)
-      // if (callback && callback !== null) {
-      //   callback(response);
-      // }
-      // return response;
+      if (this.client !== null) {
+        const [{ address }] = await this.client.signer.getAccounts();
+
+        const fee = {
+          amount: [],
+          gas: '200000',
+        };
+
+        const response = await this.client.signAndBroadcast(
+          address,
+          msgs,
+          fee,
+          CYBER.MEMO_CYBER_SIGNER
+        );
+        console.log('response1', response);
+        if (callback && callback !== null) {
+          callback(response);
+        }
+        return response;
+      }
     } catch (error) {
       console.log(`error`, error);
       return error;
diff --git a/src/containers/testKeplre/index.jsx b/src/containers/testKeplre/index.jsx
index bef31a13a..9d0e01818 100644
--- a/src/containers/testKeplre/index.jsx
+++ b/src/containers/testKeplre/index.jsx
@@ -1,14 +1,25 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
 import { coins } from '@cosmjs/launchpad';
+import { fromAscii, fromBase64 } from '@cosmjs/encoding';
 import { AppContext, AppContextSigner } from '../../context';
 import { CYBER, CYBER_SIGNER } from '../../utils/config';
 const uint8ArrayConcat = require('uint8arrays/concat');
 
+// import Signer from '../signer';
 
-import Signer from '../signer';
+const testData =
+  'eyJ0eXBlVXJsIjoiL2Nvc21vcy5iYW5rLnYxYmV0YTEuTXNnU2VuZCIsInZhbHVlIjp7ImZyb21BZGRyZXNzIjoiYm9zdHJvbTFmcms5azM4cHZwNzB2aGVlemhkZmQ0bnZxbmxzbTlkdzNqOGhscSIsInRvQWRkcmVzcyI6ImJvc3Ryb20xZnJrOWszOHB2cDcwdmhlZXpoZGZkNG52cW5sc205ZHczajhobHEiLCJhbW91bnQiOlt7ImRlbm9tIjoiYm9vdCIsImFtb3VudCI6IjQyIn1dfX0=';
 
 // dune pottery shield bracket shuffle orchard frown mail exercise destroy enroll nothing scheme allow pudding match mass world glow razor that attend blame follow
 
+
+function useQuery() {
+  const { search } = useLocation();
+
+  return React.useMemo(() => new URLSearchParams(search), [search]);
+}
+
 function TestKeplr() {
   const { keplr } = useContext(AppContext);
   const {
@@ -20,61 +31,28 @@ function TestKeplr() {
   } = useContext(AppContextSigner);
 
   const [hashTx, setHashTx] = useState('');
+  const [msgsData, setMsgsData] = useState([]);
+  const search = useQuery();
 
-  // useEffect(() => {
-  //   const seed =
-  //     'dune pottery shield bracket shuffle orchard frown mail exercise destroy enroll nothing scheme allow pudding match mass world glow razor that attend blame follow';
-  //   const seedBase64 = btoa(seed);
-  //   console.log(`seedBase64`, seedBase64);
-
-  //   const string = atob(seedBase64);
-  //   console.log(`string`, string)
-  // }, []);
-
-  // console.log('keplr', keplr);
-  //   cybervaloper15zs0cjct43xs4z4sesxcrynar5mxm82ftahux2;
-
-  const signerTest = async () => {
-    const signer = new Signer();
-    const addT = await signer.generationAccount();
-    console.log(`addT`, addT);
-  };
-
-  const changeValue = () => {
-    updateValueIsVisible(true);
-  };
+  console.log('params', search);
 
-  const sendTxSigner = async () => {
-    if (cyberSigner !== null) {
-      const [{ address }] = await cyberSigner.getAccounts();
+  useEffect(() => {
+    try {
       const msgs = [];
-      msgs.push({
-        type: 'cosmos-sdk/MsgSend',
-        value: {
-          amount: coins(10, 'eul'),
-          from_address: address,
-          to_address: 'cyber1ak2zkkde8zaq3fv8dh8d5hclhm80e9q587wmnz',
-        },
-      });
-
-      updateValueTxs(msgs);
+      const fromBase64Data = fromAscii(fromBase64(testData));
+      msgs.push(JSON.parse(fromBase64Data));
+      setMsgsData(msgs);
+    } catch (error) {
+      console.log('error', error);
     }
-  };
+  }, []);
 
-  const callbackSigner = async (signerCyber) => {
-    console.log(`callbackSigner`, signerCyber);
-    const [{ address, pubkey }] = await signerCyber.getAccounts();
-    const pk = Buffer.from(pubkey).toString('hex');
-    console.log(`callbackSigner address`, address);
-    console.log(`callbackSigner pk`, pk);
-    updateCallbackSigner(null);
-  };
-
-  const restore = () => {
-    updateCallbackSigner(callbackSigner);
-    updateValueIsVisible(true);
-    updateStageSigner(CYBER_SIGNER.STAGE_INIT_ACC);
-  };
+  const sendTxSigner = useCallback(async () => {
+    if (cyberSigner !== null) {
+      console.log('msgsData', msgsData);
+      updateValueTxs(msgsData);
+    }
+  }, [msgsData, cyberSigner]);
 
   return (
     <main className="block-body">
@@ -87,31 +65,6 @@ function TestKeplr() {
         sendTxSigner
       </button>
 
-      <button
-        className="btn"
-        style={{ maxWidth: 200, marginTop: 50 }}
-        onClick={changeValue}
-        type="button"
-      >
-        inViseble
-      </button>
-      <button
-        className="btn"
-        style={{ maxWidth: 200, marginTop: 50 }}
-        onClick={signerTest}
-        type="button"
-      >
-        signerTest
-      </button>
-
-      <button
-        className="btn"
-        style={{ maxWidth: 200, marginTop: 50 }}
-        onClick={restore}
-        type="button"
-      >
-        StateRestore
-      </button>
       <span>{hashTx}</span>
     </main>
   );
diff --git a/src/containers/txs/ActionBarWalletTxs.jsx b/src/containers/txs/ActionBarWalletTxs.jsx
new file mode 100644
index 000000000..6fc5df424
--- /dev/null
+++ b/src/containers/txs/ActionBarWalletTxs.jsx
@@ -0,0 +1,203 @@
+import React, { useContext, useEffect, useCallback, useState } from 'react';
+import {
+  ActionBar as ActionBarContainer,
+  Button,
+} from '@cybercongress/gravity';
+import { AppContext, AppContextSigner } from '../../context';
+import { DEFAULT_GAS_LIMITS, CYBER } from '../../utils/config';
+import {
+  Dots,
+  ActionBarContentText,
+  TransactionSubmitted,
+  Confirmed,
+  TransactionError,
+} from '../../components';
+
+const STAGE_INIT = 0;
+const STAGE_APPROVE = 1;
+const STAGE_CONFIRMING = 2;
+const STAGE_CONFIRMED = 3;
+const STAGE_ERROR = 11;
+
+const fee = {
+  amount: [],
+  gas: DEFAULT_GAS_LIMITS.toString(),
+};
+
+function ActionBarWalletTxs({
+  msgsData,
+  addressActive,
+  updateFnc,
+  txsMsgData,
+}) {
+  const { keplr, jsCyber } = useContext(AppContext);
+  const { cyberSigner, updateValueTxs, updateCallbackSigner } =
+    useContext(AppContextSigner);
+
+  const [stage, setStage] = useState(STAGE_INIT);
+  const [txHash, setTxHash] = useState(null);
+  const [txHeight, setTxHeight] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  useEffect(() => {
+    const confirmTx = async () => {
+      if (jsCyber !== null && txHash !== null) {
+        setStage(STAGE_CONFIRMING);
+        const response = await jsCyber.getTx(txHash);
+
+        console.log('response :>> ', response);
+        if (response && response !== null) {
+          if (response.code === 0) {
+            setStage(STAGE_CONFIRMED);
+            setTxHeight(response.height);
+
+            if (updateFnc) {
+              updateFnc(response.hash);
+            }
+            return;
+          }
+          if (response.code) {
+            setStage(STAGE_ERROR);
+            setTxHeight(response.height);
+            setErrorMessage(response.rawLog);
+            return;
+          }
+        }
+        setTimeout(confirmTx, 1500);
+      }
+    };
+    confirmTx();
+  }, [jsCyber, txHash]);
+
+  const cleatState = () => {
+    setStage(STAGE_INIT);
+    setTxHash(null);
+    setTxHeight(null);
+    setErrorMessage(null);
+  };
+
+  const updateCallbackFnc = (result) => {
+    try {
+      if (result.code === 0) {
+        updateCallbackSigner(null);
+        setTxHash(result.transactionHash);
+      } else {
+        setTxHash(null);
+        setErrorMessage(result.rawLog.toString());
+        setStage(STAGE_ERROR);
+      }
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  const sendTxSigner = useCallback(async () => {
+    if (cyberSigner !== null) {
+      updateCallbackSigner(updateCallbackFnc);
+      updateValueTxs(msgsData);
+      setStage(STAGE_APPROVE);
+    }
+  }, [cyberSigner, msgsData]);
+
+  const sendTxKeplr = useCallback(async () => {
+    try {
+      if (keplr !== null) {
+        setStage(STAGE_APPROVE);
+        const [{ address }] = await keplr.signer.getAccounts();
+        const result = await keplr.signAndBroadcast(
+          address,
+          msgsData,
+          fee,
+          CYBER.MEMO_KEPLR
+        );
+
+        if (result.code === 0) {
+          setTxHash(result.transactionHash);
+        } else {
+          setTxHash(null);
+          setErrorMessage(result.rawLog.toString());
+          setStage(STAGE_ERROR);
+        }
+      }
+    } catch (error) {
+      console.log('error', error);
+      setStage(STAGE_INIT);
+    }
+  }, [keplr, msgsData]);
+
+  const onClickSign = useCallback(() => {
+    if (addressActive !== null) {
+      if (addressActive.keys === 'keplr') {
+        sendTxKeplr();
+      }
+
+      if (addressActive.keys === 'cyberSigner') {
+        sendTxSigner();
+      }
+    }
+  }, [addressActive, msgsData, keplr]);
+
+  if (txsMsgData !== null) {
+    return null;
+  }
+
+  if (msgsData.length === 0 || addressActive === null) {
+    return (
+      <ActionBarContainer>
+        <ActionBarContentText>
+          <Dots />
+        </ActionBarContentText>
+      </ActionBarContainer>
+    );
+  }
+
+  if (stage === STAGE_INIT) {
+    return (
+      <ActionBarContainer>
+        <Button
+          disabled={msgsData.length === 0 || addressActive === null}
+          onClick={onClickSign}
+        >
+          sign message
+        </Button>
+      </ActionBarContainer>
+    );
+  }
+
+  if (stage === STAGE_APPROVE) {
+    return (
+      <ActionBarContainer>
+        <ActionBarContentText>
+          <Dots />
+        </ActionBarContentText>
+      </ActionBarContainer>
+    );
+  }
+
+  if (stage === STAGE_CONFIRMING) {
+    return <TransactionSubmitted />;
+  }
+
+  if (stage === STAGE_CONFIRMED) {
+    return (
+      <Confirmed
+        txHash={txHash}
+        txHeight={txHeight}
+        onClickBtnCloce={() => cleatState()}
+      />
+    );
+  }
+
+  if (stage === STAGE_ERROR && errorMessage !== null) {
+    return (
+      <TransactionError
+        errorMessage={errorMessage}
+        onClickBtn={() => cleatState()}
+      />
+    );
+  }
+
+  return null;
+}
+
+export default ActionBarWalletTxs;
diff --git a/src/containers/txs/informationTxs.jsx b/src/containers/txs/informationTxs.jsx
index cf148d024..66bdb8b67 100644
--- a/src/containers/txs/informationTxs.jsx
+++ b/src/containers/txs/informationTxs.jsx
@@ -6,20 +6,52 @@ import { Link } from 'react-router-dom';
 const dateFormat = require('dateformat');
 const statusTrueImg = require('../../image/ionicons_svg_ios-checkmark-circle.svg');
 const statusFalseImg = require('../../image/ionicons_svg_ios-close-circle.svg');
+const statusUnsignedImg = require('../../image/ionicons_svg_ios-warning.svg');
+
+const checkStatus = (status) => {
+  if (status === true) {
+    return 'Success';
+  }
+
+  if (status === false) {
+    return 'Fail';
+  }
+
+  if (status === 'Unsigned') {
+    return 'Unsigned';
+  }
+
+  return '';
+};
+
+const checkStatusImg = (status) => {
+  if (status === true) {
+    return statusTrueImg;
+  }
+
+  if (status === false) {
+    return statusFalseImg;
+  }
+
+  return statusUnsignedImg;
+};
 
 const InformationTxs = ({ data, messageError, ...props }) => {
   console.log(data);
-  const value = Object.keys(data).map(key => {
+  const value = Object.keys(data).map((key) => {
     let item = '';
     switch (key) {
       case 'height':
-        item = formatNumber(data[key]);
+        item = data[key] > 0 ? formatNumber(data[key]) : '';
         break;
       case 'status':
-        item = data[key] ? 'Success' : 'Fail';
+        item = checkStatus(data[key]);
         break;
       case 'timestamp':
-        item = dateFormat(data[key], 'UTC: dd/mm/yyyy, hh:MM:ss tt "UTC"');
+        item =
+          data[key].length > 0
+            ? dateFormat(data[key], 'UTC: dd/mm/yyyy, hh:MM:ss tt "UTC"')
+            : '';
         break;
       default:
         item = data[key];
@@ -58,7 +90,7 @@ const InformationTxs = ({ data, messageError, ...props }) => {
           {key === 'status' && (
             <img
               style={{ width: '20px', height: '20px', marginRight: '5px' }}
-              src={data[key] ? statusTrueImg : statusFalseImg}
+              src={checkStatusImg(data[key])}
               alt="statusImg"
             />
           )}
diff --git a/src/containers/txs/utils.js b/src/containers/txs/utils.js
new file mode 100644
index 000000000..bd71edd01
--- /dev/null
+++ b/src/containers/txs/utils.js
@@ -0,0 +1,74 @@
+export const checkAddress = (valueAddress, address) => {
+  if (valueAddress !== address) {
+    return address;
+  }
+
+  return valueAddress;
+};
+
+export const parseMsgs = (data, bech32 = '') => {
+  const tempData = [...data];
+  tempData.forEach((item) => {
+    const { typeUrl, value } = item;
+    if (typeUrl) {
+      if (
+        typeUrl.includes('/cyber.graph') ||
+        typeUrl.includes('/cyber.resources')
+      ) {
+        value.neuron = checkAddress(value.neuron, bech32);
+      }
+
+      if (typeUrl.includes('MsgSend')) {
+        value.fromAddress = checkAddress(value.fromAddress, bech32);
+      }
+
+      if (typeUrl.includes('staking') || typeUrl.includes('distribution')) {
+        value.delegatorAddress = checkAddress(value.delegatorAddress, bech32);
+      }
+
+      if (typeUrl.includes('wasm')) {
+        value.sender = checkAddress(value.sender, bech32);
+      }
+
+      if (typeUrl.includes('grid')) {
+        value.source = checkAddress(value.source, bech32);
+      }
+
+      if (typeUrl.includes('MsgVote')) {
+        value.voter = checkAddress(value.voter, bech32);
+      }
+
+      if (typeUrl.includes('MsgSubmitProposal')) {
+        value.proposer = checkAddress(value.proposer, bech32);
+      }
+
+      if (typeUrl.includes('MsgDeposit')) {
+        value.depositor = checkAddress(value.depositor, bech32);
+      }
+
+      if (typeUrl.includes('MsgSwapWithinBatch')) {
+        value.swapRequesterAddress = checkAddress(
+          value.swapRequesterAddress,
+          bech32
+        );
+      }
+
+      if (typeUrl.includes('MsgDepositWithinBatch')) {
+        value.depositorAddress = checkAddress(value.depositorAddress, bech32);
+      }
+
+      if (typeUrl.includes('MsgWithdrawWithinBatch')) {
+        value.withdrawerAddress = checkAddress(value.withdrawerAddress, bech32);
+      }
+
+      if (typeUrl.includes('MsgCreatePool')) {
+        value.poolCreatorAddress = checkAddress(
+          value.poolCreatorAddress,
+          bech32
+        );
+      }
+    }
+  });
+
+  return tempData;
+};
diff --git a/src/containers/txs/wallet.jsx b/src/containers/txs/wallet.jsx
new file mode 100644
index 000000000..9621e0fb1
--- /dev/null
+++ b/src/containers/txs/wallet.jsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect, useContext, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { fromAscii, fromBase64 } from '@cosmjs/encoding';
+import { AppContext, AppContextSigner } from '../../context';
+import useSetActiveAddress from '../../hooks/useSetActiveAddress';
+import InformationTxs from './informationTxs';
+import Msgs from './msgs';
+import { JsonView } from '../wasm/ui/ui';
+import ActionBarWalletTxs from './ActionBarWalletTxs';
+import { getTxsV1beta1 } from '../../utils/search/utils';
+import { parseMsgs } from './utils';
+
+const initValueInformation = {
+  txHash: '',
+  height: '',
+  status: 'Unsigned',
+  timestamp: '',
+  memo: '',
+};
+
+function WalletTxs({ defaultAccount, mobile }) {
+  const param = useParams();
+  const { addressActive } = useSetActiveAddress(defaultAccount);
+  const [msgsData, setMsgsData] = useState([]);
+  const [information, setInformation] = useState(initValueInformation);
+  const [messageError, setMessageError] = useState('');
+  const [txsMsgData, setTxsMsgData] = useState(null);
+
+  useEffect(() => {
+    try {
+      if (param.dataMsg && addressActive !== null) {
+        const { dataMsg } = param;
+        const { bech32 } = addressActive;
+
+        const msgs = [];
+        const fromBase64Data = fromAscii(fromBase64(dataMsg));
+        msgs.push(JSON.parse(fromBase64Data));
+        const reduceMsgs = parseMsgs(msgs, bech32);
+        console.log('reduceMsgs', reduceMsgs);
+        setMsgsData(msgs);
+      }
+    } catch (error) {
+      console.log('error', error);
+    }
+  }, [param, addressActive]);
+
+  const updateFnc = async (hash) => {
+    const response = await getTxsV1beta1(hash);
+    console.log('response', response);
+    if (response !== null && response.tx_response) {
+      let status = false;
+      let rawLog = '';
+      const { code, raw_log, height, txhash, timestamp, tx } =
+        response.tx_response;
+      const { memo } = tx.body;
+      if (code !== undefined) {
+        if (code !== 0) {
+          status = false;
+          rawLog = raw_log;
+        } else {
+          status = true;
+        }
+      }
+      setInformation({ status, memo, height, timestamp, txHash: txhash });
+      setMessageError(rawLog);
+    }
+    if (response !== null && response.tx) {
+      const { messages } = response.tx.body;
+      setTxsMsgData(messages);
+    }
+  };
+
+  return (
+    <div>
+      <main className="block-body">
+        <InformationTxs
+          data={information}
+          messageError={messageError}
+          marginBottom={30}
+        />
+        {msgsData.length > 0 && txsMsgData === null && (
+          <JsonView src={msgsData} strLength={52} />
+        )}
+        {txsMsgData !== null && <Msgs data={txsMsgData} />}
+      </main>
+      {!mobile && (
+        <ActionBarWalletTxs
+          msgsData={msgsData}
+          addressActive={addressActive}
+          updateFnc={updateFnc}
+          txsMsgData={txsMsgData}
+        />
+      )}
+    </div>
+  );
+}
+
+const mapStateToProps = (store) => {
+  return {
+    defaultAccount: store.pocket.defaultAccount,
+    mobile: store.settings.mobile,
+  };
+};
+
+export default connect(mapStateToProps)(WalletTxs);
diff --git a/src/containers/wasm/ui/ui.jsx b/src/containers/wasm/ui/ui.jsx
index 6ca8f5460..24e5ed612 100644
--- a/src/containers/wasm/ui/ui.jsx
+++ b/src/containers/wasm/ui/ui.jsx
@@ -12,6 +12,7 @@ function JsonView({ src, strLength }) {
       displayObjectSize={false}
       collapseStringsAfterLength={strLength ?? 24}
       theme="twilight"
+      style={{ overflow: 'auto' }}
     />
   );
 }
@@ -29,7 +30,9 @@ const FlexWrapCantainer = ({ children, ...props }) => (
 );
 
 const CardCantainer = ({ children, ...props }) => (
-  <div {...props} className={styles.containerCardCantainer}>{children}</div>
+  <div {...props} className={styles.containerCardCantainer}>
+    {children}
+  </div>
 );
 
 const LinkTx = ({ children, txs }) => (
diff --git a/src/context.jsx b/src/context.jsx
index 7ce6867e7..26aae6d94 100644
--- a/src/context.jsx
+++ b/src/context.jsx
@@ -30,6 +30,7 @@ export const getKeplr = async () => {
 
 const valueContext = {
   keplr: null,
+  jsCyber: null,
   ws: null,
 };
 
diff --git a/src/router.jsx b/src/router.jsx
index 52112acf9..300a7f049 100644
--- a/src/router.jsx
+++ b/src/router.jsx
@@ -60,6 +60,7 @@ import {
 import Help from './containers/help';
 import Assets from './containers/assets';
 import MainPartal from './containers/portal/mainPortal';
+import WalletTxs from './containers/txs/wallet';
 
 import useIpfsFactory from './useIpfsFactory';
 
@@ -155,6 +156,7 @@ function AppRouter({
         <Route exact path="/contracts" component={DashboardPage} />
         <Route path="/contracts/:contractAddress" component={ContractPage} />
 
+        <Route path="/wallet/:dataMsg" component={WalletTxs} />
         <Route path="/help" component={Help} />
         <Route path="/assets" component={Assets} />
       </Switch>
diff --git a/src/utils/msgs.js b/src/utils/msgs.js
new file mode 100644
index 000000000..624c7001e
--- /dev/null
+++ b/src/utils/msgs.js
@@ -0,0 +1,282 @@
+import { toUtf8 } from '@cosmjs/encoding';
+
+class Msgs {
+  cyberlink = (neuron, from, to) => {
+    const cyberlinkMsg = {
+      typeUrl: '/cyber.graph.v1beta1.MsgCyberlink',
+      value: {
+        neuron,
+        links: [{ from, to }],
+      },
+    };
+
+    return cyberlinkMsg;
+  };
+
+  // Resources module
+
+  investmint = async (senderAddress, amount, resource, length) => {
+    const investmintMsg = {
+      typeUrl: '/cyber.resources.v1beta1.MsgInvestmint',
+      value: {
+        neuron: senderAddress,
+        amount,
+        resource,
+        length: length.toString(),
+      },
+    };
+    return investmintMsg;
+  };
+
+  sendTokens = (senderAddress, recipientAddress, amount) => {
+    const sendMsg = {
+      typeUrl: '/cosmos.bank.v1beta1.MsgSend',
+      value: {
+        fromAddress: senderAddress,
+        toAddress: recipientAddress,
+        amount,
+      },
+    };
+    return sendMsg;
+  };
+
+  // Distribution module
+
+  delegateTokens = async (delegatorAddress, validatorAddress, amount) => {
+    const delegateMsg = {
+      typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
+      value: {
+        delegatorAddress,
+        validatorAddress,
+        amount,
+      },
+    };
+    return delegateMsg;
+  };
+
+  redelegateTokens = async (
+    delegatorAddress,
+    validatorSrcAddress,
+    validatorDstAddress,
+    amount
+  ) => {
+    const redelegateMsg = {
+      typeUrl: '/cosmos.staking.v1beta1.MsgBeginRedelegate',
+      value: {
+        delegatorAddress,
+        validatorSrcAddress,
+        validatorDstAddress,
+        amount,
+      },
+    };
+    return redelegateMsg;
+  };
+
+  undelegateTokens = async (delegatorAddress, validatorAddress, amount) => {
+    const undelegateMsg = {
+      typeUrl: '/cosmos.staking.v1beta1.MsgUndelegate',
+      value: {
+        delegatorAddress,
+        validatorAddress,
+        amount,
+      },
+    };
+    return undelegateMsg;
+  };
+
+  withdrawRewards = async (delegatorAddress, validatorAddress) => {
+    const withdrawDelegatorRewardMsg = {
+      typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+      value: {
+        delegatorAddress,
+        validatorAddress,
+      },
+    };
+    return withdrawDelegatorRewardMsg;
+  };
+
+  withdrawAllRewards = async (delegatorAddress, validatorAddresses) => {
+    const msgs = validatorAddresses.map((validatorAddress) => {
+      return {
+        typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+        value: {
+          delegatorAddress,
+          validatorAddress,
+        },
+      };
+    });
+
+    return msgs;
+  };
+
+  executeArray = async (senderAddress, contractAddress, msg, funds) => {
+    const msgs = msg.map((item) => ({
+      typeUrl: '/cosmwasm.wasm.v1.MsgExecuteContract',
+      value: {
+        sender: senderAddress,
+        contract: contractAddress,
+        msg: toUtf8(JSON.stringify(item)),
+        funds: [...(funds || [])],
+      },
+    }));
+
+    return msgs;
+  };
+
+  voteProposal = async (voter, proposalId, option) => {
+    const voteMsg = {
+      typeUrl: '/cosmos.gov.v1beta1.MsgVote',
+      value: {
+        proposalId,
+        voter,
+        option,
+      },
+    };
+    return voteMsg;
+  };
+
+  submitProposal = async (proposer, content, initialDeposit) => {
+    const sumbitProposalMsg = {
+      typeUrl: '/cosmos.gov.v1beta1.MsgSubmitProposal',
+      value: {
+        content: {
+          typeUrl: content.typeUrl,
+          value: Uint8Array.from(content.value),
+        },
+        initialDeposit,
+        proposer,
+      },
+    };
+    return sumbitProposalMsg;
+  };
+
+  depositProposal = async (depositor, proposalId, amount) => {
+    const depositMsg = {
+      typeUrl: '/cosmos.gov.v1beta1.MsgDeposit',
+      value: {
+        depositor,
+        proposalId,
+        amount,
+      },
+    };
+    return depositMsg;
+  };
+
+  // Liquidity module
+
+  swapWithinBatch = async (
+    swapRequesterAddress,
+    poolId,
+    swapTypeId,
+    offerCoin,
+    demandCoinDenom,
+    offerCoinFee,
+    orderPrice
+  ) => {
+    const swapWithinBatchMsg = {
+      typeUrl: '/tendermint.liquidity.v1beta1.MsgSwapWithinBatch',
+      value: {
+        swapRequesterAddress,
+        poolId,
+        swapTypeId,
+        offerCoin,
+        demandCoinDenom,
+        offerCoinFee,
+        orderPrice,
+      },
+    };
+    // console.log(swapWithinBatchMsg);
+    return swapWithinBatchMsg;
+  };
+
+  depositWithinBatch = async (depositorAddress, poolId, depositCoins) => {
+    const depositWithinBatchMsg = {
+      typeUrl: '/tendermint.liquidity.v1beta1.MsgDepositWithinBatch',
+      value: {
+        depositorAddress,
+        poolId,
+        depositCoins,
+      },
+    };
+    // console.log(depositWithinBatchMsg);
+    return depositWithinBatchMsg;
+  };
+
+  withdwawWithinBatch = async (withdrawerAddress, poolId, poolCoin) => {
+    const withdrawWithinBatchMsg = {
+      typeUrl: '/tendermint.liquidity.v1beta1.MsgWithdrawWithinBatch',
+      value: {
+        withdrawerAddress,
+        poolId,
+        poolCoin,
+      },
+    };
+    // console.log(withdrawWithinBatchMsg);
+    return withdrawWithinBatchMsg;
+  };
+
+  createPool = async (poolCreatorAddress, poolTypeId, depositCoins) => {
+    const createPoolMsg = {
+      typeUrl: '/tendermint.liquidity.v1beta1.MsgCreatePool',
+      value: {
+        poolCreatorAddress,
+        poolTypeId,
+        depositCoins,
+      },
+    };
+    // console.log(createPoolMsg);
+    return createPoolMsg;
+  };
+
+  // Energy module
+
+  createEnergyRoute = async (senderAddress, destination, name) => {
+    const createEnergyRouteMsg = {
+      typeUrl: '/cyber.grid.v1beta1.MsgCreateRoute',
+      value: {
+        source: senderAddress,
+        destination,
+        name,
+      },
+    };
+    return createEnergyRouteMsg;
+  };
+
+  editEnergyRoute = async (senderAddress, destination, value) => {
+    const editEnergyRouteMsg = {
+      typeUrl: '/cyber.grid.v1beta1.MsgEditRoute',
+      value: {
+        source: senderAddress,
+        destination,
+        value,
+      },
+    };
+    return editEnergyRouteMsg;
+  };
+
+  deleteEnergyRoute = async (senderAddress, destination) => {
+    const deleteEnergyRouteMsg = {
+      typeUrl: '/cyber.grid.v1beta1.MsgDeleteRoute',
+      value: {
+        source: senderAddress,
+        destination,
+      },
+    };
+    return deleteEnergyRouteMsg;
+  };
+
+  editEnergyRouteName = async (senderAddress, destination, name) => {
+    const editEnergyRouteNameMsg = {
+      typeUrl: '/cyber.grid.v1beta1.MsgEditRouteName',
+      value: {
+        source: senderAddress,
+        destination,
+        name,
+      },
+    };
+
+    return editEnergyRouteNameMsg;
+  };
+}
+
+export default Msgs;
diff --git a/src/utils/search/utils.js b/src/utils/search/utils.js
index 249c78cf0..d204e0726 100644
--- a/src/utils/search/utils.js
+++ b/src/utils/search/utils.js
@@ -607,6 +607,19 @@ export const getTxs = async (txs) => {
   }
 };
 
+export const getTxsV1beta1 = async (txs) => {
+  try {
+    const response = await axios({
+      method: 'get',
+      url: `${CYBER_NODE_URL_LCD}/cosmos/tx/v1beta1/txs/${txs}`,
+    });
+    return response.data;
+  } catch (e) {
+    console.log(e);
+    return null;
+  }
+};
+
 export const getValidatorsInfo = async (address) => {
   try {
     const response = await axios({

From a3c3393c728e438a09f4268ec448d51ebeb0033c Mon Sep 17 00:00:00 2001
From: dimakorzhovnik <korzhovnik.dima@gmail.com>
Date: Tue, 6 Sep 2022 19:00:13 +0300
Subject: [PATCH 20/20] fix(mint): added suport syberSigner

---
 package.json                        |  2 +-
 src/containers/mint/actionBar.jsx   | 10 +++---
 src/containers/mint/index.jsx       | 47 +++++++++++------------------
 src/containers/mint/useGetSlots.jsx | 18 ++++++++---
 4 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 602d0fa65..6c86fe2ab 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@cosmjs/proto-signing": "0.28.4",
     "@cosmjs/stargate": "0.28.4",
     "@cosmjs/tendermint-rpc": "0.28.4",
-    "@cybercongress/cyber-js": "0.3.0",
+    "@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",
diff --git a/src/containers/mint/actionBar.jsx b/src/containers/mint/actionBar.jsx
index ae7be5414..15294174a 100644
--- a/src/containers/mint/actionBar.jsx
+++ b/src/containers/mint/actionBar.jsx
@@ -95,13 +95,13 @@ function ActionBar({
   }, [jsCyber, txHash]);
 
   const investmint = async () => {
-    if (keplr !== null) {
+    if (keplr !== null && addressActive !== null) {
       const [{ address }] = await keplr.signer.getAccounts();
       const fee = {
         amount: [],
         gas: DEFAULT_GAS_LIMITS.toString(),
       };
-      if (addressActive === address) {
+      if (addressActive.bech32 === address) {
         const response = await keplr.investmint(
           address,
           coin(parseFloat(value), 'hydrogen'),
@@ -131,13 +131,13 @@ function ActionBar({
     if (cyberSigner !== null) {
       const dataMsgs = new Msgs();
       const [{ address }] = await cyberSigner.signer.getAccounts();
-
-      const msgs = dataMsgs.investmint(
+      const msgs = await dataMsgs.investmint(
         address,
         coin(parseFloat(value), 'hydrogen'),
         selected,
         parseFloat(BASE_VESTING_TIME * valueDays)
       );
+      console.log('msgs', msgs)
       updateValueTxs([msgs]);
       updateCallbackSigner(updateCallbackFnc);
     }
@@ -176,7 +176,7 @@ function ActionBar({
     );
   }
 
-  if (jsCyber === null || keplr === null) {
+  if (jsCyber === null) {
     return (
       <ActionBarContainer>
         <Dots big />
diff --git a/src/containers/mint/index.jsx b/src/containers/mint/index.jsx
index fca89bb9e..69b022616 100644
--- a/src/containers/mint/index.jsx
+++ b/src/containers/mint/index.jsx
@@ -24,6 +24,7 @@ import useGetSlots from './useGetSlots';
 import { TableSlots } from '../energy/ui';
 import TabBtnList from './tabLinsBtn';
 import ActionBar from './actionBar';
+import useSetActiveAddress from '../../hooks/useSetActiveAddress';
 
 const INIT_STAGE = 0;
 const TSX_SEND = 1;
@@ -75,7 +76,8 @@ const returnColorDot = (marks) => {
 
 function Mint({ defaultAccount }) {
   const { jsCyber } = useContext(AppContext);
-  const [addressActive, setAddressActive] = useState(null);
+  const { addressActive } = useSetActiveAddress(defaultAccount);
+  // const [addressActive, setAddressActive] = useState(null);
   const [updateAddress, setUpdateAddress] = useState(0);
   // const { balance } = useGetBalance(addressActive, updateAddress);
   const { slotsData, vested, loadingAuthAccounts, originalVesting } =
@@ -96,7 +98,7 @@ function Mint({ defaultAccount }) {
       let amountHydrogen = 0;
       if (jsCyber !== null && addressActive !== null) {
         const responseBalance = await jsCyber.getBalance(
-          addressActive,
+          addressActive.bech32,
           'hydrogen'
         );
         if (responseBalance.amount) {
@@ -110,39 +112,26 @@ function Mint({ defaultAccount }) {
 
   useEffect(() => {
     const getParam = async () => {
-      const responseResourcesParams = await jsCyber.resourcesParams();
-      if (
-        responseResourcesParams.params &&
-        Object.keys(responseResourcesParams.params).length > 0
-      ) {
-        console.log(`responseResourcesParams`, responseResourcesParams);
-        const { params } = responseResourcesParams;
-        setResourcesParams((item) => ({ ...item, ...params }));
-      }
+      if (jsCyber !== null) {
+        const responseResourcesParams = await jsCyber.resourcesParams();
+        if (
+          responseResourcesParams.params &&
+          Object.keys(responseResourcesParams.params).length > 0
+        ) {
+          console.log(`responseResourcesParams`, responseResourcesParams);
+          const { params } = responseResourcesParams;
+          setResourcesParams((item) => ({ ...item, ...params }));
+        }
 
-      const responseGetHeight = await jsCyber.getHeight();
-      if (responseGetHeight > 0) {
-        setHeight(responseGetHeight);
+        const responseGetHeight = await jsCyber.getHeight();
+        if (responseGetHeight > 0) {
+          setHeight(responseGetHeight);
+        }
       }
     };
     getParam();
   }, [jsCyber]);
 
-  useEffect(() => {
-    const { account } = defaultAccount;
-    let addressPocket = null;
-    if (
-      account !== null &&
-      Object.prototype.hasOwnProperty.call(account, 'cyber')
-    ) {
-      const { keys, bech32 } = account.cyber;
-      if (keys === 'keplr' || keys === 'cyberSigner') {
-        addressPocket = bech32;
-      }
-    }
-    setAddressActive(addressPocket);
-  }, [defaultAccount.name]);
-
   useEffect(() => {
     let vestedTokens = 0;
     let maxValue = 0;
diff --git a/src/containers/mint/useGetSlots.jsx b/src/containers/mint/useGetSlots.jsx
index 1050089a9..cf3ab5717 100644
--- a/src/containers/mint/useGetSlots.jsx
+++ b/src/containers/mint/useGetSlots.jsx
@@ -47,14 +47,25 @@ function timeSince(timeMS) {
   return `${Math.floor(seconds)} seconds`;
 }
 
-function useGetSlots(addressActive, updateAddress) {
+function useGetSlots(address, updateAddress) {
   const { jsCyber } = useContext(AppContext);
+  const [addressActive, setAddressActive] = useState(null);
   const [slotsData, setSlotsData] = useState([]);
   const [loadingAuthAccounts, setLoadingAuthAccounts] = useState(true);
   const [originalVesting, setOriginalVesting] = useState(initStateVested);
   const [balacesResource, setBalacesResource] = useState(initBalacesResource);
   const [vested, setVested] = useState(initStateVested);
 
+  useEffect(() => {
+    if (address !== null) {
+      if (address.bech32) {
+        setAddressActive(address.bech32);
+      } else {
+        setAddressActive(address);
+      }
+    }
+  }, [address]);
+
   useEffect(() => {
     const getAuth = async () => {
       setLoadingAuthAccounts(true);
@@ -71,9 +82,8 @@ function useGetSlots(addressActive, updateAddress) {
         const getAccount = await authAccounts(addressActive);
         if (getAccount !== null && getAccount.result.value.vesting_periods) {
           const { vesting_periods: vestingPeriods } = getAccount.result.value;
-          const {
-            original_vesting: originalVestingAmount,
-          } = getAccount.result.value.base_vesting_account;
+          const { original_vesting: originalVestingAmount } =
+            getAccount.result.value.base_vesting_account;
           const { start_time: startTime } = getAccount.result.value;
 
           const balances = getCalculationBalance(originalVestingAmount);