Create state to store the API responses for dashboard - Closes #6241, #6242, #6243

framework-plugins/lisk-framework-dashboard-plugin/package.json

@@ -43,12 +43,10 @@
 		"@liskhq/lisk-client": "^5.0.2",
 		"@liskhq/lisk-cryptography": "^3.0.0",
 		"@liskhq/lisk-utils": "^0.1.0",
-		"@reduxjs/toolkit": "1.5.0",
 		"express": "4.17.1",
 		"lisk-framework": "^0.7.3",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"react-redux": "7.2.2",
 		"react-router-dom": "^5.2.0",
 		"react-select": "4.3.0"
 	},
@@ -66,7 +64,6 @@
 		"@types/node": "12.12.11",
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^17.0.0",
-		"@types/react-redux": "7.1.16",
 		"@types/react-router-dom": "5.1.7",
 		"@types/react-select": "4.0.13",
 		"@typescript-eslint/eslint-plugin": "^4.15.1",

framework-plugins/lisk-framework-dashboard-plugin/src/ui/App.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
-import { store } from './store';
 import MainPage from './pages/MainPage';
+import MessageDialogProvider from './providers/MessageDialogProvider';
 
 const App: React.FC = () => (
-	<Provider store={store}>
+	<MessageDialogProvider>
 		<MainPage />
-	</Provider>
+	</MessageDialogProvider>
 );
 
 export default App;

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/dialogs/AccountDialog.tsx

@@ -33,38 +33,40 @@ const AccountDialog: React.FC<AccountDialogProps> = props => {
 				<Text type={'h1'}>Account details</Text>
 			</DialogHeader>
 			<DialogBody>
-				<Grid container fluid spacing={3}>
-					<Grid row rowBorder>
-						<Grid xs={12}>
-							<Box mb={2}>
-								<Text type={'h3'}>Binary address</Text>
-							</Box>
-							<CopiableText text={account.binaryAddress}>{account.binaryAddress}</CopiableText>
+				{account && (
+					<Grid container fluid spacing={3}>
+						<Grid row rowBorder>
+							<Grid xs={12}>
+								<Box mb={2}>
+									<Text type={'h3'}>Binary address</Text>
+								</Box>
+								<CopiableText text={account.binaryAddress}>{account.binaryAddress}</CopiableText>
+							</Grid>
 						</Grid>
-					</Grid>
-					<Grid row rowBorder>
-						<Grid md={6} xs={12}>
-							<Box mb={2} mr={1}>
-								<Text type={'h3'}>Base32 address</Text>
-							</Box>
-							<CopiableText text={account.base32Address}>{account.base32Address}</CopiableText>
-						</Grid>
-						<Grid md={6} xs={12}>
-							<Box mb={2}>
-								<Text type={'h3'}>Public Key</Text>
-							</Box>
-							<CopiableText text={account.publicKey}>{account.publicKey}</CopiableText>
+						<Grid row rowBorder>
+							<Grid md={6} xs={12}>
+								<Box mb={2} mr={1}>
+									<Text type={'h3'}>Base32 address</Text>
+								</Box>
+								<CopiableText text={account.base32Address}>{account.base32Address}</CopiableText>
+							</Grid>
+							<Grid md={6} xs={12}>
+								<Box mb={2}>
+									<Text type={'h3'}>Public Key</Text>
+								</Box>
+								<CopiableText text={account.publicKey}>{account.publicKey}</CopiableText>
+							</Grid>
 						</Grid>
-					</Grid>
-					<Grid row>
-						<Grid xs={12}>
-							<Box mb={2}>
-								<Text type={'h3'}>Passphrase</Text>
-							</Box>
-							<CopiableText text={account.passphrase ?? ''}>{account.passphrase}</CopiableText>
+						<Grid row>
+							<Grid xs={12}>
+								<Box mb={2}>
+									<Text type={'h3'}>Passphrase</Text>
+								</Box>
+								<CopiableText text={account.passphrase ?? ''}>{account.passphrase}</CopiableText>
+							</Grid>
 						</Grid>
 					</Grid>
-				</Grid>
+				)}
 			</DialogBody>
 		</Dialog>
 	);

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/dialogs/NodeInfoDialog.tsx

