All files / src/features/TransactionPanel/components/Summary DeclinedContainer.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Box, Stack } from "@mui/material";
import { WarningIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import React from "react";
 
function DeclinedContainer({
  mspStatusDetails: { msp_response_code, msp_response_message },
}: {
  mspStatusDetails: {
    msp_name: string;
    msp_response_code: string;
    msp_response_message: string;
  };
}) {
  const { palette } = useAppTheme();
  const iconColor = palette?.primitive?.warning[50];
 
  return (
    <Stack
      width="100%"
      border={`1px solid ${iconColor}`}
      p="20px"
      gap="20px"
      flexDirection="row"
      borderRadius="12px"
      bgcolor={palette?.primitive?.warning[10]}
    >
      <Stack
        justifyContent="center"
        alignItems="center"
        borderRadius="100%"
        height="32px"
        width="32px"
        border={`1px solid ${iconColor}`}
      >
        <WarningIcon size="20px" fill={iconColor} />
      </Stack>
      <Box display="flex" justifyContent="center" alignItems="center">
        <GiveText fontWeight={400} fontSize="14px">
          Decline code: {msp_response_code}, {msp_response_message}
        </GiveText>
      </Box>
    </Stack>
  );
}
 
export default DeclinedContainer;