style: new Welcome page (#1690)

Co-authored-by: Nick <[email protected]>

package.json

@@ -108,6 +108,7 @@
     "dotenv-webpack": "^8.0.1",
     "husky": "^9.1.5",
     "i18next-scanner": "^4.4.0",
+    "iconsax-react": "^0.0.8",
     "intersection-observer": "^0.12.0",
     "jsdom-worker-fix": "^0.1.8",
     "openai": "^4.0.0",

packages/extension-polkagate/src/assets/gif/index.ts

@@ -0,0 +1,6 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// @ts-nocheck
+
+export { default as handWave } from './handWave.gif';

packages/extension-polkagate/src/assets/img/index.ts

@@ -3,3 +3,4 @@
 
 // @ts-nocheck
 export { default as endpointUrlPng } from './endpoint.png';
+export { default as Item1 } from './welcomeItems/Item1.svg';

packages/extension-polkagate/src/assets/logos/index.ts

@@ -6,4 +6,5 @@ export { default as logoMotionDark } from './logoMotionDark.gif';
 export { default as logoMotionLight } from './logoMotionLight.gif';
 export { default as logoBlack } from './pg-b.svg';
 export { default as logoPink } from './pg-p.svg';
+export { default as logoTransparent } from './pg-t.svg';
 export { default as logoWhite } from './pg-w.svg';

packages/extension-polkagate/src/components/ActionButton.tsx

@@ -0,0 +1,85 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import type { Icon } from 'iconsax-react';
+
+import { Button, useTheme } from '@mui/material';
+import React, { useCallback, useMemo, useState } from 'react';
+
+interface Props {
+  disabled?: boolean;
+  isBusy?: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  StartIcon?: Icon;
+  // endIcon?: React.ReactNode;
+  text: string | { firstPart: string; secondPart: string; };
+  variant?: 'text' | 'contained' | 'outlined';
+  style?: React.CSSProperties;
+}
+
+export default function ActionButton ({ StartIcon, disabled, isBusy, onClick, style, text, variant }: Props): React.ReactElement<Props> {
+  const theme = useTheme();
+
+  const [hovered, setHovered] = useState(false);
+
+  const toggleHover = useCallback(() => setHovered(!hovered), [hovered]);
+
+  const ButtonFontStyle = useMemo(() => ({
+    fontFamily: 'Inter',
+    fontSize: '14px',
+    fontWeight: 600,
+    textTransform: 'none'
+  } as React.CSSProperties), []);
+
+  const GeneralButtonStyle = {
+    '&:hover': {
+      background: '#674394'
+    },
+    background: '#2D1E4A',
+    borderRadius: `${style?.borderRadius ?? '12px'}`,
+    boxShadow: 'unset',
+    justifyContent: 'flex-start',
+    padding: '6px 24px',
+    ...ButtonFontStyle
+  };
+
+  const StartIconStyle = {
+    '& .MuiButton-startIcon': {
+      marginLeft: 0,
+      marginRight: '16px'
+    },
+    '& .MuiButton-startIcon svg': {
+      color: '#BEAAD8'
+    }
+  };
+
+  const renderText = useMemo(() => {
+    if (typeof text === 'string') {
+      return <span style={{ color: theme.palette.text.primary, ...ButtonFontStyle }}>{text}</span>;
+    } else {
+      return (
+        <>
+          <span style={{ color: theme.palette.text.secondary, ...ButtonFontStyle }}>{text.firstPart}</span>&nbsp;<span style={{ color: theme.palette.text.primary, ...ButtonFontStyle }}>{text.secondPart}</span>
+        </>
+      );
+    }
+  }, [ButtonFontStyle, text, theme.palette.text.primary, theme.palette.text.secondary]);
+
+  return (
+    <Button
+      disabled={disabled || isBusy}
+      onClick={onClick}
+      onMouseEnter={toggleHover}
+      onMouseLeave={toggleHover}
+      startIcon={StartIcon
+        ? <StartIcon size={20} variant={hovered ? 'Bold' : 'Bulk'} />
+        : undefined}
+      sx={{ ...GeneralButtonStyle, ...StartIconStyle, ...style }}
+      variant={variant}
+    >
+      {renderText}
+    </Button>
+  );
+}

packages/extension-polkagate/src/components/Carousel.tsx

@@ -0,0 +1,121 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import { Box, Grid } from '@mui/material';
+import { keyframes } from '@mui/system';
+import React, { useEffect, useState } from 'react';
+
+import { Item1 } from '../assets/img';
+
+const INTERVAL = 30000;
+const DISPLAYED_ITEM_COLOR = '#AA83DC';
+const UNDISPLAYED_ITEM_COLOR = 'rgba(190, 170, 216, 0.25)';
+
+const fillAnimation = keyframes`
+  from {
+    width: 0%;
+  }
+  to {
+    width: 40px;
+  }
+`;
+
+const carouselItems = [
+  Item1,
+  Item1,
+  Item1,
+  Item1,
+  Item1
+];
+
+function Carousel () {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleIndicatorClick = (index: number) => () => {
+    setCurrentIndex(index);
+  };
+
+  // Auto Slide every INTERVAL seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % carouselItems.length);
+    }, INTERVAL);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Box sx={{ pb: '15px', position: 'relative', width: '100%' }}>
+      {/* Indicators */}
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          gap: '10px',
+          justifyContent: 'center',
+          marginBottom: 2
+        }}
+      >
+        {carouselItems.map((_, index) => (
+          <Box
+            key={index}
+            onClick={handleIndicatorClick(index)}
+            sx={{
+              backgroundColor: index >= currentIndex ? UNDISPLAYED_ITEM_COLOR : DISPLAYED_ITEM_COLOR,
+              borderRadius: '2px',
+              cursor: 'pointer',
+              height: '4px',
+              overflow: 'hidden',
+              position: 'relative',
+              ...(index === currentIndex && { width: '100px' }), // Indicator fills for active slide
+              width: '60px'
+            }}
+          >
+            {index === currentIndex && (
+              <Box
+                sx={{
+                  animation: `${fillAnimation} ${INTERVAL}ms linear`,
+                  backgroundColor: DISPLAYED_ITEM_COLOR,
+                  height: '4px',
+                  left: 0,
+                  position: 'absolute',
+                  top: 0,
+                  width: '40px'
+                }}
+              />
+            )}
+          </Box>
+        ))}
+      </Box>
+      {/* Carousel Container */}
+      <Grid
+        container
+        sx={{
+          transform: `translateX(-${currentIndex * 100}%)`,
+          transition: 'transform 500ms ease-in-out',
+          width: '100%'
+        }}
+        wrap='nowrap'
+      >
+        {carouselItems.map((item, index) => (
+          <Box
+            component='img'
+            key={index}
+            src={item as string}
+            sx={{
+              flex: '0 0 100%', // Slide occupies 100% of the container's width
+              height: 'auto',
+              maxHeight: '155px',
+              objectFit: 'contain',
+              width: '100%'
+            }}
+          />
+        ))}
+      </Grid>
+    </Box>
+  );
+}
+
+export default React.memo(Carousel);

