├── src
    ├── routes
    │   ├── +layout.ts
    │   ├── +page.svelte
    │   ├── +layout.svelte
    │   ├── settings
    │   │   └── +page.svelte
    │   ├── sites
    │   │   └── +page.svelte
    │   └── risk-score
    │   │   └── +page.svelte
    ├── lib
    │   ├── assets
    │   │   ├── logo.png
    │   │   ├── logo_lg.png
    │   │   ├── home.svg
    │   │   ├── globe.svg
    │   │   ├── power.svg
    │   │   ├── light-bulb.svg
    │   │   ├── gear.svg
    │   │   └── logo.svg
    │   ├── background.ts
    │   ├── content
    │   │   ├── message.ts
    │   │   ├── risk
    │   │   │   ├── utils.ts
    │   │   │   ├── tooltip.ts
    │   │   │   └── main.ts
    │   │   ├── utils.ts
    │   │   ├── content.styles.css
    │   │   └── index.ts
    │   ├── constants.ts
    │   ├── models
    │   │   ├── message.ts
    │   │   ├── site.ts
    │   │   └── statsData.ts
    │   ├── types.ts
    │   ├── utils.ts
    │   ├── stores.ts
    │   └── service
    │   │   └── SiteManagerService.ts
    ├── components
    │   ├── Line.svelte
    │   ├── TopBar.svelte
    │   ├── BottomNav.svelte
    │   ├── KnowYourRiskScore.svelte
    │   ├── Stats.svelte
    │   ├── CurrentSite.svelte
    │   └── HighlightingPreferences.svelte
    ├── app.d.ts
    ├── app.css
    └── app.html
├── static
    ├── logo.png
    ├── favicon.png
    ├── manifest_chrome.json
    ├── manifest_firefox.json
    └── logo.svg
├── postcss.config.cjs
├── tsconfig.json
├── vite.config.ts
├── svelte.config.js
├── README.md
├── webpack.config.cjs
├── package.json
└── tailwind.config.js


/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w5h10/wallet-highlighter-extension/HEAD/static/logo.png


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w5h10/wallet-highlighter-extension/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {}
5 | 	}
6 | };
7 | 


--------------------------------------------------------------------------------
/src/lib/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w5h10/wallet-highlighter-extension/HEAD/src/lib/assets/logo.png


--------------------------------------------------------------------------------
/src/lib/assets/logo_lg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w5h10/wallet-highlighter-extension/HEAD/src/lib/assets/logo_lg.png


--------------------------------------------------------------------------------
/src/components/Line.svelte:
--------------------------------------------------------------------------------
 1 | <hr />
 2 | 
 3 | <style>
 4 | 	hr {
 5 | 		@apply bg-base-200;
 6 | 		height: 0.06rem;
 7 | 		margin: 0.1rem 0 0;
 8 | 		border: none;
 9 | 	}
10 | </style>
11 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface Platform {}
 9 | 	}
10 | }
11 | 
12 | export {};
13 | 


--------------------------------------------------------------------------------
/src/lib/background.ts:
--------------------------------------------------------------------------------
1 | import browser from 'webextension-polyfill';
2 | import { API_HOST } from './constants';
3 | import { getUserId } from './content/utils';
4 | const init = async () => {
5 | 	browser.runtime.setUninstallURL(`${API_HOST}/v1/uninstall?clientId=${await getUserId()}`);
6 | };
7 | 
8 | init();
9 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 2 | 
 3 | .container {
 4 | 	font-family: 'Inter', sans-serif;
 5 | }
 6 | 
 7 | a {
 8 | 	text-decoration: none;
 9 | 	color: #000;
10 | }
11 | 
12 | .button {
13 | 	@apply btn;
14 | 	@apply normal-case text-[0.65rem] font-normal min-h-fit h-[1.7rem];
15 | }
16 | 


--------------------------------------------------------------------------------
/src/lib/content/message.ts:
--------------------------------------------------------------------------------
 1 | import type { MessageType } from '$lib/constants';
 2 | import { Message } from '$lib/models/message';
 3 | 
 4 | export const sendMessage = async (type: MessageType) => {
 5 | 	const tabs = await chrome.tabs.query({ currentWindow: true, active: true });
 6 | 	const activeTab = tabs[0];
 7 | 
 8 | 	console.log({ activeTab });
 9 | 
10 | 	if (!activeTab.id) throw Error('INVALID TAB');
11 | 	const message = new Message(type);
12 | 	const res = await chrome.tabs.sendMessage(activeTab.id, message.serialize());
13 | 	return res?.value;
14 | };
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import { defineConfig } from 'vite';
 3 | import inject from '@rollup/plugin-inject';
 4 | 
 5 | export default defineConfig({
 6 | 	plugins: [sveltekit()],
 7 | 	optimizeDeps: {
 8 | 		esbuildOptions: {
 9 | 			define: {
10 | 				global: 'globalThis'
11 | 			}
12 | 		}
13 | 	},
14 | 	build: {
15 | 		rollupOptions: {
16 | 			plugins: [inject({ Buffer: ['Buffer', 'Buffer'] })]
17 | 		}
18 | 	},
19 | 	resolve: {
20 | 		alias: {
21 | 			process: 'process/browser',
22 | 			stream: 'stream-browserify',
23 | 			zlib: 'browserify-zlib',
24 | 			util: 'util'
25 | 		}
26 | 	}
27 | });
28 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Line from '../components/Line.svelte';
 3 | 	import Stats from '../components/Stats.svelte';
 4 | 	import KnowYourRiskScore from '../components/KnowYourRiskScore.svelte';
 5 | 	import HighlightingPreferences from '../components/HighlightingPreferences.svelte';
 6 | 	import CurrentSite from '../components/CurrentSite.svelte';
 7 | 	import TopBar from '../components/TopBar.svelte';
 8 | </script>
 9 | 
10 | <div>
11 | 	<TopBar />
12 | 	<div class="px-4">
13 | 		<Stats />
14 | 		<KnowYourRiskScore />
15 | 		<Line />
16 | 		<HighlightingPreferences />
17 | 		<Line />
18 | 		<CurrentSite />
19 | 	</div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
 1 | export enum MessageType {
 2 | 	RERUN_SCAN = 'RERUN_SCAN'
 3 | }
 4 | 
 5 | export const STATS = 'STATS';
 6 | export const GET_STATS = 'GET_STATS';
 7 | 
 8 | export const LIST_TYPE = 'LIST_TYPE';
 9 | export enum ListOptionTypes {
10 | 	HIGHLIGHT_LISTED = 'HIGH_LIGHT_LISTED',
11 | 	EXCLUDED_LISTED = 'EXCLUEDED_LISTED'
12 | }
13 | 
14 | export const USER_ID = 'USER_ID';
15 | 
16 | // Default return color HEX
17 | export const HIGH_RISK_COLOR = '#e74c3c';
18 | export const MED_RISK_COLOR = '#f5b041';
19 | export const LOW_RISK_COLOR = '#2ecc71';
20 | 
21 | export const API_HOST = 'https://api.wallethighlighter.com';
22 | export const RISK_API_URL = `${API_HOST}/v1/analyze`;
23 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import '../app.css';
 3 | 	import BottomNav from '../components/BottomNav.svelte';
 4 | 	import { onMount } from 'svelte';
 5 | 	import { loadStores, theme } from '$lib/stores';
 6 | 	onMount(async () => {
 7 | 		await loadStores();
 8 | 		document.documentElement.setAttribute('data-theme', $theme);
 9 | 		theme.subscribe((value) => {
10 | 			document.documentElement.setAttribute('data-theme', value);
11 | 		});
12 | 	});
13 | </script>
14 | 
15 | <div class="w-[20rem] h-[35rem] font-sans bg-neutral">
16 | 	<slot />
17 | 	<BottomNav />
18 | </div>
19 | 
20 | <style>
21 | 	@tailwind base;
22 | 	@tailwind components;
23 | 	@tailwind utilities;
24 | </style>
25 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width" />
 7 | 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 8 | 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 9 | 		<link
10 | 			href="https://fonts.googleapis.com/css2?family=Inter&family=Kadwa&display=swap"
11 | 			rel="stylesheet"
12 | 		/>
13 | 		%sveltekit.head%
14 | 		<style>
15 | 			body {
16 | 				font-family: 'Inter', sans-serif;
17 | 				font-family: 'Kadwa', serif;
18 | 			}
19 | 		</style>
20 | 	</head>
21 | 	<body data-sveltekit-preload-data="hover">
22 | 		<div style="display: contents">%sveltekit.body%</div>
23 | 	</body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/static/manifest_chrome.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "2.1.3",
 3 |     "manifest_version": 3,
 4 |     "name": "Wallet Highlighter - Crypto Fraud Detector",
 5 |     "description": "Crypto may be used for illegal activities and can be identified to protect users from losing money & connecting with threat actors.",
 6 |     "background": {
 7 |         "service_worker": "background.bundle.js"
 8 |     },
 9 |     "action": {
10 |         "default_popup": "index.html",
11 |         "default_icon": "logo.png"
12 |     },
13 |     "icons": {
14 |         "128": "logo.png"
15 |     },
16 |     "content_scripts": [
17 |         {
18 |             "matches": [
19 |                 "<all_urls>"
20 |             ],
21 |             "js": [
22 |                 "contentScript.bundle.js"
23 |             ],
24 |             "css": [
25 |                 "content.styles.css"
26 |             ]
27 |         }
28 |     ],
29 |     "permissions": [
30 |         "storage",
31 |         "tabs"
32 |     ]
33 | }


--------------------------------------------------------------------------------
/static/manifest_firefox.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "2.1.3",
 3 |     "manifest_version": 3,
 4 |     "name": "Wallet Highlighter - Crypto Fraud Detector",
 5 |     "description": "Crypto may be used for illegal activities and can be identified to protect users from losing money & connecting with threat actors.",
 6 |     "background": {
 7 |         "scripts": [
 8 |             "background.bundle.js",
 9 |             "browser-polyfill.js"
10 |         ]
11 |     },
12 |     "action": {
13 |         "default_popup": "index.html",
14 |         "default_icon": "logo.png"
15 |     },
16 |     "icons": {
17 |         "128": "logo.png"
18 |     },
19 |     "content_scripts": [
20 |         {
21 |             "matches": [
22 |                 "<all_urls>"
23 |             ],
24 |             "js": [
25 |                 "contentScript.bundle.js"
26 |             ],
27 |             "css": [
28 |                 "content.styles.css"
29 |             ]
30 |         }
31 |     ],
32 |     "permissions": [
33 |         "storage",
34 |         "tabs"
35 |     ]
36 | }


