Add migration flow (#2202)

* Add migration flow

* Ad image

* Add migrate screens

* Update flow

* Update

* Bump

* Update

* Up

* Fix

* Up

package.json

@@ -43,14 +43,14 @@
     "workers:publish": "npm run publish --w @hnn/workers"
   },
   "devDependencies": {
-    "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v6.0.4",
-    "@types/node": "20.11.30",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.0",
+    "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v7.0.1",
+    "@types/node": "20.14.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
     "eslint": "8.57.0",
     "eslint-plugin-svelte3": "4.0.0",
-    "prettier": "3.2.5",
-    "prettier-plugin-svelte": "3.2.2",
-    "prettier-plugin-tailwindcss": "0.5.12"
+    "prettier": "3.3.0",
+    "prettier-plugin-svelte": "3.2.3",
+    "prettier-plugin-tailwindcss": "0.6.1"
   }
 }

packages/components/coming-soon/Yral.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import Icon from '../icon/Icon.svelte'
+</script>
+
+<div class="flex h-full w-full flex-col items-center justify-center space-y-2">
+  <Icon name="coming-soon-graphic" class="h-36 w-36" />
+  <span class="text-white">
+    Uploads are disabled. Continue on <a
+      target="_blank"
+      class="font-bold text-[#E2017B] underline"
+      href="https://yral.com">
+      yral.com
+    </a>
+  </span>
+</div>

packages/components/home/Selector.svelte

@@ -8,7 +8,7 @@ export let selected: 'videos' | 'hot-or-not' = 'hot-or-not'
 export let showDot: 'videos' | 'hot-or-not' | null = null
 </script>
 
-<home-selector class="flex w-full items-center justify-center pt-4">
+<home-selector class="flex w-full items-center justify-center pt-2">
   <div
     class="relative flex items-center justify-center space-x-6 rounded-full bg-black/50 py-3 pr-5 text-white">
     <selector

packages/components/icon/icon.type.ts

@@ -83,3 +83,4 @@ export type IconName =
   | 'heart-broken-fill'
   | 'coin-token'
   | 'nsfw'
+  | 'yral'

packages/components/package.json

@@ -16,8 +16,8 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "0.5.7",
-    "svelte": "4.2.15",
-    "svelte-check": "3.6.9",
+    "svelte": "4.2.17",
+    "svelte-check": "3.8.0",
     "tailwindcss": "3.4.3",
     "typescript": "5.4.5"
   }

packages/components/popup/MigrationPopup.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+import coinsBg from './coinsBg.webp'
+import IconButton from '../button/IconButton.svelte'
+import { fade } from 'svelte/transition'
+import Button from '../button/Button.svelte'
+import Icon from '../icon/Icon.svelte'
+</script>
+
+<svelte:head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap"
+    rel="stylesheet" />
+</svelte:head>
+
+<div
+  transition:fade
+  class="absolute inset-0 z-[98] flex h-full w-full flex-col items-center justify-start bg-black/100 text-white">
+  <div
+    class="flex w-full max-w-sm flex-col items-center justify-between space-y-14 px-8">
+    <IconButton
+      iconName="close"
+      iconClass="h-5 w-5 text-black"
+      on:click
+      class="absolute right-5 top-5 rounded-full bg-white p-1" />
+    <div
+      class="flex h-full w-full flex-col items-center justify-center gap-10 py-8">
+      <div class="relative mt-16 flex w-full flex-col items-center gap-2">
+        <div class="absolute inset-0 z-0 flex items-center justify-center">
+          <img src={coinsBg} alt="bg" class="w-full max-w-56" />
+        </div>
+        <div class="text-lg font-semibold">Our new app</div>
+        <div class="z-[1]">
+          <span class="gloria-hallelujah-regular text-4xl text-[#E2017B]">
+            Yral
+          </span>
+          <span class="pl-1 text-2xl font-bold">is here</span>
+        </div>
+      </div>
+      <div class="pt-12 text-center text-sm">
+        We are phasing out HotorNot and moving to YRAL. Transfer your HotorNot
+        Account and wallet balance to YRAL before time runs out.
+      </div>
+      <div class="text-center text-sm font-bold">
+        Go to <a
+          class="text-[#E2017B] underline"
+          target="_blank"
+          href="https://yral.com">
+          yral.com
+        </a>
+        and get your yral principal id before you start!
+      </div>
+      <Button href="/migrate" class="w-full">Transfer your account</Button>
+    </div>
+    <div class="flex flex-col items-center justify-center space-y-4 px-8">
+      <div class="flex items-center space-x-4">
+        <a
+          href="https://t.me/+c-LTX0Cp-ENmMzI1"
+          target="_blank"
+          class="flex h-12 w-12 items-center justify-center rounded-full border-[1px] border-primary transition-colors duration-200 active:bg-primary">
+          <Icon name="telegram-logo" class="h-5 w-5 -translate-x-[1px]" />
+        </a>
+        <a
+          href="https://discord.gg/GZ9QemnZuj"
+          target="_blank"
+          class="flex h-12 w-12 items-center justify-center rounded-full border-[1px] border-primary transition-colors duration-200 active:bg-primary">
+          <Icon name="discord-logo" class="h-5 w-5" />
+        </a>
+        <a
+          href="https://twitter.com/hotornot_dapp"
+          target="_blank"
+          class="flex h-12 w-12 items-center justify-center rounded-full border-[1px] border-primary transition-colors duration-200 active:bg-primary">
+          <Icon name="twitter-logo" class="h-4 w-4" />
+        </a>
+      </div>
+      <div class="text-center text-sm text-white/70">
+        For more queries, you can get in touch with us on our socials
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.gloria-hallelujah-regular {
+  font-family: 'Gloria Hallelujah', cursive;
+  font-weight: 400;
+  font-style: normal;
+}
+</style>

