feat: OpenPGP Signatures data (#67)

* chore: remove test data

* chore: update constants

* chore: update types

* chore: update code-bg dark color

* feat: use real data for OpenPGP Signatures table

* chore: remove unused types

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>

src/components/UI/DataTable.tsx

@@ -1,15 +1,19 @@
 import { Link, Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react';
 import { FC } from 'react';
-import { ReleaseData } from '../../types';
+import { OpenPGPSignaturesData, ReleaseData } from '../../types';
 import { getParsedDate } from '../../utils';
 
 interface Props {
   columnHeaders: string[];
-  // TODO: update data type
   data: any;
 }
 
 export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
+  // {} is a backup object for initial render where data is still undefined, to avoid errors
+  const dataType = Object.keys(data[0] || {})?.includes('release')
+    ? 'Releases'
+    : 'OpenPGP Signatures';
+
   return (
     <TableContainer
       // Note: This wont work on firefox, we are ok with this.
@@ -46,7 +50,8 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
         </Thead>
 
         <Tbody>
-          {data.map((r: ReleaseData, idx: number) => {
+          {dataType === 'Releases' &&
+            data.map((r: ReleaseData, idx: number) => {
               return (
                 <Tr
                   key={idx}
@@ -79,6 +84,38 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
                       );
                     }
 
+                    return (
+                      <Td key={idx} px={4} textStyle='hero-text-small'>
+                        <Text>{item[1]}</Text>
+                      </Td>
+                    );
+                  })}
+                </Tr>
+              );
+            })}
+
+          {dataType === 'OpenPGP Signatures' &&
+            data.map((o: OpenPGPSignaturesData, idx: number) => {
+              return (
+                <Tr
+                  key={idx}
+                  transition={'all 0.5s'}
+                  _hover={{ background: 'button-bg', transition: 'all 0.5s' }}
+                >
+                  {Object.entries(o).map((item, idx) => {
+                    if (item[0] === 'openpgp key') {
+                      const label = item[1].label;
+                      const url = item[1].url;
+
+                      return (
+                        <Td key={idx} px={4} textStyle='hero-text-small'>
+                          <Link _hover={{ textDecoration: 'none' }} href={url} isExternal>
+                            <Text color='primary'>{label}</Text>
+                          </Link>
+                        </Td>
+                      );
+                    }
+
                     return (
                       <Td key={idx} px={4} textStyle='hero-text-small'>
                         <Text>{item[1]}</Text>

src/constants.ts

@@ -71,6 +71,83 @@ export const DOWNLOADS_OPENPGP_BUILD_HEADERS = [
   'OpenPGP Key',
   'Fingerprint'
 ];
+export const DOWNLOADS_OPENPGP_SIGNATURES = [
+  {
+    'build server': 'Android Builder',
+    'unique id': 'Go Ethereum Android Builder <geth-ci@ethereum.org>',
+    'openpgp key': {
+      label: 'F9585DE6',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x70AD154BF9585DE6'
+    },
+    fingerprint: '8272 1824 F4D7 46E0 B5A7  AB95 70AD 154B F958 5DE6'
+  },
+  {
+    'build server': 'iOS Builder',
+    'unique id': 'Go Ethereum iOS Builder <geth-ci@ethereum.org>',
+    'openpgp key': {
+      label: 'C2FF8BBF',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0xF29DEFAFC2FF8BBF'
+    },
+    fingerprint: '70AD EB8F 3BC6 6F69 0256  4D88 F29D EFAF C2FF 8BBF'
+  },
+  {
+    'build server': 'Linux Builder',
+    'unique id': 'Go Ethereum Linux Builder <geth-ci@ethereum.org>',
+    'openpgp key': {
+      label: '9BA28146',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0xA61A13569BA28146'
+    },
+    fingerprint: 'FDE5 A1A0 44FA 13D2 F7AD  A019 A61A 1356 9BA2 8146'
+  },
+  {
+    'build server': 'macOS Builder',
+    'unique id': 'Go Ethereum macOS Builder <geth-ci@ethereum.org>',
+    'openpgp key': {
+      label: '7B9E2481',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x558915E17B9E2481'
+    },
+    fingerprint: '6D1D AF5D 0534 DEA6 1AA7  7AD5 5589 15E1 7B9E 2481'
+  },
+  {
+    'build server': 'Windows Builder',
+    'unique id': 'Go Ethereum Windows Builder <geth-ci@ethereum.org>',
+    'openpgp key': {
+      label: 'D2A67EAC',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9417309ED2A67EAC'
+    },
+    fingerprint: 'C4B3 2BB1 F603 4241 A9E6  50A1 9417 309E D2A6 7EAC'
+  }
+];
+export const DOWNLOADS_DEVELOPERS_DATA = [
+  {
+    developer: 'Felix Lange',
+    'unique id': 'Felix Lange <fjl@ethereum.org>',
+    'openpgp key': {
+      label: 'E058A81C',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x337E68FCE058A81C'
+    },
+    fingerprint: '6047 0B71 5865 392D E43D 75A3 337E 68FC E058 A81C'
+  },
+  {
+    developer: 'Martin Holst Swende',
+    'unique id': 'Martin Holst Swende <martin.swende@ethereum.org>',
+    'openpgp key': {
+      label: '05A5DDF0',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x683B438C05A5DDF0'
+    },
+    fingerprint: 'CA99 ABB5 B36E 24AD 5DA0 FD40 683B 438C 05A5 DDF0'
+  },
+  {
+    developer: 'Péter Szilágyi',
+    'unique id': 'Péter Szilágyi <peter@ethereum.org>',
+    'openpgp key': {
+      label: '1CCB7DD2',
+      url: 'https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x119A76381CCB7DD2'
+    },
+    fingerprint: '4948 43FC E822 1C4C 86AB 5E2F 119A 7638 1CCB 7DD2'
+  }
+];
+
 export const DOWNLOADS_OPENPGP_DEVELOPER_HEADERS = [
   'Developer',
   'Unique ID',

src/data/test/pgpbuild-testdata.ts

@@ -1,32 +0,0 @@
-export const pgpBuildTestData = [
-  {
-    'build server': 'Android Builder',
-    'unique id': 'Go Ethereum Android Builder <geth-ci@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  },
-  {
-    'build server': 'iOS Builder',
-    'unique id': 'Go Ethereum iOS Builder <geth-ci@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  },
-  {
-    'build server': 'Linux Builder',
-    'unique id': 'Go Ethereum Linux Builder <geth-ci@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  },
-  {
-    'build server': 'macOS Builder',
-    'unique id': 'Go Ethereum macOS Builder <geth-ci@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  },
-  {
-    'build server': 'Windows Builder',
-    'unique id': 'Go Ethereum Windows Builder <geth-ci@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  }
-];

src/data/test/pgpdeveloper-testdata.ts

@@ -1,20 +0,0 @@
-export const pgpDeveloperTestData = [
-  {
-    developer: 'Felix Lange',
-    'unique id': 'Felix Lange <fjl@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  },
-  {
-    developer: 'Martin Holst Swende',
-    'unique id': 'Martin Holst Swende <martin.swende@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  },
-  {
-    developer: 'Péter Szilágyi',
-    'unique id': 'Péter Szilágyi <peter@ethereum.org>',
-    'openpgp key': 'F9585DE6',
-    fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6'
-  }
-];

src/pages/_app.tsx

@@ -1,15 +1,14 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import { AppProps } from 'next/app';
+import { MDXProvider } from '@mdx-js/react';
 
 import { Layout } from '../components/layouts';
 
-import 'focus-visible/dist/focus-visible';
-
-import theme from '../theme';
-
-import { MDXProvider } from '@mdx-js/react';
 import MDXComponents from '../components/';
 
+import 'focus-visible/dist/focus-visible';
+import theme from '../theme';
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={theme}>

src/pages/downloads.tsx

@@ -1,4 +1,4 @@
-import { Center, Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
+import { Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
 import type { GetStaticProps, NextPage } from 'next';
 import { useState } from 'react';
 import { XMLParser } from 'fast-xml-parser';
@@ -18,12 +18,11 @@ import {
   GETH_REPO_URL,
   METADATA,
   LATEST_SOURCES_BASE_URL,
-  RELEASE_NOTES_BASE_URL
+  RELEASE_NOTES_BASE_URL,
+  DOWNLOADS_OPENPGP_SIGNATURES,
+  DOWNLOADS_DEVELOPERS_DATA
 } from '../constants';
 
-import { pgpBuildTestData } from '../data/test/pgpbuild-testdata';
-import { pgpDeveloperTestData } from '../data/test/pgpdeveloper-testdata';
-
 import {
   fetchLatestReleaseCommit,
   fetchLatestReleaseVersionAndName,
@@ -483,16 +482,17 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
             }
             sectionTitle='OpenPGP Signatures'
           >
-            {/* TODO: swap for real data */}
             <Stack borderBottom='2px solid' borderColor='primary'>
-              <DataTable columnHeaders={DOWNLOADS_OPENPGP_BUILD_HEADERS} data={pgpBuildTestData} />
+              <DataTable
+                columnHeaders={DOWNLOADS_OPENPGP_BUILD_HEADERS}
+                data={DOWNLOADS_OPENPGP_SIGNATURES}
+              />
             </Stack>
 
-            {/* TODO: swap for real data */}
             <Stack>
               <DataTable
                 columnHeaders={DOWNLOADS_OPENPGP_DEVELOPER_HEADERS}
-                data={pgpDeveloperTestData}
+                data={DOWNLOADS_DEVELOPERS_DATA}
               />
             </Stack>
           </DownloadsSection>
@@ -512,9 +512,10 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
                 </Text>
               </Stack>
 
-              <Stack flex={1} w={'100%'}>
+              <Stack flex={1} w={'100%'} bg='terminal-bg'>
-                {/* TODO: These keys depends on the binary */}
+                <Code p={4} bg='code-bg'>
-                <Code p={4}>gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC</Code>
+                  gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC
+                </Code>
               </Stack>
             </Flex>
 
@@ -532,9 +533,10 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
                 </Text>
               </Stack>
 
-              <Stack flex={1} w={'100%'}>
+              <Stack flex={1} w={'100%'} bg='terminal-bg'>
-                {/* TODO: These are developer keys, do we need to change? */}
+                <Code p={4} bg='code-bg'>
-                <Code p={4}>gpg --recv-keys E058A81C 05A5DDF0 1CCB7DD2</Code>
+                  gpg --recv-keys E058A81C 05A5DDF0 1CCB7DD2
+                </Code>
               </Stack>
             </Flex>
 
@@ -554,8 +556,9 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               </Stack>
 
               <Stack flex={1} w={'100%'}>
-                {/* TODO: These keys depends on the binary */}
+                <Code p={4} bg='code-bg'>
-                <Code p={4}>gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc</Code>
+                  gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc
+                </Code>
               </Stack>
             </Flex>
           </DownloadsSection>

src/theme/index.ts

@@ -31,7 +31,7 @@ const overrides = {
       secondary: { _light: 'green.800', _dark: 'green.600' },
       'button-bg': { _light: 'green.50', _dark: 'green.900' },
       body: { _light: 'gray.800', _dark: 'yellow.50' },
-      'code-bg': { _light: 'gray.200', _dark: 'gray.700' },
+      'code-bg': { _light: 'gray.200', _dark: 'gray.900' },
       'terminal-bg': { _light: 'gray.800', _dark: 'gray.900' },
       'terminal-text': { _light: 'green.50', _dark: 'green.200' },
       bg: { _light: 'yellow.50', _dark: 'gray.800' }

src/types.ts

@@ -34,3 +34,13 @@ export interface ReleaseParams {
   blobsList: string[];
   isStableRelease: boolean;
 }
+
+export interface OpenPGPSignaturesData {
+  'build server': string;
+  'unique id': string;
+  'openpgp key': {
+    label: string;
+    url: string;
+  };
+  fingerprint: string;
+}