Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 53x 16x 16x 16x 16x 53x 16x 16x 16x 53x 16x 16x 16x 48x 53x 16x 16x 16x 16x 16x 53x | import { SummaryContainerBase } from "@features/TransactionPanel/components/atoms";
import RiskLevelProgress from "@features/TransactionPanel/components/RiskLevelProgress";
import TransactionSummaryDetails from "@features/TransactionPanel/components/Summary/TransactionSummaryDetails";
import { styled } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { CountryFlagBase } from "@components/common/CountryFlag/CountryFlag";
import { formatToUTC } from "@utils/date.helpers";
import { TransactionSummaryDetailsItem } from "@features/TransactionPanel/helpers/getTransactionLineItems";
import { formatCoordinate } from "@features/TransactionPanel/utils";
import RiskCountdown from "@features/GiveRiskProfile/components/RiskCountdown";
// --- Helpers ---
const formatVpnStatus = (isVPN?: boolean, updatedAt?: number) => {
const vpnStatus = isVPN ? "VPN Detected" : "No VPN Detected";
Iif (!updatedAt) return vpnStatus;
const probeDate =
(formatToUTC(updatedAt, "MMM dd, yyyy") as string) ?? "Unknown date";
return `${vpnStatus} - IP Probe ran on ${probeDate}`;
};
const resolveLocation = (riskProfileData: any, originalData: any) => {
const city =
originalData?.ipProfileSnapshot?.ipInfo?.city ||
originalData?.ipInfo?.city ||
riskProfileData?.additionalDetails?.find(
(item: any) => item.label === "City",
)?.value ||
riskProfileData?.general?.countryName;
const country = riskProfileData?.general?.countryName;
return city && city !== country ? `${city}, ${country}` : country;
};
const buildIPProfileDetails = (
riskProfileData: any,
originalData: any,
isMobileView: boolean,
): TransactionSummaryDetailsItem[] => {
const general = riskProfileData?.general || {};
const mobileDetails = isMobileView
? [
{
label: "Longitude",
value: formatCoordinate(
riskProfileData?.geomap?.longitude,
"longitude",
),
},
{
label: "Latitude",
value: formatCoordinate(
riskProfileData?.geomap?.latitude,
"latitude",
),
},
{ label: "Timezone", value: riskProfileData?.geomap?.timezone },
]
: [];
const baseDetails = [
{
label: "Location",
value: resolveLocation(riskProfileData, originalData),
icon: general.countryCodeISO2 ? (
<CountryFlagBase
isoCode={general.countryCodeISO2}
size="small"
width={20}
height={20}
/>
) : undefined,
},
{ label: "IP Address", value: general.ipAddress },
{
label: "VPN Detected",
value: formatVpnStatus(general.isVPN, general.updatedAt),
},
];
return [...mobileDetails, ...baseDetails].filter((d) => !!d.value);
};
// --- Component ---
const IPProfileInfo = ({
data,
riskProfileData,
}: {
data: any;
riskProfileData: any;
}) => {
const { isMobileView } = useCustomThemeV2();
const riskLevel = riskProfileData?.level ?? 0;
const nextDeescalationAt = riskProfileData?.nextDeescalationAt ?? 0;
const customDetailsList = buildIPProfileDetails(
riskProfileData,
data,
isMobileView,
);
return (
<SummaryContainer>
<RiskLevelProgress
level={riskLevel}
showArrow={false}
showLabel
sx={{
padding: 0,
}}
counter={
nextDeescalationAt ? (
<RiskCountdown deEscalationTime={nextDeescalationAt} />
) : undefined
}
/>
<TransactionSummaryDetails
list={customDetailsList}
isHideBorder
sx={{
paddingBottom: 0,
}}
/>
</SummaryContainer>
);
};
// --- Styles ---
const SummaryContainer = styled(SummaryContainerBase)(({ theme }) => ({
padding: "20px",
}));
export default IPProfileInfo;
|