Protocol Deploy - March 20th (migration)

.gitignore

@@ -34,6 +34,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.tool-versions
 
 # System Files
 .DS_Store

.graphqlrc.ts

@@ -54,10 +54,18 @@ const config: IGraphQLConfig = {
             },
           },
           documents: ['apps/website/services/hasura/**/*.gql'],
+        },
+        './apps/website/services/gateway-protocol/types.ts': {
+          ...generateConfig,
+          schema: {
+            [`${process.env.GATEWAY_PROTOCOL_ENDPOINT}`]: {
+            },
+          },
+          documents: ['apps/website/services/gateway-protocol/**/*.gql'],
         }
-      },
-    },
-  },
+      }
+    }
+  }
 }
 
 

apps/website/.gitignore

@@ -1,4 +1,6 @@
-services/**/types.ts
+services/**/**/types.ts
+services/**/**/validation.ts
 
 # Sentry
 .sentryclirc
+

apps/website/components/atoms/external-link.tsx

@@ -0,0 +1,39 @@
+import { brandColors } from '@gateway/theme';
+
+import LaunchIcon from '@mui/icons-material/Launch';
+import { Stack, Link, Typography, alpha, SxProps, Theme } from '@mui/material';
+
+type Props = {
+  text: string;
+  handleClick: (e) => void;
+  sxProps?: SxProps<Theme>;
+};
+
+export default function ExternalLink({ text, handleClick, sxProps }: Props) {
+  return (
+    <Link
+      component={Stack}
+      gap={1}
+      direction="row"
+      alignItems="center"
+      sx={{
+        textDecoration: 'none',
+        position: 'relative',
+        cursor: 'pointer',
+        zIndex: 1,
+        ...sxProps,
+      }}
+      onClick={handleClick}
+    >
+      <Typography
+        fontSize={12}
+        sx={{ color: alpha(brandColors.white.main, 0.7) }}
+      >
+        {text}
+      </Typography>
+      <LaunchIcon
+        sx={{ color: alpha(brandColors.white.main, 0.7), fontSize: '14px' }}
+      />
+    </Link>
+  );
+}

apps/website/components/atoms/gate-state-chip.tsx

@@ -15,6 +15,7 @@ const GateStateChip = ({ published, small }: GateStateChipProps) => {
       size={small ? 'small' : 'medium'}
       sx={{
         marginRight: (theme) => theme.spacing(1),
+        marginBottom: '8px',
       }}
     />
   );

apps/website/components/atoms/icons/ethereum-icon.tsx

@@ -0,0 +1,16 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export default function EthereumIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M10.25 1.66669L5 10.2413L10.25 13.2998L15.5001 10.2413L10.25 1.66669Z" />
+      <path d="M15.3319 11.1082L10.25 14.2632L5.04823 11.1082L10.25 18.3334L15.3319 11.1082Z" />
+    </SvgIcon>
+  );
+}

apps/website/components/atoms/icons/index.ts

@@ -0,0 +1,5 @@
+import EthereumIcon from './ethereum-icon';
+import PolygonIcon from './polygon-icon';
+import SolanaIcon from './solana-icon';
+
+export { PolygonIcon, EthereumIcon, SolanaIcon };

apps/website/components/atoms/icons/polygon-icon.tsx

