feat(app): use subsquid client

.vscode/settings.json

@@ -4,11 +4,7 @@
     "source.fixAll.eslint": true,
     "source.sortImports": true
   },
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ],
+  "eslint.workingDirectories": [{"mode": "auto"}],
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
   "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,

apps/app/gatsby-config.ts

@@ -1,25 +1,23 @@
 import type {GatsbyConfig} from 'gatsby'
 
+type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T // from lodash
+export const isTruthy = <T>(value: T): value is Truthy<T> => Boolean(value)
+const isDev = process.env.NODE_ENV === 'development'
+
 const config: GatsbyConfig = {
   siteMetadata: {
     title: 'Phala App',
     siteUrl: 'https://app.phala.network',
     description: 'To host, connect, and gain in the world of Web3',
   },
   jsxRuntime: 'automatic',
-  // flags: {FAST_DEV: true},
   plugins: [
     'local-plugin-layout', // This plugin's place decides providers order, which is highly important
     'local-plugin-styletron',
     'gatsby-plugin-typescript',
     'gatsby-plugin-netlify',
-    'gatsby-plugin-react-helmet',
     'gatsby-plugin-fontawesome-css',
     'gatsby-plugin-styled-components',
-    {
-      resolve: 'gatsby-plugin-google-gtag',
-      options: {trackingIds: ['G-E0PDMEJQ0T']},
-    },
     {
       resolve: 'gatsby-plugin-react-svg',
       options: {
@@ -39,18 +37,22 @@ const config: GatsbyConfig = {
       resolve: 'gatsby-plugin-google-fonts',
       options: {
         // FIXME: Montserrat:400 is too light, load it after css is ready
-        fonts: ['Lato', 'Montserrat:500,600,700', 'PT Mono'],
+        fonts: ['Montserrat:500,600,700', 'PT Mono'],
         display: 'swap',
       },
     },
-    {
+    !isDev && {
       resolve: '@sentry/gatsby',
       options: {
         dsn: 'https://ba6cd9ff61544ca6a96f3ca1d90445f2@o812739.ingest.sentry.io/5879132',
         sampleRate: 1,
       },
     },
-  ],
+    !isDev && {
+      resolve: 'gatsby-plugin-google-gtag',
+      options: {trackingIds: ['G-E0PDMEJQ0T']},
+    },
+  ].filter(isTruthy),
 }
 
 export default config

apps/app/package.json

@@ -14,51 +14,59 @@
     "last 2 Safari major versions"
   ],
   "dependencies": {
-    "@phala/app-mining": "workspace:^",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@phala/react-components": "workspace:^",
     "@phala/react-hooks": "workspace:^",
     "@phala/react-libs": "workspace:^",
     "@phala/store": "workspace:^",
-    "@phala/typedefs": "^0.2.30",
+    "@phala/typedefs": "^0.2.31",
     "@phala/utils": "workspace:^",
+    "@polkadot/api": "^8.8.1",
     "@polkadot/types": "^8.8.1",
     "@polkadot/util": "^9.4.1",
     "@polkadot/util-crypto": "^9.4.1",
     "@sentry/gatsby": "^7.15.0",
     "@talismn/connect-wallets": "^1.2.1",
-    "@tanstack/react-query": "^4.12.0",
-    "@tanstack/react-query-devtools": "^4.12.0",
+    "@tanstack/react-query": "^4.13.0",
+    "@tanstack/react-query-devtools": "^4.13.0",
+    "ajv": "^8.11.0",
     "axios": "^0.27.2",
     "babel-plugin-styled-components": "^2.0.7",
     "baseui": "^12.2.0",
+    "date-fns": "^2.28.0",
     "decimal.js": "^10.4.0",
     "gatsby": "^4.24.4",
     "gatsby-plugin-env-variables": "^2.2.0",
     "gatsby-plugin-fontawesome-css": "^1.2.0",
     "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-google-gtag": "^4.24.0",
     "gatsby-plugin-netlify": "^5.0.1",
-    "gatsby-plugin-react-helmet": "^5.24.0",
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-styled-components": "^5.24.0",
     "gatsby-plugin-typescript": "^4.24.0",
+    "graphql-request": "^5.0.0",
     "iframe-resizer-react": "^1.1.0",
     "jotai": "^1.7.8",
+    "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-feather": "^2.0.10",
     "styled-breakpoints": "^11.1.1",
     "styled-components": "^5.3.5",
     "styletron-engine-monolithic": "^1.0.0",
     "styletron-react": "^6.1.0"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.11.49",
     "@types/react": "^18.0.17",
-    "@types/react-helmet": "^6.1.5",
-    "@types/react-table": "^7.7.11",
     "@types/styled-components": "^5.1.26",
     "@types/styletron-react": "^5.0.3",
-    "@types/styletron-standard": "^2.0.2"
+    "@types/styletron-standard": "^2.0.2",
+    "typescript": "^4.8.4"
   }
 }

