fixes for Firefox incompatibility with button text and select dropdown

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
update chainspec and populate with extra bootnodes
2025-08-20 15:23:54 +03:00 · 2025-08-17 16:02:09 +03:00 · 2025-08-12 20:12:49 +03:00 · 2025-08-12 20:12:15 +03:00 · 2025-08-12 19:33:17 +03:00 · 2025-08-12 19:31:40 +03:00
22 changed files with 844 additions and 192 deletions
--- a/assets/chainspecs/casper_staging_testnet.json
+++ b/assets/chainspecs/casper_staging_testnet.json
--- a/assets/manifest-v3-chrome.json
+++ b/assets/manifest-v3-chrome.json
@ -1,10 +1,10 @@
 {
-    "author": "Ghost Team <someone@ghostchain.io>",
-    "description": "Wallet for Ghost and Casper blockchains light clients",
-    "homepage_url": "https://github.com/ghostchain/ghost-wallet",
-    "name": "Ghost Wallet",
+    "author": "GHOST Team <someone@ghostchain.io>",
+    "description": "Wallet for GHOST and CASPER blockchains light clients",
+    "homepage_url": "https://git.ghostchain.io/ghostchain/ghost-extension-wallet",
+    "name": "GHOST Wallet",
    "short_name": "ghost-wallet",
-    "version": "0.0.0",
+    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": ["notifications", "storage", "tabs", "alarms"],
    "background": {
@ -12,7 +12,7 @@
        "type": "module"
    },
    "action": {
-        "default_title": "Ghost Wallet",
+        "default_title": "GHOST Wallet",
        "default_popup": "ui/assets/wallet-popup.html"
    },
    "options_ui": {
--- a/assets/manifest-v3-firefox.json
+++ b/assets/manifest-v3-firefox.json
@ -1,10 +1,10 @@
 {
-    "author": "Ghost Team <someone@ghostchain.io>",
-    "description": "Wallet for Ghost and Casper blockchains light clients",
-    "homepage_url": "https://github.com/ghostchain/ghost-wallet",
-    "name": "Ghost Wallet",
+    "author": "GHOST Team <someone@ghostchain.io>",
+    "description": "Wallet for GHOST and CASPER blockchains light clients",
+    "homepage_url": "https://git.ghostchain.io/ghostchain/ghost-extension-wallet",
+    "name": "GHOST Wallet",
    "short_name": "ghost-wallet",
-    "version": "0.0.0",
+    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": ["notifications", "storage", "tabs", "alarms"],
    "background": {
@ -12,7 +12,7 @@
        "type": "module"
    },
    "action": {
-        "default_title": "Ghost Wallet",
+        "default_title": "GHOST Wallet",
        "default_popup": "ui/assets/wallet-popup.html"
    },
    "options_ui": {
@ -37,7 +37,7 @@
    },
    "browser_specific_settings": {
        "gecko": {
-            "id": "{9b4d20ed-b18a-4237-b5d0-ca71c2ce2060}"
+            "id": "{14b458b2-3221-4800-a36f-ae1ad1756ae2}"
        }
    },
    "web_accessible_resources": [
--- a/assets/options.html
+++ b/assets/options.html
@ -1,7 +1,7 @@
 <!doctype html>
 <html>
    <head>
-        <title>Ghost Wallet Options</title>
+        <title>GHOST Wallet Options</title>
        <meta charset="utf-8" />
    </head>
    <body style="background-color: #f9f9f9">
--- a/assets/wallet-popup.html
+++ b/assets/wallet-popup.html
@ -1,7 +1,7 @@
 <!doctype html>
 <html>
    <head>
-        <title>Ghost Wallet</title>
+        <title>GHOST Wallet</title>
        <meta charset="utf-8" />
    </head>
    <body>
--- a/builder.sh
+++ b/builder.sh
@ -3,8 +3,11 @@
 NAME=$(grep "name" package.json | grep -oP '(?<=: ")[^"]+')
 VERSION=$(grep "version" package.json | grep -oP '(?<=: ")[^"]+')
 BROWSERS=("chrome" "firefox")
+SCRIPT_DIR=$(dirname "$(realpath "$0")")

 for BROWSER in "${BROWSERS[@]}"; do
+	FILENAME="$NAME-$BROWSER@v$VERSION.zip"
 	pnpm build:$BROWSER
-	python -m zipfile -c releases/$NAME-$BROWSER@v$VERSION /dist
+	python -m zipfile --create "$SCRIPT_DIR/releases/$FILENAME" "$SCRIPT_DIR/dist"
+	python -m zipfile --test "$SCRIPT_DIR/releases/$FILENAME"
 done
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "ghost-wallet",
-    "version": "0.0.27",
+    "version": "0.1.4",
    "description": "Browser extension to manage ghost blockchain light clients.",
    "main": "dist/src/index.js",
    "author": "Uncle f4ts0 <f4ts0@ghostchain.io>",
@ -146,6 +146,7 @@
        "date-fns": "^4.1.0",
        "embla-carousel-react": "^8.5.1",
        "input-otp": "^1.2.4",
+        "lodash": "^4.17.21",
        "lucide-react": "^0.468.0",
        "next-themes": "^0.4.1",
        "react": "^18.3.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Bootnodes.tsx
+++ b/src/components/Bootnodes.tsx
@ -1,11 +1,11 @@
 import { useEffect, useState } from "react"
 import { MdDeleteOutline } from "react-icons/md"
-import * as environment from "../environment"
+import * as environment from "@/environment"

 import "./Bootnodes.css"
 import { Title, Switch } from "."
 import { helper } from "@substrate/light-client-extension-helpers/extension-page"
-import { wellKnownGenesisHashByChainId } from "../constants"
+import { wellKnownGenesisHashByChainId, networks } from "@/constants"

 import {
    Select,
@ -50,7 +50,7 @@ const saveToLocalStorage = async (
 }

 export const Bootnodes = () => {
-    const [selectedChain, setSelectedChain] = useState<string>("casper_staging_testnet")
+    const [selectedChain, setSelectedChain] = useState<string>(networks[0].value)
    const [defaultBn, setDefaultBn] = useState<BootnodesType[]>([])
    const [customBn, setCustomBn] = useState<BootnodesType[]>([])
    const [customBnInput, setCustomBnInput] = useState<string>("")
@ -164,9 +164,15 @@ export const Bootnodes = () => {
                    </SelectTrigger>
                    <SelectContent className="sm:w-[250px] w-[100%]">
                        <SelectGroup>
-                            <SelectItem data-testid="scheme-casper_staging_testnet" value="casper_staging_testnet">
-                                Casper
-                            </SelectItem>
+                            {networks.map(network => (
+                                <SelectItem
+                                    key={network.chainId}
+                                    data-testid={`scheme-${network.value}`}
+                                    value={network.value}
+                                >
+                                    {network.label}
+                                </SelectItem>
+                            ))}
                        </SelectGroup>
                    </SelectContent>
                </Select>
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -9,13 +9,13 @@ const buttonVariants = cva(
    {
        variants: {
            variant: {
-                default: "bg-primary text-primary-foreground hover:bg-foreground hover:text-background",
-                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary",
-                ghost: "text-primary hover:bg-accent hover:text-background",
+                default: "bg-primary text-primary-foreground hover:bg-foreground hover:text-background active:text-primary-foreground",
+                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:text-secondary-foreground",
+                ghost: "text-primary hover:bg-accent hover:text-background active:text-primary",

-                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:text-destructive-foreground",
                outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-                link: "text-primary underline-offset-4 hover:underline",
+                link: "text-primary underline-offset-4 hover:underline active:text-primary",
            },
            size: {
                default: "h-10 px-4 py-2",
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@ -78,7 +78,7 @@ const FormItem = React.forwardRef<

    return (
        <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+            <div ref={ref} className={cn("space-y-2", className)} {...props} />
        </FormItemContext.Provider>
    )
 })
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@ -4,7 +4,129 @@ import { Check, ChevronDown, ChevronUp } from "lucide-react"

 import { cn } from "@/lib/utils"

-const Select = SelectPrimitive.Root
+type SafeSelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
+    debounceMs?: number;
+    leaveGraceMs?: number;
+    allowCloseAfterItemMs?: number
+}
+const Select = ({
+    children,
+    debounceMs = 200,
+    leaveGraceMs = 150,
+    allowCloseAfterItemMs = 250,
+    onOpenChange,
+    onValueChange,
+    open: controlledOpen,
+    ...rest
+}: SafeSelectProps) => {
+    const lastToggleRef = React.useRef<number>(0)
+    const isControlled = controlledOpen !== undefined
+    const [isOpen, setIsOpen] = React.useState<boolean>(false)
+
+    const pointerInside = React.useRef<boolean>(false)
+    const pointerLeaveTimer = React.useRef<number | null>(null)
+    const lastItemActivate = React.useRef<number>(0)
+
+    const handlePointerEnterContent = React.useCallback(() => {
+        pointerInside.current = true
+        if (pointerLeaveTimer.current) {
+            window.clearTimeout(pointerLeaveTimer.current)
+            pointerLeaveTimer.current = null
+        }
+    }, [])
+
+    const handlePointerLeaveContent = React.useCallback(() => {
+        if (pointerLeaveTimer.current) window.clearTimeout(pointerLeaveTimer.current)
+        pointerLeaveTimer.current = window.setTimeout(() => {
+            pointerInside.current = false
+            pointerLeaveTimer.current = null
+        }, leaveGraceMs) as unknown as number
+    }, [leaveGraceMs])
+
+    const handleItemActivate = React.useCallback(() => {
+        lastItemActivate.current = Date.now()
+    }, [])
+
+    const enhancedChildren = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const type = (child.type as any)?.displayName || (child.type as any)?.name
+
+        if (
+            child.type === SelectPrimitive.Content ||
+            type === SelectPrimitive.Content?.displayName
+        ) {
+            return React.cloneElement(child, {
+                onPointerEnter: (...args: any[]) => {
+                    handlePointerEnterContent()
+                    console.log("item enter")
+                    const fn = (child.props as any).onPointerEnter
+                    if (fn) fn(...args)
+                },
+                onPointerLeave: (...args: any[]) => {
+                    handlePointerLeaveContent()
+                    console.log("item leave")
+                    const fn = (child.props as any).onPointerLeave
+                    if (fn) fn(...args)
+                },
+                forceMount: true,
+                ...child.props,
+            })
+        }
+
+        if (
+            child.type === SelectPrimitive.Item ||
+            type === SelectPrimitive.Item?.displayName
+        ) {
+            return React.cloneElement(child, {
+                onPointerDown: (e: PointerEvent | React.PointerEvent) => {
+                    handleItemActivate();
+                    console.log("item active")
+                    const fn = (child.props as any).onPointerDown;
+                    if (fn) fn(e);
+                },
+                ...child.props,
+            })
+        }
+
+        return child;
+    })
+
+    const setOpenInterval = React.useCallback(
+        (value: boolean) => {
+            const now = Date.now()
+            if (now - lastToggleRef.current < debounceMs) return
+
+            if (!value) {
+                if (now - lastItemActivate.current < allowCloseAfterItemMs) {
+                    lastToggleRef.current = now
+                    if (!isControlled) setIsOpen(false)
+                    onOpenChange?.(false)
+                    return
+                }
+                if (pointerInside.current) return
+            }
+
+            lastToggleRef.current = now
+            if (!isControlled) setIsOpen(value)
+            if (onOpenChange) onOpenChange(value)
+        },
+        [debounceMs, isControlled, onOpenChange, allowCloseAfterItemMs]
+    )
+
+    return (
+        <SelectPrimitive.Root
+            {...rest}
+            open={isControlled ? controlledOpen : isOpen}
+            onOpenChange={setOpenInterval}
+            onValueChange={(value) => {
+                onValueChange?.(value)
+                setIsOpen(false)
+            }}
+        >
+            {enhancedChildren}
+        </SelectPrimitive.Root>
+    )
+}

 const SelectGroup = SelectPrimitive.Group

--- a/src/constants.ts
+++ b/src/constants.ts
@ -1,17 +1,45 @@
-export const wellKnownGenesisHashByChainId: Record<string, string> = {
-    casper_staging_testnet: "0x07074eb5f47a6f4dd70430674e5174d5414bc055292b90392fb6f0a28c7524d1",
+type Network = {
+    chainId: string
+    label: string
+    value: string
+    logo: string
+    prefix: number
+    decimals: number
 }

-export const wellKnownChainIdByGenesisHash: Record<string, string> = {
-    "0x07074eb5f47a6f4dd70430674e5174d5414bc055292b90392fb6f0a28c7524d1": "casper_staging_testnet",
-}
+export const networks: Network[] = [
+    {
+        chainId: "0xa217f4ee58a944470e9633ca5bd6d28a428ed64cd9b6f3e413565f359f89af90",
+        value: "casper_staging_testnet",
+        label: "CASPER",
+        logo: "https://cryptologos.cc/logos/ghostchain-logo.svg",
+        prefix: 1996,
+        decimals: 18,
+    }
+]

-export const wellKnownPrefixByGenesisHash: Record<string, number> = {
-    "0x07074eb5f47a6f4dd70430674e5174d5414bc055292b90392fb6f0a28c7524d1": 1996,
-}
+export const wellKnownGenesisHashByChainId: Record<string, string> =
+    networks.reduce((wellKnownChainIds, { chainId, value }) => {
+        wellKnownChainIds[value] = chainId
+        return wellKnownChainIds
+    }, {})

-export const wellKnownDecimalsByGenesisHash: Record<string, number> = {
-    "0x07074eb5f47a6f4dd70430674e5174d5414bc055292b90392fb6f0a28c7524d1": 18,
-}
+export const wellKnownChainIdByGenesisHash: Record<string, string> =
+    networks.reduce((wellKnownChainName, { chainId, value }) => {
+        wellKnownChainName[chainId] = value
+        return wellKnownChainName
+    }, {})
+
+export const wellKnownPrefixByGenesisHash: Record<string, number> =
+    networks.reduce((wellKnownPrefixes, { chainId, prefix }) => {
+        wellKnownPrefixes[chainId] = prefix
+        return wellKnownPrefixes
+    }, {})
+
+export const wellKnownDecimalsByGenesisHash: Record<string, number> =
+    networks.reduce((wellKnownDecimals, { decimals, chainId }) => {
+        wellKnownDecimals[chainId] = decimals
+        return wellKnownDecimals
+    }, {})

 export const CHANNEL_ID = "ghost-extension"
--- a/src/containers/Options.tsx
+++ b/src/containers/Options.tsx
@ -177,7 +177,7 @@ export const Options: FunctionComponent = () => {
                            >
                                <FaGithub className="w-8 h-8" />
                                <div className="block float-left text-xs text-left">
-                                    <div className="md:block hidden text-primary">Ghost Wallet Git</div>
+                                    <div className="md:block hidden text-primary">GHOST Wallet Git</div>
                                    <div className="text-accent">v {pckg.version}</div>
                                </div>
                            </Link>
--- a/src/containers/WalletPopup/pages/Accounts/AccountDetails.tsx
+++ b/src/containers/WalletPopup/pages/Accounts/AccountDetails.tsx
@ -81,7 +81,6 @@ export const AccountDetails: React.FC = () => {
    const wrappedRequestSecretKey = pendingWrapper(requestSecretKey)
    const wrappedDeleteCryptoKey = pendingWrapper(deleteCryptoKey)

-    console.log(api)
    return (
        <Layout2 innerClassName="bg-muted">
            <Header />
--- a/src/containers/WalletPopup/pages/Accounts/Accounts.tsx
+++ b/src/containers/WalletPopup/pages/Accounts/Accounts.tsx
@ -26,7 +26,7 @@ import {
 } from "@polkadot-labs/hdkd"
 import React from "react"
 import { Header, BottomNavBar } from "../../components"
-import { networks } from "./networks"
+import { networks } from "@/constants"

 type Scheme = "Sr25519" | "Ed25519" | "Ecdsa"

@ -98,7 +98,7 @@ export const Accounts = () => {
    )

    const [selectedCryptoKeyName, setSelectedCryptoKeyName] = useState<string | undefined>()
-    const [isPending, setIsPending] = useState<boolean>()
+    const [isPending, setIsPending] = useState<boolean>(false)
    const [error, setError] = useState<string>()

    useEffect(() => {
@ -170,7 +170,7 @@ export const Accounts = () => {
                <Select
                    disabled={!cryptoKeys || cryptoKeys.length === 0}
                    value={selectedCryptoKeyName}
-                    onValueChange={(v) => setSelectedCryptoKeyName(v)}
+                    onValueChange={(value) => setSelectedCryptoKeyName(value)}
                >
                    <SelectTrigger className="w-[235px]" data-testid="accounts-select">
                        <SelectValue placeholder="Select Crypto Key" />
--- a/src/containers/WalletPopup/pages/Accounts/AddAccount.tsx
+++ b/src/containers/WalletPopup/pages/Accounts/AddAccount.tsx
@ -5,7 +5,7 @@ import {
    generateMnemonic,
    mnemonicToEntropy,
 } from "@polkadot-labs/hdkd-helpers"
-import { networks } from "./networks"
+import { networks } from "@/constants"
 import { SubmitHandler, useForm } from "react-hook-form"
 import { toHex } from "@polkadot-api/utils"
 import { useNavigate } from "react-router-dom"
--- a/src/containers/WalletPopup/pages/Accounts/ImportAccounts.tsx
+++ b/src/containers/WalletPopup/pages/Accounts/ImportAccounts.tsx
@ -20,7 +20,7 @@ import {
    ed25519CreateDerive,
    sr25519CreateDerive,
 } from "@polkadot-labs/hdkd"
-import { networks } from "./networks"
+import { networks } from "@/constants"
 import { Layout2 } from "@/components/Layout2"
 import { BottomNavBar, Header } from "../../components"
 import { Button } from "@/components/ui/button"
@ -169,7 +169,6 @@ export function ImportAccounts() {
    }

    const onSubmit: SubmitHandler<FormFields> = async (data) => {
-        console.log("started")
        let errorOccured = null

        const keynameExists = await rpc.client.getCryptoKey(data.keyname)
@ -410,10 +409,9 @@ export function ImportAccounts() {
                                    <FormItem className="mb-4">
                                        <FormControl>
                                            <Select
+                                                {...field}
                                                disabled={isSubmitting}
                                                onValueChange={(scheme) => field.onChange(scheme)}
-                                                name={field.name}
-                                                value={field.value}
                                            >
                                                <SelectTrigger
                                                    className={`${field.value ? "text-primary" : "text-muted-foreground"} w-full`}
--- a/src/containers/WalletPopup/pages/Accounts/networks.ts
+++ b/src/containers/WalletPopup/pages/Accounts/networks.ts
@ -1,17 +0,0 @@
-export type Network = {
-    chainId: string
-    label: string
-    value: string
-    logo: string
-    prefix: number
-}
-
-export const networks: Network[] = [
-    {
-        chainId: "0x07074eb5f47a6f4dd70430674e5174d5414bc055292b90392fb6f0a28c7524d1",
-        value: "casper_staging_testnet",
-        label: "Casper",
-        logo: "https://cryptologos.cc/logos/ghostchain-logo.svg",
-        prefix: 1996,
-    }
-]
--- a/src/containers/WalletPopup/pages/Welcome.tsx
+++ b/src/containers/WalletPopup/pages/Welcome.tsx
@ -46,7 +46,7 @@ export const Welcome = () => {
                        <li className="flex items-center gap-3">
                            <Signal className="w-8 h-8 text-primary" aria-hidden="true" />
                            <p className="ml-3 text-base">
-                                Be connected to the Ghost and Casper networks from your browser
+                                Be connected to the GHOST and CASPER networks from your browser
                            </p>
                        </li>
                        <li className="flex items-center gap-3">
@ -64,7 +64,7 @@ export const Welcome = () => {
                        <li className="flex items-center gap-3">
                            <GlobeLock className="w-8 h-8 text-primary" aria-hidden="true" />
                            <p className="ml-3 text-base">
-                                Make your browser be part of the Ghost and Casper networks
+                                Make your browser be part of the GHOST and CASPER networks
                            </p>
                        </li>
                    </ul>
--- a/src/environment.ts
+++ b/src/environment.ts
@ -1,3 +1,5 @@
+import { networks } from "@/constants"
+
 export type StorageEntry = { type: "braveSetting" }

 export type StorageEntryType<E extends StorageEntry> =
@ -7,7 +9,7 @@ export async function getDefaultBootnodes(
    chain: string,
 ): Promise<string[] | undefined> {
    if (
-        ["casper_staging_testnet"].includes(chain)
+        networks.map(network => network.value).includes(chain)
    ) {
        const bootNodes = (
            await (
--- a/src/inpage/index.ts
+++ b/src/inpage/index.ts
@ -16,7 +16,7 @@ import type { InPageRpcSpec } from "./types"

 const PROVIDER_INFO = {
    uuid: crypto.randomUUID(),
-    name: "Ghost Wallet Browser Extension",
+    name: "GHOST Wallet Browser Extension",
    icon: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>",
    rdns: "io.ghostchain.GhostWalletExtension",
 }
Author	SHA1	Message	Date
Uncle Fatso	8cad0db3b8	fixes for Firefox incompatibility with button text and select dropdown Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-08-20 15:23:54 +03:00
Uncle Fatso	9e3e01fecf	update chainspec and populate with extra bootnodes Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-08-17 16:02:09 +03:00
Uncle Fatso	20c73d53b6	change chain names in manifests Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-08-12 20:12:49 +03:00
Uncle Fatso	d74d7affe4	fix the builder script Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-08-12 20:12:15 +03:00
Uncle Fatso	74f922fd3e	change network names and remove hardcoded chain data Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-08-12 19:33:17 +03:00
Uncle Fatso	eff6e61a39	update to the latest CASPER deployment Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-08-12 19:31:40 +03:00
Uncle Fatso	57704e9604	remove redundant console.log Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>	2025-07-23 15:45:08 +03:00