centrifuge · onnovisser · Oct 2, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 28, 2023
diff --git a/package.json b/package.json
@@ -22,10 +22,10 @@
     "watch:functions": "nodemon --watch ./functions/dist/ --exec npx functions-framework --source=functions/dist --target=handler"
   },
   "dependencies": {
-    "@centrifuge/centrifuge-js": "0.3.1",
-    "@centrifuge/centrifuge-react": "0.0.4",
-    "@centrifuge/fabric": "1.2.0",
-    "@polkadot/util-crypto": "^10.1.14",
+    "@centrifuge/centrifuge-js": "0.5.0",
+    "@centrifuge/centrifuge-react": "0.1.0",
+    "@centrifuge/fabric": "1.3.2",
+    "@polkadot/util-crypto": "^11",
     "babel-plugin-styled-components": "^2.0.7",
     "cheerio": "^1.0.0-rc.12",
     "embla-carousel-react": "^7.0.3",
@@ -50,8 +50,6 @@
   },
   "devDependencies": {
     "@google-cloud/functions-framework": "^3.1.2",
-    "@polkadot/api": "^9.9.4",
-    "@polkadot/util": "^10.1.14",
     "@types/express": "^4.17.14",
     "@types/json-bigint": "^1.0.1",
     "@types/matter-js": "^0.18.2",
@@ -69,5 +67,17 @@
     "postgres": "^3.3.2",
     "react-markdown": "^8.0.3",
     "typescript": "^4.8.3"
+  },
+  "resolutions": {
+    "@subwallet/wallet-connect": "0.2.5",
+    "@polkadot/api": "~10.3.4",
+    "@polkadot/react-identicon": "~3.1.4",
+    "@polkadot/extension-dapp": "~0.45.5",
+    "@polkadot/extension-inject": "~0.45.5",
+    "@polkadot/rpc-provider": "~10.3.4",
+    "@polkadot/types": "~10.3.4",
+    "@polkadot/util": "^11",
+    "@polkadot/util-crypto": "^11",
+    "@polkadot/keyring": "^11"
   }
 }
