feat : APP-363 another user purchased credits modal (#2500)

Author: r41ph

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

@@ -7,7 +7,7 @@ export function Placeholder({
   isOpen,
   options,
   selectedOption,
-  OptionComponent,
+  OptionComponent = () => <></>,
   ariaLabel,
 }: {
   setIsOpen: (isOpen: boolean) => void;
@@ -24,8 +24,8 @@ export function Placeholder({
       className="inline-flex justify-center w-full border-none px-4 py-2 bg-grey-0 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none"
       onClick={() => setIsOpen(!isOpen)}
     >
-      {'value' in options[0] ? (
-        options.find(opt => opt.value === selectedOption)?.label
+      {options[0] && 'value' in options[0] ? (
+        options.find(opt => opt?.value === selectedOption)?.label
       ) : (
         <OptionComponent />
       )}

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

@@ -20,7 +20,7 @@ const CustomSelect = ({
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState<string>(defaultOption);
   const [OptionComponent, setOptionComponent] = useState<ComponentType>(
-    () => options[0].component?.element as ComponentType,
+    () => options?.[0]?.component?.element as ComponentType,
   );
 
   const handleSelect = (option: string) => {

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

@@ -12,7 +12,10 @@ import {
   spendingCapAtom,
 } from 'pages/BuyCredits/BuyCredits.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 {
@@ -42,8 +45,6 @@ export const CreditsAmount = ({
   cryptoCurrencies,
   allowedDenoms,
   creditTypePrecision,
-  card,
-  orderedSellOrders,
 }: CreditsAmountProps) => {
   const { _ } = useLingui();
 
@@ -54,6 +55,15 @@ export const CreditsAmount = ({
   const [spendingCap, setSpendingCap] = useAtom(spendingCapAtom);
   const paymentOption = useAtomValue(paymentOptionAtom);
 
+  const card = useMemo(
+    () => paymentOption === PAYMENT_OPTIONS.CARD,
+    [paymentOption],
+  );
+  const orderedSellOrders = useMemo(
+    () => getOrderedSellOrders(card, cardSellOrders, filteredCryptoSellOrders),
+    [card, cardSellOrders, filteredCryptoSellOrders],
+  );
+
   const displayDenom = useMemo(
     () =>
       findDisplayDenom({

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

@@ -14,7 +14,7 @@ export type Currency = {
 export interface CreditsAmountProps {
   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/ChooseCreditsForm/ChooseCreditsForm.tsx

@@ -255,6 +255,9 @@ export const ChooseCreditsForm = React.memo(
           PAYMENT_OPTIONS.CARD,
         );
       }
+      if (!cardSellOrders.length && paymentOption === PAYMENT_OPTIONS.CARD) {
+        handlePaymentOptions(PAYMENT_OPTIONS.CRYPTO);
+      }
     }, [cardSellOrders.length, initialPaymentOption]); // just run this once
 
     useEffect(() => {

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'
             }`}