feat(app): to dev (#1187)

.stylelintrc

@@ -1,7 +1,9 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
-  // "plugins": ["stylelint-order"],
+  "extends": ["stylelint-config-standard-scss"],
+  "plugins": ["stylelint-scss"],
   "rules": {
-    "selector-class-pattern": "^[a-z][\\w\\d]*((__[\\w\\d]+)?(--[a-z][\\w\\d]+)?|(--[a-z][\\w\\d]+(__[\\w\\d]+)?))$"
+    "selector-class-pattern": "^[a-z][\\w\\d]*((__[\\w\\d]+)?(--[a-z][\\w\\d]+)?|(--[a-z][\\w\\d]+(__[\\w\\d]+)?))$",
+    "media-feature-range-notation": "context",
+    "scss/dollar-variable-pattern": null
   }
 }

.vscode/settings.json

@@ -15,6 +15,22 @@
     "stylelint",
     "superintelligence",
     "websockets",
-    "cyberver"
-  ]
+    "cyberver",
+    "websockets"
+  ],
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.snippet": ["css", "scss", "postcss"],
+  "stylelint.validate": ["css", "scss", "postcss"]
 }

package.json

@@ -125,9 +125,10 @@
     "stream-http": "^3.2.0",
     "style-loader": "^3.3.1",
     "stylelint": "^15.6.0",
-    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-clean-order": "^5.2.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",
+    "stylelint-scss": "^5.3.1",
     "swr": "^1.0.1",
     "terser-webpack-plugin": "4.2.3",
     "ts-migrate": "^0.1.35",

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,9 +1,9 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import ErrorScreen from './ErrorScreen/ErrorScreen';
 
 interface Props {
-  fallback: JSX.Element;
-  children: JSX.Element;
+  fallback?: JSX.Element;
+  children: React.ReactNode;
 }
 
 type State = {

src/components/Select/Select.module.scss

@@ -39,15 +39,20 @@
     position: absolute;
     z-index: 3;
     width: 100%;
+
+    &.dropUp {
+      bottom: 100%;
+    }
   }
 
   &List {
     display: grid;
     grid-gap: 18px;
     padding: 18px;
-    margin: 0px;
-    background: rgba(0, 0, 0, 0.5);
+    margin: 0;
+    background: rgb(0 0 0 / 50%);
     backdrop-filter: blur(15px);
+
     // border-top: 1px solid #fcf000;
     // border-bottom: 1px solid #fcf000;
     box-sizing: border-box;
@@ -75,7 +80,8 @@
       align-items: center;
       justify-content: center;
       border-radius: 50%;
-      background: #000000;
+      background: #000;
+
       // box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 0.5);
     }
   }

src/components/Select/index.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 
 import { $TsFixMe, $TsFixMeFunc } from 'src/types/tsfix';
+import classNames from 'classnames';
 import styles from './Select.module.scss';
 import { SelectContext, useSelectContext } from './selectContext';
 
@@ -12,8 +13,6 @@ import LinearGradientContainer, {
   Color,
 } from '../LinearGradientContainer/LinearGradientContainer';
 
