Hydration migration

.env.development

@@ -6,7 +6,7 @@ VITE_GRAFANA_URL=https://grafana-api.play.hydration.cloud/api/ds/query
 VITE_GRAFANA_DSN=11
 VITE_ENV=development
 VITE_TRSRY_ADDR=7L53bUTBopuwFt3mKUfmkzgGLayYa1Yvn1hAg9v5UMrQzTfh
-VITE_WC_PROJECT_ID=c47a5369367ec2dad6b49c478eb772f9
+VITE_WC_PROJECT_ID=265a3fea03b46c14a46a201fbd6c552e
 VITE_HDX_CAIP_ID=polkadot:afdc188f45c71dacbaa0b62e16a91f72
 VITE_STABLECOIN_ASSET_ID=10
 VITE_FF_SETTINGS_ENABLED=true
@@ -17,4 +17,6 @@ VITE_EVM_CHAIN_ID=222222
 VITE_EVM_PROVIDER_URL=https://rpc.nice.hydration.cloud
 VITE_EVM_EXPLORER_URL=https://explorer.nice.hydration.cloud
 VITE_EVM_NATIVE_ASSET_ID=20
+VITE_MIGRATION_TRIGGER_DOMAIN="deploy-preview-1334--testnet-hydra-app.netlify.app"
+VITE_MIGRATION_TARGET_DOMAIN="testnet-app.hydradx.io"
 

.env.production

@@ -1,12 +1,12 @@
 VITE_PROVIDER_URL=wss://rpc.hydradx.cloud
-VITE_DOMAIN_URL=https://app.hydradx.io
+VITE_DOMAIN_URL=https://app.hydration.net
 VITE_INDEXER_URL=https://explorer.hydradx.cloud/graphql
 VITE_SQUID_URL=https://hydra-data-squid.play.hydration.cloud/graphql
 VITE_GRAFANA_URL=https://grafana.hydradx.cloud/api/ds/query
 VITE_GRAFANA_DSN=10
 VITE_ENV=production
 VITE_TRSRY_ADDR=7L53bUTBopuwFt3mKUfmkzgGLayYa1Yvn1hAg9v5UMrQzTfh
-VITE_WC_PROJECT_ID=c47a5369367ec2dad6b49c478eb772f9
+VITE_WC_PROJECT_ID=265a3fea03b46c14a46a201fbd6c552e
 VITE_HDX_CAIP_ID=polkadot:afdc188f45c71dacbaa0b62e16a91f72
 VITE_STABLECOIN_ASSET_ID=10
 VITE_FF_SETTINGS_ENABLED=false
@@ -16,4 +16,6 @@ VITE_REFERENDUM_DATA_URL=https://hydradx.subsquare.io/api/democracy/referendums
 VITE_EVM_CHAIN_ID=222222
 VITE_EVM_PROVIDER_URL=https://rpc.hydradx.cloud
 VITE_EVM_EXPLORER_URL=https://explorer.evm.hydration.cloud
-VITE_EVM_NATIVE_ASSET_ID=20
+VITE_EVM_NATIVE_ASSET_ID=20
+VITE_MIGRATION_TRIGGER_DOMAIN="app.hydradx.io"
+VITE_MIGRATION_TARGET_DOMAIN="app.hydration.net"

.env.rococo

@@ -6,7 +6,7 @@ VITE_GRAFANA_URL=https://grafana-api.play.hydration.cloud/api/ds/query
 VITE_GRAFANA_DSN=11
 VITE_ENV=rococo
 VITE_TRSRY_ADDR=7L53bUTBopuwFt3mKUfmkzgGLayYa1Yvn1hAg9v5UMrQzTfh
-VITE_WC_PROJECT_ID=c47a5369367ec2dad6b49c478eb772f9
+VITE_WC_PROJECT_ID=265a3fea03b46c14a46a201fbd6c552e
 VITE_HDX_CAIP_ID=polkadot:afdc188f45c71dacbaa0b62e16a91f72
 VITE_STABLECOIN_ASSET_ID=10
 VITE_FF_SETTINGS_ENABLED=false
@@ -17,3 +17,5 @@ VITE_EVM_CHAIN_ID=
 VITE_EVM_PROVIDER_URL=
 VITE_EVM_EXPLORER_URL=
 VITE_EVM_NATIVE_ASSET_ID=20
+VITE_MIGRATION_TRIGGER_DOMAIN=""
+VITE_MIGRATION_TARGET_DOMAIN=""

src/components/AppProviders/AppProviders.tsx

@@ -9,6 +9,7 @@ import { theme } from "theme"
 import * as React from "react"
 import * as Apps from "@galacticcouncil/apps"
 import { createComponent } from "@lit-labs/react"
