TS migration - /pages-conditional

docs/schema.md

@@ -0,0 +1,12 @@
+# Schema
+
+Our schema, used in the Gatsby GraphQL layer, is defined under the `src/schema` folder. These files are then grabbed by the createSchemaCustomization`Gatsby hook in`gatsby-node.ts`.
+There are two ways to define a schema in Gatsby:
+
+- GraphQL SDL, the traditional way using [template literals](https://graphql.org/learn/schema/)
+- And a more "programmatic" approach, which has more flexibility, [Gatsby Type Builders](https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#gatsby-type-builders) with `schema.buildObjectType`
+
+That is why you see two folders in /schema
+
+- `src/schema/sdls` for GraphQL SDL
+- `src/schema/builders` for Gatsby Type Builders

gatsby-node.ts

@@ -8,6 +8,8 @@ import type { GatsbyNode } from "gatsby"
 
 import type { Context } from "./src/types"
 
+import * as Schema from "./src/schema"
+
 import mergeTranslations from "./src/scripts/mergeTranslations"
 import copyContributors from "./src/scripts/copyContributors"
 
@@ -338,11 +340,7 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
         )
         createPage({
           path: `/${lang}/${page}/`,
-          component: path.resolve(
-            page === "wallets"
-              ? `src/pages-conditional/${page}/index.js`
-              : `src/pages-conditional/${page}.js`
-          ),
+          component: path.resolve(`src/pages-conditional/${page}.tsx`),
           context: {
             slug: `/${lang}/${page}/`,
             intl: {
@@ -394,54 +392,14 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
 }
 
 export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
-  ({ actions }) => {
+  ({ actions, schema }) => {
     const { createTypes } = actions
-    const typeDefs = `
-    type Mdx implements Node {
-      frontmatter: Frontmatter
-    }
-    type Frontmatter {
-      sidebar: Boolean
-      sidebarDepth: Int
-      incomplete: Boolean
-      template: String
-      summaryPoint1: String!
-      summaryPoint2: String!
-      summaryPoint3: String!
-      summaryPoint4: String!
-      position: String
-      compensation: String
-      location: String
-      type: String
-      link: String
-      address: String
-      skill: String
-      published: String
-      sourceUrl: String
-      source: String
-      author: String
-      tags: [String]
-      isOutdated: Boolean
-    }
-    type ConsensusBountyHuntersCsv implements Node {
-      username: String,
-      name: String,
-      score: Int
-    }
-     type ExecutionBountyHuntersCsv implements Node {
-      username: String,
-      name: String,
-      score: Int
-    }
-  `
-    createTypes(typeDefs)
+    const { sdls, builders } = Schema
 
-    // Optimization. Ref: https://www.gatsbyjs.com/docs/scaling-issues/#switch-off-type-inference-for-sitepagecontext
-    createTypes(`
-    type SitePage implements Node @dontInfer {
-      path: String!
-    }
-  `)
+    createTypes([
+      ...Object.keys(sdls).map((sdlKey) => sdls[sdlKey]),
+      schema.buildObjectType(builders.WalletsCsv),
+    ])
   }
 
 export const onPreBootstrap: GatsbyNode["onPreBootstrap"] = ({ reporter }) => {

src/components/ButtonLink.tsx

@@ -107,34 +107,17 @@ const ButtonLink: React.FC<IProps> = ({
     scrollIntoView(toId)
   }
 
-  if (isSecondary) {
-    return to ? (
-      <SecondaryLink
-        to={to}
-        hideArrow={hideArrow}
-        className={className}
-        {...props}
-      >
-        {children}
-      </SecondaryLink>
-    ) : (
-      <SecondaryScrollLink
-        onClick={handleOnClick}
-        className={className}
-        {...props}
-      >
-        {children}
-      </SecondaryScrollLink>
-    )
-  }
+  const Link = isSecondary ? SecondaryLink : PrimaryLink
+  const ScrollLink = isSecondary ? SecondaryScrollLink : PrimaryScrollLink
+
   return to ? (
-    <PrimaryLink to={to} hideArrow={hideArrow} className={className} {...props}>
+    <Link to={to} hideArrow={hideArrow} className={className} {...props}>
       {children}
-    </PrimaryLink>
+    </Link>
   ) : (
-    <PrimaryScrollLink onClick={handleOnClick} className={className} {...props}>
+    <ScrollLink onClick={handleOnClick} className={className} {...props}>
       {children}
-    </PrimaryScrollLink>
+    </ScrollLink>
   )
 }
 

src/components/Link.tsx

@@ -7,6 +7,7 @@ import Icon from "./Icon"
 
 import { languageMetadata } from "../utils/languages"
 import { trackCustomEvent, EventOptions } from "../utils/matomo"
+import { StringValueNode } from "graphql"
 
 const HASH_PATTERN = /^#.*/
 // const DOMAIN_PATTERN = /^(?:https?:)?[/]{2,}([^/]+)/

src/components/WalletCompare.js

@@ -187,6 +187,9 @@ const WalletCompare = ({ location }) => {
           has_high_volume_purchases
           has_dex_integrations
           has_multisig
+          image {
+            ...walletCardImage
+          }
         }
       }
       timestamp: walletsCsv {
@@ -200,132 +203,6 @@ const WalletCompare = ({ location }) => {
           }
         }
       }
-      alpha: file(relativePath: { eq: "wallets/alpha.png" }) {
-        ...walletCardImage
-      }
-      ambo: file(relativePath: { eq: "wallets/ambo.png" }) {
-        ...walletCardImage
-      }
-      argent: file(relativePath: { eq: "wallets/argent.png" }) {
-        ...walletCardImage
-      }
-      bitcoindotcom: file(relativePath: { eq: "wallets/bitcoindotcom.png" }) {
-        ...walletCardImage
-      }
-      coinbase: file(relativePath: { eq: "wallets/coinbase.png" }) {
-        ...walletCardImage
-      }
-      coinomi: file(relativePath: { eq: "wallets/coinomi.png" }) {
-        ...walletCardImage
-      }
-      dcent: file(relativePath: { eq: "wallets/dcent.png" }) {
-        ...walletCardImage
-      }
-      enjin: file(relativePath: { eq: "wallets/enjin.png" }) {
-        ...walletCardImage
-      }
-      fortmatic: file(relativePath: { eq: "wallets/fortmatic.png" }) {
-        ...walletCardImage
-      }
-      gnosis: file(relativePath: { eq: "wallets/gnosis.png" }) {
-        ...walletCardImage
-      }
-      guarda: file(relativePath: { eq: "wallets/guarda.png" }) {
-        ...walletCardImage
-      }
-      hyperpay: file(relativePath: { eq: "wallets/hyperpay.png" }) {
-        ...walletCardImage
-      }
-      imtoken: file(relativePath: { eq: "wallets/imtoken.png" }) {
-        ...walletCardImage
-      }
-      ledger: file(relativePath: { eq: "wallets/ledger.png" }) {
-        ...walletCardImage
-      }
-      linen: file(relativePath: { eq: "wallets/linen.png" }) {
-        ...walletCardImage
-      }
-      mathwallet: file(relativePath: { eq: "wallets/mathwallet.png" }) {
-        ...walletCardImage
-      }
-      metamask: file(relativePath: { eq: "wallets/metamask.png" }) {
-        ...walletCardImage
-      }
-      monolith: file(relativePath: { eq: "wallets/monolith.png" }) {
-        ...walletCardImage
-      }
-      multis: file(relativePath: { eq: "wallets/multis.png" }) {
-        ...walletCardImage
-      }
-      mycrypto: file(relativePath: { eq: "wallets/mycrypto.png" }) {
-        ...walletCardImage
-      }
-      myetherwallet: file(relativePath: { eq: "wallets/myetherwallet.png" }) {
-        ...walletCardImage
-      }
-      pillar: file(relativePath: { eq: "wallets/pillar.png" }) {
-        ...walletCardImage
-      }
-      portis: file(relativePath: { eq: "wallets/portis.png" }) {
-        ...walletCardImage
-      }
-      rainbow: file(relativePath: { eq: "wallets/rainbow.png" }) {
-        ...walletCardImage
-      }
-      samsung: file(relativePath: { eq: "wallets/samsung.png" }) {
-        ...walletCardImage
-      }
-      squarelink: file(relativePath: { eq: "wallets/squarelink.png" }) {
-        ...walletCardImage
-      }
-      status: file(relativePath: { eq: "wallets/status.png" }) {
-        ...walletCardImage
-      }
-      torus: file(relativePath: { eq: "wallets/torus.png" }) {
-        ...walletCardImage
-      }
-      trezor: file(relativePath: { eq: "wallets/trezor.png" }) {
-        ...walletCardImage
-      }
-      trust: file(relativePath: { eq: "wallets/trust.png" }) {
-        ...walletCardImage
-      }
-      unstoppable: file(relativePath: { eq: "wallets/unstoppable.png" }) {
-        ...walletCardImage
-      }
-      zengo: file(relativePath: { eq: "wallets/zengo.png" }) {
-        ...walletCardImage
-      }
-      walleth: file(relativePath: { eq: "wallets/walleth.png" }) {
-        ...walletCardImage
-      }
-      tokenpocket: file(relativePath: { eq: "wallets/tokenpocket.png" }) {
-        ...walletCardImage
-      }
-      safepal: file(relativePath: { eq: "wallets/safepal.png" }) {
-        ...walletCardImage
-      }
-      opera: file(relativePath: { eq: "wallets/opera.png" }) {
-        ...walletCardImage
-      }
-      coin98: file(relativePath: { eq: "wallets/coin98.png" }) {
-        ...walletCardImage
-      }
-      bitkeep: file(relativePath: { eq: "wallets/bitkeep.png" }) {
-        ...walletCardImage
-      }
-      keystone: file(relativePath: { eq: "wallets/keystone.png" }) {
-        ...walletCardImage
-      }
-      loopring: file(relativePath: { eq: "wallets/loopring.png" }) {
-        ...walletCardImage
-      }
-      numio: file(relativePath: { eq: "wallets/numio.png" }) {
-        ...walletCardImage
-      }
-      airgap: file(relativePath: { eq: "wallets/airgap.png" }) {
-        ...walletCardImage
-      }
     }
   `)
 
@@ -343,7 +220,6 @@ const WalletCompare = ({ location }) => {
     const nodes = data.allWallets.nodes
     const wallets = shuffle(
       nodes.map((node) => {
-        node.image = data[node.id]
         node.alt = translateMessageId(
           `page-find-wallet-${node.id}-logo-alt`,
           intl