make small UI fixes for the bridge-in page

Signed-off-by: Uncle Stretch <uncle.stretch@ghostchain.io>
2026-11-07 14:21:32 +03:00 · 2026-11-07 14:21:32 +03:00 · b09c6b82f7
commit b09c6b82f7
parent 42d5f82040
5 changed files with 53 additions and 28 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="https://ipfs.io/ipfs/QmRgJ2UbzpM58te1R91bC2neWsS28F2QatBtzerM1JekyC" type="image/png" />
+    <link rel="icon" href="https://ghostchain.io/wp-content/uploads/2026/06/ghost-favicon.ico" type="image/ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ghost-dao-interface",
  "private": true,
-  "version": "0.8.0",
+  "version": "0.8.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/containers/Bridge/BridgeGhostAddress.jsx
+++ b/src/containers/Bridge/BridgeGhostAddress.jsx
@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { ss58Decode } from "@polkadot-labs/hdkd-helpers";
+import { FormControl, OutlinedInput } from "@mui/material";

 import CheckIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
@ -9,7 +10,7 @@ import GhostStyledIcon from "../../components/Icon/GhostIcon";

 import { shorten } from "../../helpers";

-export const BridgeGhostAddressCard = ({ receiver, setReceiver }) => {
+export const BridgeGhostAddressCard = ({ receiver, setReceiver, isCard }) => {
    const [inputFocused, setInputFocused] = useState(false);
    const [innerReceiver, setInnerReceiver] = useState(receiver);

@ -25,26 +26,50 @@ export const BridgeGhostAddressCard = ({ receiver, setReceiver }) => {
        }
    }, [innerReceiver]);

+    if (isCard) {
+        return (
+            <SwapCard
+                id={`bridge-token-receiver-card`}
+                inputWidth={"100%"}
+                onBlur={() => setInputFocused(true)}
+                onFocus={() => setInputFocused(false)}
+                onMouseLeave={() => setInputFocused(true)}
+                onMouseEnter={() => setInputFocused(false)}
+                onChange={event => setInnerReceiver(event.currentTarget.value)}
+                placeholder={receiver ? shorten(receiver, 15, -10) : "GHOST address (sf prefixed)"}
+                value={receiver ? "" : innerReceiver}
+                inputProps={{ "data-testid": "fromInput" }}
+                endString={receiver
+                    ? <GhostStyledIcon color="success" viewBox="0 0 25 25" component={CheckIcon} />
+                    : inputFocused && !receiver
+                        ? <GhostStyledIcon color="error" viewBox="0 0 25 25" component={CancelIcon} />
+                        : undefined
+                }
+                type="text"
+                maxWidth="100%"
+            />
+        )
+    }
+
    return (
-        <SwapCard
-            id={`bridge-token-receiver-card`}
-            inputWidth={"100%"}
-            onBlur={() => setInputFocused(true)}
-            onFocus={() => setInputFocused(false)}
-            onMouseLeave={() => setInputFocused(true)}
-            onMouseEnter={() => setInputFocused(false)}
-            onChange={event => setInnerReceiver(event.currentTarget.value)}
-            placeholder={receiver ? shorten(receiver, 15, -10) : "GHOST address (sf prefixed)"}
-            value={receiver ? "" : innerReceiver}
-            inputProps={{ "data-testid": "fromInput" }}
-            endString={receiver
-                ? <GhostStyledIcon color="success" viewBox="0 0 25 25" component={CheckIcon} />
-                : inputFocused && !receiver
-                    ? <GhostStyledIcon color="error" viewBox="0 0 25 25" component={CancelIcon} />
-                    : undefined
-            }
-            type="text"
-            maxWidth="100%"
-        />
+        <FormControl variant="outlined" color="primary" fullWidth>
+            <OutlinedInput
+                inputProps={{ "data-testid": "custom-destination-input" }}
+                id="custom-destination-input"
+                onBlur={() => setInputFocused(true)}
+                onFocus={() => setInputFocused(false)}
+                onMouseLeave={() => setInputFocused(true)}
+                onMouseEnter={() => setInputFocused(false)}
+                onChange={event => setInnerReceiver(event.currentTarget.value)}
+                placeholder={receiver ? shorten(receiver, 15, -10) : "GHOST address (sf prefixed)"}
+                value={receiver ? "" : innerReceiver}
+                endAdornment={receiver
+                    ? <GhostStyledIcon color="success" viewBox="0 0 25 25" component={CheckIcon} />
+                    : inputFocused && !receiver
+                        ? <GhostStyledIcon color="error" viewBox="0 0 25 25" component={CancelIcon} />
+                        : undefined
+                }
+            />
+        </FormControl>
    )
 }
--- a/src/containers/Bridge/BridgeSettingsModal.jsx
+++ b/src/containers/Bridge/BridgeSettingsModal.jsx
@ -39,7 +39,7 @@ export const BridgeInSettingsModal = ({ isOpen, onClose, decimals, setDecimals,
                <BridgeGhostAddressCard receiver={receiver} setReceiver={setReceiver} />
                <Box mt="8px">
                    <Typography variant="body2" color="textSecondary">
-                        Recipient address of swapped assets and liquidity tokens
+                        Custom recipient address of bridged assets
                    </Typography>
                </Box>
            </Box>
--- a/src/containers/Dex/Dex.jsx
+++ b/src/containers/Dex/Dex.jsx
@ -67,7 +67,7 @@ const Dex = ({ chainId, address, connect, config }) => {
    const { data: secondsToWait } = useStorageValue(chainId, address, DEADLINE_PREFIX, "60");
    const { data: slippage } = useStorageValue(chainId, address, SLIPPAGE_PREFIX, "5");
    const { data: formatDecimals } = useStorageValue(chainId, address, DECIMALS_PREFIX, "5");
-    const { data: actualDestinationAddress } = useStorageValue(chainId, address, DECIMALS_PREFIX, address);
+    const { data: actualDestinationAddress } = useStorageValue(chainId, address, DESTINATION_PREFIX, address);

    const [destinationAddress, setDestinationAddress] = useState(actualDestinationAddress);
    const [tokenAddressTop, setTokenAddressTop] = useState(EMPTY_ADDRESS);
@ -292,7 +292,7 @@ const Dex = ({ chainId, address, connect, config }) => {
                    </Box>

                    <Box mt="32px">
-                        <InputLabel htmlFor="recipient">Transaction deadline</InputLabel>
+                        <InputLabel htmlFor="dex-deadline">Transaction deadline</InputLabel>
                        <Box mt="8px">
                            <FormControl variant="outlined" color="primary" fullWidth>
                                <OutlinedInput
@ -313,7 +313,7 @@ const Dex = ({ chainId, address, connect, config }) => {
                    </Box>

                    <Box mt="32px">
-                        <InputLabel htmlFor="recipient">Decimal representation</InputLabel>
+                        <InputLabel htmlFor="dex-decimals">Decimal representation</InputLabel>
                        <Box mt="8px">
                            <FormControl variant="outlined" color="primary" fullWidth>
                                <OutlinedInput
@ -334,7 +334,7 @@ const Dex = ({ chainId, address, connect, config }) => {
                    </Box>

                    <Box mt="32px">
-                        <InputLabel htmlFor="recipient">
+                        <InputLabel htmlFor="dex-recipient">
                            {`${actualDestinationAddress ? "Custom" : "Default"} destination address`}
                        </InputLabel>
                        <Box mt="8px">