@@ -0,0 +1,16 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export default function PolygonIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M13.3629 7.12189L6.64414 11.0047C6.52042 11.0754 6.38039 11.1126 6.23789 11.1126C6.09539 11.1126 5.95536 11.0754 5.83164 11.0047L3.68008 9.76564C3.55809 9.69339 3.45713 9.59048 3.38724 9.46713C3.31734 9.34378 3.28094 9.20429 3.28164 9.06252V6.58439C3.28173 6.44185 3.31932 6.30185 3.39062 6.17844C3.46193 6.05502 3.56445 5.95253 3.68789 5.88126L5.8332 4.6422C5.95692 4.5715 6.09695 4.53431 6.23945 4.53431C6.38195 4.53431 6.52198 4.5715 6.6457 4.6422L8.79102 5.88126C8.91445 5.95253 9.01697 6.05502 9.08828 6.17844C9.15959 6.30185 9.19717 6.44185 9.19727 6.58439V7.77345C9.19731 7.80894 9.20664 7.84379 9.22434 7.87454C9.24204 7.90529 9.26749 7.93087 9.29815 7.94873C9.32881 7.96659 9.36362 7.97611 9.3991 7.97633C9.43458 7.97656 9.4695 7.96748 9.50039 7.95002L10.6176 7.3047C10.6791 7.26899 10.7301 7.21769 10.7655 7.15597C10.8009 7.09425 10.8194 7.02429 10.8191 6.95314V5.64689C10.819 5.50454 10.7816 5.3647 10.7106 5.24132C10.6396 5.11795 10.5375 5.01535 10.4145 4.94376L6.63789 2.76876C6.51443 2.6973 6.3743 2.65967 6.23164 2.65967C6.08899 2.65967 5.94885 2.6973 5.82539 2.76876L2.05664 4.94376C1.9332 5.01503 1.83068 5.11752 1.75938 5.24094C1.68807 5.36435 1.65048 5.50435 1.65039 5.64689V10C1.65048 10.1426 1.68807 10.2826 1.75938 10.406C1.83068 10.5294 1.9332 10.6319 2.05664 10.7031L5.82539 12.8781C5.94885 12.9496 6.08899 12.9872 6.23164 12.9872C6.3743 12.9872 6.51443 12.9496 6.63789 12.8781L13.3566 8.99533C13.4804 8.92462 13.6204 8.88743 13.7629 8.88743C13.9054 8.88743 14.0454 8.92462 14.1691 8.99533L16.3145 10.2344C16.4379 10.3057 16.5404 10.4081 16.6117 10.5316C16.683 10.655 16.7206 10.795 16.7207 10.9375V13.4156C16.7206 13.5582 16.683 13.6982 16.6117 13.8216C16.5404 13.945 16.4379 14.0475 16.3145 14.1188L14.1754 15.3578C14.0517 15.4285 13.9116 15.4657 13.7691 15.4657C13.6266 15.4657 13.4866 15.4285 13.3629 15.3578L11.2176 14.1188C11.0941 14.0475 10.9916 13.945 10.9203 13.8216C10.849 13.6982 10.8114 13.5582 10.8113 13.4156V12.225C10.8115 12.1895 10.8022 12.1545 10.7845 12.1237C10.7668 12.0929 10.7413 12.0673 10.7105 12.0496C10.6798 12.0318 10.6448 12.0225 10.6093 12.0226C10.5738 12.0226 10.5389 12.0321 10.5082 12.05L9.39102 12.6938C9.32959 12.7296 9.27864 12.7809 9.24327 12.8426C9.2079 12.9043 9.18934 12.9742 9.18945 13.0453V14.3531C9.18954 14.4955 9.22696 14.6353 9.29797 14.7587C9.36898 14.8821 9.4711 14.9847 9.59414 15.0563L13.3629 17.2313C13.4864 17.3027 13.6265 17.3404 13.7691 17.3404C13.9118 17.3404 14.0519 17.3027 14.1754 17.2313L17.9441 15.0563C18.0676 14.985 18.1701 14.8825 18.2414 14.7591C18.3127 14.6357 18.3503 14.4957 18.3504 14.3531V10C18.3503 9.85748 18.3127 9.71748 18.2414 9.59406C18.1701 9.47064 18.0676 9.36816 17.9441 9.29689L14.1754 7.12189C14.0519 7.05043 13.9118 7.01279 13.7691 7.01279C13.6265 7.01279 13.4864 7.05043 13.3629 7.12189Z" />
+    </SvgIcon>
+  );
+}

apps/website/components/atoms/icons/solana-icon.tsx

@@ -0,0 +1,17 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export default function SolanaIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M14.6764 6.662H2.15137L5.32012 3.50262H17.8451L14.6764 6.662Z" />
+      <path d="M14.6764 16.4977H2.15137L5.32012 13.3399H17.8451L14.6764 16.4977Z" />
+      <path d="M17.8451 11.5774H5.32012L2.15137 8.41799H14.6764L17.8451 11.5774Z" />
+    </SvgIcon>
+  );
+}

apps/website/components/atoms/internal-link.tsx

@@ -0,0 +1,36 @@
+import { useRouter } from 'next/router';
+
+import { brandColors } from '@gateway/theme';
+
+import LaunchIcon from '@mui/icons-material/Launch';
+import { Stack, Link, Typography, alpha } from '@mui/material';
+
+type Props = {
+  text: string;
+  url: string;
+};
+
+export default function InternalLink({ text, url }: Props) {
+  return (
+    <Link
+      component={Stack}
+      gap={1}
+      direction="row"
+      alignItems="center"
+      sx={{ textDecoration: 'none', position: 'relative', cursor: 'pointer' }}
+      href={url}
+    >
+      <a>
+        <Typography
+          fontSize={12}
+          sx={{ color: alpha(brandColors.white.main, 0.7) }}
+        >
+          {text}
+        </Typography>
+        <LaunchIcon
+          sx={{ color: alpha(brandColors.white.main, 0.7), fontSize: '14px' }}
+        />
+      </a>
+    </Link>
+  );
+}

apps/website/components/atoms/loading.tsx

@@ -0,0 +1,20 @@
+import { Box, CircularProgress } from '@mui/material';
+
+type Props = {
+  margin?: number;
+};
+
+export default function Loading({ margin }: Props): JSX.Element {
+  return (
+    <Box
+      key="loading"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <CircularProgress sx={{ mt: 2, margin: margin ? margin : null }} />
+    </Box>
+  );
+}

apps/website/components/atoms/mint-button.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 
 import { PartialDeep } from 'type-fest';
 
-import { Button, Stack } from '@mui/material';
+import { Button, Stack, SxProps } from '@mui/material';
 
 import { TokenFilled } from '../../components/molecules/mint-card/assets/token-filled';
 import { useBiconomy } from '../../providers/biconomy';
