From 7d77a9840d0c72550261f95ce40054bbf3252a7b Mon Sep 17 00:00:00 2001 From: Andrei O Date: Thu, 20 Jul 2023 09:57:07 +0300 Subject: [PATCH] chore: changes for 1.0.8 --- CHANGELOG.MD | 9 +- manifest.json | 2 +- package.json | 77 +++--- postcss.config.cjs | 13 + src/app.postcss | 4 + src/components/LikeIcon.svelte | 33 +++ src/components/Notification.svelte | 115 +++----- src/components/RateSingle.svelte | 207 ++++++++------- src/overlay/Overlay.svelte | 83 +++++- src/overlay/overlay.scss | 4 +- src/pages/Entry.svelte | 6 +- src/pages/Login.svelte | 2 +- src/pages/Main.svelte | 12 +- src/pages/Notifications.svelte | 10 +- src/pages/SiteOverlay.svelte | 0 src/popup/popup.scss | 4 + src/utils/notifications.ts | 60 ++--- src/utils/types.ts | 45 ++-- svelte.config.js | 9 +- tailwind.config.cjs | 12 + yarn.lock | 403 +++++++++++++++++++++++++---- 21 files changed, 754 insertions(+), 356 deletions(-) create mode 100644 postcss.config.cjs create mode 100644 src/app.postcss create mode 100644 src/components/LikeIcon.svelte delete mode 100644 src/pages/SiteOverlay.svelte create mode 100644 tailwind.config.cjs 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"}
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'}`}"> +