diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 7643987..f542e7d 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,6 +1,13 @@
# Change Log
-## [Version 1.0.6]
+## [Version 1.0.8]
+
+- migrated from windicss to tailwindcss
+- migrated to web3-notifications and adapted them
+- changed like component
+- changed injected overlay to support new like component and delete vote
+
+## [Version 1.0.7]
- fixed background notification
diff --git a/manifest.json b/manifest.json
index 9e3a762..63c2d1a 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"name": "yup live",
"description": "Light alternative extension for yup protocol",
- "version": "1.0.7",
+ "version": "1.0.8",
"manifest_version": 3,
"icons": {
"16": "src/assets/icons/yup_ext_16.png",
diff --git a/package.json b/package.json
index 4b719bc..8e2e75f 100644
--- a/package.json
+++ b/package.json
@@ -1,39 +1,42 @@
{
- "name": "yup-live-browser-extension",
- "description": "Yup Live Browser Extension",
- "version": "1.0.7",
- "type": "module",
- "author": "andrei0x309",
- "license": "MIT",
- "repository": {
- "type": "git",
- "url": "https://github.com/nekitcorp/chrome-extension-svelte-typescript-boilerplate.git"
- },
- "scripts": {
- "dev": "vite",
- "inject": "tsc --out src/client/inject.js src/client/inject.ts",
- "build": "yarn inject && vite build",
- "upgrade": "yarn-upgrade-all",
- "check": "svelte-check --tsconfig ./tsconfig.json",
- "release": "yarn config set version-tag-prefix yup-live-browser-extension@v && yarn config set version-git-message 'yup-live-browser-extension@v%s' && yarn version --patch && yarn postversion",
- "postversion": "git push",
- "pub": "yarn build && yarn release && ts-node --esm ./scripts/create-release.ts"
- },
- "devDependencies": {
- "@crxjs/vite-plugin": "^1.0.14",
- "@sveltejs/vite-plugin-svelte": "^2.0.2",
- "@tsconfig/svelte": "^3.0.0",
- "@types/chrome": "^0.0.212",
- "archiver": "^5.3.1",
- "sass": "^1.58.0",
- "svelte": "^3.55.1",
- "svelte-check": "^3.0.3",
- "svelte-preprocess": "^5.0.1",
- "svelte-windicss-preprocess": "~4.1.0",
- "ts-node": "^10.9.1",
- "tslib": "^2.5.0",
- "typescript": "^4.9.5",
- "vite": "^4.1.1",
- "yarn-upgrade-all": "^0.7.2"
- }
+ "name": "yup-live-browser-extension",
+ "description": "Yup Live Browser Extension",
+ "version": "1.0.7",
+ "type": "module",
+ "author": "andrei0x309",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/nekitcorp/chrome-extension-svelte-typescript-boilerplate.git"
+ },
+ "scripts": {
+ "dev": "vite",
+ "inject": "tsc --out src/client/inject.js src/client/inject.ts",
+ "build": "yarn inject && vite build",
+ "upgrade": "yarn-upgrade-all",
+ "check": "svelte-check --tsconfig ./tsconfig.json",
+ "release": "yarn config set version-tag-prefix yup-live-browser-extension@v && yarn config set version-git-message 'yup-live-browser-extension@v%s' && yarn version --patch && yarn postversion",
+ "postversion": "git push",
+ "pub": "yarn build && yarn release && ts-node --esm ./scripts/create-release.ts"
+ },
+ "devDependencies": {
+ "@crxjs/vite-plugin": "^1.0.14",
+ "@sveltejs/vite-plugin-svelte": "^2.4.2",
+ "@tsconfig/svelte": "^3.0.0",
+ "@types/chrome": "^0.0.212",
+ "archiver": "^5.3.1",
+ "sass": "^1.58.0",
+ "svelte": "^3.55.1",
+ "svelte-check": "^3.0.3",
+ "svelte-preprocess": "^5.0.1",
+ "ts-node": "^10.9.1",
+ "tslib": "^2.5.0",
+ "typescript": "^4.9.5",
+ "vite": "^4.1.1",
+ "yarn-upgrade-all": "^0.7.2",
+ "postcss": "^8.4.24",
+ "postcss-load-config": "^4.0.1",
+ "autoprefixer": "^10.4.14",
+ "tailwindcss": "^3.3.2"
+ }
}
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 0000000..e48cff5
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+ plugins: [
+ //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+ tailwindcss(),
+ //But others, like autoprefixer, need to run after,
+ autoprefixer,
+ ],
+};
+
+module.exports = config;
diff --git a/src/app.postcss b/src/app.postcss
new file mode 100644
index 0000000..1a7b7cf
--- /dev/null
+++ b/src/app.postcss
@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/components/LikeIcon.svelte b/src/components/LikeIcon.svelte
new file mode 100644
index 0000000..e432154
--- /dev/null
+++ b/src/components/LikeIcon.svelte
@@ -0,0 +1,33 @@
+
+ {#if !solid}
+
+
+
+
+
+ {:else}
+
+ >
+
+
+
+
+
+ {/if}
+
+
\ No newline at end of file
diff --git a/src/components/Notification.svelte b/src/components/Notification.svelte
index 5f4fa1a..eb0fa6b 100644
--- a/src/components/Notification.svelte
+++ b/src/components/Notification.svelte
@@ -5,83 +5,40 @@
import { mainStore } from "@/utils/store";
import { chromeUrl } from "@/utils/chrome-misc";
import { extrenalNavigate } from "@/utils/chrome-misc";
+ import LikeIcon from '@/components/LikeIcon.svelte';
let loader;
export let notif: Notification;
-{#if notif.action === "vote"}
- {@const url = notif.post.url}
+{#if notif.eventType === "vote"}
+ {@const url = notif.meta.url}
{@const length = url.length}
{@const shortUrl = url.slice(0, 10) + "..." + url.slice(length - 10, length)}
{@const finalUrl = length > 24 ? shortUrl : url}
-
- loader.onLoad()}
- on:error={() => loader.onError()}
- style={$mainStore.settings.theme === "light" ? "filter: invert(0.9);" : ""}
- slot="img"
- src={notif.image}
- alt="preview"
- />
-
-
-
+
- {#if notif.like}
-
-
-
- {:else}
-
-
-
- {/if}
by
- {#if notif?.notifications?.length > 1}
- {notif?.notifications[0].VoterHandle}
- {#if notif.notifications.length - 1 > 0}
- and {notif.notifications.length - 1} more
+ {#if notif?.senders?.length > 1}
+ {notif?.senders[0].handle}
+ {#if notif.senders.length - 1 > 0}
+ and {notif.senders.length - 1} more
{/if}
{:else}
- {notif.voter.length > 12 ? notif.voter.slice(0, 12) + "..." : notif.voter}
+ {notif.senders[0].handle.length > 12 ? notif.senders[0].handle.slice(0, 12) + "..." : notif.senders[0].handle}
{/if}
extrenalNavigate(`https://yup-live.pages.dev/post/${notif.postid}`)}
+ on:click={() => extrenalNavigate(`https://yup-live.pages.dev/post/${notif.meta.postid}`)}
aria-hidden
class="text-blue-200 interactive-svg">{finalUrl}
-
+
-{:else if notif.action === "reward"}
+{:else if notif.eventType === "reward"}
- You were alocated a future reward of {notif?.quantity ?? "unknown"} amount of YUP.
+ You were alocated a future reward of {notif?.meta.quantity ?? "unknown"} amount of YUP.
-
+
-{:else if ["follow", "unfollow"].includes(notif.action)}
-
-
+{:else if ["follow"].includes(notif.eventType)}
+
+ {#each notif.senders as sender}
+
+
loader.onLoad()}
on:error={() => loader.onError()}
style={$mainStore.settings.theme === "light" ? "filter: invert(0.9);" : ""}
slot="img"
- src={notif.image}
+ src={sender.avatar}
alt="preview"
/>
extrenalNavigate(`https://yup-live.pages.dev/web3-profile/${notif.EVMRecipient?.address}`)}
+ on:click={() => extrenalNavigate(`https://yup-live.pages.dev/web3-profile/${sender?._id}`)}
>
- {notif?.EVMRecipient?.handle || `${notif.EVMRecipient?.address?.slice(0, 6)}...`}
- {notif.action === "follow" ? "followed" : "unfollowed"} you.
-
-
-
- {timeSince(new Date(notif.createdAt))}
+ {sender?.handle || `${sender?._id?.slice(0, 6)}...`}
+ followed you.
+
+ {/each}
+
+
+ {timeSince(new Date(notif.createdAt))}
+
{:else}
-
{notif?.message ?? "unknown notification type"}
-
+
{notif?.meta?.message ?? notif?.message ?? "unknown notification type"}
+
diff --git a/src/components/RateSingle.svelte b/src/components/RateSingle.svelte
index 33069c6..26ac7a3 100644
--- a/src/components/RateSingle.svelte
+++ b/src/components/RateSingle.svelte
@@ -7,25 +7,27 @@
import { alertStore } from '@/utils/store';
import { API_BASE } from '@/constants/config';
import { executeVote } from '@/utils/votes';
+ import LikeIcon from '@/components/LikeIcon.svelte';
+
export let url = ''
export let disabled = false
let loading = true
const defaultUserVote = {
- rating: 0,
- like: null,
+ rating: 1,
+ like: true,
_id: null
}
let userVote = defaultUserVote
let saveUserVote = defaultUserVote
- let positiveWeight = 0
- let negativeWeight = 0
- let savePositiveWeight = 0
- let saveNegativeWeight = 0
- let timer = 0
- let doingVote = false
+ // let positiveWeight = 0
+ // let negativeWeight = 0
+ // let savePositiveWeight = 0
+ // let saveNegativeWeight = 0
+ // let timer = 0
+ let doingLike = false
+ let numLikes = 0
let post = null
- let delLoading = false
const getPostIntial = async (onlyPost = false) => {
@@ -33,10 +35,7 @@
if(!post) {
loading = false
} else {
- positiveWeight = Math.trunc(post.rawPositiveWeight ?? 0 as number)
- negativeWeight = Math.trunc(post.rawNegativeWeight ?? 0 as number)
- savePositiveWeight = positiveWeight
- saveNegativeWeight = negativeWeight
+ numLikes = post.rating?.overall?.ratingCount ?? 0
if(!onlyPost) {
const has = (await hasVote(post._id.postid, $mainStore.user.auth.userId))?.[0] ?? null
@@ -67,88 +66,117 @@
})
- const doVote = (type = true) => {
+ const doLike = async () => {
if(disabled) {
$alertStore?.show('You shall not pass', 'error')
return
}
- if(timer && !doingVote) {
- clearTimeout(timer)
- }
- let noVoteAlert = false
- if(!doingVote) {
- const lastRating = userVote?.rating ?? 1
- let sameType = true
- if(type !== userVote?.like && userVote._id !== null) {
- userVote.rating = 0
- sameType = false
- }
- if(type && userVote?.rating < 3 || !type && userVote?.rating < 2) {
- userVote.rating += 1
- }
- if(userVote?.rating === lastRating && userVote && sameType) {
- $alertStore?.show('You already gave maximum rating.', 'warning')
- noVoteAlert = true
- } else {
- if(userVote.like !== type && userVote._id !== null) {
- if(type) {
- negativeWeight -= $mainStore.user.profile.yup.weight * (userVote.rating + lastRating - 1)
- userVote.rating = 1
- positiveWeight += $mainStore.user.profile.yup.weight * userVote.rating
- } else {
- positiveWeight -= $mainStore.user.profile.yup.weight * (userVote.rating + lastRating - 1)
- userVote.rating = 1
- negativeWeight += $mainStore.user.profile.yup.weight * userVote.rating
- }
- } else {
- if(type) {
- positiveWeight += $mainStore.user.profile.yup.weight * (userVote.rating - lastRating)
- } else {
- negativeWeight += $mainStore.user.profile.yup.weight * (userVote.rating - lastRating)
- }
- }
- userVote.like = type
- }
- timer = setTimeout(async () => {
- doingVote = true
+ if(!doingLike) {
let reqVote
+ doingLike = true
try {
reqVote = await executeVote({
post,
- userVote,
+ userVote:defaultUserVote,
$mainStore,
$alertStore,
- url,
- noVoteAlert
+ url
})
if(!reqVote) {
throw new Error('Vote not executed')
}
- savePositiveWeight = positiveWeight
- saveNegativeWeight = negativeWeight
+ userVote = reqVote
saveUserVote = userVote
+ numLikes += 1
} catch(e) {
console.log(e)
- positiveWeight = savePositiveWeight
- negativeWeight = saveNegativeWeight
userVote = saveUserVote
}
- if(reqVote) {
- userVote = reqVote
- }
- doingVote = false
- }, 500) as unknown as number
- }
+ doingLike = false
+ }
}
+ // const doVote = (type = true) => {
+ // if(disabled) {
+ // $alertStore?.show('You shall not pass', 'error')
+ // return
+ // }
+ // if(timer && !doingVote) {
+ // clearTimeout(timer)
+ // }
+ // let noVoteAlert = false
+ // if(!doingVote) {
+ // const lastRating = userVote?.rating ?? 1
+ // let sameType = true
+ // if(type !== userVote?.like && userVote._id !== null) {
+ // userVote.rating = 0
+ // sameType = false
+ // }
+ // if(type && userVote?.rating < 3 || !type && userVote?.rating < 2) {
+ // userVote.rating += 1
+ // }
+ // if(userVote?.rating === lastRating && userVote && sameType) {
+ // $alertStore?.show('You already gave maximum rating.', 'warning')
+ // noVoteAlert = true
+ // } else {
+ // if(userVote.like !== type && userVote._id !== null) {
+ // if(type) {
+ // negativeWeight -= $mainStore.user.profile.yup.weight * (userVote.rating + lastRating - 1)
+ // userVote.rating = 1
+ // positiveWeight += $mainStore.user.profile.yup.weight * userVote.rating
+ // } else {
+ // positiveWeight -= $mainStore.user.profile.yup.weight * (userVote.rating + lastRating - 1)
+ // userVote.rating = 1
+ // negativeWeight += $mainStore.user.profile.yup.weight * userVote.rating
+ // }
+ // } else {
+ // if(type) {
+ // positiveWeight += $mainStore.user.profile.yup.weight * (userVote.rating - lastRating)
+ // } else {
+ // negativeWeight += $mainStore.user.profile.yup.weight * (userVote.rating - lastRating)
+ // }
+ // }
+ // userVote.like = type
+ // }
+ // timer = setTimeout(async () => {
+ // doingVote = true
+ // let reqVote
+ // try {
+ // reqVote = await executeVote({
+ // post,
+ // userVote,
+ // $mainStore,
+ // $alertStore,
+ // url,
+ // noVoteAlert
+ // })
+ // if(!reqVote) {
+ // throw new Error('Vote not executed')
+ // }
+ // savePositiveWeight = positiveWeight
+ // saveNegativeWeight = negativeWeight
+ // saveUserVote = userVote
+ // } catch(e) {
+ // console.log(e)
+ // positiveWeight = savePositiveWeight
+ // negativeWeight = saveNegativeWeight
+ // userVote = saveUserVote
+ // }
+ // if(reqVote) {
+ // userVote = reqVote
+ // }
+ // doingVote = false
+ // }, 500) as unknown as number
+ // }
+ // }
+
const deleteVote = async () => {
- if(delLoading) {
+ if(doingLike) {
return
}
try {
- doingVote = true
- delLoading = true
+ doingLike = true
const reqVote = await fetch(`${API_BASE}/votes/post/${post._id.postid}/voter/${$mainStore.user.auth.userId}`)
const voteId = (await reqVote.json())[0]._id.voteid
const p1 = fetchWAuth($mainStore, `${API_BASE}/votes/${voteId}`, {
@@ -160,43 +188,40 @@
$alertStore.show('Vote deleted!')
} else {
$alertStore.show('Vote not deleted due to error try to re-login!', 'error')
- positiveWeight = savePositiveWeight
- negativeWeight = saveNegativeWeight
userVote = saveUserVote
}
- doingVote = false
- delLoading = false
+ doingLike = false
} catch (error) {
- positiveWeight = savePositiveWeight
- negativeWeight = saveNegativeWeight
userVote = saveUserVote
console.log(error)
$alertStore.show('The vote could not be deleted!')
- delLoading = false
- doingVote = false
+ doingLike = false
}
}
-{#if userVote._id !== null}
+
+
+
{
+ if(userVote?._id) {
+ deleteVote()
+ } else {
+ doLike()
+ }
+}} aria-hidden="true" class="{`flex w-1/2 p-4 box h-6 bf mr-4 justify-center ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}">
+ {#if userVote?._id}
+
{:else}
-
-
+
{/if}
- {#key positiveWeight}
-
{formatNumber(positiveWeight)}
+ {#key numLikes}
+
{formatNumber(numLikes)}
{/key}
-
doVote(false)} aria-hidden="true" class="{`flex w-1/2 p-4 box h-6 bf ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}">
+