feat(wip): rename profile to character

waiting for unidata

Author: Candinya

README.md

@@ -25,7 +25,7 @@ CrossSync is a socially-oriented web3 Dapp that runs on the Crossbell. CrossSync
 
 Crossbell allows users the ability to take back their data ownership; CrossSync makes owning your data a fun and engaging social experience.
 
-To get started, you’ll need go to [Crossbell Faucet](https://faucet.crossbell.io) and get some $CSB. After you’ve connected your wallet and received the $CSB, you’ll be able to mint a profile on CrossSync.
+To get started, you’ll need go to [Crossbell Faucet](https://faucet.crossbell.io) and get some $CSB. After you’ve connected your wallet and received the $CSB, you’ll be able to mint a character on CrossSync.
 
 ## 🪙 Special
 

components.d.ts

@@ -16,7 +16,7 @@ declare module '@vue/runtime-core' {
     Header: typeof import('./src/components/Header.vue')['default']
     InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
     Loading: typeof import('element-plus/es')['ElLoadingDirective']
-    Profiles: typeof import('./src/components/Profiles.vue')['default']
+    Characters: typeof import('./src/components/Characters.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./src/components/Sidebar.vue')['default']

src/common/router.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import IndexPage from '../pages/Index.vue';
 import IndexRootPage from '../pages/IndexRoot.vue';
 import MintPage from '../pages/Mint.vue';
-import ProfilesPage from '../pages/Profiles.vue';
+import CharactersPage from '../pages/Characters.vue';
 import FaucetPage from '../pages/Faucet.vue';
 import HomePage from '../pages/Home.vue';
 import HomeRootPage from '../pages/HomeRoot.vue';
@@ -27,8 +27,8 @@ export const router = createRouter({
                     component: MintPage,
                 },
                 {
-                    path: 'profiles',
-                    component: ProfilesPage,
+                    path: 'characters',
+                    component: CharactersPage,
                 },
                 {
                     path: 'faucet',

src/common/store.ts

@@ -23,7 +23,7 @@ export const getSettings = async (): Promise<Settings> =>
 const settings = await getSettings();
 
 interface State {
-    profiles?: Profiles;
+    characters?: Characters;
     settings: Settings;
 }
 
@@ -32,9 +32,9 @@ export const key: InjectionKey<Store<State>> = Symbol();
 export const store = createStore<State>({
     state: {
         settings: settings,
-        profiles: settings.address
-            ? await new Unidata().profiles.get({
-                  source: 'Crossbell Profile',
+        characters: settings.address
+            ? await new Unidata().characters.get({
+                  source: 'Crossbell Character',
                   identity: settings.address,
               })
             : undefined,
@@ -43,8 +43,8 @@ export const store = createStore<State>({
     actions: {
         async setSettings({ state }, settings: Partial<Settings>) {
             if (settings.address && settings.address !== state.settings.address) {
-                state.profiles = await window.unidata!.profiles.get({
-                    source: 'Crossbell Profile',
+                state.characters = await window.unidata!.characters.get({
+                    source: 'Crossbell Character',
                     identity: settings.address,
                 });
             }
@@ -54,7 +54,7 @@ export const store = createStore<State>({
         },
         async reset({ state }) {
             await disconnect();
-            state.profiles = undefined;
+            state.characters = undefined;
             state.settings = {
                 syncing: true,
             };

src/components/Profiles.vue src/components/Characters.vuesrc/components/Profiles.vue renamed to src/components/Characters.vue

@@ -1,8 +1,11 @@
 <template>
-    <el-card class="relative" :class="size === 'mini' ? ['inline-flex', 'mr-4', 'profile-mini'] : []" shadow="hover">
+    <el-card class="relative" :class="size === 'mini' ? ['inline-flex', 'mr-4', 'character-mini'] : []" shadow="hover">
         <div class="info flex relative content-center items-center">
-            <div :class="size === 'mini' ? ['w-10', 'h-10', 'mr-2'] : ['w-20', 'h-20', 'mr-5']" v-if="profile.avatars">
-                <img class="rounded-full" :src="profile.avatars?.[0]" />
+            <div
+                :class="size === 'mini' ? ['w-10', 'h-10', 'mr-2'] : ['w-20', 'h-20', 'mr-5']"
+                v-if="character.avatars"
+            >
+                <img class="rounded-full" :src="character.avatars?.[0]" />
             </div>
             <div class="flex content-center flex-col">
                 <div
@@ -11,7 +14,7 @@
                         size === 'small' ? ['text-xl', 'line-clamp-1'] : size === 'mini' ? [] : ['text-2xl', 'mb-1']
                     "
                 >
-                    {{ profile.name || profile.username }}
+                    {{ character.name || character.username }}
                     <span
                         class="username text-sm text-gray-500"
                         :class="
@@ -21,16 +24,16 @@
                                 ? ['block', 'text-xs']
                                 : ['text-sm', 'ml-1']
                         "
-                        v-if="profile.username"
-                        >@{{ profile.username }}</span
+                        v-if="character.username"
+                        >@{{ character.username }}</span
                     >
                 </div>
                 <div
                     class="text-sm text-gray-400"
-                    v-if="profile.bio && size !== 'mini'"
+                    v-if="character.bio && size !== 'mini'"
                     :class="size === 'small' ? ['line-clamp-3'] : []"
                 >
-                    {{ profile.bio }}
+                    {{ character.bio }}
                 </div>
             </div>
         </div>
@@ -39,7 +42,7 @@
 
 <script setup lang="ts">
 const props = defineProps({
-    profile: {
+    character: {
         type: Object,
         required: true,
     },
@@ -48,11 +51,11 @@ const props = defineProps({
     },
 });
 
-// const profile = ref(props.profile);
+// const character = ref(props.character);
 </script>
 
 <style lang="less">
-.profile-mini .el-card__body {
+.character-mini .el-card__body {
     @apply p-4;
 }
 </style>

src/components/Notes.vue

@@ -1,13 +1,15 @@
 <template>
     <el-card class="relative border-0 hover:bg-gray-100" shadow="never">
         <div class="flex flex-row">
-            <div class="w-10 h-10 mr-3" v-if="profile.avatars?.[0]">
-                <img class="rounded-full" :src="profile.avatars?.[0]" />
+            <div class="w-10 h-10 mr-3" v-if="character.avatars?.[0]">
+                <img class="rounded-full" :src="character.avatars?.[0]" />
             </div>
             <div class="flex-1">
                 <div class="mb-1">
-                    <span class="font-bold align-middle">{{ profile.name || profile.username }}</span>
-                    <span class="text-gray-500 ml-1 align-middle" v-if="profile.username">@{{ profile.username }}</span>
+                    <span class="font-bold align-middle">{{ character.name || character.username }}</span>
+                    <span class="text-gray-500 ml-1 align-middle" v-if="character.username"
+                        >@{{ character.username }}</span
+                    >
                     <span class="text-gray-500 ml-1 align-middle"
                         >· {{ moment.duration(moment().diff(note.date_created)).humanize() }} ·
                     </span>
@@ -98,14 +100,14 @@ const props = defineProps({
         type: Object,
         required: true,
     },
-    profile: {
+    character: {
         type: Object,
         required: true,
     },
 });
 
 const note = props.note;
-const profile = props.profile;
+const character = props.character;
 
 const getHost = (url: string) => {
     try {

src/components/Sidebar.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="w-80 mr-12 min-h-full pt-28 flex flex-col relative">
         <Header />
-        <Profile
+        <Character
             class="mb-0 rounded-br-none cursor-pointer border-0"
-            :profile="profile"
-            @click="profileClick"
+            :character="character"
+            @click="characterClick"
             size="small"
         />
         <el-card shadow="hover" class="cursor-pointer mt-4 border-0" @click="settingsClick">
@@ -21,17 +21,17 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import Profile from '@/components/Profiles.vue';
+import Character from '@/components/Characters.vue';
 import { useRouter } from 'vue-router';
 import { useStore } from '@/common/store';
 import Header from '@/components/Header.vue';
 
 const router = useRouter();
 const store = useStore();
 
-const profile = ref<any>({});
+const character = ref<any>({});
 
-const profileClick = () => {
+const characterClick = () => {
     router.push('/home');
 };
 
@@ -43,9 +43,9 @@ const helpClick = () => {
     router.push('/home/help');
 };
 
-profile.value =
-    store.state.profiles!.list.find((profile) => profile.username === store.state.settings.handle) ||
-    store.state.profiles!.list[0]; // As a fallback, use the first profile
+character.value =
+    store.state.characters!.list.find((character) => character.username === store.state.settings.handle) ||
+    store.state.characters!.list[0]; // As a fallback, use the first character
 </script>
 
 <style scoped>

src/pages/Profiles.vue src/pages/Characters.vuesrc/pages/Profiles.vue renamed to src/pages/Characters.vue

@@ -1,21 +1,21 @@
 <template>
     <div v-loading="loading" class="py-5">
-        <h2 class="text-4xl font-bold my-5">Choose Your Profile</h2>
+        <h2 class="text-4xl font-bold my-5">Choose Your Character</h2>
         <p>
             <span class="align-middle"
                 >You are logged in as <b>{{ address }}</b>
             </span>
             <el-button class="align-middle ml-2" text bg type="primary" @click="switchAccount"
                 >switch account</el-button
             >
-            <span class="align-middle"> , you have {{ profiles.length }} profiles, choose one to continue</span>
+            <span class="align-middle"> , you have {{ characters.length }} characters, choose one to continue</span>
         </p>
-        <ProfileCard
-            class="profile mt-4 cursor-pointer mb-5"
-            v-for="profile in profiles"
-            :profile="profile"
-            :key="profile.username"
-            @click="choose(profile)"
+        <CharacterCard
+            class="character mt-4 cursor-pointer mb-5"
+            v-for="character in characters"
+            :character="character"
+            :key="character.username"
+            @click="choose(character)"
         />
         <el-card class="relative cursor-pointer font-bold text-center" shadow="hover" @click="router.push('/mint')">
             + Mint Another One
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import ProfileCard from '@/components/Profiles.vue';
+import CharacterCard from '@/components/Characters.vue';
 import { useRouter } from 'vue-router';
 import { useStore } from '@/common/store';
 import { ref } from 'vue';
@@ -33,7 +33,7 @@ const router = useRouter();
 const store = useStore();
 
 if (store.state.settings.address) {
-    if (!store.state.profiles?.list.length) {
+    if (!store.state.characters?.list.length) {
         router.push('/mint');
     }
 } else {
@@ -43,10 +43,10 @@ if (store.state.settings.address) {
 const address = `${store.state.settings.address!.slice(0, 6)}...${store.state.settings.address!.slice(-4)}`;
 const loading = ref(false);
 
-const choose = async (profile: Profile) => {
+const choose = async (character: Character) => {
     loading.value = true;
     await store.dispatch('setSettings', {
-        handle: profile.username,
+        handle: character.username,
     });
     loading.value = false;
     await router.push('/home');
@@ -57,11 +57,11 @@ const switchAccount = async () => {
     await router.push('/');
 };
 
-const profiles = store.state.profiles?.list || [];
+const characters = store.state.characters?.list || [];
 </script>
 
 <style>
-.profile {
+.character {
     width: 738px;
 }
 </style>

src/pages/Faucet.vue

@@ -32,10 +32,10 @@ const toFaucet = () => {
 };
 
 const next = () => {
-    if (!store.state.profiles?.list.length) {
+    if (!store.state.characters?.list.length) {
         router.push('/mint');
     } else if (!store.state.settings.handle) {
-        router.push('/profiles');
+        router.push('/characters');
     } else {
         router.push('/home');
     }

src/pages/Help.vue

@@ -4,7 +4,7 @@
         <div class="flex flex-col">
             <p class="leading-7 my-3 text-gray-700">
                 CrossSync is a socially-oriented web3 Dapp that runs on the Crossbell. CrossSync aims to allow a
-                user-owned flow of social information, including but not limited to: following other user profiles,
+                user-owned flow of social information, including but not limited to: following other user characters,
                 integrated Twitter UI, note-posting, achievement badges, and more.
             </p>
             <p class="leading-7 my-3 text-gray-700">
@@ -14,7 +14,7 @@
             <p class="leading-7 my-3 text-gray-700">
                 To get started, you’ll need go to
                 <a class="underline" href="https://faucet.crossbell.io">faucet.crossbell.io</a> and get some $CSB. After
-                you’ve connected your wallet and received the $CSB, you’ll be able to mint a profile on CrossSync.
+                you’ve connected your wallet and received the $CSB, you’ll be able to mint a character on CrossSync.
             </p>
         </div>
     </div>
@@ -28,10 +28,10 @@ const router = useRouter();
 const store = useStore();
 
 if (store.state.settings.address) {
-    if (!store.state.profiles?.list.length) {
+    if (!store.state.characters?.list.length) {
         router.push('/mint');
     } else if (!store.state.settings.handle) {
-        router.push('/profiles');
+        router.push('/characters');
     }
 } else {
     router.push('/');