diff --git a/README.md b/README.md index fb9af18..729a61c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ -## About +

+ +
+wimi +

wimi relays information about your public IP address from @@ -13,12 +17,6 @@ The extension can be built locally and installed as a developer extension / addon on both Chromium and FireFox. There are XPI files provided for FireFox users as well. -## Example - -

- -

- ## Install **Chrome** diff --git a/bin/iconify b/bin/iconify deleted file mode 100755 index ab7e372..0000000 --- a/bin/iconify +++ /dev/null @@ -1,15 +0,0 @@ -#!/bin/sh -set -e -sizes="16x16 48x48 64x64 128x128 256x256" -dir="src/images/icons" -for size in ${sizes}; do - convert ${dir}/icon.svg \ - -resize ${size} \ - -background none \ - -trim +repage \ - -fuzz 5% \ - -transparent white \ - -gravity center \ - -extent $size \ - ${dir}/wtf${size}.png -done diff --git a/bin/mkicons b/bin/mkicons new file mode 100755 index 0000000..18bc2f8 --- /dev/null +++ b/bin/mkicons @@ -0,0 +1,22 @@ +#!/bin/sh +set -e + +## +# variables +sizes="16x16 48x48 64x64 128x128 256x256" +dir="src/images/" + +## +# main +for size in ${sizes}; do + gm convert \ + "${dir}"/icon.svg \ + -resize "${size}" \ + -background none \ + -trim +repage \ + -fuzz 5% \ + -transparent white \ + -gravity center \ + -extent "${size}" \ + "${dir}"/icon"${size}".png +done diff --git a/share/wimi/CHANGELOG b/share/wimi/CHANGELOG index 745b553..9214b47 100644 --- a/share/wimi/CHANGELOG +++ b/share/wimi/CHANGELOG @@ -1,5 +1,17 @@ # -*- mode: org -*- +** vNEXT + +**** Add bin/mkicons +Replace the previous script + +**** Add new icons +Replace the previous set of icons with wimi icons + +**** Hello wimi +The project is now known as wimi - short for: +what is my ip address + ** v0.5.1 **** Shorten description in manifest diff --git a/share/wimi/wimi.png b/share/wimi/wimi.png deleted file mode 100644 index 3dcaea2..0000000 Binary files a/share/wimi/wimi.png and /dev/null differ diff --git a/src/css/index.css b/src/css/index.css index 6d73cc7..1372954 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,45 +1,11 @@ :root { - /* Defaults */ - --default-font-size: 1.15em; - /* Colors */ - --primary-red: #d73e48; - --primary-green: #32b643; - --primary-blue: #302ecd; - --secondary-blue: #807fe2; - --primary-white: #FFF; - --secondary-white: #f1f1fc; + --primary-color: #E3F2FD; + --secondary-color: #333333; + --accent-color: #007BFF; } -body { - font-size: small; - width: 400px; -} - -#root, .loader { - height: 100%; -} -a { - color: var(--primary-blue) !important; - text-decoration: none; -} -a:visited { - color: var(--primary-blue) !important; -} -a:active, a:focus, a:hover { - color: var(--primary-blue) !important; - text-decoration: underline; -} - -footer { - background: var(--secondary-white); - color: var(--primary-red); - width: 100%; -} - -.loader { - display: flex; - flex-direction: column; - align-items: center; - place-content: center; +#root { + background: var(--primary-color); + color: var(--secondary-color); } diff --git a/src/html/browseraction.html b/src/html/browseraction.html index 41efe86..c3dad32 100644 --- a/src/html/browseraction.html +++ b/src/html/browseraction.html @@ -5,8 +5,8 @@ - -
+ +
diff --git a/src/images/icon.svg b/src/images/icon.svg new file mode 100644 index 0000000..90046a9 --- /dev/null +++ b/src/images/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon128x128.png b/src/images/icon128x128.png new file mode 100644 index 0000000..f850333 Binary files /dev/null and b/src/images/icon128x128.png differ diff --git a/src/images/icon16x16.png b/src/images/icon16x16.png new file mode 100644 index 0000000..33b2ff2 Binary files /dev/null and b/src/images/icon16x16.png differ diff --git a/src/images/icon256x256.png b/src/images/icon256x256.png new file mode 100644 index 0000000..f453329 Binary files /dev/null and b/src/images/icon256x256.png differ diff --git a/src/images/icon48x48.png b/src/images/icon48x48.png new file mode 100644 index 0000000..7616b99 Binary files /dev/null and b/src/images/icon48x48.png differ diff --git a/src/images/icon64x64.png b/src/images/icon64x64.png new file mode 100644 index 0000000..c7503b8 Binary files /dev/null and b/src/images/icon64x64.png differ diff --git a/src/images/icons/icon.svg b/src/images/icons/icon.svg deleted file mode 100644 index df87c90..0000000 --- a/src/images/icons/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/icons/wtf128x128.png b/src/images/icons/wtf128x128.png deleted file mode 100644 index a02de73..0000000 Binary files a/src/images/icons/wtf128x128.png and /dev/null differ diff --git a/src/images/icons/wtf16x16.png b/src/images/icons/wtf16x16.png deleted file mode 100644 index 8c83b62..0000000 Binary files a/src/images/icons/wtf16x16.png and /dev/null differ diff --git a/src/images/icons/wtf256x256.png b/src/images/icons/wtf256x256.png deleted file mode 100644 index 14ab62d..0000000 Binary files a/src/images/icons/wtf256x256.png and /dev/null differ diff --git a/src/images/icons/wtf48x48.png b/src/images/icons/wtf48x48.png deleted file mode 100644 index 19c216a..0000000 Binary files a/src/images/icons/wtf48x48.png and /dev/null differ diff --git a/src/images/icons/wtf64x64.png b/src/images/icons/wtf64x64.png deleted file mode 100644 index ce2ebca..0000000 Binary files a/src/images/icons/wtf64x64.png and /dev/null differ diff --git a/src/js/components/App.tsx b/src/js/components/App.tsx index 6af22a7..ee8643d 100644 --- a/src/js/components/App.tsx +++ b/src/js/components/App.tsx @@ -1,15 +1,29 @@ -import { ErrorRenderer } from "~/components/ErrorRenderer"; -import { ResponseRenderer } from "~/components/ResponseRenderer"; -import { Loader } from "~/components/Loader"; import { useWebService } from "~/hooks/useWebService"; - export function App() { const [response, error] = useWebService(); if (response) { - return ; + return ( +
+ +
+ {response.IPAddress} + {response.ISP} +
+
+ ); } else if (error) { - return ; + return ( +
+ + Error +
+ ); } else { - return ; + return ( +
+ + Loading +
+ ); } } diff --git a/src/js/components/ErrorRenderer.tsx b/src/js/components/ErrorRenderer.tsx deleted file mode 100644 index c702a25..0000000 --- a/src/js/components/ErrorRenderer.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Footer } from "~/components/Footer"; - -export function ErrorRenderer({ error }: { error: Error }) { - const t = chrome.i18n.getMessage; - return ( -
-
-
- {t("error")}: - {error.message} -
-
- ); -} diff --git a/src/js/components/Footer.tsx b/src/js/components/Footer.tsx deleted file mode 100644 index 803a40d..0000000 --- a/src/js/components/Footer.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import type { ReactNode } from "react"; - -export function Footer({ children }: { children: ReactNode }) { - return ( -
-
{children}
-
- ); -} diff --git a/src/js/components/Loader.tsx b/src/js/components/Loader.tsx deleted file mode 100644 index 95d4a10..0000000 --- a/src/js/components/Loader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Footer } from "~/components/Footer"; - -export function Loader() { - const t = chrome.i18n.getMessage; - return ( -
-
-
{t("loading")}
-
- ); -} diff --git a/src/js/components/ResponseRenderer.tsx b/src/js/components/ResponseRenderer.tsx deleted file mode 100644 index 7af726e..0000000 --- a/src/js/components/ResponseRenderer.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { useEffect, ReactNode } from "react"; -import { TResponse } from "~/lib/response"; -import { Footer } from "~/components/Footer"; -type TFunction = typeof chrome.i18n.getMessage; - -export function ResponseRenderer({ response }: { response: TResponse }) { - const t = chrome.i18n.getMessage; - - useEffect(() => { - const { body } = document; - const width = (() => { - const addr = response.IPAddress; - if (addr.length >= 30) { - return 525; - } else if (addr.length >= 20) { - return 450; - } else { - return 400; - } - })(); - body.style.width = `${width}px`; - }, [response]); - - return ( -
-
- - - - } /> -
- -
- ); -} - -function BooleanLabel({ on, t }: { on: boolean; t: TFunction }) { - if (on) { - return ; - } else { - return ; - } -} - -function Row({ name, value }: { name: string; value: ReactNode }) { - return ( -
-
{name}
-
{value}
-
- ); -} diff --git a/src/js/lib/response.ts b/src/js/lib/response.ts index 30cfcc9..8b9353f 100644 --- a/src/js/lib/response.ts +++ b/src/js/lib/response.ts @@ -3,6 +3,7 @@ export type TResponse = { ISP: string; City: string; Country: string; + countryCode: string; isTorExitNode: boolean; }; @@ -11,6 +12,7 @@ export type TServerResponse = { YourISP: string; YourCity: string; YourCountry: string; + YourCountryCode: string; YourTorExit: boolean; }; @@ -21,6 +23,7 @@ export function Response(res: TServerResponse): TResponse { self.ISP = res.YourISP; self.City = res.YourCity; self.Country = res.YourCountry; + self.countryCode = res.YourCountryCode; self.isTorExitNode = res.YourTorExit; return self; diff --git a/src/manifest.json b/src/manifest.json index 1605ec2..c0b7f77 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -7,11 +7,11 @@ "default_popup": "/html/browseraction.html" }, "icons": { - "16": "images/icons/wtf16x16.png", - "48": "images/icons/wtf48x48.png", - "64": "images/icons/wtf64x64.png", - "128": "images/icons/wtf128x128.png", - "256": "images/icons/wtf256x256.png" + "16": "images/icon16x16.png", + "48": "images/icon48x48.png", + "64": "images/icon64x64.png", + "128": "images/icon128x128.png", + "256": "images/icon256x256.png" }, "permissions": [], "default_locale": "en", diff --git a/test/App.test.tsx b/test/App.test.tsx index 6b0c5b5..6be4cd0 100644 --- a/test/App.test.tsx +++ b/test/App.test.tsx @@ -24,7 +24,7 @@ describe("App.tsx", () => { test("loading text is rendered", () => { render(); - expect(screen.getByText("Loading...")).toBeInTheDocument(); + expect(screen.getByTestId("loading")).toBeInTheDocument(); }); }); diff --git a/test/ErrorRenderer.test.tsx b/test/ErrorRenderer.test.tsx deleted file mode 100644 index a2f7960..0000000 --- a/test/ErrorRenderer.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import '@testing-library/jest-dom'; -import { render, screen } from "@testing-library/react"; -import { ErrorRenderer } from "~/components/ErrorRenderer"; -import { getMessage } from "./mocks/chrome.i18n"; - -describe("ErrorRenderer.tsx", () => { - const globalChrome = global.chrome; - const error = new Error("This is an example error message"); - - beforeEach(() => { - const chrome: any = { i18n: { getMessage } }; - global.chrome = chrome; - render(); - }); - - afterEach(() => { - global.chrome = globalChrome; - }); - - test("an error is rendered", () => { - const { getByTestId, getByText } = screen; - const span = getByTestId("error-message"); - expect(getByText("Error")).toBeInTheDocument(); - expect(span.textContent).toEqual(error.message); - }); -}); diff --git a/test/ResponseRenderer.test.tsx b/test/ResponseRenderer.test.tsx deleted file mode 100644 index 3f3d2a8..0000000 --- a/test/ResponseRenderer.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from "react"; -import '@testing-library/jest-dom'; -import { render, screen } from "@testing-library/react"; -import { ResponseRenderer } from "~/components/ResponseRenderer"; -import { getMessage } from "./mocks/chrome.i18n"; - -describe("ResponseRenderer.tsx", () => { - const globalChrome = global.chrome; - - beforeEach(() => { - const chrome: any = { i18n: { getMessage } }; - global.chrome = chrome; - }); - - afterEach(() => { - global.chrome = globalChrome; - }); - - const defaultResponse = { - IPAddress: "89.222.123.45", - ISP: "FooBar Ltd", - City: "FooBar City", - Country: "United States of FooBar", - isTorExitNode: false - }; - - describe("when isTorExitNode is false", () => { - const response = { ...defaultResponse }; - - beforeEach(() => { - render(); - }); - - test("an IP address is rendered", () => { - expect(screen.getByText("IP Address")).toBeInTheDocument(); - expect(screen.getByText(response.IPAddress)).toBeInTheDocument(); - }); - - test("an ISP is rendered", () => { - expect(screen.getByText("ISP")).toBeInTheDocument(); - expect(screen.getByText(response.ISP)).toBeInTheDocument(); - }); - - test("a location is rendered", () => { - expect(screen.getByText("Location")).toBeInTheDocument(); - expect(screen.getByText(`${response.City}, ${response.Country}`)).toBeInTheDocument(); - }); - - test("isTorExitNode is rendered as No", () => { - expect(screen.getByText("Tor exit node")).toBeInTheDocument(); - expect(screen.getByText("No")).toBeInTheDocument(); - }); - }); - - describe("when isTorExitNode is true", () => { - const response = { ...defaultResponse, isTorExitNode: true }; - - beforeEach(() => { - render(); - }); - - test("isTorExitNode is rendered as Yes", () => { - expect(screen.getByText("Tor exit node")).toBeInTheDocument(); - expect(screen.getByText("Yes")).toBeInTheDocument(); - }); - }); -}); diff --git a/test/mocks/fetch.ts b/test/mocks/fetch.ts index 9419bf6..8747564 100644 --- a/test/mocks/fetch.ts +++ b/test/mocks/fetch.ts @@ -8,6 +8,7 @@ export function success(_path: RequestInfo | URL, _options?: RequestInit) { YourISP: "FooBar Ltd", YourCity: "Foo City", YourCountry: "United States of FooBar", + YourCountryCode: "BR", YourTorExit: false }) )