packages/extension-polkagate/src/components/ExtensionPopup.tsx

@@ -0,0 +1,76 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import type { TransitionProps } from '@mui/material/transitions';
+import type { Icon } from 'iconsax-react';
+
+import { Box, Container, Dialog, Grid, Slide, Typography } from '@mui/material';
+import React from 'react';
+
+import CustomCloseSquare from '../popup/welcome/CustomCloseSquare';
+import { RedGradient } from '../style';
+import { GradientDivider } from '.';
+
+export interface Props {
+  children: React.ReactNode;
+  handleClose?: () => void;
+  openMenu: boolean;
+  TitleIcon?: Icon;
+  title: string;
+}
+
+const Transition = React.forwardRef(function Transition (props: TransitionProps & { children: React.ReactElement<unknown>; }, ref: React.Ref<unknown>) {
+  return <Slide direction='up' ref={ref} {...props} />;
+});
+
+function ExtensionPopup ({ TitleIcon, children, handleClose, openMenu, title }: Props): React.ReactElement<Props> {
+  return (
+    <Dialog
+      PaperProps={{
+        sx: {
+          backgroundImage: 'unset',
+          bgcolor: 'transparent',
+          boxShadow: 'unset'
+        }
+      }}
+      TransitionComponent={Transition}
+      componentsProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: 'blur(10px)',
+            background: 'radial-gradient(50% 44.61% at 50% 50%, rgba(12, 3, 28, 0) 0%, rgba(12, 3, 28, 0.7) 100%)',
+            bgcolor: 'transparent'
+          }
+        }
+      }}
+      fullScreen
+      open={openMenu}
+    >
+      <Container disableGutters sx={{ height: '100%', width: '100%' }}>
+        <Grid alignItems='center' container item justifyContent='center' sx={{ pb: '12px', pt: '18px' }}>
+          <CustomCloseSquare color='#AA83DC' onClick={handleClose} size='48' style={{ cursor: 'pointer' }}/>
+        </Grid>
+        <Grid alignItems='center' container item justifyContent='center' sx={{ bgcolor: '#1B133C', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: 'calc(100% - 78px)', overflow: 'scroll', p: '10px', pb: '10px', position: 'relative' }}>
+          <Grid alignItems='center' columnGap='10px' container item justifyContent='center' p='10px'>
+            {TitleIcon
+              ? <TitleIcon color='#AA83DC' size={28} variant='Bold' />
+              : undefined
+            }
+            <Typography color='text.primary' fontFamily='OdibeeSans' fontSize='24px' fontWeight={400} textTransform='uppercase'>
+              {title}
+            </Typography>
+          </Grid>
+          <GradientDivider />
+          <RedGradient style={{ top: '-140px' }} />
+          <Box sx={{ maxHeight: '440px', overflow: 'scroll', position: 'relative', width: '100%' }}>
+            {children}
+          </Box>
+        </Grid>
+      </Container>
+    </Dialog>
+  );
+}
+
+export default React.memo(ExtensionPopup);

packages/extension-polkagate/src/components/GradientBox.tsx

@@ -0,0 +1,47 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import { Box, Container, styled, type SxProps, type Theme } from '@mui/material';
+import React from 'react';
+
+import { GradientBorder, RedGradient } from '../style';
+
+const ContentWrapper = styled(Box)({
+  borderRadius: '32px',
+  height: 'fit-content',
+  margin: '0 auto',
+  overflow: 'hidden',
+  position: 'relative'
+});
+
+interface Props {
+  children?: React.ReactNode;
+  style?: SxProps<Theme>;
+}
+
+function GradientBox ({ children, style }: Props) {
+  const ContainerStyle = {
+    bgcolor: '#120D27',
+    border: '2px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: '32px',
+    boxShadow: '0px 0px 24px 8px #4E2B7259 inset',
+    position: 'relative',
+    ...style
+  } as SxProps<Theme>;
+
+  return (
+    <Container disableGutters sx={ContainerStyle}>
+      <GradientBorder />
+      <ContentWrapper>
+        <RedGradient style={{ top: '-100px' }} />
+        <Box position='relative' zIndex={1}>
+          {children}
+        </Box>
+      </ContentWrapper>
+    </Container>
+  );
+}
+
+export default React.memo(GradientBox);