-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #372 from Gateway-DAO/feat/mint-nft-card
Feat/mint nft card
- Loading branch information
Showing
13 changed files
with
539 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,7 +10,6 @@ import { | |
Box, | ||
CardContent, | ||
CardHeader, | ||
CardMedia, | ||
Chip, | ||
Typography, | ||
} from '@mui/material'; | ||
|
102 changes: 102 additions & 0 deletions
102
apps/website/components/templates/protocol/credentials/show/components/mint-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
Oops, something went wrong.