feat(app): keys for secrets

package.json

@@ -192,7 +192,7 @@
     "core-js": "^3.30.0",
     "crypto": "^1.0.1",
     "cyb-cozo-lib-wasm": "^0.7.145",
-    "cyb-rune-wasm": "^0.0.82",
+    "cyb-rune-wasm": "^0.0.84",
     "datastore-core": "^9.2.3",
     "datastore-idb": "^2.1.4",
     "dateformat": "^3.0.3",

src/components/ledger/stageActionBar.jsx

@@ -5,6 +5,8 @@ import { ActionBar, Pane, Text } from '@cybercongress/gravity';
 import { BondStatus } from 'cosmjs-types/cosmos/staking/v1beta1/staking';
 import { useBackend } from 'src/contexts/backend/backend';
 import { CHAIN_ID, BASE_DENOM } from 'src/constants/config';
+import { KEY_TYPE } from 'src/pages/Keys/types';
+
 import { ContainetLedger } from './container';
 import { Dots } from '../ui/Dots';
 import Account from '../account/account';
@@ -22,6 +24,7 @@ import AddFileButton from '../buttons/AddFile/AddFile';
 
 const imgKeplr = require('../../image/keplr-icon.svg');
 const imgRead = require('../../image/duplicate-outline.svg');
+const imgSecrets = require('../../image/secrets.svg');
 
 const T = new LocalizedStrings(i18n);
 