+import { MigrationProvider } from "sections/migration/MigrationProvider"
 
 const AppsPersistenceProvider = createComponent({
   tagName: "gc-database-provider",
@@ -18,21 +19,23 @@ const AppsPersistenceProvider = createComponent({
 
 export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <TooltipProvider>
-      <RpcProvider>
-        <InvalidateOnBlock>
-          <ToastProvider>
-            <SkeletonTheme
-              baseColor={`rgba(${theme.rgbColors.white}, 0.12)`}
-              highlightColor={`rgba(${theme.rgbColors.white}, 0.24)`}
-              borderRadius={4}
-            >
-              <AppsPersistenceProvider>{children}</AppsPersistenceProvider>
-              <Transactions />
-            </SkeletonTheme>
-          </ToastProvider>
-        </InvalidateOnBlock>
-      </RpcProvider>
-    </TooltipProvider>
+    <MigrationProvider>
+      <TooltipProvider>
+        <RpcProvider>
+          <InvalidateOnBlock>
+            <ToastProvider>
+              <SkeletonTheme
+                baseColor={`rgba(${theme.rgbColors.white}, 0.12)`}
+                highlightColor={`rgba(${theme.rgbColors.white}, 0.24)`}
+                borderRadius={4}
+              >
+                <AppsPersistenceProvider>{children}</AppsPersistenceProvider>
+                <Transactions />
+              </SkeletonTheme>
+            </ToastProvider>
+          </InvalidateOnBlock>
+        </RpcProvider>
+      </TooltipProvider>
+    </MigrationProvider>
   )
 }

src/components/WarningMessage/WarningMessage.styled.ts

@@ -1,8 +1,28 @@
+import { css } from "@emotion/react"
 import styled from "@emotion/styled"
 import { theme } from "theme"
 
-export const SWarningMessageContainer = styled.div`
-  background: linear-gradient(90deg, #ff1f7a 41.09%, #57b3eb 100%);
+type WarningMessageVariant = "pink" | "gradient"
+
+const getStylesByVariant = (variant: WarningMessageVariant) => {
+  switch (variant) {
+    case "pink":
+      return css`
+        background: #dfb1f3;
+        color: #240e32;
+      `
+    case "gradient":
+      return css`
+        background: linear-gradient(90deg, #ff1f7a 41.09%, #57b3eb 100%);
+        color: ${theme.colors.white};
+      `
+  }
+}
+
+export const SWarningMessageContainer = styled.div<{
+  variant?: WarningMessageVariant
+}>`
+  ${({ variant = "gradient" }) => getStylesByVariant(variant)}
 
   width: 100%;
   cursor: pointer;
@@ -14,8 +34,6 @@ export const SWarningMessageContainer = styled.div`
 
   padding: 8px;
   z-index: ${theme.zIndices.header};
-
-  color: ${theme.colors.white};
 `
 
 export const SWarningMessageContent = styled.div`

src/i18n/locales/en/translations.json

@@ -896,5 +896,13 @@
   "banner.newFarms.link": "Go to Liquidity \u2192",
   "searchFilter.empty.title": "No results found",
   "searchFilter.empty.desc": "Didn't find what you're looking for?",
-  "searchFilter.empty.link": "Join the Telegram"
+  "searchFilter.empty.link": "Join the Telegram",
+  "migration.export.title": "HydraDX is now Hydration",
+  "migration.export.description": "As part of the rebranding, this app has moved to app.hydration.net.",
+  "migration.export.question": "Would you like to migrate all past app settings to the new app?",
+  "migration.export.button": "Migrate Settings",
+  "migration.import.title": "Do you wish to overwrite your settings?",
+  "migration.import.description": "You already transferred your settings on {{ date, dd/MM/yyyy hh:mm:ss }}. Do you wish to overwrite your current settings?",
+  "migration.import.button": "Overwrite Settings",
+  "migration.warning.text": "You can transfer Your app settings from HydraDX to Hydration"
 }

src/sections/migration/MigrationProvider.tsx

@@ -0,0 +1,70 @@
+import { FC, PropsWithChildren, useState } from "react"
+import { useLocation } from "react-use"
+import {
+  MIGRATION_LS_KEYS,
+  MIGRATION_QUERY_PARAM,
+  MIGRATION_TARGET_DOMAIN,
+  MIGRATION_TRIGGER_DOMAIN,
+  serializeLocalStorage,
+  useMigrationStore,
+} from "sections/migration/MigrationProvider.utils"
+import { MigrationWarning } from "sections/migration/components/MigrationWarning"
+import { MigrationExportModal } from "./components/MigrationExportModal"
+import { MigrationImportModal } from "./components/MigrationImportModal"
+
+export const MigrationProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { search, host } = useLocation()
+  const { migrationCompleted, setMigrationCompleted } = useMigrationStore()
+
+  const [migrationCanceled, setMigrationCanceled] = useState(false)
+
+  const paramKey = `?${MIGRATION_QUERY_PARAM}=`
+  const data = search?.replace(paramKey, "") ?? ""
+
+  const shouldExport = MIGRATION_TRIGGER_DOMAIN === host
+  const shouldImport =
+    MIGRATION_TARGET_DOMAIN === host && search?.startsWith(paramKey)
+
+  if (shouldImport) {
+    return <MigrationImportModal data={data} />
+  }
+
+  if (shouldExport && !migrationCanceled) {
+    return (
+      <MigrationExportModal
+        data={serializeLocalStorage(MIGRATION_LS_KEYS)}
+        onCancel={() => {
+          const qs = new URLSearchParams(search)
+          const from = qs.get("from")
+
+          if (from) {
+            window.location.href = `https://${from}`
+          } else {
+            setMigrationCanceled(true)
+          }
+        }}
+      />
+    )
+  }
+
+  const shouldShowWarning =
+    MIGRATION_TARGET_DOMAIN === host &&
+    !migrationCompleted &&
+    !migrationCanceled
+
+  return (
+    <>
+      {shouldShowWarning && (
+        <MigrationWarning
+          onClick={() =>
+            (window.location.href = `https://${MIGRATION_TRIGGER_DOMAIN}?from=${MIGRATION_TARGET_DOMAIN}`)
+          }
+          onClose={() => {
+            setMigrationCompleted(new Date().toISOString())
+          }}
+        />
+      )}
+      {children}
+    </>
+  )
+}