--------------------------------------------------------------------------------
/src/components/TopBar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import logo from '$lib/assets/logo.svg';
 3 | 	import Fa from 'svelte-fa/src/fa.svelte';
 4 | 	import Line from './Line.svelte';
 5 | 	import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 6 | 	import { theme } from '$lib/stores';
 7 | 	import { ThemePreference } from '$lib/types';
 8 | 
 9 | 	const switchTheme = () => {
10 | 		const nextTheme =
11 | 			$theme === ThemePreference.Dark ? ThemePreference.Light : ThemePreference.Dark;
12 | 		theme.set(nextTheme);
13 | 	};
14 | </script>
15 | 
16 | <div class="flex justify-between pt-3 mx-2 pb-2">
17 | 	<div class="flex items-center">
18 | 		<img src={logo} class="h-8" alt="logo" />
19 | 		<span class="text-base-100 font-bold ml-2">Wallet Highlighter</span>
20 | 	</div>
21 | 	<div
22 | 		class="flex items-center text-[1rem] pr-2 cursor-pointer text-base-100"
23 | 		on:click={switchTheme}
24 | 	>
25 | 		{#if $theme === 'wh-light'}
26 | 			<Fa icon={faSun} />
27 | 		{:else}
28 | 			<Fa icon={faMoon} />
29 | 		{/if}
30 | 	</div>
31 | </div>
32 | <Line />
33 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | // import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/kit/vite';
 3 | import adapter from 'sveltekit-adapter-chrome-extension';
 4 | 
 5 | /** @type {import('@sveltejs/kit').Config} */
 6 | const config = {
 7 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 8 | 	// for more information about preprocessors
 9 | 	preprocess: vitePreprocess(),
10 | 
11 | 	kit: {
12 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
13 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
14 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
15 | 		adapter: adapter({
16 | 			// default options are shown
17 | 			pages: 'build',
18 | 			assets: 'build',
19 | 			fallback: null,
20 | 			precompress: false,
21 | 			manifest: 'manifest_chrome.json'
22 | 		}),
23 | 		prerender: {
24 | 			entries: ['*']
25 | 		},
26 | 		appDir: 'app'
27 | 	}
28 | };
29 | 
30 | export default config;
31 | 


--------------------------------------------------------------------------------
/src/lib/assets/home.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g id="Frame">
 3 | <path id="Vector" d="M19.5692 9.77958L12.9025 3.36324C12.8992 3.36033 12.8962 3.35721 12.8933 3.35388C12.6479 3.12618 12.328 3 11.9963 3C11.6645 3 11.3446 3.12618 11.0992 3.35388L11.09 3.36324L4.43083 9.77958C4.295 9.907 4.18657 10.0618 4.11241 10.2342C4.03825 10.4065 3.99997 10.5927 4 10.781V18.6399C4 19.0006 4.14048 19.3466 4.39052 19.6016C4.64057 19.8567 4.97971 20 5.33333 20H18.6667C19.0203 20 19.3594 19.8567 19.6095 19.6016C19.8595 19.3466 20 19.0006 20 18.6399V10.781C20 10.5927 19.9618 10.4065 19.8876 10.2342C19.8134 10.0618 19.705 9.907 19.5692 9.77958ZM18.6667 18.6399H5.33333V10.781L5.3425 10.7725L12 4.35867L18.6583 10.7708L18.6675 10.7793L18.6667 18.6399Z" fill="url(#paint0_linear_341_3990)"/>
 4 | </g>
 5 | <defs>
 6 | <linearGradient id="paint0_linear_341_3990" x1="12" y1="3" x2="12" y2="20" gradientUnits="userSpaceOnUse">
 7 | <stop stop-color="#353337"/>
 8 | <stop offset="1" stop-color="#7D7D7D"/>
 9 | </linearGradient>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/lib/models/message.ts:
--------------------------------------------------------------------------------
 1 | import type { MessageType } from '$lib/constants';
 2 | 
 3 | export class Message {
 4 | 	type: MessageType;
 5 | 	value: boolean;
 6 | 	attributes: { [key: string]: string };
 7 | 
 8 | 	private defaultBool = false;
 9 | 
10 | 	constructor(type: MessageType, value?: boolean, attributes?: { [key: string]: string }) {
11 | 		this.type = type;
12 | 		this.value = this.defaultBool;
13 | 		this.attributes = {};
14 | 		if (attributes !== undefined) {
15 | 			this.attributes = attributes;
16 | 		}
17 | 		if (value !== undefined) {
18 | 			this.value = value;
19 | 		}
20 | 	}
21 | 
22 | 	private toObject() {
23 | 		return {
24 | 			type: this.type,
25 | 			value: this.value,
26 | 			attributes: this.attributes
27 | 		};
28 | 	}
29 | 
30 | 	serialize() {
31 | 		return JSON.stringify(this.toObject());
32 | 	}
33 | 
34 | 	static fromSerialized(serialized: string) {
35 | 		const messageData: ReturnType<Message['toObject']> = JSON.parse(serialized);
36 | 
37 | 		const message: Message = new Message(
38 | 			messageData.type,
39 | 			messageData.value,
40 | 			messageData.attributes
41 | 		);
42 | 
43 | 		return message;
44 | 	}
45 | }
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Wallet Highlighter risk actor types](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/a633266f-b2ed-4402-9d57-d0ad85714286)
 2 | ![Untitled presentation](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/cd3fac39-f6da-4e8b-8f16-495d9e8e5ede)
 3 | ![Wallet Highlighter risk actor types(1)](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/89a72a29-a1f3-4e47-86d6-eeb48bdc16b6)
 4 | ![Wallet Highlighter risk actor types(2)](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/3dfd7566-5cd8-4992-844d-8746883cad12)
 5 | ![Wallet Highlighter risk actor types(3)](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/9691f739-3436-4302-b48f-d576f80aa455)
 6 | ![Wallet Highlighter risk actor types(4)](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/72f6d587-b2f3-4d06-9d4b-712091ad1d1b)
 7 | ![Wallet Highlighter risk actor types(5)](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/cb8ca1ee-e648-4a09-aa45-4447d9fef327)
 8 | ![Wallet Highlighter risk actor types(6)](https://github.com/w5h10/wallet-highlighter-extension/assets/148644163/349e80a9-5df8-439f-bfec-67a8626a8db5)
 9 | [**PRIVACY POLICY**]([url](https://www.wallethighlighter.com/en/privacy-policy))
10 | 


--------------------------------------------------------------------------------
/src/lib/models/site.ts:
--------------------------------------------------------------------------------
 1 | import type { RiskCounter } from '$lib/types';
 2 | 
 3 | export class Site {
 4 | 	readonly siteId: string;
 5 | 	readonly siteURL: string;
 6 | 	readonly isExcluded: boolean;
 7 | 
 8 | 	highRiskCount = 0;
 9 | 	moderateRiskCount = 0;
10 | 	lowRiskCount = 0;
11 | 
12 | 	constructor(siteId: string, siteURL: string, isExcluded: boolean) {
13 | 		this.siteId = siteId;
14 | 		this.siteURL = siteURL;
15 | 		this.isExcluded = isExcluded;
16 | 	}
17 | 
18 | 	populateRisk(riskCount: RiskCounter) {
19 | 		this.highRiskCount = riskCount.high;
20 | 		this.moderateRiskCount = riskCount.medium;
21 | 		this.lowRiskCount = riskCount.low;
22 | 	}
23 | 
24 | 	private toObject() {
25 | 		return {
26 | 			siteId: this.siteId,
27 | 			siteURL: this.siteURL,
28 | 			isExcluded: this.isExcluded,
29 | 			highRiskCount: this.highRiskCount,
30 | 			moderateRiskCount: this.moderateRiskCount,
31 | 			lowRiskCount: this.lowRiskCount
32 | 		};
33 | 	}
34 | 
35 | 	serialize() {
36 | 		return JSON.stringify(this.toObject());
37 | 	}
38 | 
39 | 	static fromSerialized(serialized: string) {
40 | 		const siteData: ReturnType<Site['toObject']> = JSON.parse(serialized);
41 | 
42 | 		const site: Site = new Site(siteData.siteId, siteData.siteURL, siteData.isExcluded);
43 | 		site.highRiskCount = siteData.highRiskCount;
44 | 		site.lowRiskCount = siteData.lowRiskCount;
45 | 		site.moderateRiskCount = siteData.moderateRiskCount;
46 | 
47 | 		return site;
48 | 	}
49 | }
50 | 


--------------------------------------------------------------------------------
/src/lib/assets/globe.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <g id="Frame">
3 | <path id="Vector" d="M12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C20.9975 9.61382 20.0485 7.3261 18.3612 5.63882C16.6739 3.95154 14.3862 3.00252 12 3ZM19.5834 11.3077H16.1365C16.0145 8.84481 15.2478 6.5074 13.9627 4.64423C15.4678 5.04831 16.8131 5.9034 17.8179 7.0946C18.8227 8.28581 19.4388 9.75603 19.5834 11.3077ZM12 19.6059C10.3791 17.8517 9.39606 15.3655 9.25068 12.6923H14.7493C14.6039 15.3637 13.6209 17.8517 12 19.6059ZM9.25068 11.3077C9.39606 8.63625 10.3757 6.14827 12 4.39413C13.6209 6.14827 14.6039 8.63452 14.7493 11.3077H9.25068ZM10.0373 4.64423C8.75221 6.5074 7.98548 8.84481 7.86346 11.3077H4.41664C4.56123 9.75603 5.17732 8.28581 6.1821 7.0946C7.18689 5.9034 8.53222 5.04831 10.0373 4.64423ZM4.41664 12.6923H7.86346C7.98548 15.1552 8.75221 17.4926 10.0373 19.3558C8.53222 18.9517 7.18689 18.0966 6.1821 16.9054C5.17732 15.7142 4.56123 14.244 4.41664 12.6923ZM13.9627 19.3558C15.2478 17.49 16.0145 15.1526 16.1365 12.6923H19.5834C19.4388 14.244 18.8227 15.7142 17.8179 16.9054C16.8131 18.0966 15.4678 18.9517 13.9627 19.3558Z" fill="#7F778D"/>
4 | </g>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/lib/content/risk/utils.ts:
--------------------------------------------------------------------------------
 1 | export const colorMap = {
 2 |   red: "#e74c3c", //61-100
 3 |   orange: "#f5b041", //36-60
 4 |   green: "#2ecc71", //0-35
 5 |   null: null, //404
 6 | };
 7 | 
 8 | 
 9 | export const getRiskColor = (score: number): string | null => {
10 |   if (score === 404 || score === 30) {
11 |     return colorMap.null;
12 |   }
13 |   if (score <= 35) {
14 |     return colorMap.green;
15 |   }
16 |   if (score <= 60) {
17 |     return colorMap.orange;
18 |   }
19 |   return colorMap.red;
20 | };
21 | 
22 | export const getRiskStatus = (score: number): string | null => {
23 |   if (score === 404 || score === 30) {
24 |     return 'N/A';
25 |   }
26 |   if (score <= 35) {
27 |     return 'Low';
28 |   }
29 |   if (score <= 60) {
30 |     return 'Medium';
31 |   }
32 |   return 'High';
33 | };
34 | 
35 | export const getRiskPercentage = (statusStr: string): number | null => {
36 |   switch (statusStr.toUpperCase()) {
37 |     // make case letter random
38 |     case 'B':
39 |       return 10;
40 |     case 'C':
41 |       return 20;
42 |     case 'D':
43 |       return 29; // 30 is considered null
44 |     case 'E':
45 |       return 40;
46 |     case 'F':
47 |       return 50;
48 |     case 'G':
49 |       return 60;
50 |     case 'H':
51 |       return 70;
52 |     case 'I':
53 |       return 80;
54 |     case 'J':
55 |       return 90;
56 |     case 'K':
57 |       return 100;
58 |     default:
59 |       return null;
60 |   }
61 | };
62 | 
63 | export const roundToTwo = (num: number): number => {
64 |   return Math.round((num + Number.EPSILON) * 100) / 100;
65 | };
66 | 


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | // declare namespace module {}
 2 | export enum StoreName {
 3 | 	excludedSites = 'excludedSites',
 4 | 	includedSites = 'includedSites',
 5 | 	highlightingPreference = 'highlightingPreference',
 6 | 	theme = 'theme',
 7 | 	pluginStatus = 'pluginStatus',
 8 | 	userId = 'userId',
 9 | 	siteInfo = 'siteInfo',
10 | 	statsData = 'stats'
11 | }
12 | export enum PluginStatus {
13 | 	Active = 'Active',
14 | 	Inactive = 'Inactive'
15 | }
16 | export enum HighlightingPreference {
17 | 	all = 'all',
18 | 	included = 'included'
19 | }
20 | 
21 | export enum ThemePreference {
22 | 	Light = 'wh-light',
23 | 	Dark = 'wh-dark'
24 | }
25 | 
26 | export interface RiskDetailsMapping {
27 | 	[k: string]: {
28 | 		color: string;
29 | 		detail: RiskDetailItem;
30 | 	} | null;
31 | }
32 | 
33 | export interface RiskDetailItem {
34 | 	combinedRisk: string;
35 | 	fraudRisk: string;
36 | 	lendingRisk: string;
37 | 	reputationRisk: string;
38 | 	tags: Array<RiskTag>;
39 | }
40 | 
41 | export interface RiskTag {
42 | 	tag: string;
43 | 	desc: string;
44 | }
45 | 
46 | export interface RiskCounter {
47 | 	high: number;
48 | 	low: number;
49 | 	medium: number;
50 | }
51 | 
52 | export type Wallet = HTMLInputElement | HTMLSpanElement | null;
53 | 
54 | export interface Wallets {
55 | 	[k: string]: Wallet[];
56 | }
57 | export interface Obj {
58 | 	[k: string]: string | Obj;
59 | }
60 | export declare const Ext: any;
61 | 
62 | export interface RiskApiResponse {
63 | 	colors: Record<string, string | null>;
64 | 	details: Record<string, RiskDetailItem | null>;
65 | }
66 | 
67 | export interface KnowRiskScoreResponseModel {
68 | 	status: 'OK' | 'ERROR';
69 | 	error?: string;
70 | }
71 | 


--------------------------------------------------------------------------------
/webpack.config.cjs:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 4 | 
 5 | module.exports = {
 6 | 	entry: {
 7 | 		contentScript: './src/lib/content/index.ts',
 8 | 		background: './src/lib/background.ts'
 9 | 	},
10 | 	output: {
11 | 		filename: '[name].bundle.js',
12 | 		path: path.resolve(__dirname, 'build'),
13 | 		sourceMapFilename: '[file].map[query]'
14 | 	},
15 | 	target: 'web',
16 | 	resolve: {
17 | 		extensions: ['.js', '.ts'],
18 | 		alias: {
19 | 			$lib: path.resolve(__dirname, 'src/lib')
20 | 		}
21 | 	},
22 | 	devtool: 'source-map',
23 | 	module: {
24 | 		rules: [
25 | 			{
26 | 				test: /\.ts$/,
27 | 				exclude: /node_modules/,
28 | 				use: {
29 | 					loader: 'babel-loader',
30 | 					options: {
31 | 						presets: ['@babel/preset-env', '@babel/preset-typescript']
32 | 					}
33 | 				}
34 | 			},
35 | 			{
36 | 				// look for .css or .scss files
37 | 				test: /\.(css|scss)$/,
38 | 				// in the `src` directory
39 | 				use: [
40 | 					{
41 | 						loader: 'style-loader'
42 | 					},
43 | 					{
44 | 						loader: 'css-loader'
45 | 					}
46 | 				]
47 | 			}
48 | 		]
49 | 	},
50 | 	plugins: [
51 | 		new webpack.ProvidePlugin({
52 | 			process: 'process/browser',
53 | 			Buffer: ['buffer', 'Buffer']
54 | 		}),
55 | 		new CopyWebpackPlugin({
56 | 			patterns: [
57 | 				{
58 | 					from: 'src/lib/content/content.styles.css',
59 | 					to: path.join(__dirname, 'build'),
60 | 					force: true
61 | 				},
62 | 				{
63 | 					from: 'src/lib/assets/**/*',
64 | 					to: path.join(__dirname, 'build', '[name][ext]'),
65 | 					force: true
66 | 				}
67 | 			]
68 | 		})
69 | 	]
70 | };
71 | 


--------------------------------------------------------------------------------
/src/components/BottomNav.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import home from '$lib/assets/home.svg';
 3 | 	import globe from '$lib/assets/globe.svg';
 4 | 	import gear from '$lib/assets/gear.svg';
 5 | 	import { page } from '$app/stores';
 6 | </script>
 7 | 
 8 | <div class="bottom-nav" class:hide={$page.url.pathname == '/risk-score'}>
 9 | 	<a href="/">
10 | 		<div class="home" class:active={$page.url.pathname === '/'}>
11 | 			<img src={home} alt="home" />
12 | 			<span>Home</span>
13 | 		</div>
14 | 	</a>
15 | 	<a href="/sites">
16 | 		<div class="sites" class:active={$page.url.pathname === '/sites'}>
17 | 			<img src={globe} alt="sites" />
18 | 			<span>Sites</span>
19 | 		</div>
20 | 	</a>
21 | 	<a href="/settings">
22 | 		<div class="settings" class:active={$page.url.pathname === '/settings'}>
23 | 			<img src={gear} alt="settings" />
24 | 			<span>Settings</span>
25 | 		</div>
26 | 	</a>
27 | </div>
28 | 
29 | <style>
30 | 	.bottom-nav {
31 | 		@apply bg-base-300;
32 | 		position: absolute;
33 | 		bottom: 0;
34 | 		left: 0;
35 | 		display: flex;
36 | 		width: 100%;
37 | 		box-shadow: 0px -2px 41px 0px rgba(0, 0, 0, 0.13);
38 | 	}
39 | 
40 | 	.bottom-nav.hide {
41 | 		display: none;
42 | 	}
43 | 	.bottom-nav > a {
44 | 		width: 100%;
45 | 		color: #000;
46 | 		text-decoration: none;
47 | 	}
48 | 
49 | 	.bottom-nav > a > div {
50 | 		display: flex;
51 | 		flex-direction: column;
52 | 		width: 100%;
53 | 		padding: 0.6rem 0px 0.5rem;
54 | 		cursor: pointer;
55 | 	}
56 | 	.bottom-nav > a > div {
57 | 		@apply text-base-100;
58 | 	}
59 | 	.bottom-nav > a > div > img {
60 | 		@apply h-[1.2rem];
61 | 	}
62 | 	.bottom-nav > a > div > span {
63 | 		@apply text-base-100;
64 | 		font-size: 0.625rem;
65 | 		font-family: Inter;
66 | 		font-style: normal;
67 | 		font-weight: 500;
68 | 		line-height: 165.1%;
69 | 		text-align: center;
70 | 	}
71 | 
72 | 	.bottom-nav > a > .active {
73 | 		@apply border-primary;
74 | 		border-top-width: 0.1rem;
75 | 		border-top-style: solid;
76 | 	}
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/components/KnowYourRiskScore.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import knowYourScoreLogo from '$lib/assets/know_your_score.svg';
 3 | 	import knowYourScoreLogoDark from '$lib/assets/know_your_score_dark.svg';
 4 | 	import { theme } from '$lib/stores';
 5 | 	import { ThemePreference } from '$lib/types';
 6 | </script>
 7 | 
 8 | <div class="know-your-score">
 9 | 	<div class="logo-section">
10 | 		{#if $theme === ThemePreference.Dark}
11 | 			<img src={knowYourScoreLogoDark} alt="" />
12 | 		{:else}
13 | 			<img src={knowYourScoreLogo} alt="" />
14 | 		{/if}
15 | 	</div>
16 | 
17 | 	<div class="sub-section">
18 | 		<span class="section-title text-base-100">Time to Test your Risk Score</span>
19 | 		<span class="section-subtitle text-secondary">
20 | 			Getting your score is easy. Just enter your wallet address and email
21 | 		</span>
22 | 		<a href="/risk-score">
23 | 			<button class="button btn-primary">Know your score</button>
24 | 		</a>
25 | 	</div>
26 | </div>
27 | 
28 | <style>
29 | 	.know-your-score {
30 | 		display: flex;
31 | 		justify-content: space-between;
32 | 		column-gap: 0.9rem;
33 | 		margin-top: 0.5rem;
34 | 		padding: 0.5rem 0;
35 | 	}
36 | 	.know-your-score > .logo-section {
37 | 		display: flex;
38 | 		width: 100%;
39 | 		height: auto;
40 | 	}
41 | 	.know-your-score > .logo-section > img {
42 | 		width: 100%;
43 | 	}
44 | 
45 | 	.know-your-score > .sub-section {
46 | 		display: flex;
47 | 		flex-direction: column;
48 | 		justify-content: space-between;
49 | 		margin-left: 0.4rem;
50 | 		width: 100%;
51 | 		padding-right: 1rem;
52 | 	}
53 | 
54 | 	.know-your-score > .sub-section > a {
55 | 		color: #fff;
56 | 		text-decoration: none;
57 | 	}
58 | 
59 | 	.know-your-score > .sub-section > .section-title {
60 | 		font-size: 0.9375rem;
61 | 		font-family: Inter;
62 | 		font-style: normal;
63 | 		font-weight: 500;
64 | 		line-height: 98.1%;
65 | 		letter-spacing: -0.01875rem;
66 | 	}
67 | 	.know-your-score > .sub-section > .section-subtitle {
68 | 		color: #6c6872;
69 | 		font-size: 0.6rem;
70 | 		font-family: Inter;
71 | 		font-style: normal;
72 | 		font-weight: 500;
73 | 		line-height: 160%;
74 | 		padding: 0.5rem 0;
75 | 	}
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/lib/assets/power.svg:
--------------------------------------------------------------------------------
 1 | <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g id="Frame" filter="url(#filter0_i_341_4472)">
 3 | <path id="Vector" d="M24.4688 27V10.125C24.4688 9.45367 24.7354 8.80984 25.2101 8.33514C25.6848 7.86043 26.3287 7.59375 27 7.59375C27.6713 7.59375 28.3152 7.86043 28.7899 8.33514C29.2646 8.80984 29.5312 9.45367 29.5312 10.125V27C29.5312 27.6713 29.2646 28.3152 28.7899 28.7899C28.3152 29.2646 27.6713 29.5312 27 29.5312C26.3287 29.5312 25.6848 29.2646 25.2101 28.7899C24.7354 28.3152 24.4688 27.6713 24.4688 27ZM38.5066 9.70312C37.9446 9.35704 37.2696 9.2442 36.6255 9.38866C35.9814 9.53312 35.4193 9.92346 35.0588 10.4764C34.6984 11.0294 34.5683 11.7013 34.6962 12.3489C34.824 12.9965 35.1998 13.5685 35.7434 13.943C40.3755 16.953 43.0312 21.7266 43.0312 27C43.0312 31.2518 41.3422 35.3294 38.3358 38.3358C35.3294 41.3422 31.2518 43.0312 27 43.0312C22.7482 43.0312 18.6706 41.3422 15.6642 38.3358C12.6578 35.3294 10.9688 31.2518 10.9688 27C10.9688 21.7266 13.6245 16.953 18.2566 13.9324C18.7713 13.5467 19.1198 12.9796 19.2314 12.3462C19.343 11.7129 19.2094 11.0608 18.8576 10.5224C18.5059 9.98401 17.9623 9.5997 17.3375 9.44753C16.7126 9.29537 16.0533 9.38675 15.4934 9.70312C9.39937 13.6645 5.90625 19.9737 5.90625 27C5.90625 32.5944 8.12862 37.9597 12.0845 41.9155C16.0403 45.8714 21.4056 48.0938 27 48.0938C32.5944 48.0938 37.9597 45.8714 41.9155 41.9155C45.8714 37.9597 48.0938 32.5944 48.0938 27C48.0938 19.9737 44.6006 13.6645 38.5066 9.70312Z" fill="#F4F4F4"/>
 4 | </g>
 5 | <defs>
 6 | <filter id="filter0_i_341_4472" x="0" y="0" width="54" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 7 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 8 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 9 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
10 | <feOffset dy="4"/>
11 | <feGaussianBlur stdDeviation="2"/>
12 | <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
13 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.11 0"/>
14 | <feBlend mode="normal" in2="shape" result="effect1_innerShadow_341_4472"/>
15 | </filter>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/components/Stats.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { StatsData } from '$lib/models/statsData';
 3 | 	import { statsData } from '$lib/stores';
 4 | 	import { onMount } from 'svelte';
 5 | 
 6 | 	let { highRiskPercentage, totalHighlighted, moderatePercentage } =
 7 | 		StatsData.initializeWithEmtpy();
 8 | 
 9 | 	onMount(() => {
10 | 		statsData.subscribe((value) => {
11 | 			const data = StatsData.fromSerialized(value);
12 | 			highRiskPercentage = data.highRiskPercentage;
13 | 			totalHighlighted = data.totalHighlighted;
14 | 			moderatePercentage = data.moderatePercentage;
15 | 		});
16 | 	});
17 | </script>
18 | 
19 | <div class="flex justify-between mt-2 gap-2">
20 | 	<div class="stats-section shadow-lg">
21 | 		<div class="stats-item">
22 | 			<span class="stats-value">
23 | 				{StatsData.humanReadableFormat(totalHighlighted)}
24 | 			</span>
25 | 			<span class="stats-label">Total wallets highlighted</span>
26 | 		</div>
27 | 	</div>
28 | 	<div class="stats-section shadow-md">
29 | 		<div class="stats-item">
30 | 			<span class="stats-value error">
31 | 				{highRiskPercentage}%
32 | 			</span>
33 | 			<span class="stats-label">High risk wallets</span>
34 | 		</div>
35 | 	</div>
36 | 	<div class="stats-section shadow-md">
37 | 		<div class="stats-item">
38 | 			<span class="stats-value warning">
39 | 				{moderatePercentage}%
40 | 			</span>
41 | 			<span class="stats-label">Moderate risk wallets</span>
42 | 		</div>
43 | 	</div>
44 | </div>
45 | 
46 | <style lang="postcss">
47 | 	.stats-section {
48 | 		display: flex;
49 | 		column-gap: 0.9rem;
50 | 		border-radius: 0.375rem;
51 | 	}
52 | 	.stats-item {
53 | 		@apply bg-base-300;
54 | 		border-radius: 0.375rem;
55 | 		padding: 0.25rem 0.88rem;
56 | 		width: 5.5rem;
57 | 		display: flex;
58 | 		flex-direction: column;
59 | 	}
60 | 
61 | 	.stats-label {
62 | 		@apply text-base-100;
63 | 		font-size: 0.56281rem;
64 | 		font-family: Inter;
65 | 		font-style: normal;
66 | 		font-weight: 500;
67 | 		line-height: 160%;
68 | 		margin-bottom: 0.5rem;
69 | 	}
70 | 
71 | 	.stats-value {
72 | 		@apply text-secondary;
73 | 		font-size: 1.25281rem;
74 | 		font-family: Inter;
75 | 		font-style: normal;
76 | 		font-weight: 900;
77 | 		line-height: 165.1%;
78 | 		margin: 0.3rem 0;
79 | 	}
80 | 	.error {
81 | 		@apply text-[#FF6565];
82 | 	}
83 | 
84 | 	.warning {
85 | 		@apply text-[#F99521];
86 | 	}
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/lib/assets/light-bulb.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 4 | 	 viewBox="0 0 512 512" xml:space="preserve">
 5 | <path style="fill:#36495E;" d="M256,512c-38.482,0-69.789-31.307-69.789-69.789c0-11.248,9.119-20.366,20.366-20.366h98.845
 6 | 	c11.248,0,20.366,9.119,20.366,20.366C325.788,480.693,294.482,512,256,512z"/>
 7 | <path style="fill:#2C3E50;" d="M305.421,421.844H256V512c38.482,0,69.788-31.307,69.788-69.789
 8 | 	C325.788,430.963,316.67,421.844,305.421,421.844z"/>
 9 | <path style="fill:#6A82A1;" d="M316.529,462.577H195.471c-26.204,0-47.522-21.318-47.522-47.522V283.42
10 | 	c0-16.756,19.199-26.36,32.607-16.278c44.422,33.401,106.468,33.401,150.89,0c13.393-10.071,32.607-0.498,32.607,16.278v131.635
11 | 	C364.051,441.259,342.733,462.577,316.529,462.577z"/>
12 | <g>
13 | 	<path style="fill:#36495E;" d="M331.444,267.142c-22.21,16.701-48.828,25.051-75.444,25.051v170.385h60.529
14 | 		c26.204,0,47.522-21.318,47.522-47.522V283.42C364.051,266.663,344.854,257.059,331.444,267.142z"/>
15 | 	<rect x="147.956" y="352.598" style="fill:#36495E;" width="216.102" height="40.733"/>
16 | </g>
17 | <path style="fill:#FFDA79;" d="M255.89,333.022c-90.262,0-166.406-72.744-166.406-166.519C89.484,74.693,164.182,0,256,0
18 | 	s166.516,74.693,166.516,166.503c0,93.968-76.256,166.167-165.957,166.518C256.335,333.021,256.113,333.022,255.89,333.022z"/>
19 | <g>
20 | 	<path style="fill:#FFD155;" d="M256,0v333.021c0.186,0,0.372-0.001,0.559-0.001c89.644-0.35,165.957-72.482,165.957-166.518
21 | 		C422.516,74.693,347.818,0,256,0z"/>
22 | 	<path style="fill:#FFD155;" d="M256,237.314c-7.276,0-14-3.882-17.637-10.183l-46.715-80.913
23 | 		c-5.625-9.741-2.288-22.197,7.454-27.821c9.741-5.624,22.197-2.288,27.821,7.454L256,176.215l29.078-50.364
24 | 		c5.624-9.741,18.079-13.079,27.821-7.454c9.742,5.624,13.079,18.08,7.454,27.821l-46.715,80.913
25 | 		C269.999,233.433,263.276,237.314,256,237.314z"/>
26 | </g>
27 | <rect x="255.993" y="352.598" style="fill:#2C3E50;" width="108.051" height="40.733"/>
28 | <path style="fill:#FFC72D;" d="M312.899,118.397c-9.742-5.625-22.198-2.286-27.821,7.454L256,176.215v61.098
29 | 	c7.276,0,13.999-3.882,17.637-10.183l46.715-80.913C325.978,136.477,322.641,124.021,312.899,118.397z"/>
30 | </svg>


--------------------------------------------------------------------------------
/src/lib/models/statsData.ts:
--------------------------------------------------------------------------------
 1 | import type { RiskCounter } from '$lib/types';
 2 | 
 3 | export class StatsData {
 4 | 	highRiskPercentage: number;
 5 | 	moderatePercentage: number;
 6 | 
 7 | 	constructor(public totalHighlighted = 0, public totalHighRisk = 0, public totalModerateRisk = 0) {
 8 | 		this.highRiskPercentage =
 9 | 			totalHighlighted === 0
10 | 				? 0
11 | 				: Math.round((this.totalHighRisk * 10000) / totalHighlighted) / 100;
12 | 		this.moderatePercentage =
13 | 			totalHighlighted === 0
14 | 				? 0
15 | 				: Math.round((this.totalModerateRisk * 10000) / totalHighlighted) / 100;
16 | 	}
17 | 
18 | 	private toObject() {
19 | 		return {
20 | 			totalHighlighted: this.totalHighlighted,
21 | 			totalHighRisk: this.totalHighRisk,
22 | 			totalModerateRisk: this.totalModerateRisk
23 | 		};
24 | 	}
25 | 
26 | 	serialize() {
27 | 		return JSON.stringify(this.toObject());
28 | 	}
29 | 
30 | 	static fromSerialized(serialized: string) {
31 | 		const statsData: ReturnType<StatsData['toObject']> = JSON.parse(serialized);
32 | 
33 | 		const stats: StatsData = new StatsData(
34 | 			statsData.totalHighlighted,
35 | 			statsData.totalHighRisk,
36 | 			statsData.totalModerateRisk
37 | 		);
38 | 
39 | 		return stats;
40 | 	}
41 | 
42 | 	static initializeWithEmtpy(): StatsData {
43 | 		return new StatsData();
44 | 	}
45 | 
46 | 	public updateStatsCount(riskCount: RiskCounter) {
47 | 		const tmpTotal = this.totalHighlighted + riskCount.high + riskCount.low + riskCount.medium;
48 | 		const tmpTotalHigh = this.totalHighRisk + riskCount.high;
49 | 		const tmpTotalMod = this.totalModerateRisk + riskCount.medium;
50 | 		this.totalHighlighted = tmpTotal;
51 | 		this.totalHighRisk = tmpTotalHigh;
52 | 		this.totalModerateRisk = tmpTotalMod;
53 | 	}
54 | 
55 | 	static humanReadableFormat(totalCount: number): string {
56 | 		const decPlaces = Math.pow(10, 2);
57 | 
58 | 		// Enumerate number abbreviations
59 | 		const abbrev = ['k', 'm', 'b', 't'];
60 | 		let val = totalCount.toString();
61 | 		for (let i = abbrev.length - 1; i >= 0; i--) {
62 | 			const size = Math.pow(10, (i + 1) * 3);
63 | 			if (size <= totalCount) {
64 | 				totalCount = Math.round((totalCount * decPlaces) / size) / decPlaces;
65 | 				val = totalCount.toString();
66 | 				if (totalCount == 1000 && i < abbrev.length - 1) {
67 | 					totalCount = 1;
68 | 					i++;
69 | 				}
70 | 				val += abbrev[i];
71 | 				break;
72 | 			}
73 | 		}
74 | 		return val;
75 | 	}
76 | }
77 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "svelte-extension",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build:ui": "vite build",
 8 | 		"build": "yarn build:ui && npx webpack --config webpack.config.cjs",
 9 | 		"buildw": "yarn build --watch",
10 | 		"build:css": "npx tailwindcss -i ./src/app.css -o ./build/output.css --watch",
11 | 		"preview": "vite preview",
12 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
14 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
15 | 		"format": "prettier --plugin-search-dir . --write ."
16 | 	},
17 | 	"devDependencies": {
18 | 		"@babel/core": "^7.22.9",
19 | 		"@babel/preset-env": "^7.22.9",
20 | 		"@babel/preset-typescript": "^7.22.5",
21 | 		"@crxjs/vite-plugin": "^1.0.14",
22 | 		"@sveltejs/adapter-auto": "^2.0.0",
23 | 		"@sveltejs/kit": "^1.20.4",
24 | 		"@types/webextension-polyfill": "^0.10.1",
25 | 		"@typescript-eslint/eslint-plugin": "^5.45.0",
26 | 		"@typescript-eslint/parser": "^5.45.0",
27 | 		"autoprefixer": "^10.4.14",
28 | 		"babel-loader": "^9.1.3",
29 | 		"copy-webpack-plugin": "^11.0.0",
30 | 		"daisyui": "^3.2.1",
31 | 		"eslint": "^8.28.0",
32 | 		"eslint-config-prettier": "^8.5.0",
33 | 		"eslint-plugin-svelte": "^2.30.0",
34 | 		"postcss": "^8.4.25",
35 | 		"prettier": "^2.8.0",
36 | 		"prettier-plugin-svelte": "^2.10.1",
37 | 		"svelte": "^4.0.0",
38 | 		"svelte-check": "^3.4.3",
39 | 		"sveltekit-adapter-chrome-extension": "^2.0.0",
40 | 		"tailwindcss": "^3.3.2",
41 | 		"ts-loader": "^9.4.4",
42 | 		"tslib": "^2.4.1",
43 | 		"typescript": "^5.1.6",
44 | 		"vite": "^4.3.6",
45 | 		"webextension-polyfill": "^0.10.0",
46 | 		"webpack": "^5.88.1",
47 | 		"webpack-cli": "^5.1.4"
48 | 	},
49 | 	"type": "module",
50 | 	"dependencies": {
51 | 		"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
52 | 		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
53 | 		"@fortawesome/free-brands-svg-icons": "^6.4.0",
54 | 		"@fortawesome/free-solid-svg-icons": "^6.4.0",
55 | 		"@iota/validators": "^1.0.0-beta.30",
56 | 		"@macfja/svelte-persistent-store": "^2.3.1",
57 | 		"@rollup/plugin-inject": "^5.0.3",
58 | 		"@sveltejs/adapter-static": "^2.0.2",
59 | 		"buffer": "^6.0.3",
60 | 		"node-stdlib-browser": "^1.2.0",
61 | 		"svelte-fa": "^3.0.4",
62 | 		"trezor-address-validator": "^0.4.3",
63 | 		"vite-plugin-node-polyfills": "^0.9.0",
64 | 		"vite-plugin-node-stdlib-browser": "^0.2.1"
65 | 	}
66 | }


--------------------------------------------------------------------------------
/src/routes/settings/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import TopBar from '../../components/TopBar.svelte';
 3 | 	import powerIcon from '$lib/assets/power.svg';
 4 | 	import { pluginStatus, theme } from '$lib/stores';
 5 | 	import { PluginStatus, ThemePreference } from '$lib/types';
 6 | 	import { sendMessage } from '$lib/content/utils';
 7 | 	import { MessageType } from '$lib/constants';
 8 | 
 9 | 	const switchPluginStatus = async () => {
10 | 		pluginStatus.set(
11 | 			$pluginStatus === PluginStatus.Active ? PluginStatus.Inactive : PluginStatus.Active
12 | 		);
13 | 		await sendMessage(MessageType.RERUN_SCAN);
14 | 	};
15 | </script>
16 | 
17 | <TopBar />
18 | 
19 | <div class="px-4 py-2">
20 | 	<span class="title mb-4 text-base-100">Settings</span>
21 | 
22 | 	<div class="bg-neutral rounded-xl p-2 power-button-section">
23 | 		<span class="text-xs font-semibold text-base-100 w-[100%]">Plugin Status</span>
24 | 
25 | 		<div
26 | 			class="rounded-[8rem] bg-neutral border-[#FF7B69] border-2 w-32 h-32 p-4 power-button m-[2rem]"
27 | 			on:click={switchPluginStatus}
28 | 			class:plugin-active={$pluginStatus === PluginStatus.Active}
29 | 		>
30 | 			<img src={powerIcon} alt="power" class="flex w-16 h-16" />
31 | 		</div>
32 | 		<span class="text-base-100 font-semibold"
33 | 			>Status : {$pluginStatus === PluginStatus.Active ? 'Active' : 'Inactive'}</span
34 | 		>
35 | 		<span>(You can change your status whenever needed)</span>
36 | 	</div>
37 | 
38 | 	<div class="flex flex-col mt-6">
39 | 		<span class="text-base-100 font-semibold">Change your theme</span>
40 | 		<label class="text-base-100">
41 | 			Light
42 | 			<input
43 | 				type="radio"
44 | 				name="radio-1"
45 | 				class="radio radio-xs checked:bg-blue-500"
46 | 				bind:group={$theme}
47 | 				value={ThemePreference.Light}
48 | 			/>
49 | 		</label>
50 | 		<label class="text-base-100">
51 | 			Dark
52 | 			<input
53 | 				type="radio"
54 | 				name="radio-1"
55 | 				class="radio radio-xs checked:bg-blue-500"
56 | 				bind:group={$theme}
57 | 				value={ThemePreference.Dark}
58 | 			/>
59 | 		</label>
60 | 	</div>
61 | </div>
62 | 
63 | <style lang="postcss">
64 | 	.title {
65 | 		font-size: 1.3125rem;
66 | 		font-family: Inter;
67 | 		font-style: normal;
68 | 		font-weight: 400;
69 | 		line-height: normal;
70 | 		display: flex;
71 | 	}
72 | 	.plugin-active {
73 | 		@apply border-[#28CF6B];
74 | 	}
75 | 	.power-button-section {
76 | 		display: flex;
77 | 		flex-direction: column;
78 | 		align-items: center;
79 | 	}
80 | 	.power-button {
81 | 		display: flex;
82 | 		align-items: center;
83 | 		justify-content: center;
84 | 		border-width: 0.2rem;
85 | 	}
86 | 	label {
87 | 		display: flex;
88 | 		flex-direction: row;
89 | 		justify-content: space-between;
90 | 		align-items: center;
91 | 		margin: 0.5rem 0;
92 | 	}
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/lib/content/risk/tooltip.ts:
--------------------------------------------------------------------------------
 1 | export const Tooltip: {
 2 | 	tooltip: HTMLElement | undefined | null;
 3 | 	target: HTMLElement | undefined | null;
 4 | 	bindEvents: () => void;
 5 | 	show: (ev: Event) => void;
 6 | 	hide: () => void;
 7 | } = {
 8 | 	tooltip: null,
 9 | 	target: null,
10 | 	bindEvents: function () {
11 | 		Tooltip.tooltip = document.getElementById('whe-tooltip');
12 | 		const targets = document.querySelectorAll('[rel=whe-tooltip]');
13 | 		for (let i = 0; i < targets.length; ++i) {
14 | 			targets[i].addEventListener('click', Tooltip.show);
15 | 			targets[i].addEventListener('mouseenter', Tooltip.show);
16 | 			targets[i].addEventListener('mouseleave', Tooltip.hide);
17 | 		}
18 | 		Tooltip.tooltip?.addEventListener('click', Tooltip.hide);
19 | 		window.addEventListener('resize', Tooltip.show);
20 | 	},
21 | 
22 | 	show: function (ev: Event) {
23 | 		Tooltip.hide();
24 | 		Tooltip.target = ev.target as HTMLElement;
25 | 		if (!Tooltip.tooltip || !Tooltip.target) {
26 | 			return false;
27 | 		}
28 | 		const tip = Tooltip.target.getAttribute('whe-tooltip-text');
29 | 		if (!tip || tip == '') {
30 | 			return false;
31 | 		}
32 | 		Tooltip.tooltip.className = '';
33 | 		Tooltip.tooltip.innerHTML = tip;
34 | 		const targetDomRect = Tooltip.target.getBoundingClientRect();
35 | 		const targetLeft = targetDomRect.left;
36 | 		const targetTop = targetDomRect.top + window.scrollY;
37 | 		if (window.innerWidth < Tooltip.tooltip.offsetWidth * 1.5) {
38 | 			Tooltip.tooltip.style.maxWidth = window.innerWidth / 2 + 'px';
39 | 		} else {
40 | 			Tooltip.tooltip.style.maxWidth = 320 + 'px';
41 | 		}
42 | 
43 | 		// eslint-disable-next-line no-var
44 | 		var pos_left = targetLeft + Tooltip.target.offsetWidth / 2 - Tooltip.tooltip.offsetWidth / 2,
45 | 			pos_top = targetTop - Tooltip.tooltip.offsetHeight - 20;
46 | 		Tooltip.tooltip.className = '';
47 | 		if (pos_left < 0) {
48 | 			pos_left = targetLeft + Tooltip.target.offsetWidth / 2 - 20;
49 | 			Tooltip.tooltip.className += ' whe-left';
50 | 		}
51 | 
52 | 		if (pos_left + Tooltip.tooltip.offsetWidth > window.innerWidth) {
53 | 			pos_left = targetLeft - Tooltip.tooltip.offsetWidth + Tooltip.target.offsetWidth / 2 + 20;
54 | 			Tooltip.tooltip.className += ' whe-right';
55 | 		}
56 | 
57 | 		if (pos_top < 0) {
58 | 			// eslint-disable-next-line no-var
59 | 			var pos_top = targetTop + Tooltip.target.offsetHeight;
60 | 			Tooltip.tooltip.className += ' whe-top';
61 | 		}
62 | 
63 | 		Tooltip.tooltip.style.left = pos_left + 'px';
64 | 		Tooltip.tooltip.style.top = pos_top + 'px';
65 | 
66 | 		Tooltip.tooltip.className += ' whe-show';
67 | 	},
68 | 	hide: function () {
69 | 		if (!Tooltip.tooltip) {
70 | 			return;
71 | 		}
72 | 		Tooltip.tooltip.className = Tooltip.tooltip.className.replace('whe-show', '');
73 | 	}
74 | };
75 | 
76 | export const initTooltip = () => {
77 | 	document.body.insertAdjacentHTML('afterbegin', '<div id="whe-tooltip"></div>');
78 | };
79 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
  1 | import IOTA from '@iota/validators';
  2 | import WAValidator from 'trezor-address-validator';
  3 | import { getUserId } from './content/utils';
  4 | import { API_HOST } from './constants';
  5 | import type { KnowRiskScoreResponseModel } from './types';
  6 | 
  7 | class RiskScoreError extends Error {}
  8 | const coins = [
  9 | 	// "AUR",
 10 | 	// "BKX",
 11 | 	// "BVC",
 12 | 	// "BIO",
 13 | 	'BTC',
 14 | 	'BCH',
 15 | 	// "BTG",
 16 | 	// "BTCP",
 17 | 	// "BTCZ",
 18 | 	// "CLO",
 19 | 	// "DASH",
 20 | 	// "DCR",
 21 | 	// "DGB",
 22 | 	'DOGE',
 23 | 	'ETH',
 24 | 	// "ETC",
 25 | 	// "ETZ",
 26 | 	// "FRC",
 27 | 	// "GRLC",
 28 | 	// "HUSH",
 29 | 	// "KMD",
 30 | 	'LTC',
 31 | 	// "MEC",
 32 | 	'XMR',
 33 | 	'NMC',
 34 | 	// "NANO",
 35 | 	// "NEO",
 36 | 	// "GAS",
 37 | 	'PPC',
 38 | 	// "XPM",
 39 | 	// "PTS",
 40 | 	// "QTUM",
 41 | 	// "XRB",
 42 | 	// "XRP",
 43 | 	// "SNG",
 44 | 	// "VTC",
 45 | 	// "VOT",
 46 | 	// "ZEC",
 47 | 	// "ZCL",
 48 | 	// "ZEN",
 49 | 	'XTZ'
 50 | ];
 51 | 
 52 | const isValidIotaAddress = (address: string) =>
 53 | 	IOTA.isAddress(address) || new RegExp('^(iota1|iot1|io1)[a-zA-Z0-9]{25,}').test(address);
 54 | 
 55 | export const validateWallet = (wallet: string): boolean => {
 56 | 	if (!wallet) {
 57 | 		return false;
 58 | 	}
 59 | 
 60 | 	if (isValidIotaAddress(wallet)) {
 61 | 		return true;
 62 | 	}
 63 | 
 64 | 	return (
 65 | 		WAValidator.validate(wallet.trim()) ||
 66 | 		coins.some((coin) => WAValidator.validate(wallet.trim(), coin))
 67 | 	);
 68 | };
 69 | 
 70 | export const validateEmail = (email: string): boolean => {
 71 | 	return new RegExp(/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/).test(email);
 72 | };
 73 | 
 74 | export const sendApiRequest = async (email: string, wallet: string): Promise<void> => {
 75 | 	if (!email || !wallet) {
 76 | 		throw new RiskScoreError('missing email or wallet address');
 77 | 	}
 78 | 
 79 | 	const userID = await getUserId();
 80 | 	console.log({ userID });
 81 | 
 82 | 	let result = null;
 83 | 	try {
 84 | 		const response = await fetch(`${API_HOST}/v1/knowriskscore`, {
 85 | 			method: 'POST',
 86 | 			body: JSON.stringify({ email, wallet, userID, source: 'WEB_EXTENSION' }),
 87 | 			headers: {
 88 | 				'Content-Type': 'application/json'
 89 | 			}
 90 | 		});
 91 | 		result = (await response.json()) as KnowRiskScoreResponseModel;
 92 | 	} catch (e) {
 93 | 		throw new RiskScoreError(
 94 | 			'An Error occured while connecting to server. Please check your connection.'
 95 | 		);
 96 | 	}
 97 | 	if (result.status.toUpperCase() === 'ERROR') {
 98 | 		throw new RiskScoreError(result.error ?? 'An error has occured');
 99 | 	}
100 | };
101 | 
102 | export const getScamReportHash = async (address: string, ticker: string, websiteUrl: string) => {
103 | 	const hashable = [address, ticker, websiteUrl].join('_');
104 | 	const hashBuffer = await crypto.subtle.digest('SHA-256', Buffer.from(hashable));
105 | 	const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
106 | 	return hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
107 | };
108 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | /** @type {import('tailwindcss').Config} */
  2 | export default {
  3 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
  4 | 	theme: {
  5 | 		fontFamily: {
  6 | 			sans: 'Inter'
  7 | 		},
  8 | 		extend: {}
  9 | 	},
 10 | 	plugins: [require('daisyui')],
 11 | 	daisyui: {
 12 | 		themes: [
 13 | 			'dark',
 14 | 			{
 15 | 				'wh-light': {
 16 | 					primary: '#000',
 17 | 					'primary-focus': '#000',
 18 | 					'primary-content': '#fff',
 19 | 
 20 | 					secondary: '#cacaca',
 21 | 					'secondary-focus': '',
 22 | 					'secondary-content': '',
 23 | 
 24 | 					accent: '#4277FF',
 25 | 					'accent-focus': '',
 26 | 					'accent-content': '',
 27 | 
 28 | 					neutral: '#fff',
 29 | 					'neutral-focus': '',
 30 | 					'neutral-content': '#000',
 31 | 
 32 | 					'base-100': '#000',
 33 | 					'base-200': '#f0eff1',
 34 | 					'base-300': '#FFFFFF14',
 35 | 					'base-content': '#A5A5A5',
 36 | 
 37 | 					info: '#075985',
 38 | 					'info-content': '#075985',
 39 | 
 40 | 					success: '#28CF6B',
 41 | 					'success-content': '#28CF6B',
 42 | 
 43 | 					warning: '#FF7B69',
 44 | 					'warning-content': '#FF7B69',
 45 | 
 46 | 					error: '#DF3333',
 47 | 					'error-content': '#DF3333',
 48 | 
 49 | 					'.contrast': {
 50 | 						'background-color': '#F9F9F9',
 51 | 						color: '#000',
 52 | 						'border-color': '#F5F2FA'
 53 | 					},
 54 | 					'.btn-primary': {
 55 | 						'border-color': '#5F1DCC',
 56 | 						'background-color': '#000'
 57 | 					},
 58 | 					'.button[disabled]': {
 59 | 						'border-color': '#A9A9A9',
 60 | 						'background-color': '#A9A9A9',
 61 | 						color: '#FFF'
 62 | 					}
 63 | 				},
 64 | 				'wh-dark': {
 65 | 					primary: '#853BFF',
 66 | 					'primary-focus': '',
 67 | 					'primary-content': '#fff',
 68 | 
 69 | 					secondary: '#cacaca',
 70 | 					'secondary-focus': '',
 71 | 					'secondary-content': '',
 72 | 
 73 | 					accent: '#4277FF',
 74 | 					'accent-focus': '',
 75 | 					'accent-content': '',
 76 | 
 77 | 					neutral: '#141414', // The actual dark/light background
 78 | 					'neutral-focus': '',
 79 | 					'neutral-content': '#fff',
 80 | 
 81 | 					'base-100': '#fff',
 82 | 					'base-200': '#242424',
 83 | 					'base-300': '#1a1a1a',
 84 | 					'base-content': '#A5A5A5',
 85 | 
 86 | 					info: '#075985',
 87 | 					'info-content': '#075985',
 88 | 
 89 | 					success: '#28CF6B',
 90 | 					'success-content': '#28CF6B',
 91 | 
 92 | 					warning: '#FF7B69',
 93 | 					'warning-content': '#FF7B69',
 94 | 
 95 | 					error: '#DF3333',
 96 | 					'error-content': '#DF3333',
 97 | 
 98 | 					'.contrast': {
 99 | 						'background-color': '#1A1A1A',
100 | 						color: '#fff',
101 | 						'border-color': '#242424'
102 | 					},
103 | 					'.btn-primary': {
104 | 						'border-color': '#5F1DCC',
105 | 						'background-color': '#000'
106 | 					},
107 | 					'.btn-primary:hover': {
108 | 						'border-color': '#5F1DCC',
109 | 						'background-color': '#853BFF'
110 | 					},
111 | 					'.button[disabled]': {
112 | 						'border-color': '#3c3c3c',
113 | 						'background-color': '#3c3c3c',
114 | 						color: '#838383'
115 | 					}
116 | 				}
117 | 			}
118 | 		]
119 | 	}
120 | };
121 | 


--------------------------------------------------------------------------------
/src/lib/stores.ts:
--------------------------------------------------------------------------------
 1 | import { get, writable } from 'svelte/store';
 2 | import { HighlightingPreference, PluginStatus, StoreName, ThemePreference } from '$lib/types';
 3 | 
 4 | const getStore = <T>(name: StoreName, defaultValue: T) => {
 5 | 	const store = writable<T>(defaultValue);
 6 | 	const customStore = {
 7 | 		set: (value: T) => {
 8 | 			store.set(value);
 9 | 			chrome.storage.local.set({ [name]: value }).catch(console.error);
10 | 		},
11 | 		update: (cb: (value: T) => T) => {
12 | 			const newVal = cb(get(store));
13 | 			store.set(newVal);
14 | 			chrome.storage.local.set({ [name]: newVal }).catch(console.error);
15 | 		},
16 | 		subscribe: store.subscribe
17 | 	};
18 | 
19 | 	return customStore;
20 | };
21 | 
22 | export const excludedSites = getStore(StoreName.excludedSites, [] as string[]);
23 | export const includedSites = getStore(StoreName.includedSites, [] as string[]);
24 | export const highlightingPreference = getStore(
25 | 	StoreName.highlightingPreference,
26 | 	HighlightingPreference.all
27 | );
28 | export const theme = getStore(StoreName.theme, ThemePreference.Dark);
29 | export const pluginStatus = getStore(StoreName.pluginStatus, PluginStatus.Active);
30 | export const userId = getStore(StoreName.userId, '');
31 | export const siteInfo = getStore(StoreName.siteInfo, [] as string[]);
32 | export const statsData = getStore(StoreName.statsData, '{}');
33 | 
34 | const storeConfig = [
35 | 	{ name: StoreName.excludedSites, store: excludedSites, defaultValue: [] as string[] },
36 | 	{ name: StoreName.includedSites, store: includedSites, defaultValue: [] as string[] },
37 | 	{
38 | 		name: StoreName.highlightingPreference,
39 | 		store: highlightingPreference,
40 | 		defaultValue: HighlightingPreference.all
41 | 	},
42 | 	{ name: StoreName.theme, store: theme, defaultValue: ThemePreference.Light },
43 | 	{ name: StoreName.pluginStatus, store: pluginStatus, defaultValue: PluginStatus.Active },
44 | 	{ name: StoreName.userId, store: userId, defaultValue: '' },
45 | 	{ name: StoreName.siteInfo, store: siteInfo, defaultValue: [] as string[] },
46 | 	{ name: StoreName.statsData, store: statsData, defaultValue: '{}' }
47 | ];
48 | 
49 | export const loadStores = async () => {
50 | 	for (const { name, store, defaultValue } of storeConfig) {
51 | 		const entry = await chrome.storage.local.get(name);
52 | 		const value = entry[name] !== undefined ? entry[name] : defaultValue;
53 | 		store.set(value);
54 | 	}
55 | };
56 | 
57 | export const getStoreValueFromLocalStorage = async (
58 | 	storeName: StoreName,
59 | 	defaultValue: unknown
60 | ): Promise<unknown> => {
61 | 	const entry = await chrome.storage.local.get(storeName);
62 | 	const value: unknown = entry[storeName] !== undefined ? entry[storeName] : undefined;
63 | 	const storeConfigEntry = storeConfig.find(({ name }) => storeName === name);
64 | 	if (storeConfigEntry === undefined) {
65 | 		throw Error('Store not found in local storage');
66 | 	}
67 | 	storeConfigEntry.store.set(value);
68 | 	return value ?? defaultValue;
69 | };
70 | 
71 | export const setStoreValueToLocalStorage = async (
72 | 	storeName: StoreName,
73 | 	value: unknown
74 | ): Promise<boolean> => {
75 | 	const storeConfigEntry = storeConfig.find(({ name }) => storeName === name);
76 | 	if (storeConfigEntry === undefined) {
77 | 		throw Error('Store not found in local storage');
78 | 	}
79 | 	storeConfigEntry.store.set(value);
80 | 	try {
81 | 		await chrome.storage.local.set({ [storeName]: value });
82 | 		return true;
83 | 	} catch (err) {
84 | 		console.error(err);
85 | 		return false;
86 | 	}
87 | };
88 | 


--------------------------------------------------------------------------------
/src/lib/assets/gear.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <g id="Frame">
3 | <path id="Vector" d="M11.9997 7.49998C11.1097 7.49998 10.2396 7.7639 9.49962 8.25837C8.7596 8.75284 8.18283 9.45564 7.84223 10.2779C7.50164 11.1002 7.41252 12.005 7.58616 12.8779C7.75979 13.7508 8.18837 14.5526 8.81771 15.182C9.44705 15.8113 10.2489 16.2399 11.1218 16.4135C11.9947 16.5871 12.8995 16.498 13.7218 16.1574C14.544 15.8168 15.2468 15.2401 15.7413 14.5C16.2358 13.76 16.4997 12.89 16.4997 12C16.4984 10.8069 16.0239 9.66302 15.1803 8.81937C14.3367 7.97573 13.1928 7.50122 11.9997 7.49998ZM11.9997 15C11.4063 15 10.8263 14.824 10.333 14.4944C9.83963 14.1647 9.45511 13.6962 9.22805 13.148C9.00099 12.5999 8.94158 11.9967 9.05733 11.4147C9.17309 10.8328 9.45881 10.2982 9.87837 9.87866C10.2979 9.4591 10.8325 9.17338 11.4144 9.05763C11.9964 8.94187 12.5996 9.00128 13.1477 9.22834C13.6959 9.45541 14.1645 9.83992 14.4941 10.3333C14.8237 10.8266 14.9997 11.4066 14.9997 12C14.9997 12.7956 14.6836 13.5587 14.121 14.1213C13.5584 14.6839 12.7953 15 11.9997 15ZM22.3066 10.0509C22.2857 9.94531 22.2423 9.84543 22.1794 9.75807C22.1164 9.67072 22.0354 9.59793 21.9419 9.54467L19.1453 7.95092L19.1341 4.79904C19.1337 4.6905 19.1098 4.58331 19.064 4.4849C19.0182 4.38649 18.9516 4.29919 18.8688 4.22904C17.8543 3.37095 16.6861 2.71336 15.4263 2.29123C15.327 2.25765 15.2219 2.24522 15.1176 2.25475C15.0133 2.26428 14.9121 2.29555 14.8206 2.34654L11.9997 3.92342L9.17594 2.34373C9.0844 2.29245 8.98311 2.26094 8.87863 2.25125C8.77414 2.24156 8.66879 2.2539 8.56938 2.28748C7.31045 2.71269 6.14359 3.37279 5.13063 4.23279C5.04791 4.30284 4.98136 4.38999 4.93556 4.48823C4.88975 4.58647 4.86579 4.69347 4.86532 4.80186L4.85125 7.95654L2.05469 9.55029C1.96113 9.60356 1.88013 9.67634 1.8172 9.7637C1.75428 9.85105 1.71089 9.95093 1.69 10.0565C1.43406 11.3427 1.43406 12.6667 1.69 13.9528C1.71089 14.0584 1.75428 14.1583 1.8172 14.2456C1.88013 14.333 1.96113 14.4058 2.05469 14.459L4.85125 16.0528L4.8625 19.2047C4.86284 19.3132 4.88674 19.4204 4.93255 19.5188C4.97835 19.6172 5.04498 19.7045 5.12782 19.7747C6.14226 20.6328 7.31046 21.2904 8.57031 21.7125C8.66953 21.7461 8.77468 21.7585 8.87899 21.749C8.98329 21.7394 9.08445 21.7082 9.17594 21.6572L11.9997 20.0765L14.8234 21.6562C14.9352 21.7185 15.0611 21.7508 15.1891 21.75C15.271 21.75 15.3523 21.7367 15.43 21.7106C16.6888 21.286 17.8556 20.6265 18.8688 19.7672C18.9515 19.6971 19.018 19.61 19.0638 19.5117C19.1096 19.4135 19.1336 19.3065 19.1341 19.1981L19.1481 16.0434L21.9447 14.4497C22.0383 14.3964 22.1192 14.3236 22.1822 14.2363C22.2451 14.1489 22.2885 14.049 22.3094 13.9434C22.5639 12.6583 22.5629 11.3357 22.3066 10.0509ZM20.9003 13.3237L18.2219 14.8472C18.1045 14.9139 18.0074 15.0111 17.9406 15.1284C17.8863 15.2222 17.8291 15.3215 17.7709 15.4153C17.6965 15.5335 17.6569 15.6703 17.6566 15.81L17.6425 18.8334C16.9226 19.3988 16.1205 19.8509 15.2641 20.174L12.5622 18.6684C12.45 18.6064 12.3238 18.5741 12.1956 18.5747H12.1778C12.0644 18.5747 11.95 18.5747 11.8366 18.5747C11.7024 18.5713 11.5697 18.6037 11.4522 18.6684L8.74844 20.1778C7.89017 19.8571 7.0859 19.4072 6.36344 18.8437L6.35313 15.825C6.35266 15.685 6.31305 15.548 6.23875 15.4294C6.18063 15.3356 6.12344 15.2419 6.07 15.1425C6.00374 15.0233 5.90659 14.9242 5.78875 14.8556L3.1075 13.3284C2.96875 12.4507 2.96875 11.5567 3.1075 10.679L5.78125 9.15279C5.89861 9.08607 5.99577 8.9889 6.0625 8.87154C6.11688 8.77779 6.17407 8.67842 6.23219 8.58467C6.30659 8.46644 6.34623 8.32967 6.34656 8.18998L6.36063 5.16654C7.08056 4.60118 7.88262 4.14909 8.73907 3.82592L11.4372 5.33154C11.5546 5.39663 11.6874 5.42901 11.8216 5.42529C11.935 5.42529 12.0494 5.42529 12.1628 5.42529C12.297 5.42865 12.4296 5.39629 12.5472 5.33154L15.2509 3.82217C16.1092 4.14286 16.9135 4.59274 17.6359 5.15623L17.6463 8.17498C17.6467 8.31495 17.6863 8.45199 17.7606 8.57061C17.8188 8.66436 17.8759 8.75811 17.9294 8.85748C17.9956 8.97665 18.0928 9.07575 18.2106 9.14436L20.8919 10.6715C21.0325 11.5499 21.0341 12.4449 20.8966 13.3237H20.9003Z" fill="#7F778D"/>
4 | </g>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/components/CurrentSite.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { excludedSites, includedSites } from '$lib/stores';
  3 | 	import { onMount } from 'svelte';
  4 | 	import { MessageType } from '$lib/constants';
  5 | 	import { sendMessage } from '$lib/content/utils';
  6 | 	import type { Writable } from 'svelte/store';
  7 | 
  8 | 	let currentSite = '';
  9 | 	$: inIncludedSites = $includedSites.includes(currentSite);
 10 | 	$: inExcludedSites = $excludedSites.includes(currentSite);
 11 | 
 12 | 	const removeFromStore = (store: Writable<string[]>, valueToRemove: string) => {
 13 | 		store.update((value) => {
 14 | 			return value.filter((item) => item !== valueToRemove);
 15 | 		});
 16 | 	};
 17 | 
 18 | 	const handleInclude = async () => {
 19 | 		if (inExcludedSites) {
 20 | 			removeFromStore(excludedSites, currentSite);
 21 | 		}
 22 | 		if (inIncludedSites) {
 23 | 			return;
 24 | 		}
 25 | 		includedSites.update((values) => [...values, currentSite]);
 26 | 		await sendMessage(MessageType.RERUN_SCAN);
 27 | 	};
 28 | 
 29 | 	const handleExclude = async () => {
 30 | 		if (inIncludedSites) {
 31 | 			removeFromStore(includedSites, currentSite);
 32 | 		}
 33 | 		if (inExcludedSites) {
 34 | 			return;
 35 | 		}
 36 | 		excludedSites.update((values) => [...values, currentSite]);
 37 | 		await sendMessage(MessageType.RERUN_SCAN);
 38 | 	};
 39 | 
 40 | 	const removeFromList = async () => {
 41 | 		removeFromStore(inExcludedSites ? excludedSites : includedSites, currentSite);
 42 | 		await sendMessage(MessageType.RERUN_SCAN);
 43 | 	};
 44 | 
 45 | 	onMount(async () => {
 46 | 		const currentTab = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
 47 | 		const currentUrl = currentTab[0].url;
 48 | 		if (currentUrl !== undefined) {
 49 | 			currentSite = new URL(currentUrl).hostname;
 50 | 		}
 51 | 	});
 52 | </script>
 53 | 
 54 | <div class="current-site">
 55 | 	<span class="section-title">Current Site</span>
 56 | 	<span class="site-url text-base-100">{currentSite}</span>
 57 | 	<div class="button-group">
 58 | 		<button
 59 | 			class:btn-disabled={inIncludedSites}
 60 | 			class="button btn-primary"
 61 | 			on:click={handleInclude}
 62 | 			disabled={inIncludedSites}
 63 | 		>
 64 | 			Include this site
 65 | 		</button>
 66 | 		<button
 67 | 			class:btn-disabled={inExcludedSites}
 68 | 			class="button btn-primary"
 69 | 			on:click={handleExclude}
 70 | 			disabled={inExcludedSites}
 71 | 		>
 72 | 			Exclude this site
 73 | 		</button>
 74 | 	</div>
 75 | 	{#if inExcludedSites || inIncludedSites}
 76 | 		<span class="disclaimer">
 77 | 			This site is in the
 78 | 			{#if inIncludedSites}
 79 | 				<a href="/sites">included</a>
 80 | 			{:else if inExcludedSites}
 81 | 				<a href="/sites?excluded">excluded</a>
 82 | 			{/if}
 83 | 			list.
 84 | 			<span
 85 | 				class="text-[#DF3333] cursor-pointer"
 86 | 				on:click={removeFromList}
 87 | 				on:keypress={removeFromList}>Remove</span
 88 | 			>
 89 | 		</span>
 90 | 	{/if}
 91 | </div>
 92 | 
 93 | <style>
 94 | 	.current-site {
 95 | 		display: flex;
 96 | 		flex-direction: column;
 97 | 		margin: 0.5rem 0;
 98 | 	}
 99 | 
100 | 	.current-site > .section-title {
101 | 		font-size: 0.75rem;
102 | 		font-family: Inter;
103 | 		font-style: normal;
104 | 		font-weight: 400;
105 | 		line-height: 153%;
106 | 	}
107 | 
108 | 	.current-site > .site-url {
109 | 		font-size: 1.3125rem;
110 | 		font-family: Inter;
111 | 		font-style: normal;
112 | 		font-weight: 300;
113 | 		line-height: 153%;
114 | 		width: 18rem;
115 | 		display: inline-block;
116 | 		overflow: hidden;
117 | 		text-overflow: ellipsis;
118 | 		white-space: nowrap;
119 | 	}
120 | 
121 | 	.current-site > .button-group {
122 | 		display: flex;
123 | 		flex-direction: row;
124 | 		flex-wrap: nowrap;
125 | 		column-gap: 0.3rem;
126 | 		margin-top: 0.5rem;
127 | 	}
128 | 	.current-site > .disclaimer {
129 | 		color: #b4b4b4;
130 | 		font-size: 0.625rem;
131 | 		font-family: Inter;
132 | 		font-style: normal;
133 | 		font-weight: 400;
134 | 		line-height: 153%;
135 | 		margin-top: 0.3rem;
136 | 	}
137 | 	.current-site > .disclaimer > a {
138 | 		color: #4277ff;
139 | 		border-bottom: 0.08rem solid #4277ff;
140 | 	}
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/routes/sites/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import TopBar from '../../components/TopBar.svelte';
  3 | 	import lightBulb from '$lib/assets/light-bulb.svg';
  4 | 	import Fa from 'svelte-fa/src/fa.svelte';
  5 | 	import { faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
  6 | 	import { excludedSites, includedSites } from '$lib/stores';
  7 | 	import { page } from '$app/stores';
  8 | 	import { onMount } from 'svelte';
  9 | 	import { sendMessage } from '$lib/content/utils';
 10 | 	import { MessageType } from '$lib/constants';
 11 | 
 12 | 	enum Tab {
 13 | 		Included,
 14 | 		Excluded
 15 | 	}
 16 | 
 17 | 	let activeTab = Tab.Included;
 18 | 	const switchTab = (tab: Tab) => (activeTab = tab);
 19 | 
 20 | 	const removeFromIncluded = async (site: string) => {
 21 | 		const index = $includedSites.indexOf(site);
 22 | 		includedSites.update((value: string[]) => {
 23 | 			value.splice(index, 1);
 24 | 			return value;
 25 | 		});
 26 | 		await sendMessage(MessageType.RERUN_SCAN);
 27 | 	};
 28 | 
 29 | 	const removeFromExcluded = async (site: string) => {
 30 | 		const index = $excludedSites.indexOf(site);
 31 | 		excludedSites.update((value: string[]) => {
 32 | 			value.splice(index, 1);
 33 | 			return value;
 34 | 		});
 35 | 		await sendMessage(MessageType.RERUN_SCAN);
 36 | 	};
 37 | 
 38 | 	onMount(() => {
 39 | 		if ($page.url.searchParams.has('excluded')) {
 40 | 			activeTab = Tab.Excluded;
 41 | 		}
 42 | 	});
 43 | </script>
 44 | 
 45 | <TopBar />
 46 | <div class="px-4 py-2">
 47 | 	<span class="title mb-4 text-base-100">Sites</span>
 48 | 	<div class="tabs tabs-boxed flex justify-center">
 49 | 		<a
 50 | 			class="tab text-xs"
 51 | 			class:tab-active={activeTab === Tab.Included}
 52 | 			on:click={() => switchTab(Tab.Included)}>Included websites</a
 53 | 		>
 54 | 		<a
 55 | 			class="tab text-xs"
 56 | 			class:tab-active={activeTab === Tab.Excluded}
 57 | 			on:click={() => switchTab(Tab.Excluded)}>Excluded websites</a
 58 | 		>
 59 | 	</div>
 60 | 	<div class="flex flex-row items-center gap-3 mt-4 mb-2">
 61 | 		<img src={lightBulb} alt="light-bulb" class="h-[0.8rem] w-auto" />
 62 | 		<span class="text-sm text-base-100"
 63 | 			>What is {activeTab === Tab.Included ? 'Included' : 'Excluded'} websites</span
 64 | 		>
 65 | 	</div>
 66 | 	<span class="learn-more"
 67 | 		>The list of of websites from which wallet addresses will be highlighted when the preference is
 68 | 		set to {activeTab === Tab.Included ? 'Included sites' : 'All sites except excluded'}</span
 69 | 	>
 70 | 	{#if activeTab === Tab.Included}
 71 | 		<div class="flex flex-col">
 72 | 			{#each $includedSites as site}
 73 | 				<div class="list-item">
 74 | 					<div class="flex gap-2 items-center">
 75 | 						<Fa icon={faGlobeAsia} />
 76 | 						<span class="text-base-100">{site}</span>
 77 | 					</div>
 78 | 					<span
 79 | 						class="text-[#DF3333] cursor-pointer"
 80 | 						on:click={async () => await removeFromIncluded(site)}>Remove</span
 81 | 					>
 82 | 				</div>
 83 | 			{:else}
 84 | 				<span class="m-4 text-center">No websites in the included list so far.</span>
 85 | 			{/each}
 86 | 		</div>
 87 | 	{:else if activeTab === Tab.Excluded}
 88 | 		<div class="flex flex-col">
 89 | 			{#each $excludedSites as site}
 90 | 				<div class="list-item">
 91 | 					<div class="flex gap-2 items-center">
 92 | 						<Fa icon={faGlobeAsia} />
 93 | 						<span class="text-base-100">{site}</span>
 94 | 					</div>
 95 | 					<span
 96 | 						class="text-[#DF3333] cursor-pointer"
 97 | 						on:click={async () => await removeFromExcluded(site)}>Remove</span
 98 | 					>
 99 | 				</div>
100 | 			{:else}
101 | 				<span class="m-4 text-center">No websites in the excluded list so far.</span>
102 | 			{/each}
103 | 		</div>
104 | 	{/if}
105 | </div>
106 | 
107 | <style>
108 | 	.title {
109 | 		font-size: 1.3125rem;
110 | 		font-family: Inter;
111 | 		font-style: normal;
112 | 		font-weight: 400;
113 | 		line-height: normal;
114 | 		display: flex;
115 | 	}
116 | 	.learn-more {
117 | 		color: #6c6872;
118 | 		font-size: 0.56281rem;
119 | 		font-weight: 500;
120 | 	}
121 | 	.list-item {
122 | 		@apply contrast;
123 | 		display: flex;
124 | 		align-items: center;
125 | 		border-radius: 0.4375rem;
126 | 		border: 1px solid;
127 | 		padding: 0.5rem 0.8rem;
128 | 		-moz-column-gap: 0.5rem;
129 | 		column-gap: 0.5rem;
130 | 		justify-content: space-between;
131 | 	}
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/lib/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="0.5" y="0.5" width="34" height="34" rx="6.5" fill="url(#paint0_linear_404_1661)" stroke="url(#paint1_linear_404_1661)"/>
 3 | <g filter="url(#filter0_d_404_1661)">
 4 | <circle cx="18.4232" cy="19.057" r="5.28846" fill="white"/>
 5 | <path d="M21.7421 18.0669L21.7417 18.0671L19.2883 19.0481L20.7125 20.95L21.7421 18.0669ZM21.7421 18.0669C21.8412 18.0269 21.9314 17.9678 22.0076 17.8929C22.0839 17.8181 22.1446 17.7289 22.1863 17.6306C22.2281 17.5322 22.2501 17.4266 22.2511 17.3198C22.252 17.2129 22.2319 17.107 22.1919 17.0079L22.076 17.0547L22.1919 17.0079C22.1519 16.9088 22.0928 16.8186 22.0179 16.7424C21.9431 16.6661 21.8539 16.6054 21.7556 16.5637C21.6572 16.5219 21.5516 16.4999 21.4448 16.4989C21.338 16.498 21.2321 16.5181 21.1331 16.558C21.133 16.558 21.133 16.5581 21.1329 16.5581L18.8125 17.487V15.25C18.8125 15.0345 18.7269 14.8279 18.5745 14.6755C18.4221 14.5231 18.2155 14.4375 18 14.4375C17.7845 14.4375 17.5779 14.5231 17.4255 14.6755C17.2731 14.8279 17.1875 15.0345 17.1875 15.25V17.487L14.8671 16.5581C14.8671 16.5581 14.867 16.558 14.867 16.558C14.6669 16.4773 14.443 16.4793 14.2444 16.5637C14.1461 16.6054 14.0569 16.6661 13.9821 16.7424C13.9072 16.8186 13.8481 16.9088 13.8081 17.0079C13.7681 17.107 13.748 17.2129 13.7489 17.3198C13.7499 17.4266 13.7719 17.5322 13.8137 17.6306C13.898 17.8292 14.0578 17.9861 14.2579 18.0669L14.2583 18.0671L16.7141 19.0481L15.2875 20.95L15.2875 20.95C15.2235 21.0354 15.1769 21.1325 15.1504 21.2359C15.1239 21.3392 15.1181 21.4468 15.1332 21.5524C15.1483 21.658 15.184 21.7597 15.2384 21.8515C15.2927 21.9433 15.3646 22.0235 15.45 22.0875C15.5354 22.1515 15.6325 22.1981 15.7359 22.2246C15.8392 22.2511 15.9468 22.2569 16.0524 22.2418C16.158 22.2267 16.2597 22.191 16.3515 22.1366C16.4433 22.0823 16.5235 22.0104 16.5875 21.925L16.5875 21.925L18 20.0414M21.7421 18.0669L18 20.0414M18 20.0414L19.4125 21.925L19.4125 21.925C19.5418 22.0974 19.7343 22.2114 19.9476 22.2418C20.1609 22.2723 20.3776 22.2168 20.55 22.0875C20.7224 21.9582 20.8364 21.7657 20.8668 21.5524C20.8973 21.3391 20.8418 21.1225 20.7126 20.9501L18 20.0414ZM17.6108 27.4337L17.6097 27.4333C16.3122 27.0025 9.875 24.4758 9.875 16.863V11.8125C9.875 11.481 10.0067 11.163 10.2411 10.9286C10.4755 10.6942 10.7935 10.5625 11.125 10.5625H24.875C25.2065 10.5625 25.5245 10.6942 25.7589 10.9286C25.9933 11.163 26.125 11.481 26.125 11.8125V16.8622C26.125 24.4749 19.6895 27.0017 18.3903 27.4333L18.3892 27.4337C18.1369 27.52 17.8631 27.52 17.6108 27.4337Z" fill="url(#paint2_angular_404_1661)" stroke="url(#paint3_linear_404_1661)" stroke-width="0.249994"/>
 6 | </g>
 7 | <defs>
 8 | <filter id="filter0_d_404_1661" x="2.00012" y="4.25006" width="31.9998" height="31.9998" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 9 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
10 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
11 | <feOffset dy="2.24995"/>
12 | <feGaussianBlur stdDeviation="2.49994"/>
13 | <feComposite in2="hardAlpha" operator="out"/>
14 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
15 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_404_1661"/>
16 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_404_1661" result="shape"/>
17 | </filter>
18 | <linearGradient id="paint0_linear_404_1661" x1="17.5" y1="0" x2="17.5" y2="35" gradientUnits="userSpaceOnUse">
19 | <stop stop-color="#222024"/>
20 | <stop offset="1" stop-color="#100F11"/>
21 | </linearGradient>
22 | <linearGradient id="paint1_linear_404_1661" x1="17.5" y1="0" x2="17.5" y2="35" gradientUnits="userSpaceOnUse">
23 | <stop stop-color="#AF7EFF"/>
24 | <stop offset="1" stop-color="#5F1DCC"/>
25 | </linearGradient>
26 | <radialGradient id="paint2_angular_404_1661" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18 19.0305) rotate(90) scale(8.59298 8.25)">
27 | <stop stop-color="white"/>
28 | <stop offset="0.442708" stop-color="#853BFF"/>
29 | <stop offset="1" stop-color="#7F778D"/>
30 | </radialGradient>
31 | <linearGradient id="paint3_linear_404_1661" x1="18" y1="10.4375" x2="18" y2="27.6235" gradientUnits="userSpaceOnUse">
32 | <stop stop-color="white" stop-opacity="0.56"/>
33 | <stop offset="1" stop-opacity="0"/>
34 | </linearGradient>
35 | </defs>
36 | </svg>
37 | 


--------------------------------------------------------------------------------
/src/routes/risk-score/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
  3 | 	import Line from '../../components/Line.svelte';
  4 | 	import Fa from 'svelte-fa/src/fa.svelte';
  5 | 	import knowYourScoreLogo from '$lib/assets/know_your_score.svg';
  6 | 	import knowYourScoreLogoDark from '$lib/assets/know_your_score_dark.svg';
  7 | 	import { sendApiRequest, validateEmail } from '$lib/utils';
  8 | 	import { validateWallet } from '$lib/content/utils';
  9 | 	import { theme } from '$lib/stores';
 10 | 	import { ThemePreference } from '$lib/types';
 11 | 
 12 | 	let email: string = '';
 13 | 	let address: string = '';
 14 | 	let statusError = false;
 15 | 	let statusMessage: string = '';
 16 | 	let loading = false;
 17 | 
 18 | 	const status = (message: string, error: boolean = true) => {
 19 | 		statusMessage = message;
 20 | 		statusError = error;
 21 | 	};
 22 | 
 23 | 	const handleSubmit = async () => {
 24 | 		status('');
 25 | 		if (loading) {
 26 | 			return;
 27 | 		}
 28 | 		loading = true;
 29 | 
 30 | 		if (email.length === 0 || !validateEmail(email)) {
 31 | 			status('Invalid Email');
 32 | 		} else if (address.length === 0 || !validateWallet(address)) {
 33 | 			status('Invalid Wallet Address');
 34 | 		} else {
 35 | 			try {
 36 | 				await sendApiRequest(email, address);
 37 | 				status('Check your inbox for the risk score', false);
 38 | 			} catch (err) {
 39 | 				status((err as Error).message);
 40 | 			}
 41 | 		}
 42 | 		loading = false;
 43 | 	};
 44 | </script>
 45 | 
 46 | <div class="top-panel">
 47 | 	<a href="/">
 48 | 		<span class="flex back-button w-fit">
 49 | 			<Fa icon={faArrowLeft} />
 50 | 		</span>
 51 | 	</a>
 52 | </div>
 53 | <Line />
 54 | <div class="logo-section">
 55 | 	{#if $theme === ThemePreference.Dark}
 56 | 		<img src={knowYourScoreLogoDark} alt="" />
 57 | 	{:else}
 58 | 		<img src={knowYourScoreLogo} alt="" />
 59 | 	{/if}
 60 | </div>
 61 | <div class="title-section">
 62 | 	<span class="title">Know your Risk Score</span>
 63 | 	<span class="message">
 64 | 		Getting your score is easy. Just enter your wallet address and email
 65 | 	</span>
 66 | </div>
 67 | <Line />
 68 | <div class="form-section">
 69 | 	<div class="form-item">
 70 | 		<span>Wallet Address</span>
 71 | 		<input type="text" bind:value={address} />
 72 | 	</div>
 73 | 	<div class="form-item">
 74 | 		<span>Email</span>
 75 | 		<input type="text" bind:value={email} />
 76 | 	</div>
 77 | 	<button class="button btn-primary btn-wide" on:click={async () => await handleSubmit()}>
 78 | 		{#if loading}
 79 | 			<span class="loading loading-spinner" />
 80 | 		{/if}
 81 | 		Submit</button
 82 | 	>
 83 | 	<div class="form-item">
 84 | 		<span class="status" class:text-success={!statusError} class:text-error={statusError}
 85 | 			>{statusMessage}</span
 86 | 		>
 87 | 	</div>
 88 | </div>
 89 | 
 90 | <style>
 91 | 	.text-error {
 92 | 		@apply text-[#FF7B69];
 93 | 	}
 94 | 	.text-success {
 95 | 		@apply text-[#28CF6B];
 96 | 	}
 97 | 	.top-panel {
 98 | 		width: 100%;
 99 | 		height: auto;
100 | 		padding: 0.5rem 0.3rem 0.8rem;
101 | 	}
102 | 	.logo-section {
103 | 		display: flex;
104 | 		justify-content: center;
105 | 		margin: 0.2rem 0 1rem;
106 | 	}
107 | 	.back-button {
108 | 		background: #efefef;
109 | 		border-radius: 50%;
110 | 		padding: 0.3rem 0.4rem;
111 | 		font-size: 0.9rem;
112 | 		cursor: pointer;
113 | 	}
114 | 
115 | 	.risk-score-icon {
116 | 		background-image: url(../assets/know_your_score.svg);
117 | 	}
118 | 
119 | 	.title-section {
120 | 		display: flex;
121 | 		flex-direction: column;
122 | 	}
123 | 
124 | 	.title-section > .title {
125 | 		text-align: center;
126 | 		font-size: 1rem;
127 | 		font-family: Inter;
128 | 		font-style: normal;
129 | 		font-weight: 600;
130 | 		line-height: 98.1%;
131 | 		letter-spacing: -0.01875rem;
132 | 	}
133 | 
134 | 	.title-section > .message {
135 | 		text-align: center;
136 | 		padding: 0 3rem;
137 | 		margin: 1rem 0 1rem;
138 | 	}
139 | 
140 | 	.form-section {
141 | 		display: flex;
142 | 		flex-direction: column;
143 | 		align-items: center;
144 | 		row-gap: 1rem;
145 | 		margin-top: 1rem;
146 | 	}
147 | 
148 | 	.form-section > .form-item {
149 | 		display: flex;
150 | 		flex-direction: column;
151 | 	}
152 | 
153 | 	.form-section > .form-item > span {
154 | 		font-size: 0.66281rem;
155 | 		font-family: Inter;
156 | 		font-style: normal;
157 | 		font-weight: 500;
158 | 		line-height: 160%;
159 | 	}
160 | 
161 | 	.form-section > .form-item > input {
162 | 		border-radius: 0.5625rem;
163 | 		border: 0.5px solid #9b9b9b;
164 | 		background: rgba(217, 217, 217, 0.04);
165 | 		height: 2rem;
166 | 		width: 16rem;
167 | 		padding: 0.2rem 0.5rem;
168 | 	}
169 | 
170 | 	.form-section > .form-item > span.status {
171 | 		word-break: break-word;
172 | 		padding: 0 4rem;
173 | 	}
174 | </style>
175 | 


--------------------------------------------------------------------------------
/src/components/HighlightingPreferences.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { MessageType } from '$lib/constants';
  3 | 	import { sendMessage } from '$lib/content/utils';
  4 | 	import { highlightingPreference } from '$lib/stores';
  5 | 	import { HighlightingPreference } from '$lib/types';
  6 | 	import { faXmark } from '@fortawesome/free-solid-svg-icons';
  7 | 	import { onMount } from 'svelte';
  8 | 	import Fa from 'svelte-fa/src/fa.svelte';
  9 | 
 10 | 	let preference: HighlightingPreference;
 11 | 
 12 | 	let modal: HTMLDialogElement;
 13 | 
 14 | 	const updatePreference = async () => {
 15 | 		highlightingPreference.set(preference);
 16 | 		await sendMessage(MessageType.RERUN_SCAN);
 17 | 	};
 18 | 
 19 | 	highlightingPreference.subscribe((value) => {
 20 | 		preference = value;
 21 | 	});
 22 | 
 23 | 	onMount(() => {
 24 | 		preference = $highlightingPreference;
 25 | 	});
 26 | </script>
 27 | 
 28 | <div class="preferences">
 29 | 	<span class="section-title">Highlighting Preference</span>
 30 | 	<div class="sub-section">
 31 | 		<span class="preference-title bg-base-300 text-base-100"
 32 | 			>{preference == HighlightingPreference.all
 33 | 				? 'All Sites except excluded'
 34 | 				: 'Only Included Sites'}</span
 35 | 		>
 36 | 		<span class="change" on:click={() => modal.showModal()} on:keydown={() => modal.showModal()}>
 37 | 			Change
 38 | 		</span>
 39 | 	</div>
 40 | 	<dialog bind:this={modal} class="bg-neutral text-base-100">
 41 | 		<div class="preferences-modal">
 42 | 			<div class="modal-header">
 43 | 				<div>
 44 | 					<span class="modal-title">Highlighting Preference</span>
 45 | 					<span class="modal-subtitle">Select which sites you want to highlight</span>
 46 | 				</div>
 47 | 				<span on:click={() => modal.close()} on:keydown={() => modal.close()}>
 48 | 					<Fa icon={faXmark} />
 49 | 				</span>
 50 | 			</div>
 51 | 
 52 | 			<div class="modal-body">
 53 | 				<label>
 54 | 					All sites except excluded
 55 | 					<input
 56 | 						type="radio"
 57 | 						name="radio-1"
 58 | 						class="radio radio-xs checked:bg-blue-500"
 59 | 						bind:group={preference}
 60 | 						on:change={async () => await updatePreference()}
 61 | 						value={HighlightingPreference.all}
 62 | 					/>
 63 | 				</label>
 64 | 				<label>
 65 | 					Only Included sites
 66 | 					<input
 67 | 						type="radio"
 68 | 						name="radio-1"
 69 | 						class="radio radio-xs checked:bg-blue-500"
 70 | 						bind:group={preference}
 71 | 						on:change={async () => await updatePreference()}
 72 | 						value={HighlightingPreference.included}
 73 | 					/>
 74 | 				</label>
 75 | 			</div>
 76 | 		</div>
 77 | 	</dialog>
 78 | </div>
 79 | 
 80 | <style>
 81 | 	dialog {
 82 | 		width: 65vw;
 83 | 		border: none;
 84 | 		border-radius: 0.5rem;
 85 | 	}
 86 | 	.preferences {
 87 | 		margin: 0.8rem 0;
 88 | 	}
 89 | 
 90 | 	.preferences > .section-title {
 91 | 		font-size: 0.75rem;
 92 | 		font-family: Inter;
 93 | 		font-style: normal;
 94 | 		font-weight: 400;
 95 | 	}
 96 | 
 97 | 	.preferences > .sub-section {
 98 | 		display: flex;
 99 | 		flex-direction: row;
100 | 		column-gap: 0.75rem;
101 | 		align-items: center;
102 | 		margin-top: 0.3rem;
103 | 	}
104 | 
105 | 	.preferences > .sub-section > .preference-title {
106 | 		display: flex;
107 | 		flex-direction: column;
108 | 		font-size: 0.625rem;
109 | 		font-weight: 500;
110 | 		line-height: 153%;
111 | 		border-radius: 0.375rem;
112 | 		border: 1px solid #d9d9d9;
113 | 		box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.08);
114 | 		flex-shrink: 0;
115 | 		justify-content: center;
116 | 		align-items: center;
117 | 		padding: 0.3rem 0.6rem;
118 | 	}
119 | 
120 | 	.preferences > .sub-section > .change {
121 | 		color: #4277ff;
122 | 		font-size: 0.625rem;
123 | 		font-family: Inter;
124 | 		font-style: normal;
125 | 		font-weight: 600;
126 | 		line-height: 153%;
127 | 		cursor: pointer;
128 | 	}
129 | 	.preferences-modal > .modal-header {
130 | 		display: flex;
131 | 		flex-direction: row;
132 | 		justify-content: space-between;
133 | 	}
134 | 
135 | 	.preferences-modal > .modal-header > div {
136 | 		display: flex;
137 | 		flex-direction: column;
138 | 	}
139 | 
140 | 	.preferences-modal > .modal-header > div > .modal-title {
141 | 		leading-trim: both;
142 | 		text-edge: cap;
143 | 		font-size: 0.625rem;
144 | 		font-family: Inter;
145 | 		font-style: normal;
146 | 		font-weight: 600;
147 | 		line-height: 153%;
148 | 	}
149 | 
150 | 	.preferences-modal > .modal-header > div > .modal-subtitle {
151 | 		color: #6c6872;
152 | 		font-size: 0.6rem;
153 | 		font-family: Inter;
154 | 		font-style: normal;
155 | 		font-weight: 400;
156 | 		line-height: 160%;
157 | 	}
158 | 	.preferences-modal > .modal-header > span {
159 | 		height: fit-content;
160 | 		border-radius: 50%;
161 | 		cursor: pointer;
162 | 		font-size: 0.7rem;
163 | 	}
164 | 
165 | 	.preferences-modal > .modal-body {
166 | 		display: flex;
167 | 		flex-direction: column;
168 | 		margin-top: 0.5rem;
169 | 	}
170 | 	.preferences-modal > .modal-body > label {
171 | 		display: flex;
172 | 		flex-direction: row;
173 | 		justify-content: space-between;
174 | 		align-items: center;
175 | 		margin: 0.5rem 0;
176 | 		font-size: 0.6rem;
177 | 	}
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/lib/content/utils.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 | 	HIGH_RISK_COLOR,
  3 | 	LOW_RISK_COLOR,
  4 | 	MED_RISK_COLOR,
  5 | 	RISK_API_URL,
  6 | 	MessageType
  7 | } from '$lib/constants';
  8 | import WAValidator from 'trezor-address-validator';
  9 | import { isAddress as isIotaAddress } from '@iota/validators';
 10 | import {
 11 | 	StoreName,
 12 | 	type RiskApiResponse,
 13 | 	type RiskCounter,
 14 | 	type RiskDetailsMapping
 15 | } from '$lib/types';
 16 | import { getStoreValueFromLocalStorage } from '$lib/stores';
 17 | import { Message } from '$lib/models/message';
 18 | // window.Buffer = {};
 19 | const coins = [
 20 | 	// "AUR",
 21 | 	// "BKX",
 22 | 	// "BVC",
 23 | 	// "BIO",
 24 | 	'BTC',
 25 | 	'BCH',
 26 | 	// "BTG",
 27 | 	// "BTCP",
 28 | 	// "BTCZ",
 29 | 	// "CLO",
 30 | 	// "DASH",
 31 | 	// "DCR",
 32 | 	// "DGB",
 33 | 	'DOGE',
 34 | 	'ETH',
 35 | 	// "ETC",
 36 | 	// "ETZ",
 37 | 	// "FRC",
 38 | 	// "GRLC",
 39 | 	// "HUSH",
 40 | 	// "KMD",
 41 | 	'LTC',
 42 | 	// "MEC",
 43 | 	'XMR',
 44 | 	'NMC',
 45 | 	// "NANO",
 46 | 	// "NEO",
 47 | 	// "GAS",
 48 | 	'PPC',
 49 | 	// "XPM",
 50 | 	// "PTS",
 51 | 	// "QTUM",
 52 | 	// "XRB",
 53 | 	// "XRP",
 54 | 	// "SNG",
 55 | 	// "VTC",
 56 | 	// "VOT",
 57 | 	// "ZEC",
 58 | 	// "ZCL",
 59 | 	// "ZEN",
 60 | 	'XTZ'
 61 | ];
 62 | 
 63 | export const validateWallet = (wallet: string): boolean => {
 64 | 	if (!wallet) {
 65 | 		return false;
 66 | 	}
 67 | 
 68 | 	if (isValidIotaAddress(wallet)) {
 69 | 		return true;
 70 | 	}
 71 | 
 72 | 	return (
 73 | 		WAValidator.validate(wallet.trim()) ||
 74 | 		coins.some((coin) => WAValidator.validate(wallet.trim(), coin))
 75 | 	);
 76 | };
 77 | 
 78 | const isValidIotaAddress = (address: string) =>
 79 | 	isIotaAddress(address) || new RegExp('^(iota1|iot1|io1)[a-zA-Z0-9]{25,}').test(address);
 80 | 
 81 | export async function* getRiskDetails(
 82 | 	wallets: string[]
 83 | ): AsyncGenerator<RiskDetailsMapping, void, undefined> {
 84 | 	const domainHashed = await getDomainHashed();
 85 | 
 86 | 	for (let i = 0; i < wallets.length; i += 100) {
 87 | 		const walletsSlice = wallets.slice(i, i + 100);
 88 | 		const apiRespose = await getRiskDetailsFromApi(domainHashed, walletsSlice);
 89 | 		if (!apiRespose) {
 90 | 			continue;
 91 | 		}
 92 | 		const result: RiskDetailsMapping = {};
 93 | 		Object.keys(apiRespose.colors).forEach((wallet) => {
 94 | 			const color = apiRespose.colors[wallet];
 95 | 			const detail = apiRespose.details[wallet];
 96 | 
 97 | 			if (color != null && detail != null) {
 98 | 				result[wallet] = {
 99 | 					color,
100 | 					detail
101 | 				};
102 | 			} else {
103 | 				result[wallet] = null;
104 | 			}
105 | 		});
106 | 		yield result;
107 | 	}
108 | }
109 | 
110 | const getDomainHashed = async () => {
111 | 	const domain = window.location.origin;
112 | 	const encoder = new TextEncoder();
113 | 
114 | 	const domainUint8 = encoder.encode(domain); // encode as (utf-8) Uint8Array
115 | 	const hashBuffer = await crypto.subtle.digest('SHA-256', domainUint8); // hash the message
116 | 	const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
117 | 	const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
118 | 	return hashHex;
119 | };
120 | 
121 | const getRiskDetailsFromApi = async (domainHash: string, wallets: string[]) => {
122 | 	if (!domainHash || !wallets || !wallets.length) {
123 | 		return null;
124 | 	}
125 | 
126 | 	try {
127 | 		const siteUrl = window.location.href;
128 | 		const userID = await getUserId();
129 | 		if (userID === undefined) {
130 | 			throw Error('userID cannot be undefined');
131 | 		}
132 | 		const response = await fetch(RISK_API_URL, {
133 | 			method: 'POST',
134 | 			body: JSON.stringify({ domainHash, wallets, siteUrl, userID }),
135 | 			headers: {
136 | 				'Content-Type': 'application/json'
137 | 			}
138 | 		});
139 | 		return (await response.json()) as RiskApiResponse;
140 | 	} catch (e) {
141 | 		console.error('Error getting colors', e);
142 | 	}
143 | 	return null;
144 | };
145 | 
146 | export const populateRiskCount = (highlightColor: string, riskLevelCount: RiskCounter) => {
147 | 	switch (highlightColor) {
148 | 		case HIGH_RISK_COLOR:
149 | 			riskLevelCount.high += 1;
150 | 			break;
151 | 		case MED_RISK_COLOR:
152 | 			riskLevelCount.medium += 1;
153 | 			break;
154 | 		case LOW_RISK_COLOR:
155 | 			riskLevelCount.low += 1;
156 | 			break;
157 | 		default:
158 | 			break;
159 | 	}
160 | 	return riskLevelCount;
161 | };
162 | 
163 | export const clearCounter = (riskLevelCount: RiskCounter) => {
164 | 	riskLevelCount = { high: 0, medium: 0, low: 0 };
165 | 	return riskLevelCount;
166 | };
167 | 
168 | const getNewUserId = (): string => {
169 | 	const randomPool = new Uint8Array(32);
170 | 	crypto.getRandomValues(randomPool);
171 | 	let hex = '';
172 | 	for (let i = 0; i < randomPool.length; ++i) {
173 | 		hex += randomPool[i].toString(16);
174 | 	}
175 | 	return hex;
176 | };
177 | 
178 | export const getUserId = async (): Promise<string> => {
179 | 	const stored = (await getStoreValueFromLocalStorage(StoreName.userId, getNewUserId())) as string;
180 | 	if (stored === undefined || stored.length === 0) {
181 | 		return getNewUserId();
182 | 	}
183 | 	return stored;
184 | };
185 | 
186 | export const sendMessage = async (type: MessageType) => {
187 | 	const tabs = await chrome.tabs.query({ currentWindow: true, active: true });
188 | 	const activeTab = tabs[0];
189 | 
190 | 	if (!activeTab.id) throw Error('INVALID TAB');
191 | 	const message = new Message(type);
192 | 	const res = await chrome.tabs.sendMessage(activeTab.id, message.serialize());
193 | 	return res?.value;
194 | };
195 | 


--------------------------------------------------------------------------------
/src/lib/service/SiteManagerService.ts:
--------------------------------------------------------------------------------
  1 | import { Site } from '$lib/models/site';
  2 | import { StatsData } from '$lib/models/statsData';
  3 | import { StoreName, type RiskCounter } from '$lib/types';
  4 | import { getStoreValueFromLocalStorage, setStoreValueToLocalStorage } from '$lib/stores';
  5 | 
  6 | export abstract class SiteManagerService {
  7 | 	private static siteData: { [url: string]: Site } = {};
  8 | 	public static total = 0;
  9 | 	public static totalHighPercent = 0.0;
 10 | 	public static totalMedPercent = 0.0;
 11 | 	static excluded_list: string[];
 12 | 	static highlight_list: string[];
 13 | 
 14 | 	public static async addSite(
 15 | 		siteId: string,
 16 | 		siteUrl: string,
 17 | 		isExcluded: boolean,
 18 | 		riskLevelCount: RiskCounter
 19 | 	) {
 20 | 		siteUrl = this.processURL(siteUrl);
 21 | 		const allSites = await this.load();
 22 | 		this.populateList(allSites.value);
 23 | 		const tmpSite = new Site(siteId, siteUrl, isExcluded);
 24 | 		tmpSite.populateRisk(riskLevelCount);
 25 | 		this.siteData[siteUrl] = tmpSite;
 26 | 		this.save();
 27 | 		return Promise.resolve({ value: this.getAllSitesFromSiteData() });
 28 | 	}
 29 | 
 30 | 	static processURL(siteUrl: string): string {
 31 | 		const url = new URL(siteUrl);
 32 | 		return url.hostname;
 33 | 	}
 34 | 
 35 | 	public static async deleteSite(siteURL: string): Promise<void | Promise<any>> {
 36 | 		const allSites = await this.load();
 37 | 		this.populateList(allSites.value);
 38 | 		delete this.siteData[siteURL];
 39 | 		this.save();
 40 | 		return Promise.resolve({ value: this.getAllSitesFromSiteData() });
 41 | 	}
 42 | 
 43 | 	public static async updateSite(
 44 | 		siteURL: string,
 45 | 		riskLevelCount: RiskCounter
 46 | 	): Promise<void | Promise<any>> {
 47 | 		siteURL = this.processURL(siteURL);
 48 | 		const allSites = await this.load();
 49 | 		this.populateList(allSites.value);
 50 | 		if (siteURL in this.siteData) {
 51 | 			const tmpSite = this.siteData[siteURL];
 52 | 			if (this.checkForChange(riskLevelCount, tmpSite)) {
 53 | 				tmpSite.populateRisk(riskLevelCount);
 54 | 				this.siteData[siteURL] = tmpSite;
 55 | 				this.save();
 56 | 			}
 57 | 		}
 58 | 		return Promise.resolve({ value: this.getAllSitesFromSiteData() });
 59 | 	}
 60 | 	static checkForChange(riskLevelCount: RiskCounter, tmpSite: Site) {
 61 | 		if (
 62 | 			riskLevelCount.high !== tmpSite.highRiskCount ||
 63 | 			riskLevelCount.medium !== tmpSite.moderateRiskCount ||
 64 | 			riskLevelCount.low !== tmpSite.lowRiskCount
 65 | 		) {
 66 | 			return true;
 67 | 		} else {
 68 | 			return false;
 69 | 		}
 70 | 	}
 71 | 
 72 | 	private static getAllSitesFromSiteData(): any {
 73 | 		const allSites: Site[] = [];
 74 | 		for (const key in SiteManagerService.siteData) {
 75 | 			const value: Site = SiteManagerService.siteData[key];
 76 | 			allSites.push(value);
 77 | 		}
 78 | 		return allSites;
 79 | 	}
 80 | 
 81 | 	private static async save(): Promise<boolean> {
 82 | 		const serializedData: string[] = [];
 83 | 		if (SiteManagerService.siteData != null) {
 84 | 			for (const key in SiteManagerService.siteData) {
 85 | 				const value: Site = SiteManagerService.siteData[key];
 86 | 				serializedData.push(value.serialize());
 87 | 			}
 88 | 			return setStoreValueToLocalStorage(StoreName.siteInfo, serializedData);
 89 | 		} else {
 90 | 			console.error('Save called for null data');
 91 | 		}
 92 | 		return false;
 93 | 	}
 94 | 
 95 | 	public static async load() {
 96 | 		const serializedData: string[] = (await getStoreValueFromLocalStorage(
 97 | 			StoreName.siteInfo,
 98 | 			[]
 99 | 		)) as string[];
100 | 		const allSites: Site[] = [];
101 | 		for (let i = 0; i < serializedData.length; i++) {
102 | 			const siteData: Site = Site.fromSerialized(serializedData[i] ?? '{}');
103 | 			allSites.push(siteData);
104 | 		}
105 | 		return Promise.resolve({ value: allSites });
106 | 	}
107 | 
108 | 	private static populateList(allSites: Site[]) {
109 | 		const tmpSiteData: { [siteId: string]: Site } = {};
110 | 		const tmpHighlight_list: string[] = [];
111 | 		const tmpExcluded_list: string[] = [];
112 | 		allSites.forEach((site) => {
113 | 			tmpSiteData[site.siteURL] = site;
114 | 			if (site.isExcluded) {
115 | 				tmpHighlight_list.push(site.siteURL);
116 | 			} else {
117 | 				tmpExcluded_list.push(site.siteURL);
118 | 			}
119 | 		});
120 | 		this.siteData = tmpSiteData;
121 | 		this.excluded_list = tmpExcluded_list;
122 | 		this.highlight_list = tmpHighlight_list;
123 | 	}
124 | 
125 | 	public static getStats(rawStats: string) {
126 | 		const stats: StatsData = StatsData.fromSerialized(rawStats);
127 | 		const total = stats.totalHighlighted;
128 | 		const high = stats.totalHighRisk;
129 | 		const med = stats.totalModerateRisk;
130 | 
131 | 		return {
132 | 			totalCount: total,
133 | 			highPercent: total === 0 ? 0 : ((high / total) * 100).toFixed(0),
134 | 			medPercent: total === 0 ? 0 : ((med / total) * 100).toFixed(0)
135 | 		};
136 | 	}
137 | 
138 | 	public static getSiteByUrl(url: string, allSites: Site[]): Site | undefined {
139 | 		this.populateList(allSites);
140 | 		if (url in this.siteData) {
141 | 			return this.siteData[url];
142 | 		}
143 | 		return undefined;
144 | 	}
145 | 
146 | 	public static async updateStats(riskLevelCount: RiskCounter) {
147 | 		if (!(riskLevelCount.high === 0 && riskLevelCount.medium === 0 && riskLevelCount.low === 0)) {
148 | 			const serializedData: string = (await getStoreValueFromLocalStorage(
149 | 				StoreName.statsData,
150 | 				'{}'
151 | 			)) as string;
152 | 			const stats: StatsData = StatsData.fromSerialized(serializedData);
153 | 			stats.updateStatsCount(riskLevelCount);
154 | 			await setStoreValueToLocalStorage(StoreName.statsData, stats.serialize());
155 | 		}
156 | 	}
157 | 
158 | 	static checkIfDefaultExcluded(currentSite: string): boolean {
159 | 		return [
160 | 			'https://api.wallethighlighter.com',
161 | 		].includes(currentSite);
162 | 	}
163 | }
164 | 


--------------------------------------------------------------------------------
/src/lib/content/content.styles.css:
--------------------------------------------------------------------------------
  1 | .whe-view-details {
  2 | 	position: absolute;
  3 | 	display: block;
  4 | 	width: max-content;
  5 | 	height: max-content;
  6 | 	padding-right: 20px;
  7 | 	transform: translateY(-6px);
  8 | 	z-index: 9999;
  9 | 	cursor: pointer;
 10 | }
 11 | 
 12 | .whe-highlighted {
 13 | 	border-radius: 4px;
 14 | }
 15 | 
 16 | .whe-details-button {
 17 | 	background-color: white;
 18 | 	color: gray;
 19 | 	text-decoration: none;
 20 | 	border-radius: 15px;
 21 | 	height: auto;
 22 | 	max-height: 22px;
 23 | 
 24 | 	display: inline-flex;
 25 | 	align-items: center;
 26 | 
 27 | 	overflow: hidden;
 28 | 	width: auto;
 29 | 	max-width: 22px;
 30 | 	-webkit-transition: all 0.5s;
 31 | 	transition: all 0.5s ease;
 32 | 
 33 | 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 34 | }
 35 | 
 36 | .whe-details-icon {
 37 | 	opacity: 1;
 38 | 	padding: 0px;
 39 | 	display: flex;
 40 | 	align-items: center;
 41 | 	transition: opacity 0.2s ease;
 42 | }
 43 | 
 44 | .whe-details-button:hover {
 45 | 	max-width: 400px;
 46 | 	max-height: 400px;
 47 | 	border-radius: 10px;
 48 | 	overflow-x: scroll;
 49 | 	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 50 | }
 51 | .whe-report-scam-message {
 52 | 	font-size: 0.8rem;
 53 | }
 54 | 
 55 | .whe-report-scam-button {
 56 | 	border: none;
 57 | 	background: transparent;
 58 | 	color: #4277ff;
 59 | 	border-bottom: 0.1rem solid;
 60 | 	padding: 0;
 61 | 	line-height: 1.1rem;
 62 | 	font-size: 0.8rem;
 63 | }
 64 | 
 65 | .whe-details-button:hover .whe-details-icon {
 66 | 	opacity: 0;
 67 | }
 68 | 
 69 | .whe-details-button:hover .whe-details-element {
 70 | 	opacity: 1;
 71 | }
 72 | 
 73 | .whe-details-element {
 74 | 	white-space: nowrap;
 75 | 	transition: all 0.25s ease 0.25s;
 76 | 	padding: 15px 15px 15px 0px;
 77 | 	opacity: 0;
 78 | }
 79 | 
 80 | .whe-details-element td {
 81 | 	text-align: center;
 82 | 	vertical-align: middle;
 83 | 	padding: 8px;
 84 | 	font-size: 0.9em;
 85 | }
 86 | 
 87 | .whe-risk-card span:nth-of-type(2) {
 88 | 	text-align: center;
 89 | 	vertical-align: middle;
 90 | 	font-size: 1.1em;
 91 | 	font-weight: bold;
 92 | }
 93 | 
 94 | .whe-risk-card span:nth-of-type(1) {
 95 | 	font-size: 0.9em;
 96 | }
 97 | 
 98 | .whe-risk-card {
 99 | 	padding: 8px;
100 | 	display: flex;
101 | 	flex-direction: column;
102 | 	align-items: center;
103 | 	border-radius: 10px;
104 | }
105 | 
106 | .whe-badge {
107 | 	color: #77838f;
108 | 	background-color: rgba(119, 131, 143, 0.1);
109 | 	padding: 5px;
110 | 	text-align: center;
111 | 	border-radius: 10px;
112 | 	font-size: 0.9em;
113 | }
114 | 
115 | .whe-badge:hover {
116 | 	color: #fff;
117 | 	background-color: #77838f;
118 | }
119 | 
120 | .whe-risk-tags {
121 | 	padding-bottom: 5px;
122 | }
123 | 
124 | .whe-risk-tags .whe-badge {
125 | 	margin-right: 5px;
126 | }
127 | 
128 | #whe-risk-tags-container-id {
129 | 	overflow: scroll;
130 | 	padding-right: 8px;
131 | 	padding-top: 8px;
132 | 	padding-bottom: 8px;
133 | }
134 | 
135 | /*-------- toolTip ------------*/
136 | #whe-tooltip {
137 | 	opacity: 0;
138 | 	text-align: center;
139 | 	color: #fff;
140 | 	background: rgba(0, 0, 0, 0.6);
141 | 	position: absolute;
142 | 	z-index: 99999;
143 | 	padding: 15px;
144 | 	pointer-events: none;
145 | 	border-radius: 5px;
146 | 	-moz-border-radius: 5px;
147 | 	-webkit-border-radius: 5px;
148 | 	-o-border-radius: 5px;
149 | 	-ms-border-radius: 5px;
150 | 	transition: all 0.25s ease-in-out;
151 | 	-moz-transition: all 0.25s ease-in-out;
152 | 	-webkit-transition: all 0.25s ease-in-out;
153 | 	-o-transition: all 0.25s ease-in-out;
154 | 	-ms-transition: all 0.25s ease-in-out;
155 | }
156 | #whe-tooltip.whe-top {
157 | 	margin-top: 20px;
158 | }
159 | #whe-tooltip.whe-show {
160 | 	opacity: 1;
161 | 	margin-top: 10px;
162 | 	pointer-events: all;
163 | }
164 | #whe-tooltip.whe-show.whe-top {
165 | 	margin-top: 10px;
166 | }
167 | #whe-tooltip:after {
168 | 	width: 0;
169 | 	height: 0;
170 | 	border-left: 10px solid transparent;
171 | 	border-right: 10px solid transparent;
172 | 	border-top: 10px solid rgba(0, 0, 0, 0.6);
173 | 	content: '';
174 | 	position: absolute;
175 | 	left: 50%;
176 | 	bottom: -10px;
177 | 	margin-left: -10px;
178 | }
179 | #whe-tooltip.whe-top:after {
180 | 	border-top-color: transparent;
181 | 	border-bottom: 10px solid rgba(0, 0, 0, 0.6);
182 | 	top: -20px;
183 | 	bottom: auto;
184 | }
185 | #whe-tooltip.whe-left:after {
186 | 	left: 10px;
187 | 	margin: 0;
188 | }
189 | #whe-tooltip.whe-right:after {
190 | 	right: 10px;
191 | 	left: auto;
192 | 	margin: 0;
193 | }
194 | 
195 | /*----------- guage ------------*/
196 | .whe-guage-mask {
197 | 	position: relative;
198 | 	overflow: hidden;
199 | 	display: block;
200 | 	width: 50px;
201 | 	height: 25px;
202 | 	margin: 5px;
203 | }
204 | 
205 | .whe-guage-semi-circle {
206 | 	position: relative;
207 | 	display: block;
208 | 	width: 50px;
209 | 	height: 25px;
210 | 	border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
211 | }
212 | .whe-guage-semi-circle::before {
213 | 	content: '';
214 | 	position: absolute;
215 | 	bottom: 0;
216 | 	left: 50%;
217 | 	z-index: 2;
218 | 	display: block;
219 | 	width: 35px;
220 | 	height: 17.5px;
221 | 	margin-left: -17.5px;
222 | 	background: #fff;
223 | 	border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
224 | }
225 | 
226 | .whe-guage-semi-circle--mask {
227 | 	position: absolute;
228 | 	top: 0;
229 | 	left: 0;
230 | 	width: 50px;
231 | 	height: 50px;
232 | 	background: transparent;
233 | 	transform: rotate(120deg) translate3d(0, 0, 0);
234 | 	transform-origin: center center;
235 | 	backface-visibility: hidden;
236 | 	transition: all 0.3s ease-in-out;
237 | }
238 | .whe-guage-semi-circle--mask::before {
239 | 	content: '';
240 | 	position: absolute;
241 | 	top: 0;
242 | 	left: 0%;
243 | 	z-index: 2;
244 | 	display: block;
245 | 	width: 50.5px;
246 | 	height: 25.5px;
247 | 	margin: -0.5px 0 0 -0.5px;
248 | 	background: #f2f2f2;
249 | 	border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
250 | }
251 | 


--------------------------------------------------------------------------------
/static/logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    width="20"
  4 |    height="20"
  5 |    viewBox="0 0 20 20"
  6 |    fill="none"
  7 |    version="1.1"
  8 |    id="svg58"
  9 |    sodipodi:docname="Group 1261156343.svg"
 10 |    inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
 11 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 12 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 13 |    xmlns="http://www.w3.org/2000/svg"
 14 |    xmlns:svg="http://www.w3.org/2000/svg">
 15 |   <sodipodi:namedview
 16 |      id="namedview60"
 17 |      pagecolor="#ffffff"
 18 |      bordercolor="#000000"
 19 |      borderopacity="0.25"
 20 |      inkscape:showpageshadow="2"
 21 |      inkscape:pageopacity="0.0"
 22 |      inkscape:pagecheckerboard="0"
 23 |      inkscape:deskcolor="#d1d1d1"
 24 |      showgrid="false"
 25 |      inkscape:zoom="11.876857"
 26 |      inkscape:cx="32.626476"
 27 |      inkscape:cy="19.575885"
 28 |      inkscape:window-width="1269"
 29 |      inkscape:window-height="847"
 30 |      inkscape:window-x="1726"
 31 |      inkscape:window-y="101"
 32 |      inkscape:window-maximized="0"
 33 |      inkscape:current-layer="svg58" />
 34 |   <rect
 35 |      x="0.2864989"
 36 |      y="0.2864989"
 37 |      width="19.524071"
 38 |      height="19.439873"
 39 |      rx="3.7325428"
 40 |      fill="url(#paint0_linear_470_963)"
 41 |      stroke="url(#paint1_linear_470_963)"
 42 |      id="rect9"
 43 |      style="fill:url(#paint0_linear_470_963);stroke:url(#paint1_linear_470_963);stroke-width:0.572998" />
 44 |   <g
 45 |      filter="url(#filter0_d_470_963)"
 46 |      id="g15"
 47 |      transform="matrix(0.59713852,0,0,0.6319414,-0.70513562,-1.6397679)">
 48 |     <circle
 49 |        cx="18.423201"
 50 |        cy="19.056999"
 51 |        r="5.2884598"
 52 |        fill="#ffffff"
 53 |        id="circle11" />
 54 |     <path
 55 |        d="m 21.7421,18.0669 -4e-4,2e-4 -2.4534,0.981 1.4242,1.9019 z m 0,0 c 0.0991,-0.04 0.1893,-0.0991 0.2655,-0.174 0.0763,-0.0748 0.137,-0.164 0.1787,-0.2623 0.0418,-0.0984 0.0638,-0.204 0.0648,-0.3108 9e-4,-0.1069 -0.0192,-0.2128 -0.0592,-0.3119 l -0.1159,0.0468 0.1159,-0.0468 c -0.04,-0.0991 -0.0991,-0.1893 -0.174,-0.2655 -0.0748,-0.0763 -0.164,-0.137 -0.2623,-0.1787 -0.0984,-0.0418 -0.204,-0.0638 -0.3108,-0.0648 -0.1068,-9e-4 -0.2127,0.0192 -0.3117,0.0591 -10e-5,0 -10e-5,10e-5 -2e-4,10e-5 L 18.8125,17.487 V 15.25 c 0,-0.2155 -0.0856,-0.4221 -0.238,-0.5745 -0.1524,-0.1524 -0.359,-0.238 -0.5745,-0.238 -0.2155,0 -0.4221,0.0856 -0.5745,0.238 -0.1524,0.1524 -0.238,0.359 -0.238,0.5745 v 2.237 l -2.3204,-0.9289 c 0,0 -10e-5,-10e-5 -10e-5,-10e-5 -0.2001,-0.0807 -0.424,-0.0787 -0.6226,0.0057 -0.0983,0.0417 -0.1875,0.1024 -0.2623,0.1787 -0.0749,0.0762 -0.134,0.1664 -0.174,0.2655 -0.04,0.0991 -0.0601,0.205 -0.0592,0.3119 10e-4,0.1068 0.023,0.2124 0.0648,0.3108 0.0843,0.1986 0.2441,0.3555 0.4442,0.4363 l 4e-4,2e-4 2.4558,0.981 -1.4266,1.9019 v 0 c -0.064,0.0854 -0.1106,0.1825 -0.1371,0.2859 -0.0265,0.1033 -0.0323,0.2109 -0.0172,0.3165 0.0151,0.1056 0.0508,0.2073 0.1052,0.2991 0.0543,0.0918 0.1262,0.172 0.2116,0.236 0.0854,0.064 0.1825,0.1106 0.2859,0.1371 0.1033,0.0265 0.2109,0.0323 0.3165,0.0172 0.1056,-0.0151 0.2073,-0.0508 0.2991,-0.1052 0.0918,-0.0543 0.172,-0.1262 0.236,-0.2116 v 0 L 18,20.0414 M 21.7421,18.0669 18,20.0414 m 0,0 1.4125,1.8836 v 0 c 0.1293,0.1724 0.3218,0.2864 0.5351,0.3168 0.2133,0.0305 0.43,-0.025 0.6024,-0.1543 0.1724,-0.1293 0.2864,-0.3218 0.3168,-0.5351 0.0305,-0.2133 -0.025,-0.4299 -0.1542,-0.6023 z m -0.3892,7.3923 -0.0011,-4e-4 C 16.3122,27.0025 9.875,24.4758 9.875,16.863 v -5.0505 c 0,-0.3315 0.1317,-0.6495 0.3661,-0.8839 0.2344,-0.2344 0.5524,-0.3661 0.8839,-0.3661 h 13.75 c 0.3315,0 0.6495,0.1317 0.8839,0.3661 0.2344,0.2344 0.3661,0.5524 0.3661,0.8839 v 5.0497 c 0,7.6127 -6.4355,10.1395 -7.7347,10.5711 l -0.0011,4e-4 c -0.2523,0.0863 -0.5261,0.0863 -0.7784,0 z"
 56 |        fill="url(#paint2_angular_470_963)"
 57 |        stroke="url(#paint3_linear_470_963)"
 58 |        stroke-width="0.249994"
 59 |        id="path13"
 60 |        style="fill:url(#paint2_angular_470_963);stroke:url(#paint3_linear_470_963)" />
 61 |   </g>
 62 |   <defs
 63 |      id="defs56">
 64 |     <filter
 65 |        id="filter0_d_470_963"
 66 |        x="2.0001199"
 67 |        y="4.2500601"
 68 |        width="31.9998"
 69 |        height="31.9998"
 70 |        filterUnits="userSpaceOnUse"
 71 |        color-interpolation-filters="sRGB">
 72 |       <feFlood
 73 |          flood-opacity="0"
 74 |          result="BackgroundImageFix"
 75 |          id="feFlood17" />
 76 |       <feColorMatrix
 77 |          in="SourceAlpha"
 78 |          type="matrix"
 79 |          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
 80 |          result="hardAlpha"
 81 |          id="feColorMatrix19" />
 82 |       <feOffset
 83 |          dy="2.24995"
 84 |          id="feOffset21" />
 85 |       <feGaussianBlur
 86 |          stdDeviation="2.49994"
 87 |          id="feGaussianBlur23" />
 88 |       <feComposite
 89 |          in2="hardAlpha"
 90 |          operator="out"
 91 |          id="feComposite25" />
 92 |       <feColorMatrix
 93 |          type="matrix"
 94 |          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
 95 |          id="feColorMatrix27" />
 96 |       <feBlend
 97 |          mode="normal"
 98 |          in2="BackgroundImageFix"
 99 |          result="effect1_dropShadow_470_963"
100 |          id="feBlend29" />
101 |       <feBlend
102 |          mode="normal"
103 |          in="SourceGraphic"
104 |          in2="effect1_dropShadow_470_963"
105 |          result="shape"
106 |          id="feBlend31" />
107 |     </filter>
108 |     <linearGradient
109 |        id="paint0_linear_470_963"
110 |        x1="17.5"
111 |        y1="0"
112 |        x2="17.5"
113 |        y2="35"
114 |        gradientUnits="userSpaceOnUse"
115 |        gradientTransform="matrix(0.57423736,0,0,0.57176096,-6.1976711e-4,6.184293e-4)">
116 |       <stop
117 |          stop-color="#222024"
118 |          id="stop34" />
119 |       <stop
120 |          offset="1"
121 |          stop-color="#100F11"
122 |          id="stop36" />
123 |     </linearGradient>
124 |     <linearGradient
125 |        id="paint1_linear_470_963"
126 |        x1="17.5"
127 |        y1="0"
128 |        x2="17.5"
129 |        y2="35"
130 |        gradientUnits="userSpaceOnUse"
131 |        gradientTransform="matrix(0.57423736,0,0,0.57176096,-6.1976711e-4,6.184293e-4)">
132 |       <stop
133 |          stop-color="#AF7EFF"
134 |          id="stop39" />
135 |       <stop
136 |          offset="1"
137 |          stop-color="#5F1DCC"
138 |          id="stop41" />
139 |     </linearGradient>
140 |     <radialGradient
141 |        id="paint2_angular_470_963"
142 |        cx="0"
143 |        cy="0"
144 |        r="1"
145 |        gradientUnits="userSpaceOnUse"
146 |        gradientTransform="matrix(0,8.59298,-8.25,0,18,19.0305)">
147 |       <stop
148 |          stop-color="white"
149 |          id="stop44" />
150 |       <stop
151 |          offset="0.442708"
152 |          stop-color="#853BFF"
153 |          id="stop46" />
154 |       <stop
155 |          offset="1"
156 |          stop-color="#7F778D"
157 |          id="stop48" />
158 |     </radialGradient>
159 |     <linearGradient
160 |        id="paint3_linear_470_963"
161 |        x1="18"
162 |        y1="10.4375"
163 |        x2="18"
164 |        y2="27.623501"
165 |        gradientUnits="userSpaceOnUse">
166 |       <stop
167 |          stop-color="white"
168 |          stop-opacity="0.56"
169 |          id="stop51" />
170 |       <stop
171 |          offset="1"
172 |          stop-opacity="0"
173 |          id="stop53" />
174 |     </linearGradient>
175 |   </defs>
176 | </svg>
177 | 


--------------------------------------------------------------------------------
/src/lib/content/risk/main.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 | 	getRiskColor,
  3 | 	getRiskPercentage,
  4 | 	getRiskStatus,
  5 | 	roundToTwo
  6 | } from '$lib/content/risk/utils';
  7 | import type { RiskDetailItem, RiskTag } from '$lib/types';
  8 | 
  9 | export const getRiskDetailUI = (riskDetail: RiskDetailItem, reportStatus = false): string => {
 10 | 	return `
 11 |     <span class="whe-details-button">
 12 |       <div class="whe-details-icon">
 13 |         ${getIconSvg()}    
 14 |       </div>
 15 |       <div class="whe-details-element">
 16 |         ${getRiskTagContent(riskDetail.tags)}
 17 |         <div style="margin-top: 1rem">
 18 |          <span class="whe-report-scam-message">Anything fishy about this address?</span> <button id="report-scam" class="whe-report-scam-button" ${
 19 | 						reportStatus ? 'disabled' : ''
 20 | 					}>${reportStatus ? 'Already Reported' : 'Report Scam'}</button>
 21 |           <table id="whe-risk-details-table-id">
 22 |             <tr>
 23 |               <td>
 24 |                 <span class="whe-risk-card">
 25 |                   ${getIndividualRiskScoreGuage(riskDetail.combinedRisk)}
 26 |                   <span>Combined Risk</span>
 27 |                 </span>
 28 |               </td>
 29 |               <td>
 30 |                 <span class="whe-risk-card">
 31 |                   ${getIndividualRiskScoreGuage(riskDetail.fraudRisk)}
 32 |                   <span>Fraud Risk</span> 
 33 |                 </span>
 34 |               </td>
 35 |             </tr>
 36 |             <tr>
 37 |               <td>
 38 |                 <span class="whe-risk-card">
 39 |                   ${getIndividualRiskScoreGuage(riskDetail.lendingRisk)}
 40 |                   <span>Lending Risk</span> 
 41 |                 </span>
 42 |               </td>
 43 |               <td>
 44 |                 <span class="whe-risk-card">
 45 |                   ${getIndividualRiskScoreGuage(riskDetail.reputationRisk)}
 46 |                   <span>Reputation Risk</span> 
 47 |                 </span>
 48 |               </td>
 49 |             </tr>
 50 |           </table>
 51 |         </div>
 52 |       </div>
 53 |     </span>`;
 54 | };
 55 | 
 56 | const getRiskTagContent = (riskTags: RiskTag[]): string => {
 57 | 	return `
 58 |     <div id="whe-risk-tags-container-id">
 59 |       <div class="whe-risk-tags">
 60 |         ${riskTags
 61 | 					.map((rt) => {
 62 | 						return `
 63 |               <span
 64 |                 rel="whe-tooltip"
 65 |                 whe-tooltip-text="${rt.desc}"
 66 |                 class="whe-badge">
 67 |                 ${rt.tag}
 68 |               </span>`;
 69 | 					})
 70 | 					.join(' ')} 
 71 |       </div>
 72 |     </div>`;
 73 | };
 74 | 
 75 | const getIndividualRiskScoreGuage = (scoreStatus: string): string => {
 76 | 	const score = getRiskPercentage(scoreStatus) ?? 404;
 77 | 	const riskColour = getRiskColor(roundToTwo(score));
 78 | 	return `
 79 |     <div class="whe-guage-mask">
 80 |       <div class="whe-guage-semi-circle" 
 81 |           style="background :${riskColour ?? 'initial'}"></div>
 82 |       <div class="whe-guage-semi-circle--mask"
 83 |           style="transform: rotate(${(score / 100) * 180}deg) translate3d(0, 0, 0);"></div>
 84 |     </div>
 85 |     <span 
 86 |         ${riskColour ? `style="color :${riskColour}"` : ''}>
 87 |         ${getRiskStatus(score)}
 88 |     </span>`;
 89 | };
 90 | 
 91 | const getIconSvg = (): string => {
 92 | 	return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 93 | <svg
 94 |    width="20"
 95 |    height="20"
 96 |    viewBox="0 0 20 20"
 97 |    fill="none"
 98 |    version="1.1"
 99 |    id="svg58"
100 |    sodipodi:docname="Group 1261156343.svg"
101 |    inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
102 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
103 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
104 |    xmlns="http://www.w3.org/2000/svg"
105 |    xmlns:svg="http://www.w3.org/2000/svg">
106 |   <sodipodi:namedview
107 |      id="namedview60"
108 |      pagecolor="#ffffff"
109 |      bordercolor="#000000"
110 |      borderopacity="0.25"
111 |      inkscape:showpageshadow="2"
112 |      inkscape:pageopacity="0.0"
113 |      inkscape:pagecheckerboard="0"
114 |      inkscape:deskcolor="#d1d1d1"
115 |      showgrid="false"
116 |      inkscape:zoom="11.876857"
117 |      inkscape:cx="32.626476"
118 |      inkscape:cy="19.575885"
119 |      inkscape:window-width="1269"
120 |      inkscape:window-height="847"
121 |      inkscape:window-x="1726"
122 |      inkscape:window-y="101"
123 |      inkscape:window-maximized="0"
124 |      inkscape:current-layer="svg58" />
125 |   <rect
126 |      x="0.2864989"
127 |      y="0.2864989"
128 |      width="19.524071"
129 |      height="19.439873"
130 |      rx="3.7325428"
131 |      fill="url(#paint0_linear_470_963)"
132 |      stroke="url(#paint1_linear_470_963)"
133 |      id="rect9"
134 |      style="fill:url(#paint0_linear_470_963);stroke:url(#paint1_linear_470_963);stroke-width:0.572998" />
135 |   <g
136 |      filter="url(#filter0_d_470_963)"
137 |      id="g15"
138 |      transform="matrix(0.59713852,0,0,0.6319414,-0.70513562,-1.6397679)">
139 |     <circle
140 |        cx="18.423201"
141 |        cy="19.056999"
142 |        r="5.2884598"
143 |        fill="#ffffff"
144 |        id="circle11" />
145 |     <path
146 |        d="m 21.7421,18.0669 -4e-4,2e-4 -2.4534,0.981 1.4242,1.9019 z m 0,0 c 0.0991,-0.04 0.1893,-0.0991 0.2655,-0.174 0.0763,-0.0748 0.137,-0.164 0.1787,-0.2623 0.0418,-0.0984 0.0638,-0.204 0.0648,-0.3108 9e-4,-0.1069 -0.0192,-0.2128 -0.0592,-0.3119 l -0.1159,0.0468 0.1159,-0.0468 c -0.04,-0.0991 -0.0991,-0.1893 -0.174,-0.2655 -0.0748,-0.0763 -0.164,-0.137 -0.2623,-0.1787 -0.0984,-0.0418 -0.204,-0.0638 -0.3108,-0.0648 -0.1068,-9e-4 -0.2127,0.0192 -0.3117,0.0591 -10e-5,0 -10e-5,10e-5 -2e-4,10e-5 L 18.8125,17.487 V 15.25 c 0,-0.2155 -0.0856,-0.4221 -0.238,-0.5745 -0.1524,-0.1524 -0.359,-0.238 -0.5745,-0.238 -0.2155,0 -0.4221,0.0856 -0.5745,0.238 -0.1524,0.1524 -0.238,0.359 -0.238,0.5745 v 2.237 l -2.3204,-0.9289 c 0,0 -10e-5,-10e-5 -10e-5,-10e-5 -0.2001,-0.0807 -0.424,-0.0787 -0.6226,0.0057 -0.0983,0.0417 -0.1875,0.1024 -0.2623,0.1787 -0.0749,0.0762 -0.134,0.1664 -0.174,0.2655 -0.04,0.0991 -0.0601,0.205 -0.0592,0.3119 10e-4,0.1068 0.023,0.2124 0.0648,0.3108 0.0843,0.1986 0.2441,0.3555 0.4442,0.4363 l 4e-4,2e-4 2.4558,0.981 -1.4266,1.9019 v 0 c -0.064,0.0854 -0.1106,0.1825 -0.1371,0.2859 -0.0265,0.1033 -0.0323,0.2109 -0.0172,0.3165 0.0151,0.1056 0.0508,0.2073 0.1052,0.2991 0.0543,0.0918 0.1262,0.172 0.2116,0.236 0.0854,0.064 0.1825,0.1106 0.2859,0.1371 0.1033,0.0265 0.2109,0.0323 0.3165,0.0172 0.1056,-0.0151 0.2073,-0.0508 0.2991,-0.1052 0.0918,-0.0543 0.172,-0.1262 0.236,-0.2116 v 0 L 18,20.0414 M 21.7421,18.0669 18,20.0414 m 0,0 1.4125,1.8836 v 0 c 0.1293,0.1724 0.3218,0.2864 0.5351,0.3168 0.2133,0.0305 0.43,-0.025 0.6024,-0.1543 0.1724,-0.1293 0.2864,-0.3218 0.3168,-0.5351 0.0305,-0.2133 -0.025,-0.4299 -0.1542,-0.6023 z m -0.3892,7.3923 -0.0011,-4e-4 C 16.3122,27.0025 9.875,24.4758 9.875,16.863 v -5.0505 c 0,-0.3315 0.1317,-0.6495 0.3661,-0.8839 0.2344,-0.2344 0.5524,-0.3661 0.8839,-0.3661 h 13.75 c 0.3315,0 0.6495,0.1317 0.8839,0.3661 0.2344,0.2344 0.3661,0.5524 0.3661,0.8839 v 5.0497 c 0,7.6127 -6.4355,10.1395 -7.7347,10.5711 l -0.0011,4e-4 c -0.2523,0.0863 -0.5261,0.0863 -0.7784,0 z"
147 |        fill="url(#paint2_angular_470_963)"
148 |        stroke="url(#paint3_linear_470_963)"
149 |        stroke-width="0.249994"
150 |        id="path13"
151 |        style="fill:url(#paint2_angular_470_963);stroke:url(#paint3_linear_470_963)" />
152 |   </g>
153 |   <defs
154 |      id="defs56">
155 |     <filter
156 |        id="filter0_d_470_963"
157 |        x="2.0001199"
158 |        y="4.2500601"
159 |        width="31.9998"
160 |        height="31.9998"
161 |        filterUnits="userSpaceOnUse"
162 |        color-interpolation-filters="sRGB">
163 |       <feFlood
164 |          flood-opacity="0"
165 |          result="BackgroundImageFix"
166 |          id="feFlood17" />
167 |       <feColorMatrix
168 |          in="SourceAlpha"
169 |          type="matrix"
170 |          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
171 |          result="hardAlpha"
172 |          id="feColorMatrix19" />
173 |       <feOffset
174 |          dy="2.24995"
175 |          id="feOffset21" />
176 |       <feGaussianBlur
177 |          stdDeviation="2.49994"
178 |          id="feGaussianBlur23" />
179 |       <feComposite
180 |          in2="hardAlpha"
181 |          operator="out"
182 |          id="feComposite25" />
183 |       <feColorMatrix
184 |          type="matrix"
185 |          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
186 |          id="feColorMatrix27" />
187 |       <feBlend
188 |          mode="normal"
189 |          in2="BackgroundImageFix"
190 |          result="effect1_dropShadow_470_963"
191 |          id="feBlend29" />
192 |       <feBlend
193 |          mode="normal"
194 |          in="SourceGraphic"
195 |          in2="effect1_dropShadow_470_963"
196 |          result="shape"
197 |          id="feBlend31" />
198 |     </filter>
199 |     <linearGradient
200 |        id="paint0_linear_470_963"
201 |        x1="17.5"
202 |        y1="0"
203 |        x2="17.5"
204 |        y2="35"
205 |        gradientUnits="userSpaceOnUse"
206 |        gradientTransform="matrix(0.57423736,0,0,0.57176096,-6.1976711e-4,6.184293e-4)">
207 |       <stop
208 |          stop-color="#222024"
209 |          id="stop34" />
210 |       <stop
211 |          offset="1"
212 |          stop-color="#100F11"
213 |          id="stop36" />
214 |     </linearGradient>
215 |     <linearGradient
216 |        id="paint1_linear_470_963"
217 |        x1="17.5"
218 |        y1="0"
219 |        x2="17.5"
220 |        y2="35"
221 |        gradientUnits="userSpaceOnUse"
222 |        gradientTransform="matrix(0.57423736,0,0,0.57176096,-6.1976711e-4,6.184293e-4)">
223 |       <stop
224 |          stop-color="#AF7EFF"
225 |          id="stop39" />
226 |       <stop
227 |          offset="1"
228 |          stop-color="#5F1DCC"
229 |          id="stop41" />
230 |     </linearGradient>
231 |     <radialGradient
232 |        id="paint2_angular_470_963"
233 |        cx="0"
234 |        cy="0"
235 |        r="1"
236 |        gradientUnits="userSpaceOnUse"
237 |        gradientTransform="matrix(0,8.59298,-8.25,0,18,19.0305)">
238 |       <stop
239 |          stop-color="white"
240 |          id="stop44" />
241 |       <stop
242 |          offset="0.442708"
243 |          stop-color="#853BFF"
244 |          id="stop46" />
245 |       <stop
246 |          offset="1"
247 |          stop-color="#7F778D"
248 |          id="stop48" />
249 |     </radialGradient>
250 |     <linearGradient
251 |        id="paint3_linear_470_963"
252 |        x1="18"
253 |        y1="10.4375"
254 |        x2="18"
255 |        y2="27.623501"
256 |        gradientUnits="userSpaceOnUse">
257 |       <stop
258 |          stop-color="white"
259 |          stop-opacity="0.56"
260 |          id="stop51" />
261 |       <stop
262 |          offset="1"
263 |          stop-opacity="0"
264 |          id="stop53" />
265 |     </linearGradient>
266 |   </defs>
267 | </svg>
268 | `;
269 | };
270 | 


--------------------------------------------------------------------------------
/src/lib/content/index.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 | 	clearCounter,
  3 | 	getRiskDetails,
  4 | 	validateWallet,
  5 | 	populateRiskCount,
  6 | 	getUserId
  7 | } from '$lib/content/utils';
  8 | import { SiteManagerService } from '$lib/service/SiteManagerService';
  9 | import { API_HOST, HIGH_RISK_COLOR } from '$lib/constants';
 10 | import { initTooltip, Tooltip } from '$lib/content/risk/tooltip';
 11 | import { getRiskDetailUI } from '$lib/content/risk/main';
 12 | import {
 13 | 	StoreName,
 14 | 	type RiskCounter,
 15 | 	type RiskDetailsMapping,
 16 | 	type Wallet,
 17 | 	type Wallets,
 18 | 	PluginStatus,
 19 | 	HighlightingPreference
 20 | } from '$lib/types';
 21 | import { getStoreValueFromLocalStorage } from '$lib/stores';
 22 | import browser from 'webextension-polyfill';
 23 | import { getScamReportHash } from '$lib/utils';
 24 | 
 25 | let scanning = false;
 26 | const wallets: Wallets = {};
 27 | const riskDetails: RiskDetailsMapping = {};
 28 | let referredElement: HTMLElement | null = null;
 29 | let openedAddr: string | null = null;
 30 | 
 31 | /**
 32 |  * Single scan of the page
 33 |  */
 34 | async function scan(_highlightOnlyHigh: boolean) {
 35 | 	if (scanning) {
 36 | 		return;
 37 | 	}
 38 | 
 39 | 	scanning = true;
 40 | 	scanInputs();
 41 | 	scanText();
 42 | 
 43 | 	try {
 44 | 		await highlightWallets(_highlightOnlyHigh);
 45 | 		await SiteManagerService.updateSite(window.location.href, riskLevelCount);
 46 | 	} catch (error) {
 47 | 		console.error(error);
 48 | 	}
 49 | 
 50 | 	scanning = false;
 51 | }
 52 | 
 53 | let lastInputs: HTMLInputElement[] = [];
 54 | let riskLevelCount: RiskCounter = { high: 0, medium: 0, low: 0 };
 55 | 
 56 | const scanInputs = () => {
 57 | 	const inputs = [...document.getElementsByTagName('input')];
 58 | 
 59 | 	const inputsDifference = inputs.filter((input) => !lastInputs.includes(input));
 60 | 
 61 | 	inputsDifference.forEach((input) => {
 62 | 		if (!input || !input.value || input.value.length < MINIMUM_WALLET_LENGTH) {
 63 | 			return;
 64 | 		}
 65 | 
 66 | 		const inputValue: string = input.value.trim();
 67 | 
 68 | 		if (inputValue && validateWallet(inputValue)) {
 69 | 			const nodesByWallet = wallets[inputValue] || [];
 70 | 			wallets[inputValue] = [...nodesByWallet, input];
 71 | 		}
 72 | 	});
 73 | 
 74 | 	lastInputs = inputs;
 75 | };
 76 | 
 77 | function deepText(node: HTMLElement | ChildNode | null) {
 78 | 	let A: { node: ChildNode; parent: HTMLElement | null }[] = [];
 79 | 	if (node) {
 80 | 		node = node.firstChild;
 81 | 		while (node != null) {
 82 | 			if (node.nodeType == 3) A[A.length] = { node, parent: node.parentNode as HTMLElement | null };
 83 | 			else if (node.nodeType == 1 && (node as HTMLElement).tagName.toLowerCase() === 'iframe') {
 84 | 				const iframeElement = node as HTMLIFrameElement;
 85 | 				if (!iframeElement) {
 86 | 					continue;
 87 | 				}
 88 | 				iframeElement.onload = () => {
 89 | 					runScrapper();
 90 | 				};
 91 | 				const iframeDoc = iframeElement.contentDocument;
 92 | 				if (iframeDoc) {
 93 | 					const iframeNodes = deepText(iframeDoc.body);
 94 | 					A = A.concat(iframeNodes);
 95 | 				}
 96 | 			} else {
 97 | 				A = A.concat(deepText(node));
 98 | 			}
 99 | 			node = node.nextSibling;
100 | 		}
101 | 	}
102 | 
103 | 	return A;
104 | }
105 | const HIGHLIGHTED_CLASSNAME = 'whe-highlighted';
106 | const VIEW_DETAILS_CLASSNAME = 'whe-view-details';
107 | const ADDR_ATTRIBUTE = 'data-whe-address';
108 | const MINIMUM_WALLET_LENGTH = 26;
109 | 
110 | const scanText = () => {
111 | 	const textNodes = deepText(document.body);
112 | 
113 | 	const ElementAddressMapping: {
114 | 		element: HTMLElement;
115 | 		addressArr: string[];
116 | 	}[] = [];
117 | 	textNodes.forEach(({ node, parent }) => {
118 | 		if (!node || !node.textContent || !parent) {
119 | 			return;
120 | 		}
121 | 
122 | 		const pieces = node.textContent
123 | 			.split(/[^\d\w]/g)
124 | 			.map((x) => x.trim())
125 | 			.filter((x) => x.length >= MINIMUM_WALLET_LENGTH)
126 | 			// filter duplicates and empty strings
127 | 			.filter((value, index, self) => self.indexOf(value) === index && value);
128 | 
129 | 		pieces.forEach((x) => {
130 | 			const text = x.trim();
131 | 			if (validateWallet(text) && parent) {
132 | 				const index = ElementAddressMapping.findIndex((i) => i.element === parent);
133 | 				if (index > -1) {
134 | 					if (!ElementAddressMapping[index].addressArr.includes(text)) {
135 | 						ElementAddressMapping[index].addressArr.push(text);
136 | 					}
137 | 				} else {
138 | 					ElementAddressMapping.push({ element: parent, addressArr: [text] });
139 | 				}
140 | 			}
141 | 		});
142 | 	});
143 | 
144 | 	ElementAddressMapping.forEach((addressItem) => {
145 | 		const parent = addressItem.element;
146 | 		if (!parent || parent.closest(`.${HIGHLIGHTED_CLASSNAME}`)) return;
147 | 		let parentInnerText = parent.innerText;
148 | 		const parentTextContent = parent.textContent;
149 | 		addressItem.addressArr.forEach((addressTxt) => {
150 | 			if (addressTxt && addressTxt.trim().length === parentTextContent?.trim().length) {
151 | 				if (!parent.closest(`.${HIGHLIGHTED_CLASSNAME}`)) {
152 | 					parent.classList.add(HIGHLIGHTED_CLASSNAME);
153 | 					parent.setAttribute('whe-address', addressTxt);
154 | 				}
155 | 			} else {
156 | 				parentInnerText = parentInnerText.replaceAll(
157 | 					addressTxt,
158 | 					`<span class="${HIGHLIGHTED_CLASSNAME}" whe-address="${addressTxt}">${addressTxt}</span>`
159 | 				);
160 | 			}
161 | 		});
162 | 
163 | 		let walletNodes: HTMLElement[] = [parent];
164 | 
165 | 		if (!parent.closest(`.${HIGHLIGHTED_CLASSNAME}`)) {
166 | 			parent.innerHTML = parentInnerText;
167 | 
168 | 			const nodes = parent.querySelectorAll(`span.${HIGHLIGHTED_CLASSNAME}`);
169 | 			walletNodes = Array.from(nodes).map((node) => node as HTMLElement);
170 | 		}
171 | 
172 | 		if (!walletNodes || walletNodes.length === 0) return;
173 | 
174 | 		walletNodes.forEach((walletNode) => {
175 | 			const addressTxt = walletNode.getAttribute
176 | 				? walletNode.getAttribute('whe-address')
177 | 				: null;
178 | 			if (!addressTxt) return;
179 | 			const nodesByWallet = wallets[addressTxt] || [];
180 | 			if (!nodesByWallet.includes(walletNode)) {
181 | 				wallets[addressTxt] = [...nodesByWallet, walletNode];
182 | 			}
183 | 		});
184 | 	});
185 | };
186 | 
187 | const clearDetailsBoxes = () => {
188 | 	document.querySelectorAll(`.${VIEW_DETAILS_CLASSNAME}`).forEach((el) => el.remove());
189 | };
190 | 
191 | const highlightWallet = (node: Wallet, color: string, address: string) => {
192 | 	if (!color || !node) {
193 | 		return;
194 | 	}
195 | 
196 | 	node.style.background = color;
197 | 	node.style.color = '#000';
198 | 	if (!node.classList.contains(HIGHLIGHTED_CLASSNAME)) {
199 | 		node.classList.add(HIGHLIGHTED_CLASSNAME);
200 | 	}
201 | 	node.setAttribute(ADDR_ATTRIBUTE, address);
202 | };
203 | 
204 | const highlightWallets = async (_highlightOnlyHigh: boolean) => {
205 | 	if (!wallets) {
206 | 		return;
207 | 	}
208 | 
209 | 	let keys = Object.keys(wallets);
210 | 	if (!keys.length) {
211 | 		return;
212 | 	}
213 | 
214 | 	console.debug(`highlighting wallet `);
215 | 
216 | 	// clear counters
217 | 	riskLevelCount = clearCounter(riskLevelCount);
218 | 
219 | 	// highlight already fetched wallets
220 | 	Object.keys(riskDetails).forEach((addr) => {
221 | 		highlightAddr(addr, _highlightOnlyHigh);
222 | 	});
223 | 
224 | 	// fetch and highlight new wallets from api if any
225 | 	keys = keys.filter((key) => !Object.keys(riskDetails).includes(key));
226 | 	if (keys.length > 0) {
227 | 		const newRiskDataGenerator = getRiskDetails(keys);
228 | 		for await (const newRiskData of newRiskDataGenerator) {
229 | 			Object.keys(newRiskData).forEach((newAddr) => {
230 | 				riskDetails[newAddr] = newRiskData[newAddr];
231 | 				highlightAddr(newAddr, _highlightOnlyHigh);
232 | 			});
233 | 		}
234 | 	}
235 | };
236 | 
237 | const highlightAddr = (walletAddr: string, _highlightOnlyHigh: boolean) => {
238 | 	const highlightColor = riskDetails[walletAddr]?.color;
239 | 	if (highlightColor == null) {
240 | 		return;
241 | 	}
242 | 
243 | 	riskLevelCount = populateRiskCount(highlightColor, riskLevelCount);
244 | 
245 | 	wallets[walletAddr].forEach((node) => {
246 | 		if ((_highlightOnlyHigh && highlightColor === HIGH_RISK_COLOR) || !_highlightOnlyHigh) {
247 | 			highlightWallet(node, highlightColor, walletAddr);
248 | 		}
249 | 	});
250 | };
251 | 
252 | const unhighlight = () => {
253 | 	const highlightedElements = [...document.getElementsByClassName(HIGHLIGHTED_CLASSNAME)];
254 | 
255 | 	highlightedElements.forEach((element) => {
256 | 		element.removeAttribute('style');
257 | 		element.removeAttribute(ADDR_ATTRIBUTE);
258 | 	});
259 | };
260 | 
261 | const shouldHighlightSite = async (currentSite: string): Promise<boolean> => {
262 | 	const isExtRun =
263 | 		(await getStoreValueFromLocalStorage(StoreName.pluginStatus, PluginStatus.Active)) ===
264 | 		PluginStatus.Active;
265 | 	if (!isExtRun) return false;
266 | 
267 | 	// const { value: allSites } = await SiteManagerService.load();
268 | 	const highlightingPreference = (await getStoreValueFromLocalStorage(
269 | 		StoreName.highlightingPreference,
270 | 		HighlightingPreference.all
271 | 	)) as HighlightingPreference;
272 | 
273 | 	// const site = SiteManagerService.getSiteByUrl(currentSite, allSites);
274 | 	// if (site !== undefined) {
275 | 	// 	return isSiteRun;
276 | 	// }
277 | 
278 | 	const excludedSites: string[] = (await getStoreValueFromLocalStorage(
279 | 		StoreName.excludedSites,
280 | 		[]
281 | 	)) as string[];
282 | 	if (excludedSites.includes(currentSite)) {
283 | 		return false;
284 | 	}
285 | 	if (highlightingPreference == HighlightingPreference.included) {
286 | 		const includedSites: string[] = (await getStoreValueFromLocalStorage(
287 | 			StoreName.includedSites,
288 | 			[]
289 | 		)) as string[];
290 | 		return includedSites.includes(currentSite);
291 | 	}
292 | 	return true;
293 | };
294 | 
295 | /**
296 |  * Runs the scan on the page if available
297 |  */
298 | const runScrapper = async () => {
299 | 	const onlyHighlightHighRisk = false; // TODO
300 | 	const currentSite = SiteManagerService.processURL(window.location.href);
301 | 	if (SiteManagerService.checkIfDefaultExcluded(currentSite)) {
302 | 		return;
303 | 	}
304 | 
305 | 	const highlightSite: boolean = await shouldHighlightSite(currentSite);
306 | 
307 | 	unhighlight();
308 | 	if (!highlightSite) {
309 | 		return;
310 | 	}
311 | 	await scan(onlyHighlightHighRisk);
312 | };
313 | 
314 | /**
315 |  * Case: when user visit site first time - highlight should work (if extension turned on)
316 |  */
317 | window.onload = myMain;
318 | 
319 | function myMain() {
320 | 	initTooltip();
321 | 	runScrapper().then(() => {
322 | 		SiteManagerService.updateStats(riskLevelCount);
323 | 	});
324 | }
325 | /**
326 |  * Observe the page for url changes
327 |  */
328 | const config = { subtree: true, childList: true };
329 | 
330 | let prevUrl = window.location.href;
331 | const observer = new MutationObserver(function (mutations) {
332 | 	if (window.location.href !== prevUrl) {
333 | 		prevUrl = window.location.href;
334 | 		runScrapper();
335 | 	} else if (
336 | 		// check if iframe changed
337 | 		mutations.some(
338 | 			(i) =>
339 | 				i.type === 'childList' &&
340 | 				[...i.target.childNodes].some((j) => j.nodeName.toLowerCase() === 'iframe')
341 | 		)
342 | 	) {
343 | 		runScrapper();
344 | 	}
345 | });
346 | 
347 | observer.observe(document, config);
348 | 
349 | const saveReportedAddress = async (address: string, ticker: string, websiteUrl: string) => {
350 | 	const hashHex = await getScamReportHash(address, ticker, websiteUrl);
351 | 	console.log({ hashHex });
352 | 
353 | 	await chrome.storage.local.set({ [hashHex]: true });
354 | };
355 | 
356 | const isAlreadyReported = async (
357 | 	address: string,
358 | 	ticker: string,
359 | 	websiteUrl: string
360 | ): Promise<boolean> => {
361 | 	const hashHex = await getScamReportHash(address, ticker, websiteUrl);
362 | 	const entry = await chrome.storage.local.get(hashHex);
363 | 	return entry[hashHex] !== undefined;
364 | };
365 | 
366 | const report = async (address: string, ticker: string, websiteUrl: string) => {
367 | 	const userId = await getUserId();
368 | 	return fetch(`${API_HOST}/v1/report-scam`, {
369 | 		method: 'POST',
370 | 		body: JSON.stringify({ address, ticker, clientId: userId, websiteUrl }),
371 | 		headers: {
372 | 			'Content-Type': 'application/json'
373 | 		}
374 | 	});
375 | };
376 | 
377 | const loadReportScamButton = async (address: string) => {
378 | 	const currentUrl = window.location.href;
379 | 	if (await isAlreadyReported(address, 'ETH', currentUrl)) {
380 | 		// TODO: handle the ticker
381 | 		return;
382 | 	}
383 | 	const reportScamButton = document.getElementById('report-scam');
384 | 	if (reportScamButton != null) {
385 | 		reportScamButton.onclick = async () => {
386 | 			reportScamButton.disabled = true;
387 | 			reportScamButton.textContent = 'Reporting...';
388 | 			try {
389 | 				const response = await report(address, 'ETH', currentUrl); // TODO: handle the ticker
390 | 				if (response.status === 200) {
391 | 					await saveReportedAddress(address, 'ETH', currentUrl);
392 | 					reportScamButton.textContent = 'Reported as Scam';
393 | 				} else {
394 | 					reportScamButton.textContent = 'Failed to report';
395 | 				}
396 | 			} catch (err) {
397 | 				console.error(err);
398 | 				reportScamButton.textContent = 'Failed to report';
399 | 			}
400 | 		};
401 | 	}
402 | };
403 | 
404 | /**
405 |  * Event listeners
406 |  */
407 | browser.runtime.onMessage.addListener(async (__: string, _) => {
408 | 	// const msg: Message = Message.fromSerialized(msgData);
409 | 	await runScrapper();
410 | });
411 | 
412 | /**
413 |  * Add Risk UI
414 |  */
415 | initTooltip();
416 | document.addEventListener(
417 | 	'mousemove',
418 | 	async (event) => {
419 | 		const target = event?.target as HTMLElement;
420 | 		if (!target || !target?.getAttribute) {
421 | 			clearDetailsBoxes();
422 | 			return;
423 | 		}
424 | 		// mouse on this element
425 | 		if (target.closest(`.${VIEW_DETAILS_CLASSNAME}`)) return;
426 | 		if (target.closest('#whe-tooltip')) return;
427 | 
428 | 		const address = target.getAttribute(ADDR_ATTRIBUTE);
429 | 
430 | 		// mouse on different element
431 | 		if (openedAddr && (!address || referredElement !== target)) {
432 | 			openedAddr = null;
433 | 			referredElement = null;
434 | 			clearDetailsBoxes();
435 | 			return;
436 | 		}
437 | 
438 | 		if (!address) return;
439 | 
440 | 		// mouse on same element
441 | 		if (openedAddr === address && referredElement === target) return;
442 | 
443 | 		// mouse moved from one addr to another element with addr
444 | 		if (openedAddr && address !== openedAddr) clearDetailsBoxes();
445 | 
446 | 		// if address has no info then omit
447 | 		const riskData = riskDetails[address]?.detail;
448 | 		if (riskData == null) return;
449 | 
450 | 		openedAddr = address;
451 | 		referredElement = target;
452 | 		const domRect = referredElement.getBoundingClientRect();
453 | 		const top = domRect.top + window.scrollY;
454 | 		const left = domRect.left - 35 >= 0 ? domRect.left - 35 : 0;
455 | 		const scamReportStatus = await isAlreadyReported(address, 'ETH', window.location.href); // handle ticker
456 | 		document.body.insertAdjacentHTML(
457 | 			'beforeend',
458 | 			`<span 
459 |       class="${VIEW_DETAILS_CLASSNAME}" 
460 |       style="
461 |           top: ${top}px;
462 |           left: ${left}px;
463 |         "
464 |       >
465 |       ${getRiskDetailUI(riskData, scamReportStatus)}
466 |     </span>`
467 | 		);
468 | 		document
469 | 			.getElementById('whe-risk-tags-container-id')
470 | 			?.style.setProperty(
471 | 				'max-width',
472 | 				`${document.getElementById('whe-risk-details-table-id')?.offsetWidth}px`,
473 | 				'important'
474 | 			);
475 | 		await loadReportScamButton(address);
476 | 		Tooltip.bindEvents();
477 | 	},
478 | 	{ passive: true }
479 | );
480 | 


--------------------------------------------------------------------------------