Merge pull request #446 from galacticcouncil/rococo

Rococo -> prod

.env.development

@@ -1,4 +1,4 @@
-VITE_PROVIDER_URL=wss://rococo-basilisk-rpc.hydration.dev
+VITE_PROVIDER_URL=wss://basilisk-rococo-rpc.play.hydration.cloud
 VITE_DOMAIN_URL=https://testnet-app.basilisk.cloud
 VITE_INDEXER_URL=https://basilisk-rococo-explorer.play.hydration.cloud/graphql
 VITE_USD_PEGGED_ASSET_NAME=USDT

.env.rococo

@@ -1,4 +1,4 @@
-VITE_PROVIDER_URL=wss://rococo-basilisk-rpc.hydration.dev
+VITE_PROVIDER_URL=wss://basilisk-rococo-rpc.play.hydration.cloud
 VITE_DOMAIN_URL=https://rococo-app.basilisk.cloud
 VITE_INDEXER_URL=https://basilisk-rococo-explorer.play.hydration.cloud/graphql
 VITE_USD_PEGGED_ASSET_NAME=USDT

public/_headers

@@ -0,0 +1,4 @@
+/*
+    X-XSS-Protection: 1; mode=block
+    X-Frame-Options: DENY
+

src/api/chain.ts

@@ -2,17 +2,20 @@ import { useQuery } from "@tanstack/react-query"
 import { useApiPromise } from "utils/api"
 import { QUERY_KEYS } from "utils/queryKeys"
 
-export const useBestNumber = () => {
+export const useBestNumber = (disable?: boolean) => {
   const api = useApiPromise()
-  return useQuery(QUERY_KEYS.bestNumber, async () => {
-    const [validationData, parachainBlockNumber, timestamp] = await Promise.all(
-      [
-        api.query.parachainSystem.validationData(),
-        api.derive.chain.bestNumber(),
-        api.query.timestamp.now(),
-      ],
-    )
-    const relaychainBlockNumber = validationData.unwrap().relayParentNumber
-    return { parachainBlockNumber, relaychainBlockNumber, timestamp }
-  })
+  return useQuery(
+    QUERY_KEYS.bestNumber,
+    async () => {
+      const [validationData, parachainBlockNumber, timestamp] =
+        await Promise.all([
+          api.query.parachainSystem.validationData(),
+          api.derive.chain.bestNumber(),
+          api.query.timestamp.now(),
+        ])
+      const relaychainBlockNumber = validationData.unwrap().relayParentNumber
+      return { parachainBlockNumber, relaychainBlockNumber, timestamp }
+    },
+    { enabled: !disable },
+  )
 }

src/api/provider.ts

@@ -7,17 +7,31 @@ import * as definitions from "interfaces/voting/definitions"
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
 
+const fetchApi = async (api: string) => {
+  const provider = await new Promise<WsProvider>((resolve, reject) => {
+    const provider = new WsProvider(api)
+
+    provider.on("connected", () => {
+      resolve(provider)
+    })
+
+    provider.on("error", () => {
+      provider.disconnect()
+      reject("disconnected")
+    })
+  })
+
+  const types = Object.values(definitions).reduce(
+    (res, { types }): object => ({ ...res, ...types }),
+    {},
+  )
+  return ApiPromise.create({ provider, types })
+}
+
 export const useProvider = (rpcUrl?: string) => {
   return useQuery(
     QUERY_KEYS.provider(rpcUrl ?? import.meta.env.VITE_PROVIDER_URL),
-    async ({ queryKey: [_, api] }) => {
-      const provider = new WsProvider(api)
-      const types = Object.values(definitions).reduce(
-        (res, { types }): object => ({ ...res, ...types }),
-        {},
-      )
-      return await ApiPromise.create({ provider, types })
-    },
+    ({ queryKey: [_, api] }) => fetchApi(api),
     { staleTime: Infinity },
   )
 }
@@ -69,7 +83,7 @@ export const PROVIDERS = [
   },
   {
     name: "Rococo via Galactic Council",
-    url: "wss://rococo-basilisk-rpc.hydration.dev",
+    url: "wss://basilisk-rococo-rpc.play.hydration.cloud",
     indexerUrl: "https://basilisk-rococo-explorer.play.hydration.cloud/graphql",
     env: "rococo",
   },

src/api/volume.ts

@@ -77,7 +77,9 @@ const getTradeVolume =
 export function useTradeVolumes(poolAddresses: Maybe<string>[]) {
   const preference = useProviderRpcUrlStore()
   const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
-  const selectedProvider = PROVIDERS.find((provider) => provider.url === rpcUrl)
+  const selectedProvider = PROVIDERS.find(
+    (provider) => new URL(provider.url).hostname === new URL(rpcUrl).hostname,
+  )
 
   const indexerUrl =
     selectedProvider?.indexerUrl ?? import.meta.env.VITE_INDEXER_URL

src/components/AppProviders/AppProviders.tsx

@@ -1,24 +1,25 @@
 import { InvalidateOnBlock } from "components/InvalidateOnBlock"
-import { ApiPromiseContext } from "utils/api"
+import { ApiPromiseContext, TApiPromiseCustom } from "utils/api"
 import { FC, PropsWithChildren } from "react"
 import { useProvider, useProviderRpcUrlStore } from "api/provider"
 import { ToastProvider } from "components/Toast/ToastProvider"
 import { Transactions } from "sections/transaction/Transactions"
 import { Provider as TooltipProvider } from "@radix-ui/react-tooltip"
 import { SkeletonTheme } from "react-loading-skeleton"
 import { theme } from "theme"
-import { ApiPromise } from "@polkadot/api"
 import { WalletConnectProvider } from "components/WalletConnectProvider/WalletConnectProvider"
 
 export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
   const preference = useProviderRpcUrlStore()
-  const api = useProvider(preference.rpcUrl)
+  const { data, isError } = useProvider(preference.rpcUrl)
 
   return (
     <TooltipProvider>
       <ApiPromiseContext.Provider
         value={
-          api.data && preference._hasHydrated ? api.data : ({} as ApiPromise)
+          data && preference._hasHydrated
+            ? data
+            : ({ isError } as TApiPromiseCustom)
         }
       >
         <WalletConnectProvider>

src/components/FundWallet/FundWalletButton.tsx

@@ -0,0 +1,19 @@
+import { ButtonProps } from "../Button/Button"
+import { useTranslation } from "react-i18next"
+import { Button } from "../Button/Button"
+
+type Props = Pick<ButtonProps, "onClick">
+
+export const FundWalletButton = (props: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Button
+      {...props}
+      variant="primary"
+      sx={{ fontSize: 12, lineHeight: 12, p: "11px 15px" }}
+    >
+      {t("fund.button")}
+    </Button>
+  )
+}

src/components/FundWallet/FundWalletMobileButton.tsx

@@ -0,0 +1,16 @@
+import { Button, ButtonProps } from "../Button/Button"
+import { useTranslation } from "react-i18next"
+import { ReactComponent as FundIcon } from "assets/icons/FundIcon.svg"
+
+type Props = Pick<ButtonProps, "onClick">
+
+export const FundWalletMobileButton = (props: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Button {...props} variant="primary" fullWidth={true}>
+      <FundIcon />
+      {t("fund.button")}
+    </Button>
+  )
+}

src/components/FundWallet/FundWalletModal.styled.ts

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled"
+
+export const SBlocks = styled.div`
+  display: flex;
+  flex-flow: column;
+  row-gap: 9px;
+`
+
+const SBlock = styled.div`
+  border-radius: 12px;
+  padding: 31px 29px;
+`
+
+export const SBanxaBlock = styled(SBlock)`
+  background-color: rgba(0, 210, 190, 0.1);
+`
+
+export const SKrakenBlock = styled(SBlock)`
+  background-color: rgba(66, 43, 210, 0.26);
+`
+
+export const SCryptoBlock = styled(SBlock)`
+  background-color: rgba(218, 255, 238, 0.06);
+`

src/components/FundWallet/FundWalletModal.tsx

@@ -0,0 +1,82 @@
+import { Modal } from "../Modal/Modal"
+import { ComponentProps } from "react"
+import { GradientText } from "components/Typography/GradientText/GradientText"
+import { Text } from "components/Typography/Text/Text"
+import {
+  SBanxaBlock,
+  SCryptoBlock,
+  SKrakenBlock,
+  SBlocks,
+} from "./FundWalletModal.styled"
+import { ReactComponent as KrakenLogo } from "assets/icons/KrakenLogo.svg"
+import BanxaLogo from "assets/icons/BanxaLogo.png"
+import { CryptoBlockTitle } from "./components/CryptoBlockTitle"
+import { BlockContent } from "./components/BlockContent"
+import { useTranslation } from "react-i18next"
+import { LINKS } from "utils/navigation"
+import { useMedia } from "react-use"
+import { theme } from "theme"
+
+type Props = Pick<ComponentProps<typeof Modal>, "open" | "onClose">
+
+export const FundWalletModal = ({ open, onClose }: Props) => {
+  const { t } = useTranslation()
+  const isDesktop = useMedia(theme.viewport.gte.sm)
+
+  return (
+    <>
+      <Modal
+        width={610}
+        open={open}
+        onClose={onClose}
+        withoutCloseOutside={true}
+      >
+        <div>
+          <GradientText fs={20} fw={600}>
+            {t("fund.modal.title")}
+          </GradientText>
+        </div>
+        <Text
+          fw={400}
+          lh={24}
+          color="neutralGray400"
+          css={{ marginBottom: "28px", marginTop: "8px" }}
+        >
+          {t("fund.modal.description")}
+        </Text>
+        <SBlocks>
+          <SBanxaBlock>
+            <BlockContent
+              title={<img alt="Banxa" width={100} src={BanxaLogo} />}
+              description={t("fund.modal.banxa.description")}
+              linkText={t("fund.modal.banxa.buy")}
+              link="https://banxa.com/"
+              onLinkClick={onClose}
+            />
+          </SBanxaBlock>
+          <SKrakenBlock>
+            <BlockContent
+              title={<KrakenLogo />}
+              description={t("fund.modal.kraken.description")}
+              linkText={t("fund.modal.kraken.buy")}
+              link="https://kraken.com/"
+              onLinkClick={onClose}
+            />
+          </SKrakenBlock>
+          <Text fw={400} tAlign="center" color="neutralGray400">
+            or
+          </Text>
+          <SCryptoBlock>
+            <BlockContent
+              title={<CryptoBlockTitle />}
+              description={t("fund.modal.crypto.description")}
+              linkText={t(isDesktop ? "fund.modal.crypto.buy" : "go")}
+              link={LINKS.cross_chain}
+              onLinkClick={onClose}
+            />
+          </SCryptoBlock>
+        </SBlocks>
+      </Modal>
+    </>
+  )
+}

src/components/FundWallet/components/BlockContent.styled.ts

@@ -0,0 +1,35 @@
+import styled from "@emotion/styled"
+import { Text } from "components/Typography/Text/Text"
+import { theme } from "theme"
+
+export const SBlockDescription = styled(Text)`
+  grid-column: span 2;
+
+  @media ${theme.viewport.gte.sm} {
+    grid-column: initial;
+  }
+`
+export const SBlockContent = styled.div`
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  row-gap: 10px;
+`
+export const SLinkText = styled(Text)`
+  white-space: nowrap;
+`
+
+export const SBlockLink = styled.div`
+  justify-self: end;
+
+  @media ${theme.viewport.gte.sm} {
+    align-self: center;
+    grid-row: span 2;
+  }
+`
+
+export const SLinkContent = styled.div`
+  display: flex;
+  color: ${theme.colors.white};
+  align-items: center;
+  column-gap: 3px;
+`