src/sections/migration/MigrationProvider.utils.ts

@@ -0,0 +1,66 @@
+import { Buffer } from "buffer"
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+
+export const MIGRATION_LS_KEYS = [
+  "external-tokens",
+  "address-book",
+  "toasts",
+  "rpcUrl",
+  "hydradx-rpc-list",
+  "referral-codes",
+  "dca.settings",
+  "trade.settings",
+]
+export const MIGRATION_QUERY_PARAM = "migration"
+export const MIGRATION_TRIGGER_DOMAIN = import.meta.env
+  .VITE_MIGRATION_TRIGGER_DOMAIN as string
+
+export const MIGRATION_TARGET_DOMAIN = import.meta.env
+  .VITE_MIGRATION_TARGET_DOMAIN as string
+
+export const serializeLocalStorage = (keys: string[]): string => {
+  const data: { [key: string]: any } = {}
+
+  keys.forEach((key) => {
+    const value = localStorage.getItem(key)
+    if (value) {
+      data[key] = JSON.parse(value)
+    }
+  })
+
+  const json = JSON.stringify(data)
+  return Buffer.from(json, "binary").toString("base64")
+}
+
+export const importToLocalStorage = (data: string) => {
+  const json = Buffer.from(data, "base64").toString("utf-8")
+  const ls = JSON.parse(json)
+
+  const keys = Object.keys(ls)
+
+  keys.forEach((key) => {
+    const value = ls[key]
+    localStorage.setItem(key, JSON.stringify(value))
+  })
+}
+
+type MigrationStore = {
+  migrationCompleted: string
+  setMigrationCompleted: (date: string) => void
+}
+
+export const useMigrationStore = create<MigrationStore>()(
+  persist(
+    (set) => ({
+      migrationCompleted: "",
+      setMigrationCompleted: (date: string) => {
+        set({ migrationCompleted: date })
+      },
+    }),
+    {
+      name: "hdx-migration",
+      version: 0,
+    },
+  ),
+)

src/sections/migration/components/MigrationExportModal.tsx

@@ -0,0 +1,58 @@
+import { FC } from "react"
+import { Button } from "components/Button/Button"
+import { Modal } from "components/Modal/Modal"
+import { Text } from "components/Typography/Text/Text"
+import {
+  MIGRATION_QUERY_PARAM,
+  MIGRATION_TARGET_DOMAIN,
+} from "sections/migration/MigrationProvider.utils"
+import MigrationLogo from "assets/icons/migration/MigrationLogo.svg?react"
+import { useTranslation } from "react-i18next"
+import { Separator } from "components/Separator/Separator"
+
+export const MigrationExportModal: FC<{
+  data: string
+  onCancel: () => void
+}> = ({ data, onCancel }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal open headerVariant="GeistMono">
+      <MigrationLogo sx={{ mx: "auto" }} />
+      <Text tAlign="center" font="GeistMono" fs={19} sx={{ mt: 12 }}>
+        {t("migration.export.title")}
+      </Text>
+      <Text
+        tAlign="center"
+        sx={{ mt: 12, maxWidth: 500, mx: "auto" }}
+        color="basic400"
+      >
+        {t("migration.export.description")}
+      </Text>
+      <Text
+        tAlign="center"
+        sx={{ mt: 12, maxWidth: 500, mx: "auto" }}
+        color="basic400"
+      >
+        {t("migration.export.question")}
+      </Text>
+      <Separator
+        sx={{ mx: [-20, -32], mt: ["auto", 50], mb: [12, 30], width: "auto" }}
+        color="darkBlue401"
+      />
+      <div sx={{ flex: "row", justify: "space-between" }}>
+        <Button onClick={onCancel}>{t("toast.close")}</Button>
+
+        <Button
+          variant="primary"
+          onClick={() => {
+            const targetUrl = `https://${MIGRATION_TARGET_DOMAIN}?${MIGRATION_QUERY_PARAM}=${data}`
+            window.location.href = targetUrl
+          }}
+        >
+          {t("migration.export.button")}
+        </Button>
+      </div>
+    </Modal>
+  )
+}