feat : APP-363 another user purchased credits modal

web-components/src/components/inputs/new/CustomSelect/CustomSelect.test.tsx

@@ -66,7 +66,7 @@ describe('CustomSelect', () => {
     const dropdownButton = screen.getByRole('button');
     fireEvent.click(dropdownButton);
 
-    const optionButton = screen.getByText(/uregen/i);
+    const optionButton = screen.getByText(/regen/i);
     fireEvent.click(optionButton);
 
     expect(onSelect).toHaveBeenCalledWith('uregen');

web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { msg, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -8,7 +8,10 @@ import { ChooseCreditsFormSchemaType } from 'web-marketplace/src/components/orga
 import { errorBannerTextAtom } from 'lib/atoms/error.atoms';
 
 import { PAYMENT_OPTIONS } from 'pages/BuyCredits/BuyCredits.constants';
-import { getCreditsAvailableBannerText } from 'pages/BuyCredits/BuyCredits.utils';
+import {
+  getCreditsAvailableBannerText,
+  getOrderedSellOrders,
+} from 'pages/BuyCredits/BuyCredits.utils';
 
 import { findDisplayDenom } from '../DenomLabel/DenomLabel.utils';
 import {
@@ -41,8 +44,6 @@ export const CreditsAmount = ({
   cryptoCurrencies,
   allowedDenoms,
   creditTypePrecision,
-  card,
-  orderedSellOrders,
 }: CreditsAmountProps) => {
   const { _ } = useLingui();
 
@@ -51,6 +52,15 @@ export const CreditsAmount = ({
     useFormContext<ChooseCreditsFormSchemaType>();
   const setErrorBannerTextAtom = useSetAtom(errorBannerTextAtom);
 
+  const card = useMemo(
+    () => paymentOption === PAYMENT_OPTIONS.CARD,
+    [paymentOption],
+  );
+  const orderedSellOrders = useMemo(
+    () => getOrderedSellOrders(card, cardSellOrders, filteredCryptoSellOrders),
+    [card, cardSellOrders, filteredCryptoSellOrders],
+  );
+
   useEffect(() => {
     // Set initial credits amount to min(1, creditsAvailable)
     if (

web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx

@@ -18,7 +18,7 @@ export interface CreditsAmountProps {
   setSpendingCap: UseStateSetter<number>;
   creditsAvailable: number;
   setCreditsAvailable: UseStateSetter<number>;
-  filteredCryptoSellOrders: Array<UISellOrderInfo> | undefined;
+  filteredCryptoSellOrders: Array<UISellOrderInfo>;
   cardSellOrders: Array<CardSellOrder>;
   cryptoCurrencies: Currency[];
   allowedDenoms?: AllowedDenoms;

web-marketplace/src/components/organisms/BuyWarningModal/BuyWarningModal.constants.ts

@@ -0,0 +1 @@
+export const KEPLR_LOGIN_REQUIRED = 'keplr-login-required';

web-marketplace/src/components/organisms/BuyWarningModal/BuyWarningModal.tsx

@@ -0,0 +1,71 @@
+import { Box } from '@mui/material';
+
+import ContainedButton from 'web-components/src/components/buttons/ContainedButton';
+import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton';
+import Card from 'web-components/src/components/cards/Card';
+import SellOrderNotFoundIcon from 'web-components/src/components/icons/SellOrderNotFoundIcon';
+import Modal from 'web-components/src/components/modal';
+import { Title } from 'web-components/src/components/typography';
+
+import { UseStateSetter } from 'types/react/use-state';
+
+import {
+  BuyWarningModalContent,
+  BuyWarningModalStateType,
+} from './BuyWarningModal.types';
+
+interface BuyWarningModalProps extends BuyWarningModalContent {
+  warningModalState: BuyWarningModalStateType;
+  onClose: UseStateSetter<BuyWarningModalStateType>;
+  handleClick: (action: string | null) => void;
+}
+
+export const BuyWarningModal = ({
+  modalContent,
+  warningModalState,
+  onClose,
+  handleClick,
+}: BuyWarningModalProps) => {
+  const { title, content, buttons } = modalContent;
+  return (
+    <Modal
+      open={warningModalState.openModal}
+      onClose={() => onClose({ ...warningModalState, openModal: false })}
+      className="w-[560px] !py-40 !px-30"
+    >
+      <Box className="flex flex-col items-center">
+        <SellOrderNotFoundIcon className="w-[100px] h-[100px]" />
+        <Title variant="h4" className="text-center mt-20 px-30">
+          {title}
+        </Title>
+        <Card className="text-left w-full py-40 px-30 my-40">{content}</Card>
+        {buttons?.map((button, index) => {
+          return button.type === 'outlined' ? (
+            <OutlinedButton
+              key={index}
+              onClick={() => handleClick(button.action)}
+              className={`h-[49px] ${
+                buttons.find(button => button.type === 'contained')
+                  ? 'w-[90%]'
+                  : ''
+              }`}
+            >
+              {button.text}
+            </OutlinedButton>
+          ) : (
+            <ContainedButton
+              size="small"
+              onClick={() => handleClick(button.action)}
+              key={index}
+              className={`text-lg w-[90%] h-[49px] ${
+                buttons.length > 1 ? 'mb-20' : ''
+              }`}
+            >
+              {button.text}
+            </ContainedButton>
+          );
+        })}
+      </Box>
+    </Modal>
+  );
+};

web-marketplace/src/components/organisms/BuyWarningModal/BuyWarningModal.types.ts

@@ -0,0 +1,19 @@
+export type BuyWarningModalStateType = {
+  openModal: boolean;
+  creditsAvailable: number;
+};
+type BuyWarningModalButtonType = 'outlined' | 'contained';
+
+interface BuyWarningModalButton {
+  text: string;
+  action: string | null;
+  type: BuyWarningModalButtonType;
+}
+
+export interface BuyWarningModalContent {
+  modalContent: {
+    title: string;
+    content: React.ReactNode;
+    buttons: BuyWarningModalButton[];
+  };
+}

web-marketplace/src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.SelectAccountModal.tsx

@@ -55,6 +55,7 @@ export const SelectAccountModal = ({
       <div className="pb-40">
         {accounts.map(account => (
           <div
+            key={account.addr}
             className={`flex border-solid border border-grey-300 p-20 mb-10 rounded-[10px] cursor-pointer ${
               account.id === selectedAccountId ? 'bg-grey-200' : 'bg-grey-0'
             }`}