Skip to content

Commit

Permalink
Merge pull request #372 from Gateway-DAO/feat/mint-nft-card
Browse files Browse the repository at this point in the history
Feat/mint nft card
  • Loading branch information
andrefelizardo authored Feb 23, 2023
2 parents 8c982cd + af23834 commit dfec0d2
Show file tree
Hide file tree
Showing 13 changed files with 539 additions and 2 deletions.
16 changes: 16 additions & 0 deletions apps/website/components/atoms/icons/ethereum-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { SvgIcon, SvgIconProps } from '@mui/material';

export default function EthereumIcon(props: SvgIconProps) {
return (
<SvgIcon
width="11"
height="18"
viewBox="0 0 11 18"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M5.25003 0.666672L0 9.24128L5.25003 12.2998L10.5001 9.24128L5.25003 0.666672Z" />
<path d="M10.3319 10.1082L5.25001 13.2631L0.0482335 10.1082L5.25001 17.3333L10.3319 10.1082Z" />
</SvgIcon>
);
}
5 changes: 5 additions & 0 deletions apps/website/components/atoms/icons/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import EthereumIcon from './ethereum-icon';
import PolygonIcon from './polygon-icon';
import SolanaIcon from './solana-icon';

export { PolygonIcon, EthereumIcon, SolanaIcon };
16 changes: 16 additions & 0 deletions apps/website/components/atoms/icons/polygon-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { SvgIcon, SvgIconProps } from '@mui/material';

export default function PolygonIcon(props: SvgIconProps) {
return (
<SvgIcon
width="14"
height="12"
viewBox="0 0 14 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M9.69031 3.69868L4.31531 6.80493C4.21634 6.8615 4.10431 6.89125 3.99031 6.89125C3.87631 6.89125 3.76429 6.8615 3.66531 6.80493L1.94406 5.81368C1.84647 5.75588 1.76571 5.67355 1.70979 5.57488C1.65387 5.4762 1.62475 5.3646 1.62531 5.25118V3.26868C1.62539 3.15466 1.65545 3.04265 1.7125 2.94392C1.76955 2.84519 1.85156 2.7632 1.95031 2.70618L3.66656 1.71493C3.76554 1.65837 3.87756 1.62862 3.99156 1.62862C4.10556 1.62862 4.21759 1.65837 4.31656 1.71493L6.03281 2.70618C6.13156 2.7632 6.21358 2.84519 6.27062 2.94392C6.32767 3.04265 6.35774 3.15466 6.35781 3.26868V4.21993C6.35785 4.24832 6.36531 4.2762 6.37948 4.3008C6.39364 4.32541 6.41399 4.34587 6.43852 4.36016C6.46305 4.37444 6.4909 4.38206 6.51928 4.38224C6.54767 4.38242 6.5756 4.37516 6.60031 4.36118L7.49406 3.84493C7.54329 3.81637 7.58412 3.77532 7.61243 3.72595C7.64074 3.67657 7.65553 3.6206 7.65531 3.56368V2.51868C7.65524 2.4048 7.62531 2.29293 7.5685 2.19423C7.51169 2.09553 7.43 2.01345 7.33156 1.95618L4.31031 0.216183C4.21154 0.159011 4.09944 0.128906 3.98531 0.128906C3.87119 0.128906 3.75908 0.159011 3.66031 0.216183L0.645312 1.95618C0.546561 2.0132 0.464546 2.09519 0.4075 2.19392C0.350454 2.29265 0.320386 2.40466 0.320312 2.51868V6.00118C0.320386 6.11521 0.350454 6.22721 0.4075 6.32595C0.464546 6.42468 0.546561 6.50667 0.645312 6.56368L3.66031 8.30368C3.75908 8.36086 3.87119 8.39096 3.98531 8.39096C4.09944 8.39096 4.21154 8.36086 4.31031 8.30368L9.68531 5.19743C9.78429 5.14087 9.89631 5.11112 10.0103 5.11112C10.1243 5.11112 10.2363 5.14087 10.3353 5.19743L12.0516 6.18868C12.1503 6.2457 12.2323 6.32769 12.2894 6.42642C12.3464 6.52515 12.3765 6.63716 12.3766 6.75118V8.73368C12.3765 8.84771 12.3464 8.95971 12.2894 9.05845C12.2323 9.15718 12.1503 9.23917 12.0516 9.29618L10.3403 10.2874C10.2413 10.344 10.1293 10.3738 10.0153 10.3738C9.90131 10.3738 9.78929 10.344 9.69031 10.2874L7.97406 9.29618C7.87531 9.23917 7.7933 9.15718 7.73625 9.05845C7.6792 8.95971 7.64914 8.84771 7.64906 8.73368V7.78118C7.64919 7.75276 7.6418 7.7248 7.62764 7.70015C7.61348 7.6755 7.59306 7.65503 7.56844 7.64082C7.54382 7.6266 7.51588 7.61915 7.48745 7.61922C7.45902 7.61928 7.43112 7.62686 7.40656 7.64118L6.51281 8.15618C6.46367 8.18485 6.42291 8.22591 6.39461 8.27527C6.36632 8.32462 6.35147 8.38054 6.35156 8.43743V9.48368C6.35163 9.59756 6.38157 9.70944 6.43837 9.80814C6.49518 9.90684 6.57688 9.98892 6.67531 10.0462L9.69031 11.7862C9.78908 11.8434 9.90119 11.8735 10.0153 11.8735C10.1294 11.8735 10.2415 11.8434 10.3403 11.7862L13.3553 10.0462C13.4541 9.98917 13.5361 9.90718 13.5931 9.80845C13.6502 9.70971 13.6802 9.59771 13.6803 9.48368V6.00118C13.6802 5.88716 13.6502 5.77515 13.5931 5.67642C13.5361 5.57769 13.4541 5.4957 13.3553 5.43868L10.3403 3.69868C10.2415 3.64151 10.1294 3.61141 10.0153 3.61141C9.90119 3.61141 9.78908 3.64151 9.69031 3.69868Z" />
</SvgIcon>
);
}
17 changes: 17 additions & 0 deletions apps/website/components/atoms/icons/solana-icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { SvgIcon, SvgIconProps } from '@mui/material';

