Merge branch 'master' into staging

.github/workflows/test-and-deploy.yml

@@ -18,169 +18,10 @@ jobs:
           REACT_APP_COMMIT_SHA: ${{ github.sha }}
           REACT_APP_BUILD_TIMESTAMP: ${{ env.NOW }}
           REACT_APP_ROLLBAR_TOKEN: ${{ secrets.ROLLBAR_CLIENT_ACCESS_TOKEN }}
+          CI: false
         run: npm run build
       - name: Upload build artifact
         uses: actions/upload-artifact@master
         with:
           name: build
           path: build/
-  test:
-    name: Test
-    needs: build
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.30.0-focal
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '14'
-      - name: Install dependencies
-        uses: ./.github/actions/install-dependencies
-      - name: Download build artifact
-        uses: actions/download-artifact@master
-        with:
-          name: build
-          path: build
-      - name: Start app
-        run: npm run start:test &
-      - name: Run Playwright Tests
-        run: npx playwright test
-      - name: Upload test screenshots artifact
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: test-screenshots
-          path: test/screenshots
-          retention-days: 14
-      - name: Upload test report artifact
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: test-report
-          path: test/report/
-          retention-days: 14
-  test-report:
-    name: Test report
-    needs: test
-    if: always()
-    environment:
-      name: test-report
-      url: ${{ steps.pages.outputs.url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Install dependencies
-        uses: ./.github/actions/install-dependencies
-      - name: Download test screenshots artifact
-        uses: actions/download-artifact@master
-        with:
-          name: test-screenshots
-          path: test/screenshots
-      - name: Download test report artifact
-        uses: actions/download-artifact@master
-        with:
-          name: test-report
-          path: test/report
-      - name: Upload Argos screenshots
-        continue-on-error: true
-        env:
-          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-        run: npx argos upload test/screenshots
-      - name: Deploy test report to Cloudflare Pages
-        id: pages
-        uses: ./.github/actions/deploy-cloudflare-pages
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          project: calamar-test-reports
-          branch: ${{ github.ref_name }}
-          path: test/report
-  preview:
-    name: Deploy / Preview
-    needs: test
-    environment:
-      name: development
-      url: ${{ steps.pages.outputs.url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Download build artifact
-        uses: actions/download-artifact@master
-        with:
-          name: build
-          path: build
-      - name: Current timestamp
-        uses: ./.github/actions/now
-      - name: Generate client environment
-        uses: ./.github/actions/generate-client-env
-        env:
-          REACT_APP_PUBLISH_TIMESTAMP: ${{ env.NOW }}
-          REACT_APP_ROLLBAR_ENV: development
-          REACT_APP_ROLLBAR_ENABLED: ${{ github.ref_name == 'master' && 'true' || 'false' }}
-        with:
-          file: build/env.js
-      - name: Deploy to Cloudflare Pages
-        id: pages
-        uses: ./.github/actions/deploy-cloudflare-pages
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          project: calamar
-          branch: ${{ github.ref_name }}
-          path: build
-      - name: Deploy to Rollbar
-        if: github.ref_name == 'master'
-        uses: ./.github/actions/deploy-rollbar
-        with:
-          accessToken: ${{ secrets.ROLLBAR_SERVER_ACCESS_TOKEN }}
-          environment: development
-          urls: ${{ steps.pages.outputs.url }} ${{ steps.pages.outputs.aliases }}
-          path: build
-  deploy:
-    name: Deploy / Production
-    needs: test
-    if: github.ref_name == 'master'
-    environment:
-      name: production
-      url: ${{ steps.pages.outputs.url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Download build artifact
-        uses: actions/download-artifact@master
-        with:
-          name: build
-          path: build
-      - name: Current timestamp
-        uses: ./.github/actions/now
-      - name: Generate client environment
-        uses: ./.github/actions/generate-client-env
-        env:
-          REACT_APP_PUBLISH_TIMESTAMP: ${{ env.NOW }}
-          REACT_APP_ROLLBAR_ENV: production
-          REACT_APP_ROLLBAR_ENABLED: true
-        with:
-          file: build/env.js
-      - name: Deploy to Cloudflare Pages
-        id: pages
-        uses: ./.github/actions/deploy-cloudflare-pages
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          project: calamar
-          branch: production
-          path: build
-      - name: Deploy to Rollbar
-        uses: ./.github/actions/deploy-rollbar
-        with:
-          accessToken: ${{ secrets.ROLLBAR_SERVER_ACCESS_TOKEN }}
-          environment: production
-          urls: ${{ steps.pages.outputs.url }} ${{ steps.pages.outputs.aliases }}
-          path: build

src/components/delegates/DelegatesTable.tsx

@@ -93,7 +93,14 @@ const filterMappings: DelegateFilter = {
 };
 
 function DelegatesTable(props: DelegatesTableProps) {
-	const { delegates, showTime, initialFilter, onFilterChange, initialSearch, onSearchChange } = props;
+	const {
+		delegates,
+		showTime,
+		initialFilter,
+		onFilterChange,
+		initialSearch,
+		onSearchChange,
+	} = props;
 
 	const { currency, prefix } = NETWORK_CONFIG;
 
@@ -169,7 +176,7 @@ function DelegatesTable(props: DelegatesTableProps) {
 	};
 
 	useEffect(() => {
-		if(!onSearchChange) return;
+		if (!onSearchChange) return;
 		onSearchChange(search);
 	}, [search]);
 
@@ -178,10 +185,10 @@ function DelegatesTable(props: DelegatesTableProps) {
 			data={delegates.data}
 			loading={delegates.loading}
 			notFound={delegates.notFound}
-			notFoundMessage='No delegate/undelegate events found'
+			notFoundMessage="No delegate/undelegate events found"
 			error={delegates.error}
 			pagination={delegates.pagination}
-			data-test='delegates-table'
+			data-test="delegates-table"
 			sort={sort}
 			onSortChange={handleSortChange}
 			filterMappings={filterMappings}
@@ -192,7 +199,7 @@ function DelegatesTable(props: DelegatesTableProps) {
 			searchPlaceholder="DELEGATE"
 		>
 			<DelegatesTableAttribute
-				label='Extrinsic'
+				label="Extrinsic"
 				render={(delegate) =>
 					delegate.extrinsicId && (
 						<Link
@@ -202,60 +209,60 @@ function DelegatesTable(props: DelegatesTableProps) {
 				}
 			/>
 			<DelegatesTableAttribute
-				label='Account'
+				label="Account"
 				render={(delegate) => (
 					<AccountAddress
 						address={delegate.account}
 						prefix={prefix}
 						shorten
 						link
-						copyToClipboard='small'
+						copyToClipboard="small"
 					/>
 				)}
 			/>
 			<DelegatesTableAttribute
-				label=''
-				render={({action}) => 
+				label=""
+				render={({ action }) => (
 					<div css={dirContainer}>
 						<div css={action === "UNDELEGATE" ? dirIn : dirOut}>{action}</div>
 					</div>
-				}
+				)}
 			/>
 			<DelegatesTableAttribute
-				label='Delegate'
-				render={({ delegate, delegateName }) => (
-					delegateName === undefined ?
+				label="Delegate"
+				render={({ delegate, delegateName }) =>
+					delegateName !== undefined ? (
+						<Link to={`/validators/${delegate}`}>{delegateName}</Link>
+					) : (
 						<AccountAddress
 							address={delegate}
 							prefix={prefix}
+							link={false}
 							shorten
-							delegate
-							copyToClipboard='small'
-						/> :
-						<Link to={ `/validators/${delegate}`}>
-							{delegateName}
-						</Link>
-				)}
+							copyToClipboard="small"
+						/>
+					)
+				}
 			/>
 			<DelegatesTableAttribute
-				label='Amount'
+				label="Amount"
 				render={(delegate) => (
 					<Currency
 						amount={delegate.amount}
 						currency={currency}
-						decimalPlaces='optimal'
+						decimalPlaces="optimal"
 						showFullInTooltip
 					/>
 				)}
 				sortable
-				sortProperty='amount'
+				sortProperty="amount"
 			/>
 			{showTime && (
 				<DelegatesTableAttribute
-					label='Time'
+					label="Time"
 					colCss={{ width: 200 }}
 					sortable
-					sortProperty='time'
+					sortProperty="time"
 					render={(delegate) => (
 						<BlockTimestamp
 							blockHeight={delegate.blockNumber}

src/components/validators/ValidatorPortfolio.tsx

@@ -7,6 +7,8 @@ import { useValidatorBalance } from "../../hooks/useValidatorBalance";
 import { StatItem } from "../network/StatItem";
 import { DonutChart } from "../DonutChart";
 import Loading from "../Loading";
+import { useState, useEffect } from "react";
+import { countNominators } from "../../services/delegateService";
 
 const chartContainer = css`
   display: flex;
@@ -37,7 +39,7 @@ export type ValidatorPortfolioProps = {
 export const ValidatorPortfolio = (props: ValidatorPortfolioProps) => {
 	const { hotkey } = props;
 
-	const balance = useValidatorBalance({ delegate: { equalTo: hotkey } });
+	const balance = useValidatorBalance({ address: { equalTo: hotkey } });
 	const coldKey = useColdKey(hotkey);
 	const validatorStaked = useValidatorStaked(hotkey, coldKey);
 	const loading = balance.loading || validatorStaked === undefined;
@@ -50,14 +52,27 @@ export const ValidatorPortfolio = (props: ValidatorPortfolioProps) => {
 			(rawAmountToDecimal(validatorStaked).toNumber() * 100) /
         rawAmountToDecimal(balance.data).toNumber()
 		).toFixed(2);
-	const nomineesStaked = loading
+
+	const [nominators, setNominators] = useState<number>();
+	useEffect(() => {
+		const fetchNominators = async () => {
+			if (hotkey === "") return;
+			const _count = await countNominators({
+				delegate: { equalTo: hotkey },
+			});
+			setNominators(_count);
+		};
+		fetchNominators();
+	}, [hotkey]);
+
+	const nomineesStaked = loading || nominators === 1
 		? 0
 		: rawAmountToDecimal(balance.data).toNumber() -
       rawAmountToDecimal(validatorStaked).toNumber();
-	const nomineesStakedFormatted = loading
+	const nomineesStakedFormatted = loading || nominators === 1
 		? 0
 		: formatNumber(nomineesStaked, { decimalPlaces: 2 });
-	const nomineesStakedPercent = loading
+	const nomineesStakedPercent = loading || nominators === 1
 		? 0
 		: (
 			(nomineesStaked * 100) /