Merge pull request #460 from cardano-foundation/feat/change-voting-cl…

…oses-and-wallet-buttons-colors

feat(cip-1694-ui): change voting closes and connect button colors

ui/cip-1694/src/common/api/__tests__/api.test.ts

@@ -1,7 +1,7 @@
 const fetchMock = jest.fn();
 const mockCanonicalize = jest.fn();
 const EVENT_ID = 'CIP-1694_Pre_Ratification_3316';
-const TARGET_NETWORK = 'CIP-Preprod';
+const TARGET_NETWORK = 'Preprod';
 const VOTING_LEDGER_FOLLOWER_APP_SERVER_URL = 'VOTING_LEDGER_FOLLOWER_APP_SERVER_URL';
 const VOTING_APP_SERVER_URL = 'VOTING_APP_SERVER_URL';
 const CATEGORY_ID = 'CHANGE_GOV_STRUCTURE';

ui/cip-1694/src/common/utils/__tests__/voteUtils.test.ts

@@ -15,7 +15,7 @@ jest.mock('../../../env', () => {
       ...original.env,
       CATEGORY_ID: 'CHANGE_GOV_STRUCTURE',
       EVENT_ID: 'CIP-1694_Pre_Ratification_3316',
-      TARGET_NETWORK: 'PREVIEW',
+      TARGET_NETWORK: 'Preprod',
     },
   };
 });
@@ -38,7 +38,7 @@ describe('voteUtils: ', () => {
         category: 'CHANGE_GOV_STRUCTURE',
       })
     ).toEqual(
-      '{"action":"CAST_VOTE","actionText":"Cast Vote","data":{"address":"stake_test1uqwcz0754wwpuhm6xhdpda6u9enyahaj5ynlc9ay5l4mlms4pyqyg","category":"CHANGE_GOV_STRUCTURE","event":"CIP-1694_Pre_Ratification_3316","id":"mockv4","network":"PREVIEW","proposal":"YES","votedAt":"36004360","votingPower":"9997463457"},"slot":"36004360","uri":"https://evoting.cardano.org/voltaire"}'
+      '{"action":"CAST_VOTE","actionText":"Cast Vote","data":{"address":"stake_test1uqwcz0754wwpuhm6xhdpda6u9enyahaj5ynlc9ay5l4mlms4pyqyg","category":"CHANGE_GOV_STRUCTURE","event":"CIP-1694_Pre_Ratification_3316","id":"mockv4","network":"Preprod","proposal":"YES","votedAt":"36004360","votingPower":"9997463457"},"slot":"36004360","uri":"https://evoting.cardano.org/voltaire"}'
     );
   });
 

ui/cip-1694/src/common/utils/common.ts

@@ -0,0 +1,9 @@
+import { NetworkType } from '@cardano-foundation/cardano-connect-with-wallet';
+
+export const resolveCardanoNetwork = (network: string): NetworkType => {
+  if (['MAINNET', 'MAIN'].includes(network.toUpperCase())) {
+    return NetworkType.MAINNET;
+  } else {
+    return NetworkType.TESTNET;
+  }
+};

ui/cip-1694/src/components/ConnectWalletModal/ConnectWalletModal.tsx

