Merge branch 'master' into feat/ml-experementa

Author: dasein108

package.json

@@ -138,7 +138,8 @@
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.0",
-    "webpack-merge": "^5.7.3"
+    "webpack-merge": "^5.7.3",
+    "workbox-webpack-plugin": "^7.1.0"
   },
   "dependencies": {
     "@apollo/client": "^3.9.4",
@@ -256,6 +257,11 @@
     "videostream": "^3.2.2",
     "web3": "1.2.4",
     "web3-utils": "^4.2.1",
+    "workbox-core": "^7.1.0",
+    "workbox-expiration": "^7.1.0",
+    "workbox-precaching": "^7.1.0",
+    "workbox-routing": "^7.1.0",
+    "workbox-strategies": "^7.1.0",
     "worker-url": "^1.1.0"
   },
   "prec-commit": [

src/components/loader/loader.js

@@ -209,6 +209,23 @@ const Bootloader = () => {
 };
 
 function bootstrap() {
+  if ('serviceWorker' in navigator) {
+    console.log('Going to install service worker');
+    window.addEventListener('load', () => {
+      console.log('Starting to load service worker');
+      navigator.serviceWorker
+        .register('/service-worker.js')
+        .then((registration) => {
+          console.log('service worker registered: ', registration);
+        })
+        .catch((registrationError) => {
+          console.log('service worker registration failed: ', registrationError);
+        });
+    });
+  } else {
+    console.log('No service worker is available');
+  }
+
   let _a;
   const assets =
     ((_a =
@@ -229,9 +246,8 @@ function bootstrap() {
 
       progressData.innerHTML = `Loading: <span>${Math.round(
         progress * 100
-      )}%</span>. <br/> Network speed: <span>${
-        Math.round(e.networkSpeed * 100) / 100
-      } kbps</span>`;
+      )}%</span>. <br/> Network speed: <span>${Math.round(e.networkSpeed * 100) / 100
+        } kbps</span>`;
 
       // console.log(e.loaded, e.loaded / e.totalSize); // @TODO
     })

src/containers/Search/SearchResults.tsx

@@ -1,28 +1,30 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { useDevice } from 'src/contexts/device';
-import { IpfsContentType } from 'src/services/ipfs/types';
+import { useParams } from 'react-router-dom';
+import Display from 'src/components/containerGradient/Display/Display';
 import Spark from 'src/components/search/Spark/Spark';
 import Loader2 from 'src/components/ui/Loader2';
-import { getIpfsHash } from 'src/utils/ipfs/helpers';
-import { PATTERN_IPFS_HASH } from 'src/constants/patterns';
-import Display from 'src/components/containerGradient/Display/Display';
+import { useDevice } from 'src/contexts/device';
+import { IpfsContentType } from 'src/services/ipfs/types';
 
-import { encodeSlash } from '../../utils/utils';
+import useIsOnline from 'src/hooks/useIsOnline';
 import ActionBarContainer from './ActionBarContainer';
-import FirstItems from './_FirstItems.refactor';
-import useSearchData from './hooks/useSearchData';
-import { LinksTypeFilter, SortBy } from './types';
 import Filters from './Filters/Filters';
 import styles from './SearchResults.module.scss';
+import FirstItems from './_FirstItems.refactor';
 import { initialContentTypeFilterState } from './constants';
 import { getSearchQuery } from 'src/utils/search/utils';
+import useSearchData from './hooks/useSearchData';
+import { LinksTypeFilter, SortBy } from './types';
 
 const sortByLSKey = 'search-sort';
 
 function SearchResults() {
   const { query: q, cid } = useParams();
+  const isOnline = useIsOnline();
+  const defaultMessage = isOnline
+    ? 'there are no answers or questions to this particle <br /> be the first and create one'
+    : "ther's nothing to show, wait until you're online";
 
   const query = q || cid || '';
 
@@ -151,10 +153,7 @@ function SearchResults() {
             <p>{error.message}</p>
           </Display>
         ) : (
-          <Display color="white">
-            there are no answers or questions to this particle <br /> be the
-            first and create one
-          </Display>
+          <Display color="white">{defaultMessage}</Display>
         )}
       </div>
 

src/containers/application/Header/SwitchAccount/SwitchAccount.tsx

@@ -1,24 +1,25 @@
-import React, { useMemo, useRef } from 'react';
 import cx from 'classnames';
-import { Link, useLocation } from 'react-router-dom';
+import React, { useMemo, useRef } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
+import { Link, useLocation } from 'react-router-dom';
 import { Transition } from 'react-transition-group';
 
+import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 import useOnClickOutside from 'src/hooks/useOnClickOutside';
 import { routes } from 'src/routes';
-import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 
-import { useAppSelector } from 'src/redux/hooks';
 import Pill from 'src/components/Pill/Pill';
+import { useBackend } from 'src/contexts/backend/backend';
 import { useSigningClient } from 'src/contexts/signerClient';
+import useIsOnline from 'src/hooks/useIsOnline';
+import { useAppSelector } from 'src/redux/hooks';
 import BroadcastChannelSender from 'src/services/backend/channels/BroadcastChannelSender';
-import { useBackend } from 'src/contexts/backend/backend';
-import { AvataImgIpfs } from '../../../portal/components/avataIpfs';
-import styles from './SwitchAccount.module.scss';
-import networkStyles from '../SwitchNetwork/SwitchNetwork.module.scss';
 import useMediaQuery from '../../../../hooks/useMediaQuery';
 import robot from '../../../../image/temple/robot.png';
+import { AvataImgIpfs } from '../../../portal/components/avataIpfs';
 import Karma from '../../Karma/Karma';
+import networkStyles from '../SwitchNetwork/SwitchNetwork.module.scss';
+import styles from './SwitchAccount.module.scss';
 
 // should be refactored
 function AccountItem({
@@ -91,6 +92,7 @@ function AccountItem({
 function SwitchAccount() {
   const { signerReady } = useSigningClient();
   const { isIpfsInitialized } = useBackend();
+  const isOnline = useIsOnline();
   const mediaQuery = useMediaQuery('(min-width: 768px)');
 
   const [controlledVisible, setControlledVisible] = React.useState(false);
@@ -179,9 +181,10 @@ function SwitchAccount() {
               </button>
             )}
             {isReadOnly && <Pill color="yellow" text="read only" />}
-            {!isReadOnly && !signerReady && (
+            {!isReadOnly && !signerReady && isOnline && (
               <Pill color="red" text="switch keplr" />
             )}
+            {!isOnline && <Pill color="red" text="offline" />}
             <Karma address={useGetAddress} />
           </div>
         )}
@@ -195,8 +198,10 @@ function SwitchAccount() {
         >
           <div
             className={cx(styles.containerAvatarConnect, {
-              [styles.containerAvatarConnectFalse]: !isIpfsInitialized,
-              [styles.containerAvatarConnectTrueGreen]: isIpfsInitialized,
+              [styles.containerAvatarConnectFalse]:
+                !isIpfsInitialized || !isOnline,
+              [styles.containerAvatarConnectTrueGreen]:
+                isIpfsInitialized && isOnline,
             })}
           >
             <AvataImgIpfs

src/containers/portal/components/avataIpfs/AvataImgIpfs.tsx

@@ -1,38 +1,24 @@
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import styles from './styles.module.scss';
 import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
 import cx from 'classnames';
+import { useEffect, useState } from 'react';
+import styles from './styles.module.scss';
 
 const getRoboHashImage = (addressCyber: string) =>
   `https://robohash.org/${addressCyber}`;
 
 function AvataImgIpfs({ img = '', cidAvatar, addressCyber, ...props }) {
   const { fetchWithDetails } = useQueueIpfsContent();
-
-  const [avatar, setAvatar] = useState<string | null>(null);
-  const { data } = useQuery(
-    ['getAvatar', cidAvatar],
-    async () => {
-      const response = await fetchWithDetails!(cidAvatar, 'image');
-      return response?.content || '';
-    },
-
-    {
-      enabled: Boolean(fetchWithDetails && cidAvatar),
-      staleTime: 10 * (60 * 1000), // 10 mins
-      cacheTime: 15 * (60 * 1000), // 15 mins
-      retry: 0,
-    }
-  );
+  const [avatar, setAvatar] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    if (!data) {
-      setAvatar(null);
-    } else {
-      setAvatar(data);
+    if (!fetchWithDetails || !cidAvatar) {
+      return;
     }
-  }, [data]);
+
+    fetchWithDetails(cidAvatar, 'image').then((value) => {
+      setAvatar(value?.content);
+    });
+  }, [fetchWithDetails, cidAvatar]);
 
   const avatarImage =
     avatar ||

src/containers/warp/Warp.tsx

@@ -103,14 +103,14 @@ function Warp() {
   }, [setAdviser, tab]);
 
   useEffect(() => {
-    const [{ coinDecimals }] = traseDenom(tokenA);
+    const [{ coinDecimals }] = tracesDenom(tokenA);
     setTokenACoinDecimals(coinDecimals);
-  }, [traseDenom, tokenA]);
+  }, [tracesDenom, tokenA]);
 
   useEffect(() => {
-    const [{ coinDecimals }] = traseDenom(tokenB);
+    const [{ coinDecimals }] = tracesDenom(tokenB);
     setTokenBCoinDecimals(coinDecimals);
-  }, [traseDenom, tokenB]);
+  }, [tracesDenom, tokenB]);
 
   useEffect(() => {
     if (firstEffectOccured.current) {

src/contexts/signerClient.tsx

@@ -5,11 +5,16 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import _ from 'lodash';
 import { SigningCyberClient } from '@cybercongress/cyber-js';
 import configKeplr, { getKeplr } from 'src/utils/keplrUtils';
 import { OfflineSigner } from '@cybercongress/cyber-js/build/signingcyberclient';
 import { Option } from 'src/types';
-import { useAppSelector } from 'src/redux/hooks';
+import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
+import { Keplr } from '@keplr-wallet/types';
+import { addAddressPocket, setDefaultAccount } from 'src/redux/features/pocket';
+import { accountsKeplr } from 'src/utils/utils';
+import usePrevious from 'src/hooks/usePrevious';
 import { RPC_URL, BECH32_PREFIX, CHAIN_ID } from 'src/constants/config';
 
 // TODO: interface for keplr and OfflineSigner
@@ -50,11 +55,37 @@ export function useSigningClient() {
 }
 
 function SigningClientProvider({ children }: { children: React.ReactNode }) {
-  const { defaultAccount } = useAppSelector((state) => state.pocket);
+  const { defaultAccount, accounts } = useAppSelector((state) => state.pocket);
+  const dispatch = useAppDispatch();
   const [signer, setSigner] = useState<SignerClientContextType['signer']>();
   const [signerReady, setSignerReady] = useState(false);
   const [signingClient, setSigningClient] =
     useState<SignerClientContextType['signingClient']>();
+  const prevAccounts = usePrevious(accounts);
+
+  const selectAddress = useCallback(
+    async (keplr: Keplr) => {
+      if (!accounts || _.isEqual(prevAccounts, accounts)) {
+        return;
+      }
+      const keyInfo = await keplr.getKey(CHAIN_ID);
+
+      const findAccount = Object.keys(accounts).find((key) => {
+        if (accounts[key].cyber.bech32 === keyInfo.bech32Address) {
+          return key;
+        }
+
+        return undefined;
+      });
+
+      if (findAccount) {
+        dispatch(setDefaultAccount({ name: findAccount }));
+      } else {
+        dispatch(addAddressPocket(accountsKeplr(keyInfo)));
+      }
+    },
+    [accounts, prevAccounts, dispatch]
+  );
 
   useEffect(() => {
     (async () => {
@@ -73,6 +104,8 @@ function SigningClientProvider({ children }: { children: React.ReactNode }) {
   const initSigner = useCallback(async () => {
     const windowKeplr = await getKeplr();
     if (windowKeplr && windowKeplr.experimentalSuggestChain) {
+      selectAddress(windowKeplr);
+
       windowKeplr.defaultOptions = {
         sign: {
           preferNoSetFee: true,
@@ -87,7 +120,7 @@ function SigningClientProvider({ children }: { children: React.ReactNode }) {
       setSigner(offlineSigner);
       setSigningClient(clientJs);
     }
-  }, []);
+  }, [selectAddress]);
 
   useEffect(() => {
     (async () => {

src/hooks/useIsOnline.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+function useIsOnline() {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    function handleOnline() {
+      console.log('isOnline', true);
+      setIsOnline(true);
+    }
+
+    function handleOffline() {
+      console.log('isOnline', false);
+      setIsOnline(false);
+    }
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  return isOnline;
+}
+
+export default useIsOnline;

src/index.tsx

@@ -40,6 +40,7 @@ import DeviceProvider from './contexts/device';
 import IbcDenomProvider from './contexts/ibcDenom';
 import NetworksProvider from './contexts/networks';
 import BackendProvider from './contexts/backend/backend';
+
 import AdviserProvider from './features/adviser/context';
 import HubProvider from './contexts/hub';