@@ -12,6 +12,8 @@ import { LoadingButton } from './loading-button';
 
 export type Props = {
   credential: PartialDeep<Credentials>;
+  sx?: SxProps;
+  disabled?: boolean;
 };
 
 const ToMintButton = (props) => (
@@ -38,7 +40,7 @@ const MintedButton = (props) => (
   </Button>
 );
 
-export const MintCredentialButton = ({ credential }: Props) => {
+export const MintCredentialButton = ({ credential, sx, disabled }: Props) => {
   const [status, setStatus] = useState<'to_mint' | 'minted'>(
     credential.status as 'to_mint' | 'minted'
   );
@@ -53,7 +55,7 @@ export const MintCredentialButton = ({ credential }: Props) => {
     <Stack
       sx={{
         flex: 1,
-        marginBottom: (theme) => theme.spacing(4),
+        marginBottom: (theme) => theme.spacing(3),
       }}
     >
       {status === 'minted' ? (
@@ -63,7 +65,9 @@ export const MintCredentialButton = ({ credential }: Props) => {
             borderColor: '#E5E5E580',
             color: 'white',
             width: '100%',
+            ...sx,
           }}
+          disabled={disabled}
         >
           {t('actions.check-transaction')}
         </MintedButton>
@@ -81,7 +85,9 @@ export const MintCredentialButton = ({ credential }: Props) => {
           isLoading={loading}
           sx={{
             width: '100%',
+            ...sx,
           }}
+          disabled={disabled}
         >
           {t('actions.mint')}
         </ToMintButton>

apps/website/components/atoms/network-transaction-link.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import { ReactNode } from 'react';
+
+import { brandColors } from '@gateway/theme';
+
+import { alpha, Box } from '@mui/material';
+
+type Props = {
+  url: string;
+  children: ReactNode;
+};
+
+export default function NetworkTransactionLink({
+  url,
+  children,
+}: Props): JSX.Element {
+  return (
+    <Link href={url} target="_blank" passHref>
+      <Box
+        sx={{
+          backgroundColor: alpha(brandColors.white.main, 0.16),
+          borderRadius: '50%',
+          width: '24px',
+          height: '24px',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {children}
+      </Box>
+    </Link>
+  );
+}

apps/website/components/atoms/notistack.tsx

@@ -15,7 +15,7 @@ const Notistack = (props) => {
       maxSnack={6}
       preventDuplicate={true}
       anchorOrigin={{
-        vertical: 'top',
+        vertical: 'bottom',
         horizontal: 'center',
       }}
       autoHideDuration={6000}

apps/website/components/atoms/share-button.tsx

@@ -3,7 +3,7 @@ import { ShareButtonFn } from './share-btn-fn';
 import { useMenu } from '@gateway/ui';
 
 import { IosShare } from '@mui/icons-material';
-import { Avatar, IconButton } from '@mui/material';
+import { Avatar, IconButton, Stack } from '@mui/material';
 
 type Props = {
   title?: string;

apps/website/components/atoms/share-on.tsx

@@ -0,0 +1,64 @@
+import useTranslation from 'next-translate/useTranslation';
+
+import { Reddit, LinkedIn, Twitter, Email } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+
+import objectToParams from '../../utils/map-object';
+import SquareButton from './square-button';
+
+export default function ShareOn() {
+  const { t } = useTranslation('common');
+
+  const emailLink = `mailto:?body=${window.location.href}&subject=${t(
+    'social.share-title'
+  )}`;
+
+  const tweetLink = `https://twitter.com/intent/tweet${objectToParams({
+    text: t('social.share-title'),
+    url: window.location.href,
+  })}`;
+
+  const redditLink = `https://reddit.com/submit${objectToParams({
+    title: t('social.share-title'),
+    url: window.location.href,
+  })}`;
+
+  const linkedinLink = `https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}`;
+
+  return (
+    <Stack sx={{ textAlign: 'left' }}>
+      <Typography fontWeight={700} sx={{ mb: 2 }}>
+        {t('social.share-on')}
+      </Typography>
+      <Stack gap={1} direction="row">
+        <SquareButton
+          label={t('social.email')}
+          clickHandler={(e) => {
+            window.location.href = emailLink;
+            e.preventDefault();
+          }}
+        >
+          <Email color="secondary" />
+        </SquareButton>
+        <SquareButton
+          label={t('social.reddit')}
+          clickHandler={() => window.open(redditLink)}
+        >
+          <Reddit color="secondary" />
+        </SquareButton>
+        <SquareButton
+          label={t('social.twitter')}
+          clickHandler={() => window.open(tweetLink)}
+        >
+          <Twitter color="secondary" />
+        </SquareButton>
+        <SquareButton
+          label={t('social.linkedin')}
+          clickHandler={() => window.open(linkedinLink)}
+        >
+          <LinkedIn color="secondary" />
+        </SquareButton>
+      </Stack>
+    </Stack>
+  );
+}