feat: Gamification

apps/gamification/.eslintrc

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "extends": ["plugin:@next/next/recommended", "../../packages/eslint-config/lib/next-page-router.js"],
+  "rules": {
+    "no-empty-function": 0,
+    "no-restricted-syntax": 0,
+    "import/no-unresolved": 0,
+    "no-console": ["warn", { "allow": ["info", "warn", "error", "debug", "time", "timeLog", "timeEnd"] }],
+    "no-plusplus": 0,
+    "prefer-destructuring": ["warn", { "object": true, "array": false }],
+    "no-underscore-dangle": 0,
+    "lodash/import-scope": [2, "method"],
+    "@next/next/no-img-element": 0,
+    "no-sparse-arrays": 0,
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(useFastRefreshEffect|useSlowRefreshEffect)"
+      }
+    ],
+    // Start temporary rules
+    // These rules are here just to keep the lint error to 0 during the migration to the new rule set
+    // They need to be removed and fixed as soon as possible
+    "@typescript-eslint/ban-ts-comment": [1, { "ts-ignore": false, "ts-nocheck": false }],
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "radix": 0,
+    "import/no-extraneous-dependencies": 0,
+    "jsx-a11y/media-has-caption": 0,
+    // Exchange
+    "no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsFor": ["state", "memo"] }],
+    "react/require-default-props": 0,
+    "no-nested-ternary": 0,
+    "max-classes-per-file": 0
+    // End temporary rules
+  }
+}

apps/gamification/components/ApproveConfirmButtons.tsx

@@ -0,0 +1,144 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { AutoRenewIcon, Box, ChevronDownIcon, ChevronRightIcon, Flex, Button as UIKitButton } from '@pancakeswap/uikit'
+import { styled } from 'styled-components'
+
+export enum ButtonArrangement {
+  ROW = 'row',
+  SEQUENTIAL = 'sequential',
+}
+
+interface ApproveConfirmButtonsProps {
+  isApproveDisabled: boolean
+  isApproving: boolean
+  isConfirming: boolean
+  isConfirmDisabled: boolean
+  onApprove: () => void
+  onConfirm: () => void
+  buttonArrangement?: ButtonArrangement
+  confirmLabel?: string
+  confirmId?: string
+  useMinWidth?: boolean
+}
+
+const StyledApproveConfirmButtonRow = styled.div`
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-content: center;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    grid-template-columns: 1fr 24px 1fr;
+  }
+`
+
+const Button = styled(UIKitButton)<{ useMinWidth?: boolean }>`
+  width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    ${({ useMinWidth }) =>
+      useMinWidth &&
+      `
+    min-width: 160px;
+  `}
+  }
+`
+
+const iconAttrs = { width: '24px', color: 'textDisabled' }
+
+const ChevronRight = styled(ChevronRightIcon).attrs(iconAttrs)`
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: block;
+  }
+`
+
+const ChevronBottom = styled(ChevronDownIcon).attrs(iconAttrs)`
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: none;
+  }
+`
+
+const spinnerIcon = <AutoRenewIcon spin color="currentColor" />
+
+const ApproveConfirmButtons: React.FC<React.PropsWithChildren<ApproveConfirmButtonsProps>> = ({
+  isApproveDisabled,
+  isApproving,
+  isConfirming,
+  isConfirmDisabled,
+  onApprove,
+  onConfirm,
+  buttonArrangement = ButtonArrangement.ROW,
+  confirmLabel,
+  confirmId,
+  useMinWidth = true,
+}) => {
+  const { t } = useTranslation()
+  const confirmButtonText = confirmLabel ?? t('Confirm')
+
+  const ApproveConfirmRow = () => {
+    return (
+      <StyledApproveConfirmButtonRow>
+        <Box>
+          <Button
+            disabled={isApproveDisabled}
+            onClick={onApprove}
+            endIcon={isApproving ? spinnerIcon : undefined}
+            isLoading={isApproving}
+            useMinWidth={useMinWidth}
+          >
+            {isApproving ? t('Enabling') : t('Enable')}
+          </Button>
+        </Box>
+        <Flex justifyContent="center">
+          <ChevronRight />
+          <ChevronBottom />
+        </Flex>
+        <Box>
+          <Button
+            id={confirmId}
+            onClick={onConfirm}
+            disabled={isConfirmDisabled}
+            isLoading={isConfirming}
+            endIcon={isConfirming ? spinnerIcon : undefined}
+            useMinWidth={useMinWidth}
+          >
+            {isConfirming ? t('Confirming') : confirmButtonText}
+          </Button>
+        </Box>
+      </StyledApproveConfirmButtonRow>
+    )
+  }
+
+  const ApproveConfirmSequential = () => {
+    return (
+      <>
+        {isApproveDisabled ? (
+          <Box>
+            <Button
+              id={confirmId}
+              onClick={onConfirm}
+              disabled={isConfirmDisabled}
+              isLoading={isConfirming}
+              endIcon={isConfirming ? spinnerIcon : undefined}
+            >
+              {isConfirming ? t('Confirming') : confirmButtonText}
+            </Button>
+          </Box>
+        ) : (
+          <Box>
+            <Button onClick={onApprove} endIcon={isApproving ? spinnerIcon : undefined} isLoading={isApproving}>
+              {isApproving ? t('Enabling') : t('Enable')}
+            </Button>
+          </Box>
+        )}
+      </>
+    )
+  }
+
+  return buttonArrangement === ButtonArrangement.ROW ? ApproveConfirmRow() : ApproveConfirmSequential()
+}
+
+export default ApproveConfirmButtons

