feat(app): self-hosted phala computation squid (#340)

* feat(app): self-hosted phala computation squid

* feat(app): low quality icon

.yarnrc.yml

@@ -16,4 +16,4 @@ supportedArchitectures:
   os:
     - current
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

apps/analytics/package.json

@@ -16,22 +16,22 @@
     "svelte-check": "^3.5.2",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   },
   "type": "module",
   "dependencies": {
     "@phala/util": "workspace:^",
     "@rgossiaux/svelte-headlessui": "^2.0.0",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
-    "@tanstack/svelte-query": "^4.35.3",
+    "@tanstack/svelte-query": "^4.36.1",
     "autoprefixer": "^10.4.16",
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.30.0",
     "decimal.js": "^10.4.3",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "svelte-chartjs": "^3.1.2",
     "tailwindcss": "^3.3.3"
   }

apps/analytics/src/lib/graphql.ts

@@ -9,9 +9,9 @@ export const phatSquidClient = new GraphQLClient(
 )
 
 export const phalaSquidClient = new GraphQLClient(
-  'https://squid.subsquid.io/phala-computation/graphql',
+  'https://subsquid.phala.network/phala-computation/graphql',
 )
 
 export const khalaSquidClient = new GraphQLClient(
-  'https://squid.subsquid.io/khala-computation/graphql',
+  'https://subsquid.phala.network/khala-computation/graphql',
 )

apps/app/components/BasePool/Identity.tsx

@@ -1,5 +1,6 @@
 import {type Account} from '@/lib/subsquidQuery'
 import {chainAtom} from '@/store/common'
+import ErrorOutline from '@mui/icons-material/ErrorOutline'
 import RemoveCircleOutline from '@mui/icons-material/RemoveCircleOutline'
 import VerifiedOutlined from '@mui/icons-material/VerifiedOutlined'
 import {alpha, Link, Stack, Tooltip, Typography, useTheme} from '@mui/material'
@@ -17,6 +18,7 @@ const Identity: FC<
   const verified =
     identityLevel === 'KnownGood' || identityLevel === 'Reasonable'
 
+  const lowQuality = identityLevel === 'LowQuality'
   const link = (
     <Link
       variant={detail ? 'h6' : 'caption'}
@@ -69,6 +71,11 @@ const Identity: FC<
                 color="success"
                 sx={{width: detail ? 22 : 16, flexShrink: 0}}
               />
+            ) : lowQuality ? (
+              <ErrorOutline
+                color="error"
+                sx={{width: detail ? 22 : 16, flexShrink: 0}}
+              />
             ) : (
               <RemoveCircleOutline
                 color="disabled"

apps/app/components/BasePool/Intro.tsx

@@ -5,8 +5,8 @@ import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {
   faDiscord,
   faTelegram,
-  faTwitter,
   faWeixin,
+  faXTwitter,
 } from '@fortawesome/free-brands-svg-icons'
 import {faEnvelope, faMessage} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
@@ -19,7 +19,7 @@ import Identity from './Identity'
 const iconMap = {
   discord: faDiscord,
   telegram: faTelegram,
-  twitter: faTwitter,
+  twitter: faXTwitter,
   wechat: faWeixin,
   email: faEnvelope,
   forum: faMessage,
@@ -56,7 +56,7 @@ const Intro: FC<{
             if (label === 'telegram') {
               href = `https://t.me/${value.replace(/^@/, '')}`
             } else if (label === 'twitter') {
-              href = `https://twitter.com/${value}`
+              href = `https://x.com/${value}`
             } else if (label === 'email') {
               href = `mailto:${value}`
             } else if (label === 'forum') {

apps/app/components/BasePool/List.tsx

@@ -197,7 +197,6 @@ const BasePoolList: FC<{
   const [subsquidClient] = useAtom(subsquidClientAtom)
   const {data, isLoading, fetchNextPage, hasNextPage} =
     useInfiniteBasePoolsConnectionQuery(
-      'after',
       subsquidClient,
       {
         first: 20,

apps/app/components/Delegation/List.tsx

@@ -102,7 +102,6 @@ const DelegationList: FC<{
   const [subsquidClient] = useAtom(subsquidClientAtom)
   const {data, isLoading, fetchNextPage, hasNextPage} =
     useInfiniteDelegationsConnectionQuery(
-      'after',
       subsquidClient,
       {
         first: 20,

apps/app/components/TopBar/Chain.tsx

@@ -12,7 +12,7 @@ import Property from '../Property'
 
 const ChainSelect: FC = () => {
   const api = usePolkadotApi()
-  const [chain, setChain] = useAtom(chainAtom)
+  const [chain] = useAtom(chainAtom)
   const isKhala = chain === 'khala'
 
   const color = `${isKhala ? '#03ffff' : colors.main[400]} !important`
@@ -64,7 +64,7 @@ const ChainSelect: FC = () => {
       inputProps={{sx: {py: '6.5px'}}}
       onChange={(e) => {
         const nextValue = e.target.value as Chain
-        setChain(nextValue)
+        location.replace(`/${nextValue}`)
       }}
     >
       {['khala', 'phala'].map((value) => (

apps/app/components/TopBar/index.tsx

@@ -1,7 +1,7 @@
 import PhalaLogo from '@/assets/phala_logo.svg'
 import {montserrat} from '@/lib/theme'
 import {chainAtom} from '@/store/common'
-import {faDiscord, faTwitter} from '@fortawesome/free-brands-svg-icons'
+import {faDiscord, faXTwitter} from '@fortawesome/free-brands-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import Language from '@mui/icons-material/Language'
 import Menu from '@mui/icons-material/Menu'
@@ -127,7 +127,7 @@ const TopBar: FC = () => {
         target="_blank"
       >
         <FontAwesomeIcon
-          icon={faTwitter}
+          icon={faXTwitter}
           color={theme.palette.text.secondary}
         />
       </IconButton>

apps/app/components/Wiki/index.tsx

@@ -20,10 +20,10 @@ const Content: FC<{children: string}> = ({children}) => {
   return (
     <Markdown
       components={{
-        p: ({node, ...props}) => (
+        p: ({node, ref, ...props}) => (
           <Typography variant="body1" mt={2} {...props} />
         ),
-        a: ({node, ...props}) => <Link target="_blank" {...props} />,
+        a: ({node, ref, ...props}) => <Link target="_blank" {...props} />,
       }}
     >
       {children}

apps/app/config.ts

@@ -14,6 +14,6 @@ export const PHALA_ENDPOINTS = [
   'wss://phala.api.onfinality.io/public-ws',
 ]
 export const PHALA_SUBSQUID_URL =
-  'https://squid.subsquid.io/phala-computation/graphql'
+  'https://subsquid.phala.network/phala-computation/graphql'
 export const phalaSubsquidClient = new GraphQLClient(PHALA_SUBSQUID_URL)
 export const WPHA_ASSET_ID = 10000