Skip to content

Commit

Permalink
Merge pull request #298 from Gateway-DAO/release/dec-7
Browse files Browse the repository at this point in the history
Release - December 7th (Prod)
  • Loading branch information
NMCarv authored Dec 7, 2022
2 parents dc3f89e + a7f4c3b commit 211f43a
Show file tree
Hide file tree
Showing 25 changed files with 1,182 additions and 1,035 deletions.
20 changes: 20 additions & 0 deletions apps/website/components/atoms/animated-message.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { PropsWithChildren } from 'react';

import { MotionBox } from '@gateway/ui';

export const AnimatedMessage = ({ children }: PropsWithChildren<unknown>) => (
<MotionBox
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 100 }}
transition={{ ease: 'easeInOut' }}
sx={{
position: 'absolute',
textAlign: 'center',
width: '100%',
}}
>
{' '}
{children}
</MotionBox>
);
108 changes: 108 additions & 0 deletions apps/website/components/atoms/share-btn-fn.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import useTranslation from 'next-translate/useTranslation';
import { useEffect } from 'react';

import { useSnackbar } from 'notistack';
import { useCopyToClipboard } from 'react-use';

import {
Reddit,
Twitter,
Facebook,
Link as LinkIcon,
} from '@mui/icons-material';
import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';

import objectToParams from '../../utils/map-object';

type Props = {
title?: string;
url?: string;
menu: {
element: HTMLElement;
isOpen: boolean;
onOpen: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
onClose: () => void;
withOnClose: (cb: () => void) => () => void;
};
};

type SocialProps = {
title?: string;
url?: string;
};

const tweetLink = (props: SocialProps) =>
`https://twitter.com/intent/tweet${objectToParams({
text: props.title,
url: props.url,
})}`;

const redditLink = (props: SocialProps) =>
`https://reddit.com/submit${objectToParams(props)}`;

const facebookLink = (props: SocialProps) =>
`https://www.facebook.com/sharer/sharer.php${objectToParams({
u: props.url,
quote: props.title,
})}`;

export function ShareButtonFn({
title = 'Gateway',
url = typeof window !== 'undefined' ? window.location.href : '',
menu,
}: Props) {
const { enqueueSnackbar } = useSnackbar();
const [state, copyToClipboard] = useCopyToClipboard();
const data = { title, url };
const { t } = useTranslation('common');
const onShare = () => {
try {
if (navigator?.share && navigator.canShare(data)) {
navigator.share(data);
} else {
copyToClipboard(data.url);
}
} catch (e) {
console.error(e);
} finally {
menu.onClose();
}
};

useEffect(() => {
if (state?.value) {
enqueueSnackbar('Copied link!');
}
}, [state]);

return (
<>
<Menu anchorEl={menu.element} open={menu.isOpen} onClose={menu.onClose}>
<MenuItem component="a" href={tweetLink(data)} target="_blank">
<ListItemIcon>
<Twitter />
</ListItemIcon>
<ListItemText>Twitter</ListItemText>
</MenuItem>
<MenuItem component="a" href={facebookLink(data)} target="_blank">
<ListItemIcon>
<Facebook />
</ListItemIcon>
<ListItemText>Facebook</ListItemText>
</MenuItem>
<MenuItem component="a" href={redditLink(data)} target="_blank">
<ListItemIcon>
<Reddit />
</ListItemIcon>
<ListItemText>Reddit</ListItemText>
</MenuItem>
<MenuItem onClick={onShare}>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
<ListItemText>{t('actions.share-link')}</ListItemText>
</MenuItem>
</Menu>
</>
);
}
95 changes: 5 additions & 90 deletions apps/website/components/atoms/share-button.tsx
Original file line number Diff line number Diff line change
@@ -1,77 +1,17 @@
import useTranslation from 'next-translate/useTranslation';
import { useEffect } from 'react';

import { useSnackbar } from 'notistack';
import { useCopyToClipboard } from 'react-use';
import { ShareButtonFn } from './share-btn-fn';

import { useMenu } from '@gateway/ui';

import {
IosShare,
Reddit,
Twitter,
Facebook,
Link as LinkIcon,
} from '@mui/icons-material';
import {
Avatar,
IconButton,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
} from '@mui/material';

import objectToParams from '../../utils/map-object';
import { IosShare } from '@mui/icons-material';
import { Avatar, IconButton } from '@mui/material';

type Props = {
title?: string;
url?: string;
};

const tweetLink = (props: Props) =>
`https://twitter.com/intent/tweet${objectToParams({
text: props.title,
url: props.url,
})}`;

const redditLink = (props: Props) =>
`https://reddit.com/submit${objectToParams(props)}`;