apps/app/plugins/local-plugin-layout/gatsby-ssr.js

@@ -8,3 +8,7 @@ export const wrapRootElement = ({element}) => {
 export const wrapPageElement = ({props, element}) => (
   <WrapPage {...props}>{element}</WrapPage>
 )
+
+export const onRenderBody = ({setHtmlAttributes}) => {
+  setHtmlAttributes({lang: 'en'})
+}

apps/app/src/GlobalStyle.tsx

@@ -13,6 +13,10 @@ const GlobalStyle = createGlobalStyle`
     text-decoration: none;
   }
 
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -23,6 +27,12 @@ const GlobalStyle = createGlobalStyle`
   label[data-baseweb=form-control-label] {
     font-weight: 600;
   }
+
+  div[data-baseweb=table-builder-semantic] {
+    th {
+      font-weight: 600;
+    }
+  }
 `
 
 export default GlobalStyle

apps/app/src/WrapApp.tsx

@@ -16,7 +16,6 @@ const WrapApp: React.FC<{children: ReactNode}> = ({children}) => {
       new QueryClient({
         defaultOptions: {
           queries: {
-            refetchOnMount: false,
             onError: () => {
               toaster.negative(
                 'Something went wrong. Please try again later.',
@@ -30,7 +29,7 @@ const WrapApp: React.FC<{children: ReactNode}> = ({children}) => {
 
   return (
     <BaseProvider theme={baseTheme}>
-      <QueryClientProvider contextSharing={true} client={client}>
+      <QueryClientProvider client={client}>
         <ApiPromiseProvider
           endpoint={currentNetworkNode.endpoint}
           registryTypes={currentNetworkNode.types}

apps/app/src/WrapPage.tsx

@@ -1,31 +1,28 @@
-import {Helmet} from 'react-helmet'
-import {ComponentsGlobalStyle} from '@phala/react-components'
+import {useAtomsDevtools} from 'jotai/devtools'
+import {ReactNode, StrictMode} from 'react'
 import BaseLayout from './components/BaseLayout'
 import GlobalStyle from './GlobalStyle'
-import {ReactNode, StrictMode} from 'react'
-import {useTestnetGuard} from './hooks/useTestnetGuard'
-import useZendesk from './hooks/useZendesk'
 import {useAutoConnectWallet} from './hooks/useAutoConnectWallet'
+import useBlockHeightListener from './hooks/useBlockHeightListener'
 import {useSubscribeWalletAccounts} from './hooks/useSubscribeWalletAccounts'
-import {useAtomsDevtools} from 'jotai/devtools'
+import {useTestnetGuard} from './hooks/useTestnetGuard'
+import useZendesk from './hooks/useZendesk'
 
 const WrapPage: React.FC<{children: ReactNode}> = ({children}) => {
   useTestnetGuard()
   useZendesk()
   useAutoConnectWallet()
   useSubscribeWalletAccounts()
   useAtomsDevtools('Phala App')
+  useBlockHeightListener()
 
   return (
     <StrictMode>
-      <Helmet titleTemplate="%s | Phala App">
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-        />
-      </Helmet>
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      />
       <GlobalStyle />
-      <ComponentsGlobalStyle />
       <BaseLayout>{children}</BaseLayout>
     </StrictMode>
   )

apps/app/src/components/Assets/AccountBanner/AccountInfo.tsx

@@ -4,14 +4,13 @@ import {useCurrentAccount} from '@phala/store'
 import {trimAddress} from '@phala/utils'
 import {toaster} from 'baseui/toast'
 import React, {MouseEventHandler, useMemo, useState} from 'react'
+import {Copy} from 'react-feather'
 import {down} from 'styled-breakpoints'
 import {useBreakpoint} from 'styled-breakpoints/react-styled'
 import styled from 'styled-components'
 import Button from '../Button'
-import CopyIcon from '../Icons/CopyIcon.svg'
 
 const Wrapper = styled.div`
-  box-sizing: border-box;
   display: grid;
   grid-column-gap: 23px;
   grid-template-rows: 36px 48px;
@@ -27,13 +26,13 @@ const Wrapper = styled.div`
 
 const Name = styled.div`
   grid-area: Name;
-  font-family: Montserrat;
-  font-style: normal;
   font-weight: 600;
-
   font-size: 36px;
   line-height: 36px;
   color: #ffffff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   ${down('md')} {
     font-size: 20px;
@@ -56,9 +55,10 @@ const AddressWrapper = styled.div`
   padding-top: 16px;
 
   svg {
-    fill: #8c8c8c;
+    cursor: pointer;
+    color: #8c8c8c;
     :hover {
-      fill: #aad829;
+      color: #aad829;
     }
   }
 
@@ -67,8 +67,6 @@ const AddressWrapper = styled.div`
   }
 `
 const Address = styled.a`