@@ -405,24 +408,24 @@ export function ConnectAddress({
   selectMethodFunc,
   selectMethod,
   selectNetwork,
-  connctAddress,
+  connectAddress,
   keplr,
   onClickBack,
 }) {
   return (
     <ActionBarContainer
       button={{
         disabled: !selectNetwork || !selectMethod,
-        text: 'Connect',
-        onClick: connctAddress,
+        text: selectMethod === KEY_TYPE.secrets ? 'Add' : 'Connect',
+        onClick: connectAddress,
       }}
       onClickBack={onClickBack}
     >
       <Pane display="flex" alignItems="center" justifyContent="center" flex={1}>
         {keplr ? (
           <ButtonIcon
-            onClick={() => selectMethodFunc('keplr')}
-            active={selectMethod === 'keplr'}
+            onClick={() => selectMethodFunc(KEY_TYPE.keplr)}
+            active={selectMethod === KEY_TYPE.keplr}
             img={imgKeplr}
             text="keplr"
           />
@@ -439,11 +442,17 @@ export function ConnectAddress({
         )}
 
         <ButtonIcon
-          onClick={() => selectMethodFunc('read-only')}
-          active={selectMethod === 'read-only'}
+          onClick={() => selectMethodFunc(KEY_TYPE.readOnly)}
+          active={selectMethod === KEY_TYPE.readOnly}
           img={imgRead}
           text="read-only"
         />
+        <ButtonIcon
+          onClick={() => selectMethodFunc(KEY_TYPE.secrets)}
+          active={selectMethod === KEY_TYPE.secrets}
+          img={imgSecrets}
+          text="secrets"
+        />
       </Pane>
       <span style={{ fontSize: '18px' }}>in</span>
       <Pane display="flex" alignItems="center" justifyContent="center" flex={1}>

src/pages/Keys/ActionBar/actionBar.tsx

@@ -10,6 +10,8 @@ import { deleteAddress } from 'src/redux/features/pocket';
 import BroadcastChannelSender from 'src/services/backend/channels/BroadcastChannelSender';
 import ActionBarConnect from './actionBarConnect';
 import ActionBarKeplr from './actionBarKeplr';
+import { KEY_LIST_TYPE, KEY_TYPE } from '../types';
+import { removeSecret } from 'src/redux/reducers/scripting';
 
 const STAGE_INIT = 1;
 const STAGE_CONNECT = 2;
@@ -40,9 +42,8 @@ type Props = {
   selectAccount: any;
 
   hoverCard?: string;
-  refreshTweet?: any;
-  updateTweetFunc?: any;
   updateAddress: () => void;
+  keyType: string;
 
   selectedAddress?: string;
 
@@ -58,9 +59,7 @@ function ActionBar({
   selectCard,
   selectAccount,
   hoverCard,
-  // actionBar tweet
-  refreshTweet,
-  updateTweetFunc,
+  keyType,
   selectedAddress,
   // global props
   updateAddress,
@@ -184,39 +183,28 @@ function ActionBar({
     </Button>
   );
 
+  const onDeleteClick = () => {
+    if (!selectedAddress) {
+      return;
+    }
+
+    if (keyType === KEY_LIST_TYPE.key) {
+      dispatch(deleteAddress(selectedAddress));
+      updateAddress();
+    }
+
+    dispatch(removeSecret({ key: selectedAddress }));
+  };
+
   if (selectedAddress) {
     return (
       <ActionBarGravity>
         <Pane display="flex">
           {defaultAccount.account?.cyber?.bech32 !== selectedAddress &&
+            keyType === KEY_LIST_TYPE.key &&
             buttonActivate}
 
-          <Button
-            onClick={() => {
-              dispatch(deleteAddress(selectedAddress));
-              updateAddress();
-            }}
-          >
-            Delete
-          </Button>
-        </Pane>
-      </ActionBarGravity>
-    );
-  }
-
-  if (typeActionBar === '' && stage === STAGE_INIT) {
-    return (
-      <ActionBarGravity>
-        <Pane display="flex">
-          {buttonConnect}
-          {/* {defaultAccounts !== null && defaultAccounts.cyber && (
-            <Button
-              style={{ margin: '0 10px' }}
-              onClick={() => onClickDefaultAccountSend()}
-            >
-              Send
-            </Button>
-          )} */}
+          <Button onClick={onDeleteClick}>Delete</Button>
         </Pane>
       </ActionBarGravity>
     );
@@ -233,47 +221,66 @@ function ActionBar({
     );
   }
 
-  if (typeActionBar === 'noCyber' && stage === STAGE_INIT) {
-    return (
-      <ActionBarGravity>
-        <Pane>
-          {connect && buttonConnect}
-          {makeActive && buttonActivate}
-        </Pane>
-      </ActionBarGravity>
-    );
-  }
+  if (stage === STAGE_INIT) {
+    if (typeActionBar === '') {
+      return (
+        <ActionBarGravity>
+          <Pane display="flex">
+            {buttonConnect}
+            {/* {defaultAccounts !== null && defaultAccounts.cyber && (
+              <Button
+                style={{ margin: '0 10px' }}
+                onClick={() => onClickDefaultAccountSend()}
+              >
+                Send
+              </Button>
+            )} */}
+          </Pane>
+        </ActionBarGravity>
+      );
+    }
 
-  if (typeActionBar === 'keplr' && stage === STAGE_INIT) {
-    return (
-      <ActionBarGravity>
-        <Pane>
-          {connect && buttonConnect}
-          {keplr && (
+    if (typeActionBar === 'noCyber') {
+      return (
+        <ActionBarGravity>
+          <Pane>
+            {connect && buttonConnect}
+            {makeActive && buttonActivate}
+          </Pane>
+        </ActionBarGravity>
+      );
+    }
+    if (typeActionBar === KEY_TYPE.keplr) {
+      return (
+        <ActionBarGravity>
+          <Pane>
+            {connect && buttonConnect}
+            {keplr && (
+              <ButtonImgText
+                img={imgKeplr}
+                onClick={() => setStage(STAGE_SEND_KEPLR)}
+              />
+            )}
+            {makeActive && buttonActivate}
+          </Pane>
+        </ActionBarGravity>
+      );
+    }
+
+    if (typeActionBar === KEY_TYPE.readOnly) {
+      return (
+        <ActionBarGravity>
+          <Pane>
+            {connect && buttonConnect}
             <ButtonImgText
-              img={imgKeplr}
-              onClick={() => setStage(STAGE_SEND_KEPLR)}
+              img={imgRead}
+              onClick={() => setStage(STAGE_SEND_READ_ONLY)}
             />
-          )}
-          {makeActive && buttonActivate}
-        </Pane>
-      </ActionBarGravity>
-    );
-  }
-
-  if (typeActionBar === 'read-only' && stage === STAGE_INIT) {
-    return (
-      <ActionBarGravity>
-        <Pane>
-          {connect && buttonConnect}
-          <ButtonImgText
-            img={imgRead}
-            onClick={() => setStage(STAGE_SEND_READ_ONLY)}
-          />
-          {makeActive && buttonActivate}
-        </Pane>
-      </ActionBarGravity>
-    );
+            {makeActive && buttonActivate}
+          </Pane>
+        </ActionBarGravity>
+      );
+    }
   }
 
   if (stage === STAGE_SEND_KEPLR) {

src/pages/Keys/ActionBar/actionBarConnect.tsx

@@ -15,11 +15,14 @@ import { useDispatch } from 'react-redux';
 import { addAddressPocket } from 'src/redux/features/pocket';
 import { AccountValue } from 'src/types/defaultAccount';
 import { CHAIN_ID } from 'src/constants/config';
+import { KEY_TYPE } from '../types';
+import ActionBarSecrets from './actionBarSecrets';
 
 const { STAGE_INIT, HDPATH, STAGE_ERROR } = LEDGER;
 
 const STAGE_ADD_ADDRESS_USER = 2.1;
 const STAGE_ADD_ADDRESS_OK = 2.2;
+const STAGE_ADD_SECRETS = 100;
 
 const checkAddress = (obj, network, address) =>
   Object.keys(obj).some((k) => {
@@ -58,12 +61,14 @@ function ActionBarConnect({
     }
   }, [valueInputAddres]);
 
-  const connctAddress = () => {
+  const connectAddress = () => {
     switch (selectMethod) {
-      case 'keplr':
+      case KEY_TYPE.keplr:
         connectKeplr();
         break;
-
+      case KEY_TYPE.secrets:
+        onClickToggleSecrets();
+        break;
       default:
         onClickAddAddressUser();
         break;
@@ -82,6 +87,14 @@ function ActionBarConnect({
     setStage(STAGE_ADD_ADDRESS_USER);
   };
 
+  const onClickToggleSecrets = () => {
+    setStage(STAGE_ADD_SECRETS);
+  };
+
+  const onClickAddSecrets = () => {
+    console.log('onClickAddSecrets');
+  };
+
   const onClickAddAddressUserToLocalStr = async () => {
     const accounts = { bech32: valueInputAddres, keys: 'read-only' };
 
@@ -144,7 +157,7 @@ function ActionBarConnect({
         selectMethodFunc={selectMethodFunc}
         selectMethod={selectMethod}
         selectNetwork={selectNetwork}
-        connctAddress={connctAddress}
+        connectAddress={connectAddress}
         keplr={signer}
         onClickBack={onClickBack}
       />
@@ -181,6 +194,10 @@ function ActionBarConnect({
     );
   }
 
+  if (stage === STAGE_ADD_SECRETS) {
+    return <ActionBarSecrets onClickBack={() => setStage(STAGE_INIT)} />;
+  }
+
   if (stage === STAGE_ADD_ADDRESS_OK) {
     return (
       <ActionBar>

src/pages/Keys/ActionBar/actionBarSecrets.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { Pane } from '@cybercongress/gravity';
+import { Input, ActionBar } from 'src/components';
+import {
+  loadJsonFromLocalStorage,
+  saveJsonToLocalStorage,
+} from 'src/utils/localStorage';
+import { useDispatch } from 'react-redux';
+import { setSecret } from 'src/redux/reducers/scripting';
+
+function ActionBarSecrets({ onClickBack }: { onClickBack: () => void }) {
+  const [key, setKey] = useState('');
+  const [value, setValue] = useState('');
+  const dispatch = useDispatch();
+
+  const onSave = async () => {
+    dispatch(setSecret({ key, value }));
+    onClickBack();
+  };
+
+  return (
+    <ActionBar
+      button={{
+        disabled: !key || !value,
+        onClick: onSave,
+        text: 'add secret',
+      }}
+      onClickBack={onClickBack}
+    >
+      <Pane
+        flex={1}
+        justifyContent="center"
+        alignItems="center"
+        fontSize="18px"
+        display="flex"
+      >
+        <Input
+          width="250px"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+          placeholder="key/name"
+          autoFocus
+        />
+        <Pane width="10px" />
+        <Input
+          width="250px"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="secret value"
+          autoFocus
+        />
+      </Pane>
+    </ActionBar>
+  );
+}
+
+export default ActionBarSecrets;