export default function SolanaIcon(props: SvgIconProps) {
return (
<SvgIcon
width="14"
height="12"
viewBox="0 0 14 12"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M10.7417 3.32828H0.72168L3.25668 0.800781H13.2767L10.7417 3.32828Z" />
<path d="M10.7417 11.1968H0.72168L3.25668 8.67057H13.2767L10.7417 11.1968Z" />
<path d="M13.2767 7.26057H3.25668L0.72168 4.73307H10.7417L13.2767 7.26057Z" />
</SvgIcon>
);
}
1 change: 0 additions & 1 deletion apps/website/components/molecules/credential-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
Box,
CardContent,
CardHeader,
CardMedia,
Chip,
Typography,
} from '@mui/material';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import useTranslation from 'next-translate/useTranslation';

import { brandColors } from '@gateway/theme';

import { Check, Close } from '@mui/icons-material';
import {
Box,
CircularProgress,
Dialog,
DialogContent,
DialogTitle,
} from '@mui/material';

import { AnimatedMessage } from '../../../../../atoms/animated-message';

type MintDialogProps = {
isOpen: boolean;
status: 'loading' | 'error' | 'success' | 'idle';
onClose: any;
};

export function MintDialog({ isOpen, status, onClose }: MintDialogProps) {
const { t } = useTranslation('protocol');

return (
<Dialog open={isOpen} fullWidth maxWidth="xs" onClose={onClose}>
<DialogTitle sx={{ pb: 0.5 }}>Mint as NFT</DialogTitle>
<DialogContent>
<Box
sx={{
height: 247,
backgroundColor: 'primary',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
{status === 'loading' && (
<CircularProgress
color="secondary"
sx={{
height: 60,
width: 60,
mb: 2,
p: 1,
bgcolor: 'primary.light',
borderRadius: '50%',
}}
/>
)}

{status == 'success' && (
<Check
sx={(theme) => ({
height: 40,
width: 40,
m: 2,
p: 1,
color: theme.palette.background.light,
bgcolor: 'success.light',
borderRadius: '50%',
})}
/>
)}
{status == 'error' && (
<Close
sx={{
height: 40,
width: 40,
m: 2,
p: 1,
color: 'primary',
bgcolor: 'error.main',
borderRadius: '50%',
}}
/>
)}

<Box sx={{ width: 200, position: 'relative' }}>
{status === 'loading' && (
<AnimatedMessage key="account">
{t('credential.mint-card.feedback-minting')}
</AnimatedMessage>
)}
{status === 'success' && (
<AnimatedMessage key="successful">
{t('credential.mint-card.feedback-successful')}
</AnimatedMessage>
)}
{status === 'error' && (
<AnimatedMessage key="failed">
{t('credential.mint-card.feedback-failed')}
</AnimatedMessage>
)}
</Box>
</Box>
</DialogContent>
</Dialog>
);
}
Loading

0 comments on commit dfec0d2

Please sign in to comment.