App Logic rewrite for api 0.2 support (#723)

* PoS UI * PoS UI * PoS UI * PoS UI * PoS api * PoST API * POS api * POS api * POS api * App Logic rewrite targeting api 0.2 * Delete bug_report.md
spacemeshos · Apr 7, 2021 · 9e85438 · 9e85438
1 parent 9270ec3
commit 9e85438
Show file tree

Hide file tree

Showing 119 changed files with 26,612 additions and 8,386 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,4 @@ ct-libc/
 /release
 .env
 .vscode
+/desktop/dist
diff --git a/app/App.tsx b/app/App.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { hot } from 'react-hot-loader/root';
-import { Store } from './redux/store';
+import store from './redux/store';
 import StyledApp from './StyledApp';
+import './assets/fonts/SourceCodePro-Regular.ttf';
+import './assets/fonts/SourceCodePro-Bold.ttf';
 
-type Props = {
-  store: Store;
-};
-
-const App = ({ store }: Props) => (
+const App = () => (
   <Provider store={store}>
     <StyledApp />
   </Provider>
 );
 
-export default hot(App);
+export default App;
diff --git a/app/basicComponents/AutocompleteDropdown.tsx b/app/basicComponents/AutocompleteDropdown.tsx
@@ -89,7 +89,7 @@ type Props = {
 
 const AutocompleteDropdown = (props: Props) => {
   const { value } = props;
-  let inputBlurTimer: number;
+  let inputBlurTimer: any;
   const [isOpen, setIsOpen] = useState(false);
   const [list, setList] = useState<Array<any>>([]);
   const [isFocus, setIsFocus] = useState(-1);
@@ -109,7 +109,7 @@ const AutocompleteDropdown = (props: Props) => {
     const { data, getItemValue } = props;
     // @ts-ignore
     const { value } = inputField.current || {};
-    let list = [];
+    let list: any = [];
 
     if (value && value.trim()) {
       list = data.filter((d) => getItemValue(d).toLowerCase().indexOf(value.trim().toLowerCase()) > -1);

diff --git a/app/basicComponents/CustomTimeAgo.tsx b/app/basicComponents/CustomTimeAgo.tsx
@@ -22,11 +22,7 @@ const enString = {
   wordSeparator: ' '
 };
 
-type Props = {
-  time: number;
-};
-
-const CustomTimeAgo = ({ time }: Props) => {
+const CustomTimeAgo = ({ time }: { time: string }) => {
   const jsDate = new Date(time).getTime();
 
   const formatter = buildFormatter(enString);

diff --git a/app/basicComponents/SmallHorizontalPanel.tsx b/app/basicComponents/SmallHorizontalPanel.tsx
@@ -8,13 +8,13 @@ const Wrapper = styled.img`
   right: 0px;
   width: 60px;
   height: 15px;
-  transform: ${({ reflection }) => (reflection ? `scale(-1, 1)` : `none`)};
+  transform: ${({ theme }) => (theme.isDarkMode ? `scale(-1, 1)` : `none`)};
 `;
 
 type Props = {
   isDarkMode: boolean;
 };
 
-const SmallHorizontalPanel = ({ isDarkMode }: Props) => <Wrapper reflection={isDarkMode} src={isDarkMode ? horizontalPanelBlack : horizontalPanelWhite} />;
+const SmallHorizontalPanel = ({ isDarkMode }: Props) => <Wrapper src={isDarkMode ? horizontalPanelBlack : horizontalPanelWhite} />;
 
 export default SmallHorizontalPanel;
diff --git a/app/components/NetworkStatus/NetworkStatus.tsx b/app/components/NetworkStatus/NetworkStatus.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { NetworkIndicator, ProgressBar } from '../../basicComponents';
+import { Status } from '../../types';
+import { smColors } from '../../vars';
 
 const ProgressLabel = styled.div`
   margin-left: 10px;
+  text-transform: uppercase;
 `;
 
 const Progress = styled.div`
@@ -14,14 +17,14 @@ const Progress = styled.div`
 `;
 
 type Props = {
-  nodeIndicator: { hasError: boolean; color: string; message: string; statusText: string };
-  status?: any;
+  status: Status | null;
+  error: any;
 };
 
-const NetworkStatus = ({ nodeIndicator, status }: Props) => {
+const NetworkStatus = ({ status, error }: Props) => {
   const getSyncLabelPercentage = (): number => {
-    if (status && status.syncedLayer && status.currentLayer) {
-      return Math.round((parseInt(status.syncedLayer) * 100) / parseInt(status.currentLayer));
+    if (status && status.syncedLayer && status.topLayer) {
+      return Math.round((status.syncedLayer * 100) / status.topLayer);
     }
     return 0;
   };
@@ -32,15 +35,15 @@ const NetworkStatus = ({ nodeIndicator, status }: Props) => {
       <>
         {progress >= 100 ? (
           <>
-            <NetworkIndicator color={nodeIndicator.color} />
-            <ProgressLabel>{nodeIndicator.statusText}</ProgressLabel>
+            <NetworkIndicator color={smColors.green} />
+            <ProgressLabel>synced</ProgressLabel>
           </>
         ) : (
           <>
-            <NetworkIndicator color={nodeIndicator.color} />
-            <ProgressLabel>{nodeIndicator.statusText}</ProgressLabel>
+            <NetworkIndicator color={status?.isSynced ? smColors.green : smColors.orange} />
+            <ProgressLabel>syncing</ProgressLabel>
             <ProgressLabel>{getSyncLabelPercentage()}%</ProgressLabel>
-            <ProgressLabel>{`${status?.syncedLayer || 0} / ${status?.currentLayer || 0}`}</ProgressLabel>
+            <ProgressLabel>{`${status?.syncedLayer || 0} / ${status?.topLayer || 0}`}</ProgressLabel>
             <Progress>
               <ProgressBar progress={progress} />
             </Progress>
@@ -50,14 +53,14 @@ const NetworkStatus = ({ nodeIndicator, status }: Props) => {
     );
   };
 
-  const renderStatus = () => (
+  const renderError = () => (
     <>
-      <NetworkIndicator color={nodeIndicator.color} />
-      <ProgressLabel>{nodeIndicator.statusText}</ProgressLabel>
+      <NetworkIndicator color={smColors.red} />
+      <ProgressLabel>Please restart node</ProgressLabel>
     </>
   );
 
-  return nodeIndicator.hasError ? renderStatus() : renderSyncingStatus();
+  return error ? renderError() : renderSyncingStatus();
 };
 
 export default NetworkStatus;
diff --git a/app/components/banners/InfoBanner.tsx b/app/components/banners/InfoBanner.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import { Banner } from '../../basicComponents';
 import { smColors } from '../../vars';
-import { RootState } from '../../types';
 
 const Text = styled.div`
   margin: 0 15px;
@@ -12,13 +10,10 @@ const Text = styled.div`
   color: ${smColors.white};
 `;
 
-const InfoBanner = () => {
-  const nodeIndicator = useSelector((state: RootState) => state.node.nodeIndicator);
-  return (
-    <Banner margin={'30px 0 30px 0'} color={nodeIndicator.color} visibility={!!nodeIndicator.hasError}>
-      <Text>{nodeIndicator.message}</Text>
-    </Banner>
-  );
-};
+const InfoBanner = () => (
+  <Banner margin={'30px 0 30px 0'} color={smColors.red}>
+    <Text>Offline. Please quit and start the app again.</Text>
+  </Banner>
+);
 
 export default InfoBanner;
diff --git a/app/components/contacts/CreateNewContact.tsx b/app/components/contacts/CreateNewContact.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import { addToContacts, updateTransaction } from '../../redux/wallet/actions';
+import { addToContacts } from '../../redux/wallet/actions';
 import { EnterPasswordModal } from '../settings';
 import { Input, Link, ErrorPopup } from '../../basicComponents';
 import { smColors } from '../../vars';
 import { Contact, RootState } from '../../types';
+import { eventsService } from '../../infra/eventsService';
 
 const Wrapper = styled.div<{ isStandalone: boolean }>`
   display: flex;
@@ -80,6 +81,7 @@ const CreateNewContact = ({ isStandalone = false, initialAddress = '', onComplet
   const [shouldShowPasswordModal, setShouldShowPasswordModal] = useState(false);
 
   const contacts = useSelector((state: RootState) => state.wallet.contacts);
+  const currentAccountIndex = useSelector((state: RootState) => state.wallet.currentAccountIndex);
   const dispatch = useDispatch();
 
   // static getDerivedStateFromProps(props: Props, prevState: State) {
@@ -123,8 +125,8 @@ const CreateNewContact = ({ isStandalone = false, initialAddress = '', onComplet
   };
 
   const createContact = async ({ password }: { password: string }) => {
-    await dispatch(addToContacts({ password, contact: { address, nickname } }));
-    dispatch(updateTransaction({ newData: { address, nickname } }));
+    await dispatch(await addToContacts({ password, contact: { address, nickname } }));
+    await eventsService.updateTransaction({ newData: { address, nickname }, accountIndex: currentAccountIndex, txId: '' });
     onCompleteAction();
   };
 

diff --git a/app/components/node/Carousel.tsx b/app/components/node/Carousel.tsx
@@ -141,7 +141,7 @@ const CpuIcon = styled.img`
 `;
 
 type Props = {
-  data: Array<{ company: string; name: string; isGPU: boolean; estimation: string }>;
+  data: { id: number; model: string; computeApi: string; performance: number }[];
   selectedItemIndex: number;
   onClick: ({ index }: { index: number }) => void;
   style?: any;
@@ -179,23 +179,23 @@ const Carousel = ({ data, selectedItemIndex, onClick, style }: Props) => {
       />
       <OuterWrapper style={style}>
         <InnerWrapper leftSlideIndex={carouselState.leftSlideIndex} slidesCount={data.length}>
-          {data.map((element, index) => (
-            <SlideWrapper onClick={() => handleSelection({ index })} key={element.name}>
+          {data.map((provider, index) => (
+            <SlideWrapper onClick={() => handleSelection({ index })} key={provider.id}>
               <SlideUpperPart isSelected={selectedItemIndex === index}>
                 <TextWrapper>
-                  <Text>{element.company}</Text>
-                  <Text>{element.name}</Text>
+                  <Text>{provider.model}</Text>
+                  {provider.computeApi === '0' && <Text>(UNSPECIFIED)</Text>}
+                  {provider.computeApi === '1' && <Text>(CPU)</Text>}
+                  {provider.computeApi === '2' && <Text>(CUDA)</Text>}
+                  {provider.computeApi === '3' && <Text>(VULCAN)</Text>}
                   <Text>--</Text>
                 </TextWrapper>
                 <TextWrapper>
-                  <Text>~{element.estimation}</Text>
+                  <Text>~{provider.performance} hashes per second</Text>
                   <Text>TO SAVE DATA</Text>
                 </TextWrapper>
-                {element.isGPU ? (
-                  <GpuIcon src={selectedItemIndex === index ? posGpuActive : posGpuGrey} />
-                ) : (
-                  <CpuIcon src={selectedItemIndex === index ? posCpuActive : posCpuGrey} />
-                )}
+                {provider.computeApi === '1' && <CpuIcon src={selectedItemIndex === index ? posCpuActive : posCpuGrey} />}
+                {(provider.computeApi === '2' || provider.computeApi === '3') && <GpuIcon src={selectedItemIndex === index ? posGpuActive : posGpuGrey} />}
               </SlideUpperPart>
               <SlideMiddlePart />
               <SlideLowerPart isSelected={selectedItemIndex === index} />

diff --git a/app/components/node/PoSDirectory.tsx b/app/components/node/PoSDirectory.tsx
@@ -68,28 +68,29 @@ const linkStyle = { fontSize: '17px', lineHeight: '19px', marginBottom: 5 };
 
 type Props = {
   nextAction: () => void;
-  folder: string;
-  setFolder: (folder: string) => void;
-  freeSpace: number;
-  setFreeSpace: (freeSpace: number) => void;
-  commitmentSize: number;
+  dataDir: string;
+  setDataDir: (dataDir: string) => void;
+  freeSpace: string;
+  setFreeSpace: (freeSpace: string) => void;
+  minCommitmentSize: string;
   status: Status | null;
   isDarkMode: boolean;
   skipAction: () => void;
 };
 
-const PoSDirectory = ({ skipAction, nextAction, folder, setFolder, freeSpace, setFreeSpace, commitmentSize, status, isDarkMode }: Props) => {
+// const PoSDirectory = ({ , nextAction, folder, setFolder, freeSpace, setFreeSpace, commitmentSize, status, isDarkMode }: Props) => {
+const PoSDirectory = ({ nextAction, skipAction, dataDir, setDataDir, freeSpace, setFreeSpace, minCommitmentSize, status, isDarkMode }: Props) => {
   const [hasPermissionError, setHasPermissionError] = useState(false);
 
   const icon = isDarkMode ? posDirectoryWhite : posDirectoryBlack;
 
   const openFolderSelectionDialog = async () => {
-    const { error, selectedFolder, freeSpace } = await eventsService.selectPostFolder();
+    const { error, selectedFolder, calculatedFreeSpace } = await eventsService.selectPostFolder();
     if (error) {
       setHasPermissionError(true);
     } else {
-      setFolder(selectedFolder);
-      setFreeSpace(formatBytes(freeSpace));
+      setDataDir(selectedFolder);
+      setFreeSpace(formatBytes(calculatedFreeSpace));
       setHasPermissionError(false);
     }
   };
@@ -101,14 +102,14 @@ const PoSDirectory = ({ skipAction, nextAction, folder, setFolder, freeSpace, se
           <HeaderIcon src={icon} />
           <Header>Proof of space data directory:</Header>
         </HeaderWrapper>
-        <Link onClick={openFolderSelectionDialog} text={folder || 'SELECT DIRECTORY'} style={linkStyle} />
-        <ErrorText>{hasPermissionError ? `SELECT FOLDER WITH MINIMUM ${commitmentSize} GB FREE TO PROCEED` : ''}</ErrorText>
+        <Link onClick={openFolderSelectionDialog} text={dataDir || 'SELECT DIRECTORY'} style={linkStyle} />
+        <ErrorText>{hasPermissionError ? `SELECT FOLDER WITH MINIMUM ${minCommitmentSize} GB FREE TO PROCEED` : ''}</ErrorText>
         {!!freeSpace && <FreeSpaceHeader>FREE SPACE...</FreeSpaceHeader>}
         <FreeSpace error={hasPermissionError} selected={!!freeSpace}>
           {freeSpace ? `${freeSpace} GB` : ''}
         </FreeSpace>
       </Wrapper>
-      <PoSFooter skipAction={skipAction} action={nextAction} isDisabled={!folder || hasPermissionError || !status} />
+      <PoSFooter action={nextAction} skipAction={skipAction} isDisabled={!dataDir || hasPermissionError || !status} />
     </>
   );
 };

diff --git a/app/components/node/PoSProcessor.tsx b/app/components/node/PoSProcessor.tsx