-  font-style: normal;
-  font-weight: normal;
   font-size: 16px;
   line-height: 16px;
   color: #aad829;
@@ -142,8 +140,8 @@ const AccountInfo: React.FC = () => {
             </HrefAddress>
           )}
 
-          {!polkadotAccount ? null : (
-            <CopyIcon
+          {polkadotAccount && (
+            <Copy
               onClick={onClick}
               width={isMobile ? '13' : '26'}
               height={isMobile ? '13' : '26'}

apps/app/src/components/Assets/AccountBanner/index.tsx

@@ -61,11 +61,10 @@ const Icon = styled.div`
 `
 
 const Dollar = styled.div`
-  font-family: Montserrat;
-  font-style: normal;
   font-weight: 600;
   font-size: 60px;
   line-height: 36px;
+  white-space: nowrap;
   color: #ffffff;
   padding-top: 113px;
   padding-right: 85px;

apps/app/src/components/Assets/AssetList/AssetCell.tsx

@@ -9,8 +9,6 @@ const Wrapper = styled.div`
 `
 
 const Name = styled.span<{isPHA?: boolean}>`
-  font-family: Montserrat;
-  font-style: normal;
   font-weight: 600;
   font-size: 16px;
   line-height: 16px;

apps/app/src/components/Assets/AssetList/BalanceCell.tsx

@@ -3,44 +3,35 @@ import {down} from 'styled-breakpoints'
 import styled from 'styled-components'
 import {DataType} from './index'
 
-const Wrapper = styled.div``
-
 const Balance = styled.div`
-  font-family: Montserrat;
-  font-style: normal;
   font-weight: 600;
   font-size: 16px;
-  line-height: 16px;
-  color: #111111;
 `
 
 const ValueItem = styled.div`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 16px;
+  font-size: 14px;
   color: #8c8c8c;
-  margin-top: 10px;
   display: flex;
   justify-content: space-between;
-  width: 265px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  gap: 12px;
+  max-width: 280px;
 
   :first-of-type {
     margin-top: 20px;
   }
 
   ${down('md')} {
     font-size: 14px;
-    margin-bottom: 14px;
-    width: 220px;
   }
 `
 
 const BalanceCell: React.FC<
   Pick<DataType, 'balance' | 'transferrable' | 'crowdloanVesting' | 'delegate'>
 > = ({balance, transferrable, crowdloanVesting, delegate}) => {
   return (
-    <Wrapper>
+    <div>
       <Balance>{balance}</Balance>
       <div>
         {transferrable ? (
@@ -62,7 +53,7 @@ const BalanceCell: React.FC<
           </ValueItem>
         ) : null}
       </div>
-    </Wrapper>
+    </div>
   )
 }