@@ -95,13 +95,13 @@ const NodeInfoDialog: React.FC<NodeInfoDialogProps> = props => {
 						</Grid>
 					</Grid>
 
-					{nodeInfo.fees.map((fee, index) => (
-						<Grid row rowBorder={index !== nodeInfo.fees.length - 1} key={index}>
+					{nodeInfo.genesisConfig.baseFees.map((fee, index) => (
+						<Grid row rowBorder={index !== nodeInfo.genesisConfig.baseFees.length - 1} key={index}>
 							<Grid xs={4}>
-								<Text>{fee.moduleId}</Text>
+								<Text>{fee.moduleID}</Text>
 							</Grid>
 							<Grid xs={4}>
-								<Text>{fee.assetId}</Text>
+								<Text>{fee.assetID}</Text>
 							</Grid>
 							<Grid xs={4}>
 								<Text>{fee.baseFee}</Text>

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/BlockWidget.tsx

@@ -16,9 +16,10 @@ import { TableBody, TableHeader, Table } from '../Table';
 import CopiableText from '../CopiableText';
 import { Widget, WidgetHeader, WidgetBody } from '../widget';
 import Text from '../Text';
+import { Block } from '../../types';
 
 interface WidgetProps {
-	blocks: Record<string, string>[];
+	blocks: Block[];
 	title: string;
 }
 
@@ -52,16 +53,18 @@ const BlockWidget: React.FC<WidgetProps> = props => {
 						{blocks.map((block, index) => (
 							<tr key={index}>
 								<td>
-									<CopiableText text={block.id}>{block.id}</CopiableText>
+									<CopiableText text={block.header.id}>{block.header.id}</CopiableText>
 								</td>
 								<td>
-									<CopiableText text={block.generatedBy}>{block.generatedBy}</CopiableText>
+									<CopiableText text={block.header.generatorPublicKey}>
+										{block.header.generatorPublicKey}
+									</CopiableText>
 								</td>
 								<td>
-									<Text key={block.height}>{block.height}</Text>
+									<Text key={block.header.height}>{block.header.height}</Text>
 								</td>
 								<td>
-									<Text key={block.txs}>{block.txs}</Text>
+									<Text key={block.payload.length}>{block.payload.length}</Text>
 								</td>
 							</tr>
 						))}

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/MyAccountWidget.tsx

@@ -17,21 +17,17 @@ import { Widget, WidgetBody, WidgetHeader } from '../widget';
 import { TableBody, TableHeader, Table } from '../Table';
 import CopiableText from '../CopiableText';
 import Text from '../Text';
-
-interface AccountInfo {
-	readonly binaryAddress?: string;
-	readonly publicKey?: string;
-}
+import { Account } from '../../types';
 
 interface MyAccountProps {
-	accounts: ReadonlyArray<AccountInfo>;
-	onSelect?: (account: AccountInfo) => void;
+	accounts: ReadonlyArray<Account>;
+	onSelect?: (account: Account) => void;
 }
 
 const MyAccountWidget: React.FC<MyAccountProps> = props => {
 	const { accounts, onSelect } = props;
 
-	const handleClick = (account: AccountInfo) => {
+	const handleClick = (account: Account) => {
 		if (onSelect) {
 			onSelect(account);
 		}
@@ -56,17 +52,15 @@ const MyAccountWidget: React.FC<MyAccountProps> = props => {
 					</TableHeader>
 					<TableBody>
 						{accounts?.length ? (
-							accounts.map((account: AccountInfo, index) => (
+							accounts.map((account: Account, index) => (
 								<tr onClick={() => handleClick(account)} key={index}>
 									<td>
-										<CopiableText text={account.binaryAddress as string}>
+										<CopiableText text={account.binaryAddress}>
 											{account.binaryAddress}
 										</CopiableText>
 									</td>
 									<td>
-										<CopiableText text={account.publicKey as string}>
-											{account.publicKey}
-										</CopiableText>
+										<CopiableText text={account.publicKey}>{account.publicKey}</CopiableText>
 									</td>
 								</tr>
 							))

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/TransactionWidget.tsx

@@ -16,9 +16,10 @@ import { TableBody, TableHeader, Table } from '../Table';
 import { Widget, WidgetHeader, WidgetBody } from '../widget';
 import Text from '../Text';
 import CopiableText from '../CopiableText';
+import { Transaction } from '../../types';
 
 interface WidgetProps {
-	transactions: Record<string, string>[];
+	transactions: Transaction[];
 	title: string;
 }
 
@@ -55,7 +56,9 @@ const TransactionWidget: React.FC<WidgetProps> = props => {
 									<CopiableText text={transaction.id}>{transaction.id}</CopiableText>
 								</td>
 								<td>
-									<CopiableText text={transaction.sender}>{transaction.sender}</CopiableText>
+									<CopiableText text={transaction.senderPublicKey}>
+										{transaction.senderPublicKey}
+									</CopiableText>
 								</td>
 								<td>
 									<Text key={transaction.moduleAsset}>{transaction.moduleAsset}</Text>