packages/declarations/configuration/configuration.did

@@ -0,0 +1,31 @@
+type ConfigurationInitArgs = record {
+  known_principal_ids : opt vec record { KnownPrincipalType; principal };
+  signups_enabled : opt bool;
+};
+type KnownPrincipalType = variant {
+  CanisterIdUserIndex;
+  CanisterIdPlatformOrchestrator;
+  CanisterIdConfiguration;
+  CanisterIdProjectMemberIndex;
+  CanisterIdTopicCacheIndex;
+  CanisterIdRootCanister;
+  CanisterIdDataBackup;
+  CanisterIdPostCache;
+  CanisterIdSNSController;
+  CanisterIdSnsGovernance;
+  UserIdGlobalSuperAdmin;
+};
+type Result = variant { Ok; Err : text };
+service : (ConfigurationInitArgs) -> {
+  are_signups_enabled : () -> (bool) query;
+  get_current_list_of_all_well_known_principal_values : () -> (
+      vec record { KnownPrincipalType; principal },
+    ) query;
+  get_well_known_principal_value : (KnownPrincipalType) -> (
+      opt principal,
+    ) query;
+  toggle_signups_enabled : () -> (Result);
+  update_list_of_well_known_principals : (KnownPrincipalType, principal) -> (
+      Result,
+    );
+}

packages/declarations/configuration/configuration.did.d.ts

@@ -36,4 +36,4 @@ export interface _SERVICE {
   >,
 }
 export declare const idlFactory: IDL.InterfaceFactory;
-export declare const init: ({ IDL }: { IDL: IDL }) => IDL.Type[];
+export declare const init: (args: { IDL: typeof IDL }) => IDL.Type[];

packages/declarations/configuration/index.js

@@ -10,8 +10,7 @@ export { idlFactory } from "./configuration.did.js";
  * beginning in dfx 0.15.0
  */
 export const canisterId =
-  process.env.CANISTER_ID_CONFIGURATION ||
-  process.env.CONFIGURATION_CANISTER_ID;
+  process.env.CANISTER_ID_CONFIGURATION;
 
 export const createActor = (canisterId, options = {}) => {
   const agent = options.agent || new HttpAgent({ ...options.agentOptions });

packages/declarations/individual_user_template/index.js

@@ -10,8 +10,7 @@ export { idlFactory } from "./individual_user_template.did.js";
  * beginning in dfx 0.15.0
  */
 export const canisterId =
-  process.env.CANISTER_ID_INDIVIDUAL_USER_TEMPLATE ||
-  process.env.INDIVIDUAL_USER_TEMPLATE_CANISTER_ID;
+  process.env.CANISTER_ID_INDIVIDUAL_USER_TEMPLATE;
 
 export const createActor = (canisterId, options = {}) => {
   const agent = options.agent || new HttpAgent({ ...options.agentOptions });