feat: latest data items on index

Author: xylophonez

.gitignore

@@ -35,6 +35,8 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
+.env.registry
 /configs/envs/.env.secrets
 /configs/envs/.samples
 

configs/app/index.ts

@@ -4,6 +4,7 @@ import chain from './chain';
 import * as features from './features';
 import googleCloud from './gcp';
 import meta from './meta';
+import s3 from './s3';
 import services from './services';
 import UI from './ui';
 
@@ -16,6 +17,7 @@ const config = Object.freeze({
   services,
   meta,
   googleCloud,
+  s3,
 });
 
 export default config;

configs/app/s3.ts

@@ -0,0 +1,10 @@
+import { getEnvValue } from './utils';
+
+const s3 = Object.freeze({
+  region: getEnvValue('NEXT_PUBLIC_S3_REGION'),
+  endpoint: getEnvValue('NEXT_PUBLIC_S3_ENDPOINT'),
+  accessKeyId: getEnvValue('NEXT_PUBLIC_S3_ACCESS_KEY_ID'),
+  secretAccessKey: getEnvValue('NEXT_PUBLIC_S3_SECRET_ACCESS_KEY'),
+});
+
+export default s3;

deploy/tools/envs-validator/schema.ts

@@ -658,6 +658,12 @@ const schema = yup
         ),
       }),
 
+    // S3 configuration
+    NEXT_PUBLIC_S3_REGION: yup.string(),
+    NEXT_PUBLIC_S3_ENDPOINT: yup.string().test(urlTest),
+    NEXT_PUBLIC_S3_ACCESS_KEY_ID: yup.string(),
+    NEXT_PUBLIC_S3_SECRET_ACCESS_KEY: yup.string(),
+
     // 6. External services envs
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),
     NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: yup.string(),

docs/ENVS.md

@@ -106,6 +106,17 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
  
 
+## S3 configuration
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_S3_REGION | `string` | S3 bucket region | Required | - | `eu-west-2` |
+| NEXT_PUBLIC_S3_ENDPOINT | `string` | S3 endpoint URL | Required | - | `https://s3-hb-test.load.rs/[email protected]` |
+| NEXT_PUBLIC_S3_ACCESS_KEY_ID | `string` | S3 access key ID | Required | - | `PyzhuEthFmhKM367YiTP` |
+| NEXT_PUBLIC_S3_SECRET_ACCESS_KEY | `string` | S3 secret access key | Required | - | `dvfWzw4NgsM9rwjLhMp69ORoVcHmlAm0a7v2kF3j` |
+
+ 
+
 ## UI configuration
 
 ### Homepage

lib/hooks/useS3DataItems.tsx

@@ -0,0 +1,67 @@
+import { S3Client, ListObjectsV2Command } from '@aws-sdk/client-s3';
+import { useCallback, useEffect, useState } from 'react';
+
+import s3Config from 'configs/app/s3';
+
+export function createS3Client(): S3Client | null {
+  if (!s3Config.region || !s3Config.endpoint || !s3Config.accessKeyId || !s3Config.secretAccessKey) {
+    return null;
+  }
+
+  return new S3Client({
+    region: s3Config.region,
+    endpoint: s3Config.endpoint,
+    credentials: {
+      accessKeyId: s3Config.accessKeyId,
+      secretAccessKey: s3Config.secretAccessKey,
+    },
+    forcePathStyle: true,
+  });
+}
+
+export function useS3DataItems(limit = 25) {
+  const [ items, setItems ] = useState<Array<{ Key?: string; LastModified?: Date }>>([]);
+  const [ isLoading, setIsLoading ] = useState(true);
+  const [ error, setError ] = useState<Error | null>(null);
+
+  const fetchItems = useCallback(async() => {
+    try {
+      setIsLoading(true);
+      const client = createS3Client();
+      if (!client) {
+        throw new Error('Failed to initialize S3 client');
+      }
+      const command = new ListObjectsV2Command({
+        Bucket: 'offchain-dataitems',
+        Prefix: 'dataitems/',
+        MaxKeys: limit,
+      });
+
+      const response = await client.send(command);
+      if (response.Contents) {
+        // Sort by last modified date, most recent first
+        const sortedItems = response.Contents.sort((a, b) => {
+          return (b.LastModified?.getTime() || 0) - (a.LastModified?.getTime() || 0);
+        });
+        setItems(sortedItems);
+      }
+
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch S3 items'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [ limit ]);
+
+  useEffect(() => {
+    fetchItems();
+  }, [ fetchItems ]);
+
+  return {
+    items,
+    isLoading,
+    error,
+    refetch: fetchItems,
+  };
+}

nextjs/csp/generateCspPolicy.ts

@@ -16,6 +16,7 @@ function generateCspPolicy() {
     descriptors.sentry(),
     descriptors.walletConnect(),
     descriptors.arweaveIdApi(),
+    descriptors.s3(),
   );
 
   return makePolicyString(policyDescriptor);

nextjs/csp/policies/index.ts

@@ -11,3 +11,4 @@ export { safe } from './safe';
 export { sentry } from './sentry';
 export { walletConnect } from './walletConnect';
 export { arweaveIdApi } from './arweaveApi';
+export { s3 } from './s3';

nextjs/csp/policies/s3.ts

@@ -0,0 +1,7 @@
+import type CspDev from 'csp-dev';
+
+export function s3(): CspDev.DirectiveDescriptor {
+  return {
+    'connect-src': [ 'https://s3-hb-test.load.rs' ],
+  };
+}

package.json

@@ -36,6 +36,7 @@
     "monitoring:grafana:local": "docker run -d -p 4000:3000 --name=blockscout_grafana --user $(id -u) --volume $(pwd)/grafana:/var/lib/grafana grafana/grafana-enterprise"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.864.0",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",