-const classNames = require('classnames');
-
 type OptionSelectProps = {
   text: React.ReactNode;
   value: string;
@@ -51,7 +50,7 @@ type SelectProps = {
   valueSelect: $TsFixMe;
   onChangeSelect?: $TsFixMeFunc;
   children?: React.ReactNode;
-  width?: string;
+  width?: string | number;
   disabled?: boolean;
   options?: SelectOption[];
   currentValue: React.ReactNode;
@@ -72,7 +71,7 @@ function Select({
   color = Color.Yellow,
   title,
 }: SelectProps) {
-  const selectContainerRef = useRef(null);
+  const selectContainerRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const toggling = () => {
     if (!disabled) {
@@ -93,6 +92,17 @@ function Select({
 
   useOnClickOutside(selectContainerRef, clickOutsideHandler);
 
+  const { current: refCurrent } = selectContainerRef;
+  const isDropUp = useMemo(() => {
+    if (refCurrent) {
+      // maybe improve
+      const { bottom } = refCurrent.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - bottom;
+      return spaceBelow < window.innerHeight / 2;
+    }
+    return false;
+  }, [refCurrent]);
+
   function renderTitle() {
     let value = currentValue;
     if (valueSelect !== undefined && options) {
@@ -141,7 +151,11 @@ function Select({
             </LinearGradientContainer>
           </button>
           {isOpen && (
-            <div className={styles.dropDownListContainer}>
+            <div
+              className={classNames(styles.dropDownListContainer, {
+                [styles.dropUp]: isDropUp,
+              })}
+            >
               <div className={styles.dropDownList}>
                 {/* {placeholder && (
                   <OptionSelect text={placeholder} value={null} />

src/containers/governance/actionBarDatail.tsx

@@ -24,9 +24,12 @@ import {
   Account,
   Input,
   BtnGrd,
+  DenomArr,
+  Select,
 } from '../../components';
 
 import { getTxs } from '../../utils/search/utils';
+// import styles from './ActionBarDetail.module.scss';
 
 import { LEDGER } from '../../utils/config';
 
@@ -179,6 +182,7 @@ function ActionBarDetail({ proposals, id, addressActive, update }) {
       <ActionBar>
         <ActionBarContentText>
           <Pane marginRight={10}>send Deposit</Pane>
+          <DenomArr denomValue={BASE_DENOM} onlyImg />
           <div style={{ margin: '0 10px' }}>
             <NumericFormat
               value={valueDeposit}
@@ -191,7 +195,6 @@ function ActionBarDetail({ proposals, id, addressActive, update }) {
               allowLeadingZeros
             />
           </div>
-          <Pane>{BASE_DENOM.toUpperCase()}</Pane>
         </ActionBarContentText>
         <BtnGrd
           text="Deposit"
@@ -209,19 +212,24 @@ function ActionBarDetail({ proposals, id, addressActive, update }) {
     return (
       <ActionBar>
         <ActionBarContentText>
-          <select
-            style={{ height: 42, width: '200px' }}
-            className="select-green"
-            value={valueSelect}
-            onChange={(e) => setValueSelect(e.target.value)}
-          >
-            <option value={VoteOption.VOTE_OPTION_YES}>Yes</option>
-            <option value={VoteOption.VOTE_OPTION_NO}>No</option>
-            <option value={VoteOption.VOTE_OPTION_ABSTAIN}>Abstain</option>
-            <option value={VoteOption.VOTE_OPTION_NO_WITH_VETO}>
-              No With Veto
-            </option>
-          </select>
+          <Select
+            color="green"
+            width={200}
+            options={[
+              { value: String(VoteOption.VOTE_OPTION_YES), text: 'Yes' },
+              { value: String(VoteOption.VOTE_OPTION_NO), text: 'No' },
+              {
+                value: String(VoteOption.VOTE_OPTION_ABSTAIN),
+                text: 'Abstain',
+              },
+              {
+                value: String(VoteOption.VOTE_OPTION_NO_WITH_VETO),
+                text: 'No With Veto',
+              },
+            ]}
+            valueSelect={String(valueSelect)}
+            onChangeSelect={(value) => setValueSelect(Number(value))}
+          />
         </ActionBarContentText>
         <ButtonImgText
           text={

src/containers/governance/proposalsDetail.jsx

@@ -1,14 +1,18 @@
 /* eslint-disable react/no-children-prop */
 import { useEffect, useState } from 'react';
-import { Pane, Text, ActionBar } from '@cybercongress/gravity';
+import { Pane, Text } from '@cybercongress/gravity';
 import { Link, useParams } from 'react-router-dom';
-import { connect } from 'react-redux';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeSanitize from 'rehype-sanitize';
 import { ProposalStatus } from 'cosmjs-types/cosmos/gov/v1beta1/gov';
 
-import { ContainerGradientText, IconStatus, Item } from '../../components';
+import {
+  ActionBar,
+  ContainerGradientText,
+  IconStatus,
+  Item,
+} from '../../components';
 
 import {
   getStakingPool,
@@ -22,12 +26,13 @@ import ActionBarDetail from './actionBarDatail';
 import { formatNumber } from '../../utils/utils';
 
 import ProposalsDetailProgressBar from './proposalsDetailProgressBar';
-import useSetActiveAddress from '../../hooks/useSetActiveAddress';
 import { MainContainer } from '../portal/components';
 import ProposalsRoutes from './proposalsRoutes';
 
 import styles from './proposalsDetail.module.scss';
 import { useGovParam } from 'src/hooks/governance/params/useGovParams';
+import useCurrentAddress from 'src/hooks/useCurrentAddress';
+import { useAppSelector } from 'src/redux/hooks';
 
 const finalTallyResult = (item) => {
   const finalVotes = {
@@ -55,9 +60,14 @@ const finalTallyResult = (item) => {
   return finalVotes;
 };
 
-function ProposalsDetail({ defaultAccount }) {
+function ProposalsDetail() {
   const { proposalId } = useParams();
-  const { addressActive } = useSetActiveAddress(defaultAccount);
+
+  const currentAccount = useAppSelector((state) => state.pocket.defaultAccount);
+
+  const { bech32: addressActive, keys } = currentAccount?.account?.cyber || {};
+  const isOwner = keys === 'keplr';
+
   const [proposals, setProposals] = useState({});
   const [updateFunc, setUpdateFunc] = useState(0);
   const [tally, setTally] = useState({
@@ -274,8 +284,8 @@ function ProposalsDetail({ defaultAccount }) {
           updateFunc={updateFunc}
         />
       </MainContainer>
-      {addressActive !== null &&
-      addressActive.keys === 'keplr' &&
+      {addressActive &&
+      isOwner &&
       location.pathname === `/senate/${proposalId}/voters` ? (
         <ActionBarDetail
           id={proposalId}
@@ -287,31 +297,16 @@ function ProposalsDetail({ defaultAccount }) {
         />
       ) : (
         !addressActive && (
-          <ActionBar>
-            <Pane>
-              <Link
-                style={{
-                  paddingTop: 10,
-                  paddingBottom: 10,
-                  display: 'block',
-                }}
-                className="btn"
-                to="/keys"
-              >
-                connect
-              </Link>
-            </Pane>
-          </ActionBar>
+          <ActionBar
+            button={{
+              text: 'connect',
+              link: '/keys',
+            }}
+          />
         )
       )}
     </>
   );
 }
 
-const mapStateToProps = (store) => {
-  return {
-    defaultAccount: store.pocket.defaultAccount,
-  };
-};
-
-export default connect(mapStateToProps)(ProposalsDetail);
+export default ProposalsDetail;

src/contexts/backend/services/senseApi.ts

@@ -87,10 +87,10 @@ export const createSenseApi = (
 ) => ({
   getList: async () => {
     const result = await dbApi.getSenseList(myAddress);
-    console.log(
-      '--- getList unread',
-      result.filter((r) => r.unreadCount > 0)
-    );
+    // console.log(
+    //   '--- getList unread',
+    //   result.filter((r) => r.unreadCount > 0)
+    // );
     return result;
   },
   markAsRead: async (

src/index.html

@@ -30,19 +30,23 @@
     <meta property="og:image" content="/images/preview.png" />
 
     <script>
-      if (process.env.NODE_ENV === 'production') {
+      if ('<%= process.env.NODE_ENV %>' === 'production') {
         const commitSHA = document.querySelector(
           'meta[name="commit-version"]'
         ).content;
 
-        console.info(
-          `%c Commit of build: ${commitSHA}`,
-          'color: #36d6ae; font-size: 20px; font-weight: bold;'
-        );
-        console.info(
-          `%c https://github.com/cybercongress/cyb/commit/${commitSHA}`,
-          'font-weight: bold; font-size: 16px;'
-        );
+        if (!commitSHA) {
+          console.error('Commit SHA is not defined');
+        } else {
+          console.info(
+            `%c Commit of build: ${commitSHA}`,
+            'color: #36d6ae; font-size: 20px; font-weight: bold;'
+          );
+          console.info(
+            `%c https://github.com/cybercongress/cyb/commit/${commitSHA}`,
+            'font-weight: bold; font-size: 16px;'
+          );
+        }
       }
     </script>