diff --git a/src/components/BeliefsSection.tsx b/src/components/BeliefsSection.tsx
@@ -26,7 +26,7 @@ export function BeliefsSection({ title, items }: BeliefsSectionProps) {
         <Stack gap={5}>
           <Reveal>
             <Stack gap={1}>
-              <Text variant="heading2" as="h2">
+              <Text variant="heading2b" as="h2">
                 {title}
               </Text>
               <Divider />

diff --git a/src/components/MakerSection.tsx b/src/components/MakerSection.tsx
@@ -27,7 +27,7 @@ export function MakerSection({ title, items }: MakerSectionProps) {
     <RevealWrapper as="section" p={2}>
       <Container>
         <Reveal>
-          <Text as="h2" variant="heading2">
+          <Text as="h2" variant="heading2b">
             {title}
           </Text>
         </Reveal>
@@ -60,7 +60,7 @@ type ItemProps = {
 function Item({ title, body, link }: ItemProps) {
   return (
     <Stack gap={[1, 1, 2]}>
-      <Text as="h3" variant="heading4">
+      <Text as="h3" variant="heading4b">
         {title}
       </Text>
 

diff --git a/src/components/MarkdownSection.tsx b/src/components/MarkdownSection.tsx
@@ -46,22 +46,22 @@ export function MarkdownSection({ childMarkdownRemark }: MarkdownSectionProps) {
         children={childMarkdownRemark.internal.content}
         components={{
           h1: ({ children }) => (
-            <Text as="h2" variant="heading4">
+            <Text as="h2" variant="heading4b">
               {children}
             </Text>
           ),
           h2: ({ children }) => (
-            <Text as="h2" variant="heading4">
+            <Text as="h2" variant="heading4b">
               {children}
             </Text>
           ),
           h3: ({ children }) => (
-            <Text as="h3" variant="heading4">
+            <Text as="h3" variant="heading4b">
               {children}
             </Text>
           ),
           h4: ({ children }) => (
-            <Text as="h4" variant="heading4">
+            <Text as="h4" variant="heading4b">
               {children}
             </Text>
           ),

diff --git a/src/components/NewsSection.tsx b/src/components/NewsSection.tsx
@@ -35,7 +35,7 @@ export function NewsSection({ title, link, posts }: NewsSectionProps) {
       <Container>
         <Reveal>
           <Shelf alignItems="center" flexWrap="wrap" gap={4} rowGap={[4, 4, 0]}>
-            <Text as="h2" variant="heading2">
+            <Text as="h2" variant="heading2b">
               {title}
             </Text>
 

diff --git a/src/components/PrimeCta.tsx b/src/components/PrimeCta.tsx
@@ -23,7 +23,7 @@ export function PrimeCta({ title, items }: PrimeCtaProps) {
         <Container maxWidth="containerHeader">
           <Stack gap={3}>
             <Reveal>
-              <Text as="h2" variant="heading2" color="textInverted" style={{ whiteSpace: 'pre' }}>
+              <Text as="h2" variant="heading2b" color="textInverted" style={{ whiteSpace: 'pre' }}>
                 {title}
               </Text>
             </Reveal>

diff --git a/src/components/PrimePartners.tsx b/src/components/PrimePartners.tsx
@@ -35,7 +35,7 @@ export function PrimePartners({ title, items }: PrimePartnersProps) {
       <Box as="section" px={2}>
         <Container>
           <Reveal>
-            <Text as="h2" variant="heading4" textAlign="center">
+            <Text as="h2" variant="heading4b" textAlign="center">
               {title}
             </Text>
           </Reveal>

diff --git a/src/components/PrimeTargets.tsx b/src/components/PrimeTargets.tsx
@@ -31,7 +31,7 @@ export function PrimeTargets({ title, body, items }: PrimeTargetsProps) {
         <Container>
           <Stack gap={2}>
             <Reveal as={Shelf} justifyContent="space-between" alignItems="center" gap={1}>
-              <Text as="h2" variant="heading2">
+              <Text as="h2" variant="heading2b">
                 {title}
               </Text>
 
@@ -72,7 +72,7 @@ type ItemProps = PrimeTargetsProps['items'][number]
 function Item({ title, body }: ItemProps) {
   return (
     <Stack gap={1}>
-      <Text as="h3" variant="heading4">
+      <Text as="h3" variant="heading4b">
         {title}
       </Text>
       <Text as="p">{body}</Text>

diff --git a/src/components/audit-section/index.tsx b/src/components/audit-section/index.tsx
@@ -40,7 +40,7 @@ export function AuditSection({ title, items }: AuditSectionProps) {
             gap={4}
             rowGap={1}
           >
-            <Text as="h2" variant="heading2">
+            <Text as="h2" variant="heading2b">
               {title}
             </Text>
             <AnchorButton href={links.audits} rel="noopener noreferrer" target="_blank" variant="secondary" small>

diff --git a/src/components/brand-section/Colors.tsx b/src/components/brand-section/Colors.tsx
@@ -17,7 +17,7 @@ export function Colors({ title, items }: ColorsProps) {
   return (
     <RevealWrapper>
       <Reveal>
-        <Text as="h3" variant="heading2">
+        <Text as="h3" variant="heading2b">
           {title}
         </Text>
       </Reveal>

diff --git a/src/components/brand-section/Font.tsx b/src/components/brand-section/Font.tsx
@@ -16,7 +16,7 @@ export function Font({ title, body, image }: FontProps) {
     <RevealWrapper>
       <Stack as="section" gap={2}>
         <Reveal>
-          <Text as="h3" variant="heading2">
+          <Text as="h3" variant="heading2b">
             {title}
           </Text>
         </Reveal>

diff --git a/src/components/brand-section/Logo.tsx b/src/components/brand-section/Logo.tsx
@@ -20,7 +20,7 @@ export function Logos({ title, items }: LogosProps) {
   return (
     <RevealWrapper as="section">
       <Reveal mb={2}>
-        <Text as="h3" variant="heading2">
+        <Text as="h3" variant="heading2b">
           {title}
         </Text>
       </Reveal>

diff --git a/src/components/brand-section/Unit.tsx b/src/components/brand-section/Unit.tsx
@@ -13,7 +13,7 @@ export function Unit({ title, body, children, staggerIndex }: UnitProps) {
   return (
     <Reveal staggerIndex={staggerIndex}>
       {title && (
-        <Text as="h4" variant="heading4">
+        <Text as="h4" variant="heading4b">
           {title}
         </Text>
       )}

diff --git a/src/components/career-section/index.tsx b/src/components/career-section/index.tsx
@@ -32,7 +32,7 @@ export function CareerSection({ title, fallback, note, id }: CareerSectionProps)
     <RevealWrapper px={2} as="section" {...(id ? { id } : {})}>
       <Container>
         <Reveal>
-          <Text as="h2" variant="heading2">
+          <Text as="h2" variant="heading2b">
             {title}
           </Text>
         </Reveal>

diff --git a/src/components/contributors-section/index.tsx b/src/components/contributors-section/index.tsx
@@ -52,7 +52,7 @@ export function ContributorsSection({ title, cta, items }: ContributorsSectionPr
     <RevealWrapper as="section">
       <CenterContainer>
         <Reveal>
-          <Text variant="heading2" as="h2">
+          <Text variant="heading2b" as="h2">
             {title}
           </Text>
         </Reveal>

diff --git a/src/components/crowdloan-user/User.tsx b/src/components/crowdloan-user/User.tsx
@@ -16,7 +16,9 @@ import { getAccountDetails, useDidClaim, useTotalRewards } from './utils'
 export function User() {
   const [isClaiming, setIsClaiming] = React.useState(false)
   const centrifuge = useCentrifuge()
-  const { selectedAccount } = useWallet()
+  const {
+    substrate: { selectedAccount },
+  } = useWallet()
   const didClaim = useDidClaim(selectedAccount?.address)
   const totalRewards = useTotalRewards({ address: selectedAccount?.address, parachain: centrifuge.config.network })
   const currency = centrifuge.config.network === 'altair' ? 'AIR' : 'CFG'

diff --git a/src/components/crowdloan-user/index.tsx b/src/components/crowdloan-user/index.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
-import { Provider } from '@centrifuge/centrifuge-react'
 import { UserProvidedConfig } from '@centrifuge/centrifuge-js'
+import { Provider } from '@centrifuge/centrifuge-react'
+import * as React from 'react'
 import { User } from './User'
 
 export type CrowdloanUserProps = {
@@ -20,7 +20,7 @@ export default function CrowdloanUser({ network }: CrowdloanUserProps) {
   )
 
   return (
-    <Provider centrifugeConfig={centConfig}>
+    <Provider centrifugeConfig={centConfig} walletConnectId="c32fa79350803519804a67fcab0b742a">
       <User />
     </Provider>
   )

diff --git a/src/components/feature-section/index.tsx b/src/components/feature-section/index.tsx
@@ -18,7 +18,7 @@ export function FeatureSection({ title, items, body }: FeatureSectionProps) {
         <Stack as="section" gap={8}>
           <Stack gap={2}>
             <Reveal>
-              <Text variant="heading2" as="h2">
+              <Text variant="heading2b" as="h2">
                 {title}
               </Text>
             </Reveal>
@@ -66,7 +66,7 @@ function FeatureCard({ image, title, body }: FeatureCardProps) {
       <Stack gap={3} flex="1">
         <Divider />
         <Stack gap={2}>
-          <Text variant="heading4" as="h3">
+          <Text variant="heading4b" as="h3">
             {title}
           </Text>
           <Text variant="body1" as="p">

diff --git a/src/components/hero-crowdloan/index.tsx b/src/components/hero-crowdloan/index.tsx
@@ -30,7 +30,7 @@ export function HeroCrowdloan({ title, amount, contributors, anchor }: HeroCrowd
       <Text as="span" variant="tag">
         Crowdloan
       </Text>
-      <Text as="h1" variant="heading2">
+      <Text as="h1" variant="heading2b">
         {title}
       </Text>
       <Text as="p" variant="heading6" style={{ marginTop: '.7em' }}>

diff --git a/src/components/hero-governance/index.tsx b/src/components/hero-governance/index.tsx
@@ -78,7 +78,7 @@ export function HeroGovernance({ title, subtitle, body, items }: HeroGovernanceP
                     >
                       <Box as="img" src={item.image.publicURL} alt="" maxWidth="100%" />
                     </Shelf>
-                    <Text variant="heading4" as="h2">
+                    <Text variant="heading4b" as="h2">
                       {item.title}
                     </Text>
                     <Text as="p" variant="body1">

diff --git a/src/components/hero-prime/index.tsx b/src/components/hero-prime/index.tsx
@@ -42,7 +42,7 @@ export function HeroPrime({ pretitle, title, body, image }: HeroPrimeProps) {
               </Reveal>
 
               <Reveal staggerIndex={1}>
-                <Title forwardedAs="h1" variant="heading2" style={{ whiteSpace: 'pre' }}>
+                <Title forwardedAs="h1" variant="heading2b" style={{ whiteSpace: 'pre' }}>
                   {title}
                 </Title>
               </Reveal>

diff --git a/src/components/news-card/index.tsx b/src/components/news-card/index.tsx
@@ -144,7 +144,7 @@ function Title({ featured = false, href, children }: { featured: boolean; href:
         target="_blank"
         rel="noopener noreferrer"
         tabIndex={-1}
-        variant={featured ? 'heading3' : 'heading6'}
+        variant={featured ? 'heading3b' : 'heading6'}
         fontWeight={600}
         lineHeight={featured ? 1.05 : 1.2}
       >

diff --git a/src/components/prime-banner/index.tsx b/src/components/prime-banner/index.tsx
@@ -30,14 +30,17 @@ export function PrimeBanner({ title, body }: PrimeBannerProps) {
           borderRadius="input"
         >
           <Grid gridTemplateColumns={['1fr', '1fr', 'auto 1fr', 'auto 1fr auto']} gap={[3, 3, 4, 6, 10]}>
-            <Title forwardedAs="h2" variant="heading4">
+            <Title forwardedAs="h2" variant="heading4b">
               {title}
             </Title>
 
             <Text as="p">{body}</Text>
 
             <Box alignSelf="center" mt={[2, 2, 0]}>
-              <InternalLink to="https://centrifuge.mirror.xyz/1gtfV6cKo0IFqIkns1lMlqoA1748biFdR_J0WHNNX2k" variant="secondary">
+              <InternalLink
+                to="https://centrifuge.mirror.xyz/1gtfV6cKo0IFqIkns1lMlqoA1748biFdR_J0WHNNX2k"
+                variant="secondary"
+              >
                 Learn More
               </InternalLink>
             </Box>

diff --git a/src/components/testimonials/index.tsx b/src/components/testimonials/index.tsx
@@ -37,7 +37,7 @@ export function Testimonials({ title, items }: TestimonialsProps) {
     <RevealWrapper as="section" px={2}>
       <Container>
         <Reveal>
-          <Text as="h2" variant="heading2">
+          <Text as="h2" variant="heading2b">
             {title}
           </Text>
         </Reveal>

diff --git a/src/components/text-image/index.tsx b/src/components/text-image/index.tsx
@@ -19,7 +19,7 @@ export function TextImage({ title, body, media, content, titleAddition }: RwaUsp
           <Grid columns={[1, 1, 2]} equalColumns gap={[8, 8, '100px', '200px']}>
             <Box>
               <Reveal as={Shelf} justifyContent="space-between" alignItems="center">
-                <Title forwardedAs="h2" variant="heading2">
+                <Title forwardedAs="h2" variant="heading2b">
                   {title}
                 </Title>
                 {titleAddition}

diff --git a/src/components/usp-section/UspItem.tsx b/src/components/usp-section/UspItem.tsx
@@ -17,7 +17,7 @@ export function UspItem({ title, body, image }: UspItemProps) {
         <Image data={image} />
       </Media>
       <ItemContent pt={1} gap={2}>
-        <Text as="h3" variant="heading4">
+        <Text as="h3" variant="heading4b">
           {title}
         </Text>
         <Text as="p" variant="body2">

diff --git a/src/components/usp-section/index.tsx b/src/components/usp-section/index.tsx
@@ -31,7 +31,7 @@ export function UspSection({ title, body, items }: UspSectionProps) {
     <RevealWrapper as="section" px={2}>
       <Container maxWidth="container">
         <Reveal>
-          <Text as="h2" variant="heading2">
+          <Text as="h2" variant="heading2b">
             {title}
           </Text>
 

diff --git a/src/components/work-principle/index.tsx b/src/components/work-principle/index.tsx
@@ -31,7 +31,7 @@ export function WorkPrinciple({ title, items }: WorkPrincipleProps) {
     <RevealWrapper as="section" px={2} py={8}>
       <Container>
         <Reveal>
-          <Text as="h2" variant="heading2">
+          <Text as="h2" variant="heading2b">
             {title}
           </Text>
         </Reveal>
@@ -70,7 +70,7 @@ function Principle({ label, title, body, image, flipped }: PrincipleProps) {
           <Text variant="tag" as="span">
             {label}
           </Text>
-          <Text as="h3" variant="heading4">
+          <Text as="h3" variant="heading4b">
             {title}
           </Text>
           <Text as="p" variant="body1">

diff --git a/src/pages/explore.tsx b/src/pages/explore.tsx
@@ -70,7 +70,7 @@ export default function Explore({ data }: ExploreProps) {
               maxWidth={400}
               marginX="auto"
             >
-              <Text as="h2" variant="heading4">
+              <Text as="h2" variant="heading4b">
                 {section.title}
               </Text>
 

diff --git a/src/styled.d.ts b/src/styled.d.ts
@@ -15,6 +15,9 @@ declare module 'styled-components' {
     }
     typography: FabricTheme['typography'] & {
       tag: ThemeTypography['heading1']
+      heading2b: ThemeTypography['heading1']
+      heading3b: ThemeTypography['heading1']
+      heading4b: ThemeTypography['heading1']
       menuAnchor: {
         fontSize: number
         fontWeight: number

diff --git a/src/templates/legal.tsx b/src/templates/legal.tsx
@@ -42,7 +42,7 @@ export default function LegalPage({ data }: LegalPageProps) {
     <Layout>
       <Stack px={2} pt={[6, 8, 10]}>
         <Stack maxWidth="containerNarrow" gap={4} mx="auto" width="100%">
-          <Text as="h1" variant="heading2">
+          <Text as="h1" variant="heading2b">
             {title}
           </Text>
           <MarkdownSection childMarkdownRemark={markdown_section.childMarkdownRemark} />