apps/gamification/components/Card/index.tsx

@@ -0,0 +1,55 @@
+import { Box, BoxProps } from '@pancakeswap/uikit'
+import { styled } from 'styled-components'
+
+export interface LightCardProps extends BoxProps {
+  width?: string
+  padding?: string | string[]
+  border?: string
+  borderRadius?: string
+}
+
+const Card = styled(Box)<LightCardProps>`
+  width: ${({ width }) => width ?? '100%'};
+  padding: ${({ padding }) => padding ?? '1.25rem'};
+  border: ${({ border }) => border};
+  border-radius: ${({ borderRadius }) => borderRadius ?? '16px'};
+  background-color: ${({ theme }) => theme.colors.background};
+`
+
+export default Card
+
+export const LightCard = styled(Card)`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+`
+
+export const LightGreyCard = styled(Card)`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme }) => theme.colors.background};
+`
+
+export const CryptoCard = styled(Card)<{ isClicked: boolean; isDisabled: boolean; elementHeight: number }>`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme, isClicked }) => (isClicked ? theme.colors.input : theme.colors.background)};
+  transition: max-height 0.3s ease-in-out, background-color 0.1s ease-in-out;
+  max-height: ${({ isClicked, elementHeight }) => (isClicked ? `${elementHeight}px` : `105px`)};
+  overflow: hidden;
+  &:hover {
+    cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+    pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
+  }
+`
+
+export const GreyCard = styled(Card)`
+  background-color: ${({ theme }) => theme.colors.dropdown};
+`
+
+export const LightTertiaryCard = styled(Card)<{ active: boolean }>`
+  border: 1px solid ${({ theme, active }) => (active ? 'none' : theme.colors.cardBorder)};
+  background-color: ${({ theme }) => theme.colors.tertiary};
+`
+
+export const DisableCard = styled(Card)`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme }) => theme.colors.disabled};
+`

apps/gamification/components/ConnectWalletButton.tsx

@@ -35,7 +35,8 @@ const ConnectWalletButton = ({ children, ...props }: ButtonProps) => {
         {children || <Trans>Connect Wallet</Trans>}
       </Button>
       <style jsx global>{`
-        w3m-modal {
+        w3m-modal,
+        wcm-modal {
           position: relative;
           z-index: 99;
         }