chore: add support us modal

packages/extension-polkagate/src/components/TwoButtons.tsx

@@ -16,6 +16,8 @@ interface Props {
   onPrimaryClick: React.MouseEventHandler<HTMLButtonElement>;
   secondaryBtnText?: string;
   onSecondaryClick: React.MouseEventHandler<HTMLButtonElement>;
+  primaryBtnStartIcon?: React.JSX.Element;
+  secondaryBtnStartIcon?: React.JSX.Element;
   mt?: string;
   ml?: string;
   disabled?: boolean;
@@ -25,7 +27,7 @@ interface Props {
 }
 // TODO: can replace ButtonWithCancel later
 
-export default function TwoButtons ({ disabled = false, isBusy = false, ml = '6%', mt, onPrimaryClick, onSecondaryClick, primaryBtnText, secondaryBtnText, variant = 'outlined', width = '88%' }: Props): React.ReactElement<Props> {
+export default function TwoButtons ({ disabled = false, isBusy = false, ml = '6%', mt, onPrimaryClick, onSecondaryClick, primaryBtnStartIcon, primaryBtnText, secondaryBtnStartIcon, secondaryBtnText, variant = 'outlined', width = '88%' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
 
@@ -35,6 +37,7 @@ export default function TwoButtons ({ disabled = false, isBusy = false, ml = '6%
         <Button
           disabled={isBusy}
           onClick={onSecondaryClick}
+          startIcon={secondaryBtnStartIcon}
           sx={{
             borderColor: 'secondary.main',
             color: variant === 'text' ? 'secondary.main' : 'text.primary',
@@ -59,6 +62,7 @@ export default function TwoButtons ({ disabled = false, isBusy = false, ml = '6%
           : <Button
             disabled={disabled}
             onClick={onPrimaryClick}
+            startIcon={primaryBtnStartIcon}
             sx={{
               borderColor: 'secondary.main',
               borderRadius: '5px',

packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx

@@ -0,0 +1,121 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import { faHandshakeAngle } from '@fortawesome/free-solid-svg-icons';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import WatchLaterIcon from '@mui/icons-material/WatchLater';
+import { Box, Grid, Typography } from '@mui/material';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+
+import { BN, BN_ZERO } from '@polkadot/util';
+
+import { AccountsAssetsContext, TwoButtons } from '../../components';
+import { getStorage, setStorage } from '../../components/Loading';
+import { useTranslation } from '../../hooks';
+import { tieAccount } from '../../messaging';
+import { POLKADOT_GENESIS_HASH } from '../../util/constants';
+import { openOrFocusTab } from '../accountDetails/components/CommonTasks';
+import SimpleModalTitle from '../partials/SimpleModalTitle';
+import { DraggableModal } from './components/DraggableModal';
+
+const PROPOSAL_NO = 1264;
+const SHOW_INTERVAL = 10 * 1000; // ms
+const STORAGE_LABEL = `polkaGateVoteReminderLastShown_${PROPOSAL_NO}`;
+
+export default function SupportUs (): React.ReactElement {
+  const { t } = useTranslation();
+  const { accountsAssets } = useContext(AccountsAssetsContext);
+
+  const [open, setOpen] = useState<boolean>(true);
+  const [maxPowerAddress, setAddress] = useState<string>();
+  const [timeToShow, setTimeToShow] = useState<boolean>();
+
+  useEffect(() => {
+    getStorage(STORAGE_LABEL).then((maybeDate) => {
+      (!maybeDate || Date.now() - (maybeDate as unknown as number) > SHOW_INTERVAL) && setTimeToShow(true);
+    }).catch(console.error);
+  }, [accountsAssets]);
+
+  useEffect(() => {
+    if (!accountsAssets) {
+      return;
+    }
+
+    const balances = accountsAssets.balances;
+    let addressWithMaxVotingPower: string | undefined;
+    let max = BN_ZERO;
+
+    Object.keys(balances).forEach((address) => {
+      const maybeAsset = balances[address]?.[POLKADOT_GENESIS_HASH];
+
+      if (!maybeAsset) {
+        return;
+      }
+
+      const votingBalance = maybeAsset[0].votingBalance ? new BN(maybeAsset[0].votingBalance) : BN_ZERO;
+
+      max = votingBalance.gt(max) ? votingBalance : max;
+      addressWithMaxVotingPower = address;
+    });
+
+    addressWithMaxVotingPower && tieAccount(addressWithMaxVotingPower, POLKADOT_GENESIS_HASH).finally(() => {
+      setAddress(addressWithMaxVotingPower);
+    }).catch(console.error);
+  }, [accountsAssets]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const handleOnVote = useCallback(() => {
+    maxPowerAddress && openOrFocusTab(`/governance/${maxPowerAddress}/referenda/${PROPOSAL_NO}`);
+  }, [maxPowerAddress]);
+
+  const handleMaybeLater = useCallback(() => {
+    setStorage(STORAGE_LABEL, Date.now()).catch(console.error);
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      {maxPowerAddress && timeToShow &&
+        <DraggableModal onClose={handleClose} open={open}>
+          <>
+            <SimpleModalTitle
+              icon={faHandshakeAngle}
+              onClose={handleClose}
+              title={t('Support PolkaGate!')}
+            />
+            <Grid item sx={{ bgcolor: 'background.paper', border: 1, borderColor: 'divider', borderRadius: '5px', mt: 5, p: '10px' }}>
+              <Typography fontSize='14px' lineHeight='25px' textAlign='left'>
+                {t('We’re seeking retroactive funding to sustain and expand PolkaGate’s impact! Your vote can empower us to continue delivering valuable improvements and innovations. Voting won’t spend your tokens—they’ll just be temporarily locked based on your chosen conviction level.')}
+              </Typography>
+            </Grid>
+            <Box
+              alt='Description of the image'
+              component='img'
+              src='/images/supportUs.webp'
+              sx={{
+                width: '60%',
+                height: 'auto',
+                borderRadius: 1
+              }}
+            />
+            <TwoButtons
+              ml='0'
+              onPrimaryClick={handleOnVote}
+              onSecondaryClick={handleMaybeLater}
+              primaryBtnStartIcon={<ThumbUpIcon />}
+              primaryBtnText={t('Vote to Support Us')}
+              secondaryBtnStartIcon={<WatchLaterIcon />}
+              secondaryBtnText={t('Maybe Later')}
+              width='88%'
+            />
+          </>
+        </DraggableModal>
+      }
+    </>
+  );
+}

packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx

@@ -10,6 +10,7 @@ import { AccountContext, ActionContext } from '../../components';
 import { useAccountsOrder, useAlerts, useFullscreen, useProfileAccounts, useTranslation } from '../../hooks';
 import { AddNewAccountButton } from '../../partials';
 import FullScreenHeader from '../governance/FullScreenHeader';
+import SupportUs from '../governance/SupportUs';
 import HeaderComponents from './components/HeaderComponents';
 import DraggableAccountsList from './partials/DraggableAccountList';
 import HomeMenu from './partials/HomeMenu';
@@ -89,6 +90,7 @@ function HomePageFullScreen (): React.ReactElement {
           </Grid>
         </Grid>
       </Grid>
+      <SupportUs />
     </Grid>
   );
 }

packages/extension/public/locales/en/translation.json

@@ -1411,5 +1411,6 @@
   "Not recoverable": "",
   "No proxy": "",
   "Switch Theme": "",
-  "Account Icon": ""
+  "Account Icon": "",
+  "Support PolkaGate!": ""
 }