add claim feature

configs/app/features/easterEggBadge.ts

@@ -0,0 +1,24 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const badgeClaimLink = getEnvValue('NEXT_PUBLIC_BADGE_CLAIM_LINK');
+
+const title = 'Easter egg badge';
+
+const config: Feature<{ badgeClaimLink: string }> = (() => {
+  if (badgeClaimLink) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      badgeClaimLink,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -10,6 +10,7 @@ export { default as celo } from './celo';
 export { default as csvExport } from './csvExport';
 export { default as dataAvailability } from './dataAvailability';
 export { default as deFiDropdown } from './deFiDropdown';
+export { default as easterEggBadge } from './easterEggBadge';
 export { default as faultProofSystem } from './faultProofSystem';
 export { default as gasTracker } from './gasTracker';
 export { default as getGasButton } from './getGasButton';

configs/envs/.env.eth

@@ -66,4 +66,5 @@ NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s-prod-1.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
-NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
+NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
+NEXT_PUBLIC_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/hiddenBlockBadge

deploy/tools/envs-validator/schema.ts

@@ -886,6 +886,7 @@ const schema = yup
       }),
     NEXT_PUBLIC_REWARDS_SERVICE_API_HOST: yup.string().test(urlTest),
     NEXT_PUBLIC_XSTAR_SCORE_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_BADGE_CLAIM_LINK: yup.string().test(urlTest),
 
     // 6. External services envs
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),

docs/ENVS.md

@@ -841,6 +841,12 @@ This feature enables Blockscout Merits program. It requires that the [My account
 | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_REWARDS_SERVICE_API_HOST | `string` | API URL | - | - | `https://example.com` | v1.36.0+ |
 
+### Badge claim link
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_BADGE_CLAIM_LINK | `string` | Provide to enable the easter egg badge feature | - | - | `https://example.com` | v1.37.0+ |
+
 ## External services configuration
 
 ### Google ReCaptcha

ui/games/CapybaraRunner.tsx

@@ -1,8 +1,12 @@
-/* eslint-disable max-len */
-import { Box, Text } from '@chakra-ui/react';
+/* eslint-disable @next/next/no-img-element */
+import { Box, Text, Button, Flex } from '@chakra-ui/react';
 import Script from 'next/script';
 import React from 'react';
 
+import config from 'configs/app';
+
+const easterEggBadgeFeature = config.features.easterEggBadge;
+
 const CapybaraRunner = () => {
   const [ hasReachedHighScore, setHasReachedHighScore ] = React.useState(false);
 
@@ -38,7 +42,13 @@ const CapybaraRunner = () => {
           </div>
         </div>
       </Box>
-      { hasReachedHighScore && <Text>You&apos;ve reached a high score!</Text> }
+      { easterEggBadgeFeature.isEnabled && hasReachedHighScore && (
+        <Flex flexDirection="column" alignItems="center" justifyContent="center" gap={ 4 }>
+          <Text fontSize="2xl" fontWeight="bold">You unlocked a hidden badge!</Text>
+          <Text fontSize="lg">Congratulations! You’re eligible to claim an epic hidden badge!</Text>
+          <Button as="a" href={ easterEggBadgeFeature.badgeClaimLink } target="_blank">Claim</Button>
+        </Flex>
+      ) }
     </>
   );
 };

ui/shared/AppError/custom/AppErrorTxNotFound.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { Box, OrderedList, ListItem, useColorModeValue, Flex, chakra, Button, Link } from '@chakra-ui/react';
+import { Box, OrderedList, ListItem, useColorModeValue, Flex, chakra, Button } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';