const facebookLink = (props: Props) =>
`https://www.facebook.com/sharer/sharer.php${objectToParams({
u: props.url,
quote: props.title,
})}`;

export function ShareButton({
title = 'Gateway',
url = typeof window !== 'undefined' ? window.location.href : '',
}: Props) {
const { enqueueSnackbar } = useSnackbar();
const [state, copyToClipboard] = useCopyToClipboard();
export function ShareButton(Props: Props) {
const menu = useMenu();
const data = { title, url };
const { t } = useTranslation('common');
const onShare = () => {
try {
if (navigator?.share && navigator.canShare(data)) {
navigator.share(data);
} else {
copyToClipboard(data.url);
}
} catch (e) {
console.error(e);
} finally {
menu.onClose();
}
};

useEffect(() => {
if (state?.value) {
enqueueSnackbar('Copied link!');
}
}, [state]);

return (
<>
Expand All @@ -90,32 +30,7 @@ export function ShareButton({
/>
</Avatar>
</IconButton>
<Menu anchorEl={menu.element} open={menu.isOpen} onClose={menu.onClose}>
<MenuItem component="a" href={tweetLink(data)} target="_blank">
<ListItemIcon>
<Twitter />
</ListItemIcon>
<ListItemText>Twitter</ListItemText>
</MenuItem>
<MenuItem component="a" href={facebookLink(data)} target="_blank">
<ListItemIcon>
<Facebook />
</ListItemIcon>
<ListItemText>Facebook</ListItemText>
</MenuItem>
<MenuItem component="a" href={redditLink(data)} target="_blank">
<ListItemIcon>
<Reddit />
</ListItemIcon>
<ListItemText>Reddit</ListItemText>
</MenuItem>
<MenuItem onClick={onShare}>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>
<ListItemText>{t('actions.share-link')}</ListItemText>
</MenuItem>
</Menu>
<ShareButtonFn {...{ ...Props, menu }} />
</>
);
}
53 changes: 30 additions & 23 deletions apps/website/components/molecules/mint-card/mint-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,34 +33,41 @@ export const MintCard = ({ credential, sx, ...props }: MintCardProps) => {
);
const [error, setError] = useState<any | null>(null);

const { mintCredential: triggerMint } = useBiconomy();
const { mintCredential: triggerMint, mintStatus } = useBiconomy();

const mint = () => {
const trigger = triggerMint(credential);
const mint = () => triggerMint(credential);

setMintProcessStatus(Subjects.minting);
useEffect(() => {
const status = mintStatus[credential?.id];

trigger.then((value) => {
if (!value.error && value.isMinted) {
setMintProcessStatus(Subjects.successful);
setTimeout(() => {
setMintProcessStatus(Subjects.alreadyMinted);
props.onMint && props.onMint();
}, 2500);
} else {
setError(value.error);
setMintProcessStatus(Subjects.failed);
}
});
};
if (!status) {
setMintProcessStatus(
credential.status == 'minted'
? Subjects.alreadyMinted
: Subjects.default
);
return;
}

useEffect(() => {
if (credential.status == 'minted') {
setMintProcessStatus(Subjects.alreadyMinted);
} else {
setMintProcessStatus(Subjects.default);
status.askingSignature && setMintProcessStatus(Subjects.sign);
status.minting && setMintProcessStatus(Subjects.minting);
if (status.isMinted) {
setMintProcessStatus(Subjects.successful);
setTimeout(() => {
setMintProcessStatus(Subjects.alreadyMinted);
props.onMint && props.onMint();
}, 2500);
}
}, [credential.status]);
status.error && setMintProcessStatus(Subjects.failed);
}, [mintStatus[credential?.id]]);

// useEffect(() => {
// if (credential.status == 'minted') {
// setMintProcessStatus(Subjects.alreadyMinted);
// } else {
// setMintProcessStatus(Subjects.default);
// }
// }, [credential.status]);

return (
<Card
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import { Subjects } from '../mint-card';
const NetworksDetails = [
{
name: 'Polygon',
costInfo: 'Cost free',
costInfo:
process.env.NEXT_PUBLIC_GASLESS_MINTING === 'true' ? 'Cost free' : '',
imgSrc: '/images/polygon.png',
},
];
Expand Down Expand Up @@ -62,7 +63,7 @@ export const StartMintScreen = ({ setMintProcessStatus, mint }) => {
<ListItemAvatar>
<Badge
color={
activeChain.name == network.name ? 'success' : 'warning'
activeChain?.name == network.name ? 'success' : 'warning'
}
overlap="circular"
badgeContent=" "
Expand Down
1 change: 1 addition & 0 deletions apps/website/components/molecules/mint-dialog/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './mint-dialog';
Loading

1 comment on commit 211f43a

@vercel
Copy link

@vercel vercel bot commented on 211f43a Dec 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.