Add airdrop form and waitlist (#1889)

* Create component

* Move page to airdrop

* Add info icon

* Create waitlist component

* Add confetti package

* Add confetti effect

* Bind prop

* Cleanup

* Add coin icon

* Update form

* Add airdrop graphics

* Creare airdrop popup

* Fix lockfile

* Add checkbox sample field

* Add wallet balance fetching logic

* Add dot separator

* Add airdrop guide page

* Update title

* Add airdrop completed graphics

* Add completed and loading states to the popup

* Update popup

* Add countdown component

* Update popup

* Add countdown util

* Fix link

* Update guide

* Add socials link to airdrop

* Add question icon

* Add airdrop guide link in menu

* Cleanup

* Add airdrop icon

* Add airdrop button

* Show airdrop button on hot or not feed

* Cleanup

* Update position

* Add animation to airdrop button

* Rename form component

* Update reference

* Update guide

* Do not show countdown when it's over

* Update popup for smaller screens

* Fix timer not working

* Rename splash screen store

* Update references

* Add type

* Move hot or not onboarding popup store to popups

* Update refernces

* Update popup store name

* Update reference

* Add airdrop popup store

* Use airdrop store to show popup

* Show airdrop popup only on feed layout

* Remove airdrop popup from player layout

* Add optional input component

* Add optional inputs to the form

* Fix header style

* Fix spacing

* Update text

* Fix grammer

* Update labels

* Update page title

* Export type

* Fix language

* Create separate component for completion

* Use completed screen

* Update popup

* Disable hot or not onboarding

* Cleanup

* Install firebase

* Fix completed popup for small screens

* Add logic to check participation

* Add firestore helper

* Cleanup

* Set intial value to false

* Check login and participation status

* Fix searching

* Add validation

* Fix graphics margin

* Update usage

* Cleanup

* Add style to hyperlinks

* Update form

* Cleanup

* Use prod env

* Send user canister id as well

* Move text

* Update guide

* Update url regex

* Cleanup

* Fix guide

* Update date

* Fix guide

* Fix collection name

* Cleanup

* Add airdrop helper

* Use updated airdrop helper

* Update worker package name

* Cleanup

* Remove firebase package

* Update lockfile

* Update amount

* Update usage

* Update text and add a register now button

* Use new countdown component

* Add method for checking in waitlist

* Do not check splash screen

* Add popup

* Update time

* Use form element

* Add registermethod

* Handle waitlist response

* Update url

* Use method

* Update countdown style

* Update airdrop page

* Update message

.gitignore

@@ -12,4 +12,5 @@ tsconfig.tsbuildinfo
 todo.md
 packages/web-client/static/~partytown
 packages/web-client/coverage/**
-packages/web-client/cypress/reports
+packages/web-client/cypress/reports
+packages/functions

package.json

@@ -24,8 +24,8 @@
     "wc:test:record": "npm run test:record --w @hnn/web-client",
     "wc:test:vi": "npm run test:vi --w @hnn/web-client",
     "wc:sync": "npm run sync --w @hnn/web-client",
-    "workers:dev": "npm run dev --w @hnn/workers-api",
-    "workers:publish": "npm run publish --w @hnn/workers-api"
+    "workers:dev": "npm run dev --w @hnn/workers",
+    "workers:publish": "npm run publish --w @hnn/workers"
   },
   "devDependencies": {
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
@@ -40,5 +40,6 @@
   },
   "dependencies": {
     "date-fns": "^2.29.3"
-  }
+  },
+  "private": true
 }

packages/web-client/package.json

@@ -28,6 +28,7 @@
     "@dfinity/identity": "0.15.6",
     "@dfinity/identity-secp256k1": "0.15.6",
     "@dfinity/principal": "0.15.6",
+    "@neoconfetti/svelte": "^1.0.0",
     "@sentry/svelte": "7.51.0",
     "@sentry/tracing": "7.51.0",
     "buffer": "6.0.3",

packages/web-client/src/components/airdrop-form/AirdropCompleted.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+import AirdropCompleteGraphics from '$components/icons/AirdropCompleteGraphics.svelte'
+import DiscordIcon from '$components/icons/DiscordIcon.svelte'
+import TelegramIcon from '$components/icons/TelegramIcon.svelte'
+import TwitterIcon from '$components/icons/TwitterIcon.svelte'
+
+export let adjustTopMargin = false
+</script>
+
+<div
+  class="max-w-80 h-max max-h-80 w-max px-32 md:px-24
+  {adjustTopMargin ? '-mt-40' : '-mt-12'}">
+  <AirdropCompleteGraphics class="h-full w-full" />
+</div>
+<div
+  class="flex w-full max-w-md flex-col items-center justify-center space-y-2 px-8 md:space-y-4 md:px-16
+  {adjustTopMargin ? 'pt-24' : 'pt-4'}">
+  <div class="text-3xl font-bold uppercase text-transparent text-white">
+    Congratulations
+  </div>
+  <div class="md:text-md py-4 text-center text-sm">
+    We have registered your interest. Airdrop will be live on 23 May
+  </div>
+  <a
+    on:click
+    href="/airdrop-guide"
+    class="text-center text-sm text-primary underline">
+    Learn more about the rewards here
+  </a>
+  <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">
+        <TelegramIcon class="h-5 w-5 -translate-x-[1px]" />
+      </a>
+      <a
+        href="https://discord.gg/KwxCpeQB"
+        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">
+        <DiscordIcon 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">
+        <TwitterIcon 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>