1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
Hassan Malik a9429c5c0d
[FLASK] Fix classnames for snaps components (#19234)
* renamed classnames according to BEM, removed unnecessary scss file

* remove plurality in classnames
2023-05-23 09:07:44 -04:00

124 lines
3.6 KiB
JavaScript

import PropTypes from 'prop-types';
import React, { useCallback } from 'react';
import { PageContainerFooter } from '../../../../components/ui/page-container';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Box from '../../../../components/ui/box/box';
import {
AlignItems,
BLOCK_SIZES,
BorderStyle,
FLEX_DIRECTION,
FONT_WEIGHT,
JustifyContent,
TextVariant,
TEXT_ALIGN,
} from '../../../../helpers/constants/design-system';
import { Text } from '../../../../components/component-library';
import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
import InstallError from '../../../../components/app/snaps/install-error/install-error';
import SnapAuthorship from '../../../../components/app/snaps/snap-authorship';
import { getSnapName } from '../../../../helpers/utils/util';
export default function SnapResult({
request,
requestState,
approveSnapResult,
targetSubjectMetadata,
}) {
const t = useI18nContext();
const onSubmit = useCallback(
() => approveSnapResult(request.metadata.id),
[request, approveSnapResult],
);
const hasError = !requestState.loading && requestState.error;
const isLoading = requestState.loading;
const snapName = getSnapName(targetSubjectMetadata.origin);
return (
<Box
className="page-container snap-result"
justifyContent={JustifyContent.spaceBetween}
height={BLOCK_SIZES.FULL}
borderStyle={BorderStyle.none}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Box
className="snap-result__header"
paddingLeft={4}
paddingRight={4}
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<SnapAuthorship snapId={targetSubjectMetadata.origin} />
{isLoading && (
<Box
className="snap-result__header__loader-container"
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
<PulseLoader />
</Box>
)}
{!isLoading && !hasError && (
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
height={BLOCK_SIZES.FULL}
paddingTop={2}
paddingBottom={2}
>
<Text
fontWeight={FONT_WEIGHT.BOLD}
variant={TextVariant.headingLg}
paddingBottom={2}
>
{t('snapResultSuccess')}
</Text>
<Text textAlign={TEXT_ALIGN.CENTER}>
{t('snapResultSuccessDescription', [<b key="1">{snapName}</b>])}
</Text>
</Box>
)}
{hasError && (
<InstallError
error={requestState.error}
title={t('snapResultError')}
/>
)}
</Box>
<Box
className="snap-result__footer"
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<PageContainerFooter
hideCancel
disabled={isLoading}
onSubmit={onSubmit}
submitText={t('ok')}
/>
</Box>
</Box>
);
}
SnapResult.propTypes = {
request: PropTypes.object.isRequired,
requestState: PropTypes.object.isRequired,
approveSnapResult: PropTypes.func.isRequired,
targetSubjectMetadata: PropTypes.shape({
iconUrl: PropTypes.string,
name: PropTypes.string,
origin: PropTypes.string.isRequired,
sourceCode: PropTypes.string,
version: PropTypes.string,
}).isRequired,
};