possibility to self applause for frozen transactions in registry

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/containers/Bridge/Bridge.jsx

@@ -18,7 +18,8 @@ import {
 import { ss58Decode, ss58Address } from "@polkadot-labs/hdkd-helpers";
 import { toHex } from "@polkadot-api/utils";
 import { decodeAddress } from "@polkadot/util-crypto";
-import { useBlockNumber, useTransactionConfirmations } from "wagmi";
+import { useTransactionConfirmations } from "wagmi";
+import { getBlockNumber } from "@wagmi/core";
 import { keccak256 } from "viem";
 import { u64, u128 } from "scale-ts";
 
@@ -78,23 +79,13 @@ const Bridge = ({ chainId, address, config, connect }) => {
     const [convertedReceiver, setConvertedReceiver] = useState(undefined);
     const [amount, setAmount] = useState("");
     const [rotation, setRotation] = useState(0);
+    const [blockNumber, setBlockNumber] = useState(0);
 
     const sliceString = (string, first, second) => {
         return string.slice(0, first) + "..." + string.slice(second);
     }
 
     const initialStoredTransactions = localStorage.getItem(STORAGE_PREFIX);
-    // const initialStoredTransactions = JSON.stringify([
-    //     {
-    //         sessionIndex: 124,
-    //         transactionHash: "0x637276eccfa0787de396877a1a259964334fb52cb5111ea84bb28f0006f06276",
-    //         receiverAddress: "sfK147dy2NapxEKwrTLLxTkmhw15kkoJeEKrg77oLFRmUQZDb",
-    //         amount: "10000000000000000000",
-    //         chainId: 11155111,
-    //         blockNumber: 9033063,
-    //         timestamp: Date.now()
-    //     }
-    // ]);
     const [storedTransactions, setStoredTransactions] = useState(
         initialStoredTransactions ? JSON.parse(initialStoredTransactions) : []
     );
@@ -147,7 +138,8 @@ const Bridge = ({ chainId, address, config, connect }) => {
     const finalityDelay = Number(evmNetwork?.finality_delay ?? 0n);
     const incomingFee = Number(evmNetwork?.incoming_fee ?? 0n) / 10000000;
 
-    const { data: blockNumber } = useBlockNumber({ watch: true });
+    getBlockNumber(config).then(block => setBlockNumber(block));
+
     const { gatekeeperAddress } = useGatekeeperAddress(chainId);
     const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
     const {
@@ -245,6 +237,20 @@ const Bridge = ({ chainId, address, config, connect }) => {
         return storedTransactions.filter(obj => obj.chainId === chainId);
     }, [storedTransactions, chainId]);
 
+    const selfApplauseUrl = useMemo(() => {
+        if (!currentRecord) return '';
+
+        const amount = new DecimalBigNumber(BigInt(currentRecord.amount), 18).toString();
+        let url = "https://lite.ghostchain.io/#/applause?";
+        url += `networkId=${chainId}&`;
+        url += `sessionIndex=${currentRecord.sessionIndex}&`;
+        url += `amount=${amount}&`;
+        url += `receiver=${currentRecord.receiverAddress}&`;
+        url += `transactionHash=${currentRecord.transactionHash}`;
+
+        return url;
+    }, [currentRecord]);
+
     const removeStoredRecord = useCallback(() => {
         const newStoredTransactions = storedTransactions.filter((_, index) => index !== activeTxIndex)
         setStoredTransactions(newStoredTransactions);
@@ -401,7 +407,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                         width: "35px",
                                                         height: "35px",
                                                         transition: "transform 0.7s ease-in-out",
-                                                        transform: `rotateX(${rotation}deg)`
+                                                        transform: `rotateX(${currentRecord.step == 1 ? rotation : 0}deg)`
                                                     }}
                                                     viewBox="0 0 25 25"
                                                     component={ThumbUpIcon}
@@ -411,7 +417,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                         width: "35px",
                                                         height: "35px",
                                                         transition: "transform 0.7s ease-in-out",
-                                                        transform: `rotateX(${rotation}deg)`
+                                                        transform: `rotateX(${currentRecord.step == 1 ? rotation : 0}deg)`
                                                     }}
                                                     viewBox="0 0 25 25"
                                                     component={ThumbDownAltIcon}
@@ -469,6 +475,25 @@ const Bridge = ({ chainId, address, config, connect }) => {
                             </Box>
                         </Box>
 
+                        {(currentRecord?.step ?? 0) < 3 && currentSession > (currentRecord?.sessionIndex ?? 0) + 2 &&
+                            <Box display="flex" flexDirection="column" gap="5px">
+                                <PrimaryButton
+                                    fullWidth
+                                    onClick={() => window.open(
+                                        selfApplauseUrl,
+                                        '_blank',
+                                        'noopener,noreferrer'
+                                    )}
+                                >
+                                    Self Applause
+                                </PrimaryButton>
+
+                                <Typography variant="body2" sx={{ fontStyle: "italic" }}>
+                                    Your transaction seems to be stuck, possibly because of a problem with some inactive validators on the network.
+                                </Typography>
+                            </Box>
+                        }
+
                         <Box display="flex" flexDirection="column" gap="5px" padding="0.6rem 0">
                             <Box display="flex" flexDirection="row" justifyContent="space-between">
                                 <Box display="flex" flexDirection="row">
@@ -507,7 +532,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
                                                                 textOverflow: "ellipsis",
                                                                 color: clapped
                                                                     ? theme.colors.primary[300]
-                                                                    : clapped
+                                                                    : disabled
                                                                         ? theme.colors.feedback.error
                                                                         : theme.colors.gray[10]
                                                             }}