feat(tauri-app): switched signer from modal to /sign page

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "cyb",
-    "version": "0.1.1"
+    "version": "0.1.2"
   },
   "tauri": {
     "allowlist": {

src/components/appMenu/AppMenu.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { useLocation, NavLink } from 'react-router-dom';
-import styles from './AppMenu.module.scss';
 import { Pane } from '@cybercongress/gravity';
 import cx from 'classnames';
+import { useEffect, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
 import { MenuItem, MenuItems } from 'src/containers/application/AppMenu';
+import { v4 as uuidv4 } from 'uuid';
+import styles from './AppMenu.module.scss';
 
 interface Props {
   item: MenuItem | MenuItem['subItems'][0];

src/components/ledger/stageActionBar.tsx

@@ -406,12 +406,12 @@ export function RewardsDelegators({
 }
 
 interface ConnectAddressProps {
-  selectMethodFunc: (method: ConnectMethod) => void,
-  selectMethod: ConnectMethod | '',
-  selectNetwork: string,
-  connectAddress:() => void,
-  keplr: Option<OfflineSigner>,
-  onClickBack: () => void,
+  selectMethodFunc: (method: ConnectMethod) => void;
+  selectMethod: ConnectMethod | '';
+  selectNetwork: string;
+  connectAddress: () => void;
+  keplr: Option<OfflineSigner>;
+  onClickBack: () => void;
 }
 
 export function ConnectAddress({
@@ -442,14 +442,13 @@ export function ConnectAddress({
         )}
 
         {/* {(!keplr || window.__TAURI__) && ( */}
-        {(
-          <ButtonIcon
-            onClick={() => selectMethodFunc('wallet')}
-            active={selectMethod === 'wallet'}
-            img={imgWallet}
-            text="wallet"
-          />
-        )}
+
+        <ButtonIcon
+          onClick={() => selectMethodFunc('wallet')}
+          active={selectMethod === 'wallet'}
+          img={imgWallet}
+          text="wallet"
+        />
 
         {/* {!keplr && !window.__TAURI__ && (
           <LinkWindow to="https://www.keplr.app/">

src/containers/Search/ActionBarContainer.tsx

@@ -1,27 +1,28 @@
 /* eslint-disable */
+import { ActionBar, Pane } from '@cybercongress/gravity';
 import React, { Component } from 'react';
-import { Pane, ActionBar } from '@cybercongress/gravity';
-import { connect } from 'react-redux';
+import { ConnectedProps, connect } from 'react-redux';
 import {
-  TransactionSubmitted,
+  ActionBarContentText,
+  ButtonImgText,
   Confirmed,
+  Dots,
   StartStageSearchActionBar,
   TransactionError,
-  ActionBarContentText,
-  Dots,
-  ButtonImgText,
+  TransactionSubmitted,
 } from '../../components';
 
 import { getTxs } from '../../utils/search/utils';
 
-import { LEDGER } from '../../utils/config';
 import { PATTERN_IPFS_HASH } from 'src/constants/patterns';
-import { trimString } from '../../utils/utils';
+import { SenseApi } from 'src/contexts/backend/services/senseApi';
 import withIpfsAndKeplr from 'src/hocs/withIpfsAndKeplr';
-import { DefaultAccount } from 'src/types/defaultAccount';
+import { setActionBarState } from 'src/redux/reducers/signer';
+import type { RootState } from 'src/redux/store';
 import { BackgroundWorker } from 'src/services/backend/workers/background/worker';
-import { SenseApi } from 'src/contexts/backend/services/senseApi';
 import { sendCyberlink } from 'src/services/neuron/neuronApi';
+import { LEDGER } from '../../utils/config';
+import { trimString } from '../../utils/utils';
 
 const imgKeplr = require('../../image/keplr-icon.svg');
 const imgLedger = require('../../image/ledger.svg');
@@ -40,9 +41,7 @@ const STAGE_IPFS_HASH = 3.1;
 const STAGE_KEPLR_APPROVE = 3.2;
 
 // generated
-interface Props {
-  defaultAccount: DefaultAccount;
-
+interface Props extends ConnectedProps<typeof connector> {
   textBtn?: string;
   placeholder?: string;
   rankLink?: string;
@@ -59,7 +58,7 @@ class ActionBarContainer extends Component<Props, any> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      stage: STAGE_INIT,
+      stage: this.props.actionBarState ?? STAGE_INIT,
       addressLocalStor: null,
       contentHash: '',
       txHeight: null,
@@ -83,6 +82,7 @@ class ActionBarContainer extends Component<Props, any> {
     const { defaultAccount } = this.props;
 
     if (stage === STAGE_IPFS_HASH) {
+      debugger;
       if (toCid !== null && fromCid !== null) {
         this.generateTx();
       }
@@ -168,6 +168,7 @@ class ActionBarContainer extends Component<Props, any> {
       this.setState({
         stage: STAGE_KEPLR_APPROVE,
       });
+      this.props.setActionBarState(STAGE_KEPLR_APPROVE);
       if (signer && signingClient) {
         const { address } = (await signer.getAccounts())[0];
 
@@ -430,10 +431,14 @@ class ActionBarContainer extends Component<Props, any> {
   }
 }
 
-const mapStateToProps = (store) => {
-  return {
-    defaultAccount: store.pocket.defaultAccount,
-  };
-};
+const connector = connect(
+  (state: RootState) => ({
+    defaultAccount: state.pocket.defaultAccount,
+    actionBarState: state.signer.actionBarState,
+  }),
+  { setActionBarState }
+);
+
+const ActionBarHOC = withIpfsAndKeplr(connector(ActionBarContainer));
 
-export default withIpfsAndKeplr(connect(mapStateToProps)(ActionBarContainer));
+export default ActionBarHOC;

src/containers/Validators/ActionBarContainer.tsx

@@ -169,7 +169,6 @@ function ActionBarContainer({
   const { signer, signingClient } = useSigningClient();
   const { validators: validatorsAll } = useGetHeroes();
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
   const [stage, setStage] = useState(STAGE_INIT);
   const [txType, setTxType] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
@@ -361,10 +360,6 @@ function ActionBarContainer({
     return false;
   }, [balance]);
 
-  const handleHistory = (to) => {
-    navigate(to);
-  };
-
   const amountChangeHandler = (values: string) => {
     setAmount(values);
   };

src/containers/application/App.tsx

@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { Link, Outlet, matchPath, useLocation } from 'react-router-dom';
+import {
+  Link,
+  Outlet,
+  matchPath,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 
 import MainLayout from 'src/layouts/Main';
 import { initPocket } from 'src/redux/features/pocket';
@@ -11,15 +17,14 @@ import { AdviserColors } from 'src/features/adviser/Adviser/Adviser';
 import { useAdviser } from 'src/features/adviser/context';
 import { getPassport } from 'src/features/passport/passports.redux';
 import { routes } from 'src/routes';
-import AdviserContainer from '../../features/adviser/AdviserContainer';
 
 import useSenseManager from 'src/features/sense/ui/useSenseManager';
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
-import styles from './styles.scss';
-
-// eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
 import { initCyblog } from 'src/utils/logging/bootstrap';
-import SignerModal from './SignerModal';
+import { setNavigate } from 'src/utils/shareNavigation';
+import AdviserContainer from 'src/features/adviser/AdviserContainer';
+
+import styles from './styles.scss';
 
 export const PORTAL_ID = 'portal';
 
@@ -40,11 +45,16 @@ function App() {
   useSenseManager();
 
   const { ipfsError } = useBackend();
+  const navigate = useNavigate();
 
   useEffect(() => {
     dispatch(initPocket());
   }, []);
 
+  useEffect(() => {
+    setNavigate(navigate);
+  }, [navigate]);
+
   useEffect(() => {
     if (!address || !queryClient) {
       return;
@@ -111,8 +121,6 @@ function App() {
 
         {location.pathname !== '/' && <AdviserContainer />}
 
-        <SignerModal />
-
         <Outlet />
       </>
     </MainLayout>

src/contexts/signerClient.tsx

@@ -15,6 +15,7 @@ import usePrevious from 'src/hooks/usePrevious';
 import { addAddressPocket, setDefaultAccount } from 'src/redux/features/pocket';
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
 import { Option } from 'src/types';
+import { CybSignerClient } from 'src/utils/CybSignerClient';
 import configKeplr, { getKeplr } from 'src/utils/keplrUtils';
 import { getOfflineSigner } from 'src/utils/offlineSigner';
 import { accountsKeplr } from 'src/utils/utils';
@@ -24,18 +25,16 @@ import { accountsKeplr } from 'src/utils/utils';
 // };
 
 type SignerClientContextType = {
-  readonly signingClient: Option<SigningCyberClient>;
+  readonly signingClient: Option<CybSignerClient>;
   readonly signer: Option<OfflineSigner>;
   readonly signerReady: boolean;
   initSigner: () => void;
   setSigner(signer: Option<OfflineSigner>): void;
 };
 
-async function createClient(
-  signer: OfflineSigner
-): Promise<SigningCyberClient> {
+async function createClient(signer: OfflineSigner): Promise<CybSignerClient> {
   const options = { prefix: BECH32_PREFIX };
-  const client = await SigningCyberClient.connectWithSigner(
+  const client = await CybSignerClient.connectWithSigner(
     RPC_URL,
     signer,
     options
@@ -154,6 +153,7 @@ function SigningClientProvider({ children }: { children: React.ReactNode }) {
 
           setSigner(signer);
           setSigningClient(clientJs);
+          setSignerReady(true);
           console.log('Signing client init success');
         }
       } catch (e) {

src/features/adviser/AdviserContainer.tsx

@@ -1,8 +1,8 @@
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import Adviser from './Adviser/Adviser';
-import { useAdviser } from './context';
 import styles from './AdviserContainer.module.scss';
-import { useEffect } from 'react';
+import { useAdviser } from './context';
 
 function AdviserContainer() {
   const { content, isOpen, setAdviser, setIsOpen, color } = useAdviser();

src/features/passport/passports.redux.ts

@@ -7,8 +7,8 @@ import {
 import { queryPassportContract } from 'src/services/soft.js/api/passport';
 import { Citizenship } from 'src/types/citizenship';
 import { CyberClient } from '@cybercongress/cyber-js';
-import { RootState } from 'src/redux/store';
-import { AppThunk } from 'src/redux/types';
+import type { RootState } from 'src/redux/store';
+import type { AppThunk } from 'src/redux/types';
 import { selectCurrentAddress } from 'src/redux/features/pocket';
 import { Accounts } from 'src/types/defaultAccount';
 import { PASSPORT_NOT_EXISTS_ERROR } from './constants';