@@ -21,11 +21,24 @@ type ConnectWalletModalProps = {
   onConnectWallet: () => void;
   onConnectWalletError: (walletName: string, error: Error) => void;
   onCloseFn: () => void;
+  installedExtensions: string[];
 };
 
 export const ConnectWalletModal = (props: ConnectWalletModalProps) => {
-  const { name, id, openStatus, title, description, onConnectWallet, onConnectWalletError, onCloseFn } = props;
-  const supportedWallets = env.SUPPORTED_WALLETS;
+  const {
+    name,
+    id,
+    openStatus,
+    title,
+    description,
+    onConnectWallet,
+    onConnectWalletError,
+    onCloseFn,
+    installedExtensions,
+  } = props;
+  const supportedWallets = installedExtensions.filter((installedWallet) =>
+    env.SUPPORTED_WALLETS.includes(installedWallet)
+  );
 
   return (
     <Dialog
@@ -81,6 +94,7 @@ export const ConnectWalletModal = (props: ConnectWalletModalProps) => {
             >
               <Box width="100%">
                 <ConnectWalletList
+                  showUnavailableWallets={0}
                   supportedWallets={supportedWallets}
                   onConnect={onConnectWallet}
                   onConnectError={onConnectWalletError}

ui/cip-1694/src/components/ConnectWalletModal/__tests__/ConnectWalletModal.test.tsx

@@ -17,12 +17,17 @@ jest.mock('../../../env', () => {
       CATEGORY_ID: 'CHANGE_GOV_STRUCTURE',
       EVENT_ID: 'CIP-1694_Pre_Ratification_3316',
       SUPPORTED_WALLETS: mockSupportedWallets,
+      TARGET_NETWORK: 'Preprod',
     },
   };
 });
 
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => ({
   useCardano: jest.fn(),
+  NetworkType: {
+    MAINNET: 'mainnet',
+    TESTNET: 'testnet',
+  },
   getWalletIcon: () => <span data-testid="getWalletIcon" />,
   ConnectWalletList: mockConnectWalletList,
   ConnectWalletButton: () => {
@@ -44,6 +49,7 @@ describe('ConnectWalletModal', () => {
     onConnectWallet: jest.fn(),
     onConnectWalletError: jest.fn(),
     onCloseFn: jest.fn(),
+    installedExtensions: ['Wallet1', 'Wallet2'],
   };
 
   test('should display proper state', async () => {
@@ -71,6 +77,7 @@ describe('ConnectWalletModal', () => {
 
     expect(within(modal).queryByTestId('connect-wallet-list')).not.toBeNull();
     expect(mockConnectWalletList.mock.lastCall[0]).toEqual({
+      showUnavailableWallets: 0,
       supportedWallets: mockSupportedWallets,
       onConnect: props.onConnectWallet,
       onConnectError: props.onConnectWalletError,

ui/cip-1694/src/components/EventTime/EventTime.module.scss

@@ -1,5 +1,5 @@
 .container {
-  color: #1d439b;
+  color: #061d3c;
   display: flex;
   flex-direction: row;
   font-style: normal;

ui/cip-1694/src/components/common/Content/Content.tsx

@@ -4,15 +4,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Box, debounce } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import BlockIcon from '@mui/icons-material/Block';
+import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
 import { ConnectWalletModal } from 'components/ConnectWalletModal/ConnectWalletModal';
 import { PageRoutes } from 'common/routes';
 import { RootState } from 'common/store';
 import { setIsConnectWalletModalVisible } from 'common/store/userSlice';
 import { clearUserInSessionStorage } from 'common/utils/session';
+import { resolveCardanoNetwork } from 'common/utils/common';
 import styles from './Content.module.scss';
 import { Toast } from '../Toast/Toast';
+import { env } from '../../../env';
 
 export const Content = () => {
+  const { installedExtensions } = useCardano({ limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK) });
   const isConnectWalletModalVisible = useSelector((state: RootState) => state.user.isConnectWalletModalVisible);
   const dispatch = useDispatch();
 
@@ -44,6 +48,7 @@ export const Content = () => {
       <CssBaseline />
       <PageRoutes />
       <ConnectWalletModal
+        installedExtensions={installedExtensions}
         openStatus={isConnectWalletModalVisible}
         onCloseFn={onCloseFn}
         name="connect-wallet-list"

ui/cip-1694/src/components/common/Content/__tests__/Content.test.tsx

@@ -16,6 +16,7 @@ import { UserState } from 'common/store/types';
 import { ROUTES } from 'common/routes';
 import { Toast } from 'components/common/Toast/Toast';
 import { USER_SESSION_KEY } from 'common/utils/session';
+import { useCardanoMock } from 'test/mocks';
 import { Content } from '../Content';
 import { renderWithProviders } from '../../../../test/mockProviders';
 import { CustomRouter } from '../../../../test/CustomRouter';
@@ -55,12 +56,19 @@ jest.mock('../../../../env', () => {
       CATEGORY_ID: 'CHANGE_GOV_STRUCTURE',
       EVENT_ID: 'CIP-1694_Pre_Ratification_3316',
       SUPPORTED_WALLETS: mockSupportedWallets,
+      TARGET_NETWORK: 'Preprod',
     },
   };
 });
 
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => ({
-  useCardano: jest.fn(),
+  useCardano: jest.fn(() => ({
+    installedExtensions: useCardanoMock.installedExtensions,
+  })),
+  NetworkType: {
+    MAINNET: 'mainnet',
+    TESTNET: 'testnet',
+  },
   getWalletIcon: () => <span data-testid="getWalletIcon" />,
   ConnectWalletList: mockConnectWalletList,
   ConnectWalletButton: () => {

ui/cip-1694/src/components/common/Header/__tests__/Header.test.tsx

@@ -29,6 +29,10 @@ import { Header } from '../Header';
 
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => ({
   useCardano: mockUseCardano,
+  NetworkType: {
+    MAINNET: 'mainnet',
+    TESTNET: 'testnet',
+  },
   getWalletIcon: () => <span data-testid="getWalletIcon" />,
   ConnectWalletList: () => {
     return <span data-testid="connect-wallet-list" />;
@@ -58,6 +62,7 @@ jest.mock('../../../../env', () => {
     ...original,
     env: {
       ...original.env,
+      TARGET_NETWORK: 'Preprod',
       SUPPORTED_WALLETS: mockSupportedWallets,
     },
   };

ui/cip-1694/src/components/common/Header/components/ConnectWalletButton.module.scss

@@ -12,7 +12,7 @@
 }
 
 .connectButton {
-  background: #061d3c !important;
+  background: #1d439b !important;
   border-radius: 8px !important;
   color: #f5f9ff !important;
   font-size: 16px !important;

ui/cip-1694/src/components/common/Header/components/ConnectWalletButton.tsx

@@ -16,15 +16,20 @@ import { setConnectedWallet, setIsConnectWalletModalVisible } from 'common/store
 import { Toast } from 'components/common/Toast/Toast';
 import { RootState } from 'common/store';
 import { clearUserInSessionStorage } from 'common/utils/session';
+import { resolveCardanoNetwork } from 'common/utils/common';
 import styles from './ConnectWalletButton.module.scss';
 import { env } from '../../../../env';
 
 export const ConnectWalletButton = ({ isMobileMenu = false }) => {
-  const { disconnect, stakeAddress, enabledWallet } = useCardano();
+  const { disconnect, stakeAddress, enabledWallet, installedExtensions } = useCardano({
+    limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
+  });
   const dispatch = useDispatch();
   const connectedWallet = useSelector((state: RootState) => state.user.connectedWallet);
 
-  const supportedWallets = env.SUPPORTED_WALLETS;
+  const supportedWallets = installedExtensions.filter((installedWallet) =>
+    env.SUPPORTED_WALLETS.includes(installedWallet)
+  );
 
   // TODO: move to providers level and throw?
   useEffect(() => {
@@ -72,6 +77,7 @@ export const ConnectWalletButton = ({ isMobileMenu = false }) => {
     </Button>
   ) : (
     <CFConnectWalletButton
+      showUnavailableWallets={0}
       data-testid="connected-wallet-button"
       label="Connect wallet"
       borderRadius={8}
@@ -99,12 +105,12 @@ export const ConnectWalletButton = ({ isMobileMenu = false }) => {
         }
         span {
           color: #F5F9FF;
-          background: #061D3C;
+          background: #1D439B;
           border-radius: 8px;
           padding: 0 25px;
           : hover {
             color: #F5F9FF;
-            background: #061D3C;
+            background: #1D439B;
           }
         }
         span, button {

ui/cip-1694/src/components/common/Header/components/HeaderActions.tsx

@@ -13,12 +13,14 @@ import { RootState } from 'common/store';
 import { getDateAndMonth } from 'common/utils/dateUtils';
 import * as voteService from 'common/api/voteService';
 import { setChainTipData } from 'common/store/userSlice';
+import { resolveCardanoNetwork } from 'common/utils/common';
 import { Toast } from 'components/common/Toast/Toast';
 import { ResultsCommingSoonModal } from 'pages/Leaderboard/components/ResultsCommingSoonModal/ResultsCommingSoonModal';
 import { formatUTCDate } from 'pages/Leaderboard/utils';
 import { ChainTip } from 'types/voting-ledger-follower-types';
 import { ConnectWalletButton } from './ConnectWalletButton';
 import styles from './HeaderActions.module.scss';
+import { env } from '../../../../env';
 
 type HeaderActionsProps = {
   onClick?: () => void;
@@ -27,7 +29,7 @@ type HeaderActionsProps = {
 };
 
 export const HeaderActions = ({ isMobileMenu = false, onClick, showNavigationItems }: HeaderActionsProps) => {
-  const { isConnected } = useCardano();
+  const { isConnected } = useCardano({ limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK) });
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch();

ui/cip-1694/src/components/common/Header/components/__tests__/ConnectWalletButton.test.tsx

@@ -37,6 +37,10 @@ Object.defineProperty(window, 'sessionStorage', {
 
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => ({
   useCardano: mockUseCardano,
+  NetworkType: {
+    MAINNET: 'mainnet',
+    TESTNET: 'testnet',
+  },
   getWalletIcon: () => <span data-testid="getWalletIcon" />,
   ConnectWalletList: () => {
     return <span data-testid="connect-wallet-list" />;
@@ -64,6 +68,7 @@ describe('ConnectWalletButton', () => {
 
   test('should display toast if no wallets provided', async () => {
     envFile.env.SUPPORTED_WALLETS = [];
+    envFile.env.TARGET_NETWORK = 'Preprod';
     const history = createMemoryHistory({ initialEntries: [ROUTES.INTRO] });
     renderWithProviders(
       <CustomRouter history={history}>
@@ -84,6 +89,7 @@ describe('ConnectWalletButton', () => {
   });
 
   test('should handle onConnect', async () => {
+    envFile.env.TARGET_NETWORK = 'Preprod';
     ConnectWalletButtonMock.mockReset();
     ConnectWalletButtonMock.mockImplementation(({ onConnect }: { onConnect: () => void }) => {
       useEffect(() => {
@@ -107,6 +113,7 @@ describe('ConnectWalletButton', () => {
   });
 
   test('should handle onDisconnect', async () => {
+    envFile.env.TARGET_NETWORK = 'Preprod';
     const connectedWallet = 'connectedWallet';
     ConnectWalletButtonMock.mockReset();
     ConnectWalletButtonMock.mockImplementation(({ onDisconnect }: { onDisconnect: () => void }) => {

ui/cip-1694/src/components/common/Header/components/__tests__/HeaderActions.test.tsx

@@ -21,6 +21,10 @@ import { HeaderActions } from '../HeaderActions';
 
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => ({
   useCardano: mockUseCardano,
+  NetworkType: {
+    MAINNET: 'mainnet',
+    TESTNET: 'testnet',
+  },
   getWalletIcon: () => <span data-testid="getWalletIcon" />,
   ConnectWalletList: () => {
     return <span data-testid="connect-wallet-list" />;
@@ -48,6 +52,17 @@ jest.mock('common/api/voteService', () => ({
   getChainTip: mockGetChainTip,
 }));
 
+jest.mock('../../../../../env', () => {
+  const original = jest.requireActual('../../../../../env');
+  return {
+    ...original,
+    env: {
+      ...original.env,
+      TARGET_NETWORK: 'Preprod',
+    },
+  };
+});
+
 describe('HeaderActions', () => {
   beforeEach(() => {
     mockUseCardano.mockReturnValue(useCardanoMock);

ui/cip-1694/src/components/common/Toast/Toast.module.scss

@@ -1,6 +1,6 @@
 .toast {
   align-items: center;
-  background: #061d3c;
+  background: #1d439b;
   border-radius: 8px !important;
   display: flex;
   font-size: 16px;

ui/cip-1694/src/pages/Introduction/__tests__/Introduction.test.tsx

@@ -18,6 +18,10 @@ import { formatUTCDate } from 'common/utils/dateUtils';
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => {
   return {
     useCardano: mockUseCardano,
+    NetworkType: {
+      MAINNET: 'mainnet',
+      TESTNET: 'testnet',
+    },
     getWalletIcon: () => <span data-testid="getWalletIcon" />,
     ConnectWalletList: () => {
       return <span data-testid="ConnectWalletList" />;

ui/cip-1694/src/pages/Leaderboard/Leaderboard.tsx

@@ -10,15 +10,17 @@ import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
 import { ByProposalsInCategoryStats } from 'types/voting-app-types';
 import { ProposalPresentation } from 'types/voting-ledger-follower-types';
 import { RootState } from 'common/store';
+import { resolveCardanoNetwork } from 'common/utils/common';
 import * as leaderboardService from 'common/api/leaderboardService';
 import { Toast } from 'components/common/Toast/Toast';
 import { getPercentage, proposalColorsMap } from './utils';
 import { StatsTile } from './components/StatsTile';
 import styles from './Leaderboard.module.scss';
 import { StatItem } from './types';
+import { env } from '../../env';
 
 export const Leaderboard = () => {
-  const { isConnected } = useCardano();
+  const { isConnected } = useCardano({ limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK) });
   const event = useSelector((state: RootState) => state.user.event);
   const [stats, setStats] = useState<ByProposalsInCategoryStats['proposals']>();
 

ui/cip-1694/src/pages/Leaderboard/__tests__/Leaderboard.test.tsx

@@ -43,6 +43,10 @@ jest.mock('swiper', () => ({
 jest.mock('@cardano-foundation/cardano-connect-with-wallet', () => {
   return {
     useCardano: mockUseCardano,
+    NetworkType: {
+      MAINNET: 'mainnet',
+      TESTNET: 'testnet',
+    },
     getWalletIcon: () => <span data-testid="getWalletIcon" />,
     ConnectWalletList: () => {
       return <span data-testid="ConnectWalletList" />;
@@ -61,6 +65,7 @@ jest.mock('../../../env', () => {
       ...original.env,
       CATEGORY_ID: 'CHANGE_GOV_STRUCTURE',
       EVENT_ID: 'CIP-1694_Pre_Ratification_3316',
+      TARGET_NETWORK: 'Preprod',
     },
   };
 });