diff --git a/package.json b/package.json index 7a20b079..3c596e74 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "dependencies": { "fs-extra": "^10.0.0", "klaw": "^3.0.0", + "lottie-react": "^2.4.0", "sirv-cli": "^1.0.14", "vite": "^3.0.5" }, diff --git a/src/assets/changelogs.ts b/src/assets/changelogs.tsx similarity index 57% rename from src/assets/changelogs.ts rename to src/assets/changelogs.tsx index f9a88963..1d69b964 100644 --- a/src/assets/changelogs.ts +++ b/src/assets/changelogs.tsx @@ -1,10 +1,17 @@ +import Lottie, { LottieRefCurrentProps } from "lottie-react"; + +import { JSX } from "preact"; + +import usernameAnim from "../controllers/modals/components/legacy/usernameUpdateLottie.json"; + type Element = | string | { type: "image"; src: string; shadow?: boolean; - }; + } + | { type: "element"; element: JSX.Element }; export interface ChangelogPost { date: Date; @@ -43,6 +50,33 @@ export const changelogEntries: Record = { "If you want to learn more about how we're making Revolt safer for you, check out our new blog post :point_right: [https://revolt.chat/posts/improving-user-safety](https://revolt.chat/posts/improving-user-safety)", ], }, + 3: { + date: new Date("2023-06-11T15:00:00.000Z"), + title: "Usernames are Changing", + content: [ + { + type: "element", + element: ( + + ), + }, + "Revolt has undergone a significant change to its username system, transitioning from unique username handles to a new system of display names and usernames with four-digit number tags called discriminators. The four-digit number tags serve as identifiers to differentiate users with the same username, allowing individuals to select desired usernames that reflect their identity.", + { + type: "element", + element: ( + + Read more on our blog! + + ), + }, + ], + }, }; export const changelogEntryArray = Object.keys(changelogEntries).map( diff --git a/src/controllers/modals/ModalController.tsx b/src/controllers/modals/ModalController.tsx index bfba6ba5..e7dc2ad4 100644 --- a/src/controllers/modals/ModalController.tsx +++ b/src/controllers/modals/ModalController.tsx @@ -18,6 +18,7 @@ import { history } from "../../context/history"; import AddFriend from "./components/AddFriend"; import BanMember from "./components/BanMember"; import Changelog from "./components/Changelog"; +import ChangelogUsernames from "./components/ChangelogUsernames"; import ChannelInfo from "./components/ChannelInfo"; import Clipboard from "./components/Clipboard"; import ConfirmLeave from "./components/ConfirmLeave"; @@ -282,4 +283,5 @@ export const modalController = new ModalControllerExtended({ report: ReportContent, report_success: ReportSuccess, modify_displayname: ModifyDisplayname, + changelog_usernames: ChangelogUsernames, }); diff --git a/src/controllers/modals/components/Changelog.tsx b/src/controllers/modals/components/Changelog.tsx index d343c710..98517d01 100644 --- a/src/controllers/modals/components/Changelog.tsx +++ b/src/controllers/modals/components/Changelog.tsx @@ -33,6 +33,8 @@ function RenderLog({ post }: { post: ChangelogPost }) { {post.content.map((entry) => typeof entry === "string" ? ( + ) : entry.type === "element" ? ( + entry.element ) : ( ), diff --git a/src/controllers/modals/components/ChangelogUsernames.tsx b/src/controllers/modals/components/ChangelogUsernames.tsx new file mode 100644 index 00000000..2658e317 --- /dev/null +++ b/src/controllers/modals/components/ChangelogUsernames.tsx @@ -0,0 +1,146 @@ +import Lottie, { LottieRefCurrentProps } from "lottie-react"; + +import { useEffect, useRef } from "preact/hooks"; + +import { Button, Column, InputBox, Modal, Row } from "@revoltchat/ui"; + +import { useClient } from "../../client/ClientController"; +import { modalController } from "../ModalController"; +import { ModalProps } from "../types"; +import usernameAnim from "./legacy/usernameUpdateLottie.json"; + +/** + * Changelog: Username update + */ +export default function ChangelogUsernames({ + onClose, + signal, +}: ModalProps<"changelog_usernames">) { + const client = useClient(); + + const lottieRef = useRef(); + + useEffect(() => { + if (lottieRef.current) { + const timer = setTimeout(() => lottieRef.current!.play(), 2500); + return () => clearTimeout(timer); + } + }, [lottieRef]); + + return ( + + { + ( + +
+ +
+
+ + + Usernames are Changing + + + We've changed how usernames work on Revolt. + Now you can set a display name in addition + to a username with a number tag for easier + sharing. + + + Here's how your new username looks: + + + + + Read more about this change + + +
+ + + + + + ) as any + } + + ); +} diff --git a/src/controllers/modals/components/ModifyAccount.tsx b/src/controllers/modals/components/ModifyAccount.tsx index f3652aaf..908b2502 100644 --- a/src/controllers/modals/components/ModifyAccount.tsx +++ b/src/controllers/modals/components/ModifyAccount.tsx @@ -170,9 +170,8 @@ export default function ModifyAccount({ {field === "username" && (
- Changing your username may change your - discriminator. You can freely change the case of - your username. + Changing your username may change your number tag. + You can freely change the case of your username.
)} diff --git a/src/controllers/modals/components/legacy/Onboarding.tsx b/src/controllers/modals/components/legacy/Onboarding.tsx index fa3f2b73..899a0cd9 100644 --- a/src/controllers/modals/components/legacy/Onboarding.tsx +++ b/src/controllers/modals/components/legacy/Onboarding.tsx @@ -72,9 +72,8 @@ export function OnboardingModal({ />

- You will be automatically assigned a - discriminator which you can find from - settings. + You will be automatically assigned a number + tag which you can find from settings.