ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented ability to watch cross-chain transaction status

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-08-22 18:00:48 +03:00
parent 9af710179f
commit 0a3786b85e
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
15 changed files with 1016 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "ghost-dao-interface", "name": "ghost-dao-interface",
"private": true, "private": true,
"version": "0.2.13", "version": "0.2.14",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@ -18,8 +18,14 @@
"@mui/icons-material": "^6.4.7", "@mui/icons-material": "^6.4.7",
"@mui/material": "^6.4.7", "@mui/material": "^6.4.7",
"@mui/utils": "^6.4.6", "@mui/utils": "^6.4.6",
"@polkadot-api/metadata-builders": "0.13.0",
"@polkadot-api/observable-client": "~0.8.6",
"@polkadot-api/substrate-bindings": "0.15.0",
"@polkadot-api/substrate-client": "~0.3.0",
"@polkadot-api/utils": "~0.1.2", "@polkadot-api/utils": "~0.1.2",
"@polkadot-labs/hdkd-helpers": "^0.0.20", "@polkadot-labs/hdkd-helpers": "^0.0.20",
"@polkadot/util-crypto": "^13.5.5",
"@substrate/connect-discovery": "^0.2.2",
"@tanstack/react-query": "^5.67.2", "@tanstack/react-query": "^5.67.2",
"@tanstack/react-query-devtools": "^5.67.2", "@tanstack/react-query-devtools": "^5.67.2",
"@wagmi/core": "^2.17.3", "@wagmi/core": "^2.17.3",
@ -29,7 +35,10 @@
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-hot-toast": "^2.5.2", "react-hot-toast": "^2.5.2",
"react-router-dom": "^7.3.0", "react-router-dom": "^7.3.0",
"rxjs": "7.8.1",
"scale-ts": "^1.6.1",
"scss": "^0.2.4", "scss": "^0.2.4",
"swr": "2.2.5",
"viem": "^2.31.0", "viem": "^2.31.0",
"wagmi": "^2.15.6" "wagmi": "^2.15.6"
}, },

336
pnpm-lock.yaml
View File

@ -32,12 +32,30 @@ importers:
'@mui/utils': '@mui/utils':
specifier: ^6.4.6 specifier: ^6.4.6
version: 6.4.6(@types/react@19.0.10)(react@19.0.0) version: 6.4.6(@types/react@19.0.10)(react@19.0.0)
'@polkadot-api/metadata-builders':
specifier: 0.13.0
version: 0.13.0
'@polkadot-api/observable-client':
specifier: ~0.8.6
version: 0.8.6(@polkadot-api/substrate-client@0.3.0)(rxjs@7.8.1)
'@polkadot-api/substrate-bindings':
specifier: 0.15.0
version: 0.15.0
'@polkadot-api/substrate-client':
specifier: ~0.3.0
version: 0.3.0
'@polkadot-api/utils': '@polkadot-api/utils':
specifier: 0.1.2 specifier: ~0.1.2
version: 0.1.2 version: 0.1.2
'@polkadot-labs/hdkd-helpers': '@polkadot-labs/hdkd-helpers':
specifier: ^0.0.20 specifier: ^0.0.20
version: 0.0.20 version: 0.0.20
'@polkadot/util-crypto':
specifier: ^13.5.5
version: 13.5.5(@polkadot/util@13.5.5)
'@substrate/connect-discovery':
specifier: ^0.2.2
version: 0.2.2
'@tanstack/react-query': '@tanstack/react-query':
specifier: ^5.67.2 specifier: ^5.67.2
version: 5.67.2(react@19.0.0) version: 5.67.2(react@19.0.0)
@ -65,9 +83,18 @@ importers:
react-router-dom: react-router-dom:
specifier: ^7.3.0 specifier: ^7.3.0
version: 7.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) version: 7.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
rxjs:
specifier: 7.8.1
version: 7.8.1
scale-ts:
specifier: ^1.6.1
version: 1.6.1
scss: scss:
specifier: ^0.2.4 specifier: ^0.2.4
version: 0.2.4 version: 0.2.4
swr:
specifier: 2.2.5
version: 2.2.5(react@19.0.0)
viem: viem:
specifier: ^2.31.0 specifier: ^2.31.0
version: 2.31.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)(zod@3.22.4) version: 2.31.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)(zod@3.22.4)
@ -725,10 +752,6 @@ packages:
resolution: {integrity: sha512-k11yZxZg+t+gWvBbIswW0yoJlu8cHOC7dhunwOzoWH/mXGBiYyR4YY6hAEK/3EUs4UpB8la1RfdRpeGsFHkWsA==} resolution: {integrity: sha512-k11yZxZg+t+gWvBbIswW0yoJlu8cHOC7dhunwOzoWH/mXGBiYyR4YY6hAEK/3EUs4UpB8la1RfdRpeGsFHkWsA==}
engines: {node: ^14.21.3 || >=16} engines: {node: ^14.21.3 || >=16}
'@noble/curves@1.9.2':
resolution: {integrity: sha512-HxngEd2XUcg9xi20JkwlLCtYwfoFw4JGkuZpT+WlsPD4gB/cxkvTD8fSsoAnphGZhFdZYKeQIPCuFlWPm1uE0g==}
engines: {node: ^14.21.3 || >=16}
'@noble/curves@1.9.6': '@noble/curves@1.9.6':
resolution: {integrity: sha512-GIKz/j99FRthB8icyJQA51E8Uk5hXmdyThjgQXRKiv9h0zeRlzSCLIzFw6K1LotZ3XuB7yzlf76qk7uBmTdFqA==} resolution: {integrity: sha512-GIKz/j99FRthB8icyJQA51E8Uk5hXmdyThjgQXRKiv9h0zeRlzSCLIzFw6K1LotZ3XuB7yzlf76qk7uBmTdFqA==}
engines: {node: ^14.21.3 || >=16} engines: {node: ^14.21.3 || >=16}
@ -753,12 +776,115 @@ packages:
resolution: {integrity: sha512-IHnV6A+zxU7XwmKFinmYjUcwlyK9+xkG3/s9KcQhI9BjQKycrJ1JRO+FbNYPwZiPKW3je/DR0k7w8/gLa5eaxQ==} resolution: {integrity: sha512-IHnV6A+zxU7XwmKFinmYjUcwlyK9+xkG3/s9KcQhI9BjQKycrJ1JRO+FbNYPwZiPKW3je/DR0k7w8/gLa5eaxQ==}
deprecated: 'The package is now available as "qr": npm install qr' deprecated: 'The package is now available as "qr": npm install qr'
'@polkadot-api/json-rpc-provider@0.0.4':
resolution: {integrity: sha512-9cDijLIxzHOBuq6yHqpqjJ9jBmXrctjc1OFqU+tQrS96adQze3mTIH6DTgfb/0LMrqxzxffz1HQGrIlEH00WrA==}
'@polkadot-api/metadata-builders@0.10.2':
resolution: {integrity: sha512-rtdihBFd25oT9/71Q+EOR9q6E6mCl1pPe/2He/LtlY0TyHiYqO2KpMZNXkoGcw1RHvrV+CAtDFMvK1j3n8aW8w==}
'@polkadot-api/metadata-builders@0.13.0':
resolution: {integrity: sha512-z8AT0mbOniHmiI0sNjQSUtOXGLHTqFNV8bqdyes1WAMbpBEIcnTlQxhIrJkpPEQCh7kLNTHqa3OQjSIrOH7X1Q==}
'@polkadot-api/observable-client@0.8.6':
resolution: {integrity: sha512-ci5HC8TYjGxoTG/QM+LLuGrfIsn+dtR7BBQz483c/ML8K/Hxl9v+evgZzPi9xNMwZ25mytn9lhA5dovYSEauSA==}
peerDependencies:
'@polkadot-api/substrate-client': 0.3.0
rxjs: '>=7.8.0'
'@polkadot-api/substrate-bindings@0.11.1':
resolution: {integrity: sha512-+oqAZB7y18KrP/DqKmU2P3nNmRzjCY7edtW7tyA1g1jPouF7HhRr/Q13lJseDX9sdE2FZGrKZtivzsw8XeXBng==}
'@polkadot-api/substrate-bindings@0.15.0':
resolution: {integrity: sha512-w/GSQeEYfFqyM50s2c3KDfl/qumtLnk7EUALXER/eFWSawXYVeL3PCg95GZfDFrc7MODVmq+XeXUoZBFGHvodA==}
'@polkadot-api/substrate-client@0.3.0':
resolution: {integrity: sha512-0hEvQLKH2zhaFzE8DPkWehvJilec8u2O2wbIEUStm0OJ8jIFtJ40MFjXQfB01dXBWUz1KaVBqS6xd3sZA90Dpw==}
'@polkadot-api/utils@0.1.2': '@polkadot-api/utils@0.1.2':
resolution: {integrity: sha512-yhs5k2a8N1SBJcz7EthZoazzLQUkZxbf+0271Xzu42C5AEM9K9uFLbsB+ojzHEM72O5X8lPtSwGKNmS7WQyDyg==} resolution: {integrity: sha512-yhs5k2a8N1SBJcz7EthZoazzLQUkZxbf+0271Xzu42C5AEM9K9uFLbsB+ojzHEM72O5X8lPtSwGKNmS7WQyDyg==}
'@polkadot-api/utils@0.2.0':
resolution: {integrity: sha512-nY3i5fQJoAxU4n3bD7Fs208/KR2J95SGfVc58kDjbRYN5a84kWaGEqzjBNtP9oqht49POM8Bm9mbIrkvC1Bzuw==}
'@polkadot-labs/hdkd-helpers@0.0.20': '@polkadot-labs/hdkd-helpers@0.0.20':
resolution: {integrity: sha512-P3o1FpPqLACaHhDT/J6O3xYQIBdOs0FDJtZQI8/LGotgIGp85mKDnH/cSSK3QC2i67ZY/d/POs8K0jEspLMiGg==} resolution: {integrity: sha512-P3o1FpPqLACaHhDT/J6O3xYQIBdOs0FDJtZQI8/LGotgIGp85mKDnH/cSSK3QC2i67ZY/d/POs8K0jEspLMiGg==}
'@polkadot/networks@13.5.5':
resolution: {integrity: sha512-gTaKVSDRxjNAQ/oFMA83DXOo8A+/LP4XePbEHxNCku/Ox5R3IYGKTeZhlHgYtUZvdZgK+miyroEyz1Eq6Z9p+Q==}
engines: {node: '>=18'}
'@polkadot/util-crypto@13.5.5':
resolution: {integrity: sha512-LAHarViiPwjrXl05fXOV5pW6jvK8A0Y6uIJnttSSERjTKqG5O4VtgRAcqLXShTp1rEVE5T4DaIX5xZd7azBHyg==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': 13.5.5
'@polkadot/util@13.5.5':
resolution: {integrity: sha512-O3sGI8vWmv5o1cd8fDkc+cZGpUsG+ZUFAOitgv6bRt5llaBqS5VpTrUANEjfgUMgUuTn7Y2cPKGDLItYr5WnUg==}
engines: {node: '>=18'}
'@polkadot/wasm-bridge@7.4.1':
resolution: {integrity: sha512-tdkJaV453tezBxhF39r4oeG0A39sPKGDJmN81LYLf+Fihb7astzwju+u75BRmDrHZjZIv00un3razJEWCxze6g==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': '*'
'@polkadot/x-randomvalues': '*'
'@polkadot/wasm-crypto-asmjs@7.4.1':
resolution: {integrity: sha512-pwU8QXhUW7IberyHJIQr37IhbB6DPkCG5FhozCiNTq4vFBsFPjm9q8aZh7oX1QHQaiAZa2m2/VjIVE+FHGbvHQ==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': '*'
'@polkadot/wasm-crypto-init@7.4.1':
resolution: {integrity: sha512-AVka33+f7MvXEEIGq5U0dhaA2SaXMXnxVCQyhJTaCnJ5bRDj0Xlm3ijwDEQUiaDql7EikbkkRtmlvs95eSUWYQ==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': '*'
'@polkadot/x-randomvalues': '*'
'@polkadot/wasm-crypto-wasm@7.4.1':
resolution: {integrity: sha512-PE1OAoupFR0ZOV2O8tr7D1FEUAwaggzxtfs3Aa5gr+yxlSOaWUKeqsOYe1KdrcjmZVV3iINEAXxgrbzCmiuONg==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': '*'
'@polkadot/wasm-crypto@7.4.1':
resolution: {integrity: sha512-kHN/kF7hYxm1y0WeFLWeWir6oTzvcFmR4N8fJJokR+ajYbdmrafPN+6iLgQVbhZnDdxyv9jWDuRRsDnBx8tPMQ==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': '*'
'@polkadot/x-randomvalues': '*'
'@polkadot/wasm-util@7.4.1':
resolution: {integrity: sha512-RAcxNFf3zzpkr+LX/ItAsvj+QyM56TomJ0xjUMo4wKkHjwsxkz4dWJtx5knIgQz/OthqSDMR59VNEycQeNuXzA==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': '*'
'@polkadot/x-bigint@13.5.5':
resolution: {integrity: sha512-SAd7Lfdgp6mz+utkoML8MN9FqTMCuPfk7v5rLJnm9vHgXw5uYnycbjH5Uc7ZgQIQWtMXJV3thrlltMan5DUXtA==}
engines: {node: '>=18'}
'@polkadot/x-global@13.5.5':
resolution: {integrity: sha512-fw+VM191bodacSeieMm8Vmrym4jjevX08IINDcQTd1gIOjtE5CriJhwfBbAF4WnlTp/11jhhbX4/SvWMubXAzQ==}
engines: {node: '>=18'}
'@polkadot/x-randomvalues@13.5.5':
resolution: {integrity: sha512-W0AoNgr/NEVsHWegJUjUyI9Q1IoTHILIb/bkjyTcXTU3+2YFxP12ophhsI1dMaNbXqFotNyts7mNOsTVDnQNXA==}
engines: {node: '>=18'}
peerDependencies:
'@polkadot/util': 13.5.5
'@polkadot/wasm-util': '*'
'@polkadot/x-textdecoder@13.5.5':
resolution: {integrity: sha512-KkZ1rqdJZ8tsRY0D5pLqfU8B/BrSQVEPMKHj4s/oc8dTrikfEUC+ELaH2jdrUqsZX6K/OTHjaF0J31YZcr7rCg==}
engines: {node: '>=18'}
'@polkadot/x-textencoder@13.5.5':
resolution: {integrity: sha512-yEgUUojBb4goYf4V5I7urdJ+W+1aI13U1kZmUwMc+/G2YQz8pX3s/Tyb/iuxU5MlFh0AZZXP5NqUnFol+vwNEg==}
engines: {node: '>=18'}
'@popperjs/core@2.11.8': '@popperjs/core@2.11.8':
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
@ -935,6 +1061,15 @@ packages:
'@socket.io/component-emitter@3.1.2': '@socket.io/component-emitter@3.1.2':
resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==} resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
'@substrate/connect-discovery@0.2.2':
resolution: {integrity: sha512-IaW1VnSiNKE6ITzMaWu6kph52jIpSswegV4S6id/XnVpC5gqp/iBidmMy88REecatyktPZKBCwfyFxRDHeiijQ==}
'@substrate/discovery@0.2.2':
resolution: {integrity: sha512-vD5B1LqIaiDBWpJ7h1b89jzhU0AKjOySFAt2zbTDz+gpRdcOn0I8PoxhOrent4LXFX9O/ch8bGG/JYDtr2B2QA==}
'@substrate/ss58-registry@1.51.0':
resolution: {integrity: sha512-TWDurLiPxndFgKjVavCniytBIw+t4ViOi7TYp9h/D0NMmkEc9klFTo+827eyEJ0lELpqO207Ey7uGxUa+BS1jQ==}
'@svgr/babel-plugin-add-jsx-attribute@8.0.0': '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -1032,6 +1167,9 @@ packages:
'@types/babel__traverse@7.20.6': '@types/babel__traverse@7.20.6':
resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==} resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
'@types/bn.js@5.2.0':
resolution: {integrity: sha512-DLbJ1BPqxvQhIGbeu8VbUC1DiAiahHtAYvA0ZEAa4P31F7IaArc8z3C3BRQdWX4mtLQuABG4yzp76ZrS02Ui1Q==}
'@types/cookie@0.6.0': '@types/cookie@0.6.0':
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
@ -1319,6 +1457,9 @@ packages:
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
engines: {node: '>= 14.16.0'} engines: {node: '>= 14.16.0'}
client-only@0.0.1:
resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
cliui@6.0.0: cliui@6.0.0:
resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==} resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@ -2252,8 +2393,8 @@ packages:
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
rxjs@7.8.2: rxjs@7.8.1:
resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==} resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
safe-buffer@5.1.2: safe-buffer@5.1.2:
resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==} resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
@ -2512,6 +2653,11 @@ packages:
svg-parser@2.0.4: svg-parser@2.0.4:
resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
swr@2.2.5:
resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
peerDependencies:
react: ^16.11.0 || ^17.0.0 || ^18.0.0
sync-child-process@1.0.2: sync-child-process@1.0.2:
resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==} resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
engines: {node: '>=16.0.0'} engines: {node: '>=16.0.0'}
@ -3574,10 +3720,6 @@ snapshots:
dependencies: dependencies:
'@noble/hashes': 1.8.0 '@noble/hashes': 1.8.0
'@noble/curves@1.9.2':
dependencies:
'@noble/hashes': 1.8.0
'@noble/curves@1.9.6': '@noble/curves@1.9.6':
dependencies: dependencies:
'@noble/hashes': 1.8.0 '@noble/hashes': 1.8.0
@ -3592,8 +3734,49 @@ snapshots:
'@paulmillr/qr@0.2.1': {} '@paulmillr/qr@0.2.1': {}
'@polkadot-api/json-rpc-provider@0.0.4': {}
'@polkadot-api/metadata-builders@0.10.2':
dependencies:
'@polkadot-api/substrate-bindings': 0.11.1
'@polkadot-api/utils': 0.1.2
'@polkadot-api/metadata-builders@0.13.0':
dependencies:
'@polkadot-api/substrate-bindings': 0.15.0
'@polkadot-api/utils': 0.2.0
'@polkadot-api/observable-client@0.8.6(@polkadot-api/substrate-client@0.3.0)(rxjs@7.8.1)':
dependencies:
'@polkadot-api/metadata-builders': 0.10.2
'@polkadot-api/substrate-bindings': 0.11.1
'@polkadot-api/substrate-client': 0.3.0
'@polkadot-api/utils': 0.1.2
rxjs: 7.8.1
'@polkadot-api/substrate-bindings@0.11.1':
dependencies:
'@noble/hashes': 1.8.0
'@polkadot-api/utils': 0.1.2
'@scure/base': 1.2.6
scale-ts: 1.6.1
'@polkadot-api/substrate-bindings@0.15.0':
dependencies:
'@noble/hashes': 1.8.0
'@polkadot-api/utils': 0.2.0
'@scure/base': 1.2.6
scale-ts: 1.6.1
'@polkadot-api/substrate-client@0.3.0':
dependencies:
'@polkadot-api/json-rpc-provider': 0.0.4
'@polkadot-api/utils': 0.1.2
'@polkadot-api/utils@0.1.2': {} '@polkadot-api/utils@0.1.2': {}
'@polkadot-api/utils@0.2.0': {}
'@polkadot-labs/hdkd-helpers@0.0.20': '@polkadot-labs/hdkd-helpers@0.0.20':
dependencies: dependencies:
'@noble/curves': 1.9.6 '@noble/curves': 1.9.6
@ -3602,6 +3785,105 @@ snapshots:
'@scure/sr25519': 0.2.0 '@scure/sr25519': 0.2.0
scale-ts: 1.6.1 scale-ts: 1.6.1
'@polkadot/networks@13.5.5':
dependencies:
'@polkadot/util': 13.5.5
'@substrate/ss58-registry': 1.51.0
tslib: 2.8.1
'@polkadot/util-crypto@13.5.5(@polkadot/util@13.5.5)':
dependencies:
'@noble/curves': 1.9.6
'@noble/hashes': 1.8.0
'@polkadot/networks': 13.5.5
'@polkadot/util': 13.5.5
'@polkadot/wasm-crypto': 7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))
'@polkadot/wasm-util': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/x-bigint': 13.5.5
'@polkadot/x-randomvalues': 13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5))
'@scure/base': 1.2.6
tslib: 2.8.1
'@polkadot/util@13.5.5':
dependencies:
'@polkadot/x-bigint': 13.5.5
'@polkadot/x-global': 13.5.5
'@polkadot/x-textdecoder': 13.5.5
'@polkadot/x-textencoder': 13.5.5
'@types/bn.js': 5.2.0
bn.js: 5.2.2
tslib: 2.8.1
'@polkadot/wasm-bridge@7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))':
dependencies:
'@polkadot/util': 13.5.5
'@polkadot/wasm-util': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/x-randomvalues': 13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5))
tslib: 2.8.1
'@polkadot/wasm-crypto-asmjs@7.4.1(@polkadot/util@13.5.5)':
dependencies:
'@polkadot/util': 13.5.5
tslib: 2.8.1
'@polkadot/wasm-crypto-init@7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))':
dependencies:
'@polkadot/util': 13.5.5
'@polkadot/wasm-bridge': 7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))
'@polkadot/wasm-crypto-asmjs': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/wasm-crypto-wasm': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/wasm-util': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/x-randomvalues': 13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5))
tslib: 2.8.1
'@polkadot/wasm-crypto-wasm@7.4.1(@polkadot/util@13.5.5)':
dependencies:
'@polkadot/util': 13.5.5
'@polkadot/wasm-util': 7.4.1(@polkadot/util@13.5.5)
tslib: 2.8.1
'@polkadot/wasm-crypto@7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))':
dependencies:
'@polkadot/util': 13.5.5
'@polkadot/wasm-bridge': 7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))
'@polkadot/wasm-crypto-asmjs': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/wasm-crypto-init': 7.4.1(@polkadot/util@13.5.5)(@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)))
'@polkadot/wasm-crypto-wasm': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/wasm-util': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/x-randomvalues': 13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5))
tslib: 2.8.1
'@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5)':
dependencies:
'@polkadot/util': 13.5.5
tslib: 2.8.1
'@polkadot/x-bigint@13.5.5':
dependencies:
'@polkadot/x-global': 13.5.5
tslib: 2.8.1
'@polkadot/x-global@13.5.5':
dependencies:
tslib: 2.8.1
'@polkadot/x-randomvalues@13.5.5(@polkadot/util@13.5.5)(@polkadot/wasm-util@7.4.1(@polkadot/util@13.5.5))':
dependencies:
'@polkadot/util': 13.5.5
'@polkadot/wasm-util': 7.4.1(@polkadot/util@13.5.5)
'@polkadot/x-global': 13.5.5
tslib: 2.8.1
'@polkadot/x-textdecoder@13.5.5':
dependencies:
'@polkadot/x-global': 13.5.5
tslib: 2.8.1
'@polkadot/x-textencoder@13.5.5':
dependencies:
'@polkadot/x-global': 13.5.5
tslib: 2.8.1
'@popperjs/core@2.11.8': {} '@popperjs/core@2.11.8': {}
'@reown/appkit-common@1.7.8(bufferutil@4.0.9)(utf-8-validate@5.0.10)(zod@3.22.4)': '@reown/appkit-common@1.7.8(bufferutil@4.0.9)(utf-8-validate@5.0.10)(zod@3.22.4)':
@ -3979,6 +4261,14 @@ snapshots:
'@socket.io/component-emitter@3.1.2': {} '@socket.io/component-emitter@3.1.2': {}
'@substrate/connect-discovery@0.2.2':
dependencies:
'@substrate/discovery': 0.2.2
'@substrate/discovery@0.2.2': {}
'@substrate/ss58-registry@1.51.0': {}
'@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.26.9)': '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.26.9)':
dependencies: dependencies:
'@babel/core': 7.26.9 '@babel/core': 7.26.9
@ -4085,6 +4375,10 @@ snapshots:
dependencies: dependencies:
'@babel/types': 7.26.9 '@babel/types': 7.26.9
'@types/bn.js@5.2.0':
dependencies:
'@types/node': 22.7.5
'@types/cookie@0.6.0': {} '@types/cookie@0.6.0': {}
'@types/debug@4.1.12': '@types/debug@4.1.12':
@ -4100,7 +4394,6 @@ snapshots:
'@types/node@22.7.5': '@types/node@22.7.5':
dependencies: dependencies:
undici-types: 6.19.8 undici-types: 6.19.8
optional: true
'@types/parse-json@4.0.2': {} '@types/parse-json@4.0.2': {}
@ -4828,6 +5121,8 @@ snapshots:
dependencies: dependencies:
readdirp: 4.1.2 readdirp: 4.1.2
client-only@0.0.1: {}
cliui@6.0.0: cliui@6.0.0:
dependencies: dependencies:
string-width: 4.2.3 string-width: 4.2.3
@ -4968,7 +5263,7 @@ snapshots:
dependencies: dependencies:
'@ecies/ciphers': 0.2.3(@noble/ciphers@1.3.0) '@ecies/ciphers': 0.2.3(@noble/ciphers@1.3.0)
'@noble/ciphers': 1.3.0 '@noble/ciphers': 1.3.0
'@noble/curves': 1.9.2 '@noble/curves': 1.9.6
'@noble/hashes': 1.8.0 '@noble/hashes': 1.8.0
electron-to-chromium@1.5.113: {} electron-to-chromium@1.5.113: {}
@ -5512,7 +5807,7 @@ snapshots:
ox@0.6.7(zod@3.22.4): ox@0.6.7(zod@3.22.4):
dependencies: dependencies:
'@adraffy/ens-normalize': 1.11.0 '@adraffy/ens-normalize': 1.11.0
'@noble/curves': 1.9.2 '@noble/curves': 1.9.6
'@noble/hashes': 1.8.0 '@noble/hashes': 1.8.0
'@scure/bip32': 1.6.2 '@scure/bip32': 1.6.2
'@scure/bip39': 1.5.4 '@scure/bip39': 1.5.4
@ -5775,7 +6070,7 @@ snapshots:
'@rollup/rollup-win32-x64-msvc': 4.34.9 '@rollup/rollup-win32-x64-msvc': 4.34.9
fsevents: 2.3.3 fsevents: 2.3.3
rxjs@7.8.2: rxjs@7.8.1:
dependencies: dependencies:
tslib: 2.8.1 tslib: 2.8.1
@ -5857,7 +6152,7 @@ snapshots:
buffer-builder: 0.2.0 buffer-builder: 0.2.0
colorjs.io: 0.5.2 colorjs.io: 0.5.2
immutable: 5.0.3 immutable: 5.0.3
rxjs: 7.8.2 rxjs: 7.8.1
supports-color: 8.1.1 supports-color: 8.1.1
sync-child-process: 1.0.2 sync-child-process: 1.0.2
varint: 6.0.0 varint: 6.0.0
@ -5994,6 +6289,12 @@ snapshots:
svg-parser@2.0.4: {} svg-parser@2.0.4: {}
swr@2.2.5(react@19.0.0):
dependencies:
client-only: 0.0.1
react: 19.0.0
use-sync-external-store: 1.4.0(react@19.0.0)
sync-child-process@1.0.2: sync-child-process@1.0.2:
dependencies: dependencies:
sync-message-port: 1.1.3 sync-message-port: 1.1.3
@ -6024,8 +6325,7 @@ snapshots:
uncrypto@0.1.3: {} uncrypto@0.1.3: {}
undici-types@6.19.8: undici-types@6.19.8: {}
optional: true
unstorage@1.16.0(idb-keyval@6.2.2): unstorage@1.16.0(idb-keyval@6.2.2):
dependencies: dependencies:

19
src/App.jsx
View File

@ -16,6 +16,7 @@ import TopBar from "./components/TopBar/TopBar";
import { shouldTriggerSafetyCheck } from "./helpers"; import { shouldTriggerSafetyCheck } from "./helpers";
import { isNetworkAvailable } from "./constants"; import { isNetworkAvailable } from "./constants";
import useTheme from "./hooks/useTheme"; import useTheme from "./hooks/useTheme";
import { useUnstableProvider } from "./hooks/ghost";
import { dark as darkTheme } from "./themes/dark.js"; import { dark as darkTheme } from "./themes/dark.js";
import { girth as gTheme } from "./themes/girth.js"; import { girth as gTheme } from "./themes/girth.js";
import { light as lightTheme } from "./themes/light.js"; import { light as lightTheme } from "./themes/light.js";
@ -112,6 +113,24 @@ function App() {
const isSmallerScreen = useMediaQuery("(max-width: 1047px)"); const isSmallerScreen = useMediaQuery("(max-width: 1047px)");
const isSmallScreen = useMediaQuery("(max-width: 600px)"); const isSmallScreen = useMediaQuery("(max-width: 600px)");
const {
providerDetail,
providerDetails,
connectProviderDetail
} = useUnstableProvider()
useEffect(() => {
// TODO: make sure we are using correct extension
const maybeProvider = providerDetails?.find(obj => obj.info.rdns === "io.ghostchain.GhostWalletExtension")
if (maybeProvider && !providerDetail) {
try {
connectProviderDetail(maybeProvider)
} catch (e) {
console.log(e)
}
}
}, [providerDetail, providerDetails, connectProviderDetail])
useEffect(() => { useEffect(() => {
if (shouldTriggerSafetyCheck()) { if (shouldTriggerSafetyCheck()) {
toast.success("Safety Check: Always verify you're on app.dao.ghostchain.io!", { duration: 5000 }); toast.success("Safety Check: Always verify you're on app.dao.ghostchain.io!", { duration: 5000 });

478
src/containers/Bridge/Bridge.jsx
View File

@ -14,12 +14,16 @@ import {
useMediaQuery, useMediaQuery,
useTheme useTheme
} from "@mui/material"; } from "@mui/material";
import { ss58Decode } from "@polkadot-labs/hdkd-helpers"; import { ss58Decode, ss58Address } from "@polkadot-labs/hdkd-helpers";
import { toHex } from "@polkadot-api/utils"; import { toHex } from "@polkadot-api/utils";
import { decodeAddress } from "@polkadot/util-crypto";
import { useBlockNumber, useTransactionConfirmations } from "wagmi"; import { useBlockNumber, useTransactionConfirmations } from "wagmi";
import { keccak256 } from "viem";
import { u64, u128 } from "scale-ts";
import PendingIcon from '@mui/icons-material/Pending';
import PendingActionsIcon from '@mui/icons-material/PendingActions'; import PendingActionsIcon from '@mui/icons-material/PendingActions';
import PublicIcon from '@mui/icons-material/Public'; import ArrowBack from '@mui/icons-material/ArrowBack';
import ArrowRightIcon from '@mui/icons-material/ArrowRight'; import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import ThumbUpIcon from '@mui/icons-material/ThumbUp'; import ThumbUpIcon from '@mui/icons-material/ThumbUp';
@ -42,6 +46,17 @@ import { formatCurrency } from "../../helpers";
import { useTokenSymbol, useBalance } from "../../hooks/tokens"; import { useTokenSymbol, useBalance } from "../../hooks/tokens";
import { useGatekeeperAddress, ghost } from "../../hooks/staking"; import { useGatekeeperAddress, ghost } from "../../hooks/staking";
import {
useEvmNetwork,
useClapsInSession,
useApplauseThreshold,
useReceivedClaps,
useApplausesForTransaction,
useAuthorities,
useCurrentIndex,
useUnstableProvider,
useMetadata
} from "../../hooks/ghost";
const STORAGE_PREFIX = "storedTransactions" const STORAGE_PREFIX = "storedTransactions"
@ -54,129 +69,79 @@ const Bridge = ({ chainId, address, config, connect }) => {
const [isPending, setIsPending] = useState(false); const [isPending, setIsPending] = useState(false);
const [bridgeAction, setBridgeAction] = useState(true); const [bridgeAction, setBridgeAction] = useState(true);
const [activeTxIndex, setActiveTxIndex] = useState(-1); const [activeTxIndex, setActiveTxIndex] = useState(-1);
const [txStep, setTxStep] = useState(0);
const [receiver, setReceiver] = useState(""); const [receiver, setReceiver] = useState("");
const [convertedReceiver, setConvertedReceiver] = useState(undefined); const [convertedReceiver, setConvertedReceiver] = useState(undefined);
const [amount, setAmount] = useState(""); const [amount, setAmount] = useState("");
// ReceivedClaps && ApplausesForTransaction const sliceString = (string, first, second) => {
// session_index return string.slice(0, first) + "..." + string.slice(second);
// transaction_hash }
// keccak256(receiver, amount, chain_id)
// const initialStoredTransactions = sessionStorage.getItem(STORAGE_PREFIX); const initialStoredTransactions = sessionStorage.getItem(STORAGE_PREFIX);
const initialStoredTransactions = JSON.stringify([ // const initialStoredTransactions = JSON.stringify([
{ // {
sessionIndex: 23, // sessionIndex: 124,
transactionHash: "0x11111111111111111", // transactionHash: "0x637276eccfa0787de396877a1a259964334fb52cb5111ea84bb28f0006f06276",
receiver: "sfAasdadasasads", // receiverAddress: "sfK147dy2NapxEKwrTLLxTkmhw15kkoJeEKrg77oLFRmUQZDb",
amount: "2312323232223232", // amount: "10000000000000000000",
chainId: 11155111, // chainId: 11155111,
timestamp: Date.now() // blockNumber: 9033063,
}, // timestamp: Date.now()
{ // }
sessionIndex: 23, // ]);
transactionHash: "0x2222222222222222222",
receiver: "sfAasdadasasads",
amount: "1122232232",
chainId: 1,
timestamp: Date.now()
},
{
sessionIndex: 24,
transactionHash: "0x333333333333333333",
receiver: "sfAasdadasasads",
amount: "99999999999999992",
chainId: 11155111,
timestamp: Date.now()
},
{
sessionIndex: 23,
transactionHash: "0x4444444444444444444",
receiver: "sfAasdadasasads",
amount: "2312323232223232",
chainId: 11155111,
timestamp: Date.now()
},
{
sessionIndex: 23,
transactionHash: "0x555555555555555555555",
receiver: "sfAasdadasasads",
amount: "1122232232",
chainId: 1,
timestamp: Date.now()
},
{
sessionIndex: 24,
transactionHash: "0x66666666666666666666666666",
receiver: "sfAasdadasasads",
amount: "99999999999999992",
chainId: 11155111,
timestamp: Date.now()
},
{
sessionIndex: 23,
transactionHash: "0x77777777777777777777777777",
receiver: "sfAasdadasasads",
amount: "2312323232223232",
chainId: 11155111,
timestamp: Date.now()
},
{
sessionIndex: 23,
transactionHash: "0x888888888888888888888888888",
receiver: "sfAasdadasasads",
amount: "1122232232",
chainId: 1,
timestamp: Date.now()
},
{
sessionIndex: 24,
transactionHash: "0x999999999999999999999",
receiver: "sfAasdadasasads",
amount: "99999999999999992",
chainId: 11155111,
timestamp: Date.now()
},
{
sessionIndex: 23,
transactionHash: "0x10101010101010101010",
receiver: "sfAasdadasasads",
amount: "2312323232223232",
chainId: 11155111,
timestamp: Date.now()
},
{
sessionIndex: 23,
transactionHash: "0x12121212121212212",
receiver: "sfAasdadasasads",
amount: "1122232232",
chainId: 1,
timestamp: Date.now()
},
{
sessionIndex: 24,
transactionHash: "0x1313131313131313131",
receiver: "sfAasdadasasads",
amount: "99999999999999992",
chainId: 11155111,
timestamp: Date.now()
}
]);
const [storedTransactions, setStoredTransactions] = useState( const [storedTransactions, setStoredTransactions] = useState(
initialStoredTransactions ? JSON.parse(initialStoredTransactions) : [] initialStoredTransactions ? JSON.parse(initialStoredTransactions) : []
); );
const incomingCommission = new DecimalBigNumber(69n, 100); const { providerDetail } = useUnstableProvider();
const validators = ["first", "second", "third"]; const metadata = useMetadata();
const clappedValidators = 1;
const watchTransaction = useMemo(() => {
if (activeTxIndex < 0 || activeTxIndex >= storedTransactions?.length) {
return undefined
}
return storedTransactions?.at(activeTxIndex)
}, [activeTxIndex, storedTransactions])
const hashedArguments = useMemo(() => {
if (!watchTransaction) return undefined
const amountEncoded = u128.enc(BigInt(watchTransaction.amount));
const networkIdEncoded = u64.enc(BigInt(chainId));
const addressEncoded = decodeAddress(watchTransaction.receiverAddress, false, 1996);
const clapArgsStr = new Uint8Array([
...addressEncoded,
...amountEncoded,
...networkIdEncoded
]);
return keccak256(clapArgsStr)
}, [watchTransaction])
const currentSession = useCurrentIndex();
const evmNetwork = useEvmNetwork({ evmChainId: chainId });
const authorities = useAuthorities({
currentSession: watchTransaction?.sessionIndex ?? currentSession
});
const clapsInSession = useClapsInSession({
currentSession: watchTransaction?.sessionIndex ?? currentSession
});
const appluseThreshold = useApplauseThreshold();
const receivedClaps = useReceivedClaps({
currentSession: watchTransaction?.sessionIndex ?? currentSession,
txHash: watchTransaction?.transactionHash,
argsHash: hashedArguments
});
const transactionApplaused = useApplausesForTransaction({
currentSession: watchTransaction?.sessionIndex ?? currentSession,
txHash: watchTransaction?.transactionHash,
argsHash: hashedArguments
});
const finalityDelay = Number(evmNetwork?.finality_delay ?? 0n);
const incomingFee = Number(evmNetwork?.incoming_fee ?? 0n) / 10000000;
const { data: blockNumber } = useBlockNumber({ watch: true }); const { data: blockNumber } = useBlockNumber({ watch: true });
// const { data: txtx } = useTransactionConfirmations({
// hash: "0xdb30adfa3bfc58539bc3a9a92f0dcace8f251af90f8a4f525b57d95d28103afc",
// refetchInterval: 5000
// });
// console.log(txtx)
const { gatekeeperAddress } = useGatekeeperAddress(chainId); const { gatekeeperAddress } = useGatekeeperAddress(chainId);
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST"); const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
const { const {
@ -196,6 +161,11 @@ const Bridge = ({ chainId, address, config, connect }) => {
} }
}, [receiver]) }, [receiver])
const clapsInSessionLength = useMemo(() => {
const disabledIndexes = new Set(clapsInSession?.filter(item => item.at(1).disabled).map(item => item.at(0)));
return authorities?.filter((_, idx) => !disabledIndexes.has(idx)).length ?? 0;
}, [authorities, clapsInSession]);
const chainExplorerUrl = useMemo(() => { const chainExplorerUrl = useMemo(() => {
const client = config?.getClient(); const client = config?.getClient();
return client?.chain?.blockExplorers?.default?.url; return client?.chain?.blockExplorers?.default?.url;
@ -208,10 +178,36 @@ const Bridge = ({ chainId, address, config, connect }) => {
const currentRecord = useMemo(() => { const currentRecord = useMemo(() => {
if (activeTxIndex === -1) return undefined if (activeTxIndex === -1) return undefined
return storedTransactions.at(activeTxIndex) const current = storedTransactions.at(activeTxIndex)
}, [activeTxIndex, storedTransactions]); if (!current) return undefined
const gatekeeperAddressEmpty = useMemo(() => { const finalization = Math.max(0, (finalityDelay + watchTransaction.blockNumber) - Number(blockNumber));
const receivedClapsLength = receivedClaps?.length ?? 0;
const clapsNeeded = Math.floor(clapsInSessionLength * appluseThreshold / 100);
const step = finalization > 0
? 0
: receivedClapsLength < clapsNeeded
? 1
: !transactionApplaused
? 2
: 3;
return {
...watchTransaction,
finalization,
step,
}
}, [
transactionApplaused,
receivedClaps,
appluseThreshold,
clapsInSessionLength,
finalityDelay,
watchTransaction,
blockNumber
]);
const gatekeeperAddressEmpty = useMemo(() => {
if (gatekeeperAddress === "0x0000000000000000000000000000000000000000") { if (gatekeeperAddress === "0x0000000000000000000000000000000000000000") {
return true; return true;
} }
@ -241,10 +237,6 @@ const Bridge = ({ chainId, address, config, connect }) => {
setActiveTxIndex(-1); setActiveTxIndex(-1);
}, [storedTransactions, activeTxIndex, setStoredTransactions, setActiveTxIndex]); }, [storedTransactions, activeTxIndex, setStoredTransactions, setActiveTxIndex]);
const handleMouseEnter = (index) => {
setTxStep(index);
}
const ghostOrConnect = async () => { const ghostOrConnect = async () => {
if (address === "") { if (address === "") {
connect(); connect();
@ -257,6 +249,21 @@ const Bridge = ({ chainId, address, config, connect }) => {
setReceiver(""); setReceiver("");
setAmount(""); setAmount("");
setIsPending(false); setIsPending(false);
const transaction = {
sessionIndex: currentSession ?? 0,
transactionHash: txHash,
receiverAddress: receiver,
amount: preparedAmount.toString(),
chainId: chainId,
blockNumber: Number(blockNumber),
timestamp: Date.now()
}
const newStoredTransactions = [...storedTransactions, transaction];
setStoredTransactions(newStoredTransactions);
sessionStorage.setItem(STORAGE_PREFIX, JSON.stringify(newStoredTransactions));
setActiveTxIndex(newStoredTransactions.length - 1)
} }
} }
@ -297,16 +304,16 @@ const Bridge = ({ chainId, address, config, connect }) => {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href={currentRecord href={currentRecord
? `${chainExplorerUrl}/tx/${currentRecord.transactionHash}` ? `${chainExplorerUrl}/tx/${currentRecord ? currentRecord.transactionHash : ""}`
: "" : ""
} }
> >
{currentRecord?.transactionHash.slice(0, 9)}...{currentRecord?.transactionHash.slice(-9)} {currentRecord ? sliceString(currentRecord.transactionHash, 10, -8) : ""}
</Link> </Link>
</Typography> </Typography>
</Box> </Box>
} }
open={activeTxIndex > -1} open={activeTxIndex >= 0}
onClose={() => setActiveTxIndex(-1)} onClose={() => setActiveTxIndex(-1)}
minHeight={"100px"} minHeight={"100px"}
> >
@ -315,15 +322,14 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Box <Box
sx={{ sx={{
transition: "all 0.2s ease", transition: "all 0.2s ease",
transform: txStep === 0 && "scale(1.1)", transform: currentRecord?.step === 0 && "scale(1.2)",
color: txStep === 0 && theme.colors.primary[300] color: currentRecord?.step > 0 && theme.colors.primary[300]
}} }}
width="120px" width="120px"
display="flex" display="flex"
flexDirection="column" flexDirection="column"
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
onMouseEnter={() => handleMouseEnter(0)}
> >
<GhostStyledIcon <GhostStyledIcon
sx={{ width: "35px", height: "35px" }} sx={{ width: "35px", height: "35px" }}
@ -331,27 +337,31 @@ const Bridge = ({ chainId, address, config, connect }) => {
component={HourglassBottomIcon} component={HourglassBottomIcon}
/> />
<Typography variant="caption">Finalization</Typography> <Typography variant="caption">Finalization</Typography>
<Typography variant="caption">{blockNumber?.toString()} blocks left</Typography> <Typography variant="caption">
{Math.max(
0,
(finalityDelay + (currentRecord ? currentRecord.blockNumber : 0) - Number(blockNumber))
).toString()} blocks left
</Typography>
</Box> </Box>
<GhostStyledIcon <GhostStyledIcon
sx={{ transition: "all 0.2s ease", opacity: txStep < 1 && "0.2" }} sx={{ transition: "all 0.2s ease", opacity: currentRecord?.step < 1 && "0.2" }}
component={ArrowRightIcon} component={ArrowRightIcon}
/> />
<Box <Box
sx={{ sx={{
transition: "all 0.2s ease", transition: "all 0.2s ease",
opacity: txStep < 1 && "0.2", opacity: currentRecord?.step < 1 && "0.2",
transform: txStep === 1 && "scale(1.1)", transform: currentRecord?.step === 1 && "scale(1.2)",
color: txStep === 1 && theme.colors.primary[300] color: currentRecord?.step > 1 && theme.colors.primary[300]
}} }}
width="120px" width="120px"
display="flex" display="flex"
flexDirection="column" flexDirection="column"
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
onMouseEnter={() => handleMouseEnter(1)}
> >
<Box display="flex" flexDirection="row" justifyContent="center" alignItems="center"> <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center">
<GhostStyledIcon <GhostStyledIcon
@ -366,37 +376,41 @@ const Bridge = ({ chainId, address, config, connect }) => {
/> />
</Box> </Box>
<Box display="flex" flexDirection="column" justifyContent="center" alignItems="center"> <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center">
<Typography variant="caption">Slow claps</Typography> <Typography variant="caption">Slow Claps</Typography>
<Typography variant="caption">{clappedValidators} / {validators.length}</Typography> <Typography variant="caption">{receivedClaps?.length ?? 0} / {clapsInSessionLength}</Typography>
</Box> </Box>
</Box> </Box>
<GhostStyledIcon <GhostStyledIcon
sx={{ transition: "all 0.2s ease", opacity: txStep < 2 && "0.2" }} sx={{
transition: "all 0.2s ease",
opacity: currentRecord?.step < 2 && "0.2"
}}
component={ArrowRightIcon} component={ArrowRightIcon}
/> />
<Box <Box
sx={{ sx={{
transition: "all 0.2s ease", transition: "all 0.2s ease",
opacity: txStep < 2 && "0.2", opacity: currentRecord?.step < 2 && "0.2",
transform: txStep === 2 && "scale(1.1)", transform: currentRecord?.step >= 2 && "scale(1.2)",
color: txStep === 2 && theme.colors.primary[300] color: currentRecord?.step >= 2 && theme.colors.primary[300]
}} }}
width="120px" width="120px"
display="flex" display="flex"
flexDirection="column" flexDirection="column"
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
onMouseEnter={() => handleMouseEnter(2)}
> >
<GhostStyledIcon <GhostStyledIcon
sx={{ width: "35px", height: "35px" }} sx={{ width: "35px", height: "35px" }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
component={CheckCircleIcon} component={currentRecord?.step === 3 ? CheckCircleIcon : PendingIcon}
/> />
<Typography variant="caption">Applaused</Typography> <Typography variant="caption">Applaused</Typography>
<Typography variant="caption">Check Receiver</Typography> <Typography variant="caption">{
currentRecord?.step === 3 ? "Check Receiver" : "Waiting Room"
}</Typography>
</Box> </Box>
</Box> </Box>
@ -405,9 +419,20 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Typography variant="body2">Session Index:</Typography> <Typography variant="body2">Session Index:</Typography>
<Typography variant="body2">{currentRecord?.sessionIndex}</Typography> <Typography variant="body2">{currentRecord?.sessionIndex}</Typography>
</Box> </Box>
<Box display="flex" flexDirection="row" justifyContent="space-between"> <Box
display="flex"
flexDirection="row"
justifyContent="space-between"
>
<Typography variant="body2">Receiver Address:</Typography> <Typography variant="body2">Receiver Address:</Typography>
<Typography variant="body2">{currentRecord?.receiver}</Typography> <Link
onClick={() => navigator.clipboard.writeText(currentRecord ? currentRecord.receiverAddress : "")}
>
<Typography variant="body2">{
currentRecord ? sliceString(currentRecord.receiverAddress, 14, -5) : ""
}</Typography>
</Link>
</Box> </Box>
<Box display="flex" flexDirection="row" justifyContent="space-between"> <Box display="flex" flexDirection="row" justifyContent="space-between">
<Typography variant="body2">Sent Amount:</Typography> <Typography variant="body2">Sent Amount:</Typography>
@ -424,13 +449,33 @@ const Bridge = ({ chainId, address, config, connect }) => {
new Date(currentRecord ? currentRecord.timestamp : 0).toLocaleString('en-US') new Date(currentRecord ? currentRecord.timestamp : 0).toLocaleString('en-US')
}</Typography> }</Typography>
</Box> </Box>
<hr style={{ width: "100%" }} />
<Box display="flex" flexDirection="row" justifyContent="space-between">
<Typography variant="body2">Transaction Hash:</Typography>
<Link
onClick={() => navigator.clipboard.writeText(currentRecord ? currentRecord.transactionHash : "")}
>
<Typography variant="body2">{
currentRecord ? sliceString(currentRecord.transactionHash, 10, -8) : "0x"
}</Typography>
</Link>
</Box>
<Box display="flex" flexDirection="row" justifyContent="space-between">
<Typography variant="body2">Arguments Hash:</Typography>
<Link
onClick={() => navigator.clipboard.writeText(hashedArguments ? hashedArguments : "")}
>
<Typography variant="body2">{
hashedArguments ? sliceString(hashedArguments, 10, -8) : "0x"
}</Typography>
</Link>
</Box>
</Box> </Box>
<Box display="flex" flexDirection="column" gap="5px"> <Box display="flex" flexDirection="column" gap="5px">
<PrimaryButton <PrimaryButton
fullWidth fullWidth
disabled={address === ""}
loading={false} loading={false}
onClick={() => removeStoredRecord()} onClick={() => removeStoredRecord()}
> >
@ -446,22 +491,24 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Box width="100%" maxWidth="476px" display="flex" alignItems="center" justifyContent="center" flexDirection="column"> <Box width="100%" maxWidth="476px" display="flex" alignItems="center" justifyContent="center" flexDirection="column">
<Paper <Paper
headerContent={ headerContent={
<Box alignItems="center" justifyContent="space-between" display="flex" width="100%"> <Box alignItems="center" justifyContent="start" display="flex" width="100%">
{!bridgeAction && (<GhostStyledIcon
component={ArrowBack}
viewBox="0 0 23 23"
style={{ marginRight: "20px", display: "flex", alignSelf: "center", cursor: "pointer" }}
onClick={() => setBridgeAction(!bridgeAction)}
/>)}
<Typography variant="h4">{ <Typography variant="h4">{
bridgeAction bridgeAction ? `Bridge $${ghstSymbol}` : "Transaction history"
? `Bridge $${ghstSymbol}`
: "Transaction history"
}</Typography> }</Typography>
</Box> </Box>
} }
topRight={ topRight={bridgeAction && (<GhostStyledIcon
<GhostStyledIcon component={PendingActionsIcon}
component={bridgeAction ? PendingActionsIcon : PublicIcon} viewBox="0 0 23 23"
viewBox="0 0 23 23" style={{ display: "flex", alignItems: "center", cursor: "pointer" }}
style={{ display: "flex", alignItems: "center", cursor: "pointer" }} onClick={() => setBridgeAction(!bridgeAction)}
onClick={() => setBridgeAction(!bridgeAction)} />)}
/>
}
enableBackground enableBackground
fullWidth fullWidth
@ -504,7 +551,7 @@ const Bridge = ({ chainId, address, config, connect }) => {
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Typography mr="10px" variant="body2" color="textSecondary"> <Typography mr="10px" variant="body2" color="textSecondary">
<em> <em>
There is no connected gatekeeper on {chainName} network. Propose gatekeeper on this network to make validators listen to it. There is no connected gatekeeper on {chainName} network. Propose gatekeeper on this network to make authorities listen to it.
</em> </em>
</Typography> </Typography>
</Box> </Box>
@ -519,40 +566,55 @@ const Bridge = ({ chainId, address, config, connect }) => {
rel="noopener noreferrer" rel="noopener noreferrer"
href={`${chainExplorerUrl}/token/${gatekeeperAddress}`} href={`${chainExplorerUrl}/token/${gatekeeperAddress}`}
> >
{gatekeeperAddress.slice(0, 10) + "..." + gatekeeperAddress.slice(-8)} {sliceString(gatekeeperAddress, 10, -8)}
</Link> </Link>
</> </>
)} )}
</Box> </Box>
{incomingCommission && validators?.length ? ( <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> {!providerDetail
<Typography mr="10px" variant="body2" color="textSecondary"> ? (
<em> <Typography mr="10px" variant="body2" color="textSecondary">
GHOST Wallet is not detected on your browser. Download&nbsp; <em>
<Link GHOST Wallet is not detected on your browser. Download&nbsp;
target="_blank" <Link
rel="noopener noreferrer" target="_blank"
href="https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases" rel="noopener noreferrer"
> href="https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases"
GHOST Wallet >
</Link>&nbsp; to see full detalization for bridge transaction. GHOST Wallet
</em> </Link>&nbsp; to see full detalization for bridge transaction.
</Typography> </em>
</Box> </Typography>
) )
: ( : metadata
<Box display="flex" flexDirection="column" gap="0px"> ? (
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> <Box width="100%" display="flex" flexDirection="column" gap="0px">
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Est. Commission:</Typography>} <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Typography fontSize="12px" lineHeight="15px">unknown</Typography> {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Est. Commission:</Typography>}
</Box> <Typography fontSize="12px" lineHeight="15px">{incomingFee.toFixed(4)}%</Typography>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}> </Box>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Number of validators:</Typography>} <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
<Typography fontSize="12px" lineHeight="15px">unknown</Typography> {!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Finality Delay:</Typography>}
</Box> <Typography fontSize="12px" lineHeight="15px">{finalityDelay} blocks</Typography>
</Box> </Box>
)} <Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Current Epoch:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{currentSession ?? 0}</Typography>
</Box>
<Box maxWidth="416px" display="flex" justifyContent={isVerySmallScreen ? "end" : "space-between"}>
{!isVerySmallScreen && <Typography fontSize="12px" lineHeight="15px">Number of validators:</Typography>}
<Typography fontSize="12px" lineHeight="15px">{clapsInSessionLength}</Typography>
</Box>
</Box>
)
: (
<Box display="flex" flexDirection="column" justifyContent="center">
<Typography fontSize="12px" lineHeight="15px">Downloading chain metadata, wait please...</Typography>
</Box>
)
}
</Box>
</Box> </Box>
<PrimaryButton <PrimaryButton
fullWidth fullWidth
@ -573,23 +635,24 @@ const Bridge = ({ chainId, address, config, connect }) => {
)} )}
{!bridgeAction && ( {!bridgeAction && (
<Box> <Box>
<Box display="grid" gridTemplateColumns="1fr 1fr 60px" sx={{ padding: "0.6rem", borderBottom: "1px solid" }}> {!isSemiSmallScreen && (<Box display="grid" gridTemplateColumns="3fr 2fr 60px" sx={{ padding: "0.6rem", borderBottom: "1px solid" }}>
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>Amount</Typography> <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>Amount</Typography>
<Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>Datetime</Typography> <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>Datetime</Typography>
<Typography variant="subtitle1" sx={{ justifySelf: "center", fontWeight: "bold" }}>Status</Typography> <Typography variant="subtitle1" sx={{ justifySelf: "center", fontWeight: "bold" }}>Status</Typography>
</Box> </Box>)}
<Box display="flex" flexDirection="column" sx={{ <Box display="flex" flexDirection="column" sx={{
height: "250px", height: "250px",
overflowY: "scroll", overflowY: "scroll",
"-ms-overflow-style": "thin !important", msOverflowStyle: "thin !important",
"scrollbar-width": "thin !important", scrollbarWidth: "thin !important",
}}> }}>
{filteredStoredTransactions {filteredStoredTransactions
.map((obj, idx) => ( .map((obj, idx) => (
<Box <Box
display="grid" display="grid"
gridTemplateColumns="1fr 1fr 60px" gridTemplateColumns="3fr 2fr 60px"
sx={{ sx={{
backgroundColor: theme.colors.gray[750],
borderBottom: "1px solid", borderBottom: "1px solid",
padding: "0.6rem", padding: "0.6rem",
paddingTop: "1.2rem", paddingTop: "1.2rem",
@ -602,20 +665,27 @@ const Bridge = ({ chainId, address, config, connect }) => {
onClick={() => setActiveTxIndex(idx)} onClick={() => setActiveTxIndex(idx)}
> >
<Box display="flex" flexDirection="column" justifyContent="center"> <Box display="flex" flexDirection="column" justifyContent="center">
<Typography variant="subtitle2"> <Typography variant={!isSemiSmallScreen ? "subtitle2" : "caption"}>
{formatCurrency( {formatCurrency(
new DecimalBigNumber(BigInt(obj.amount), 18).toString(), new DecimalBigNumber(BigInt(obj.amount), 18).toString(),
3, isSemiSmallScreen ? 3 : 8,
ghstSymbol ghstSymbol
)} )}
</Typography> </Typography>
<Typography variant={!isSemiSmallScreen ? "subtitle2" : "caption"}>
{sliceString(
obj.receiverAddress,
isSemiSmallScreen ? 5 : 10,
isSemiSmallScreen ? -3 : -8
)}
</Typography>
</Box> </Box>
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column" paddingLeft="5px">
<Typography variant="subtitle2"> <Typography variant={!isSemiSmallScreen ? "subtitle2" : "caption"}>
{new Date(obj.timestamp).toLocaleDateString('en-US')} {new Date(obj.timestamp).toLocaleDateString('en-US')}
</Typography> </Typography>
<Typography variant="subtitle2"> <Typography variant={!isSemiSmallScreen ? "subtitle2" : "caption"}>
{new Date(obj.timestamp).toLocaleTimeString('en-US')} {new Date(obj.timestamp).toLocaleTimeString('en-US')}
</Typography> </Typography>
</Box> </Box>
@ -626,24 +696,24 @@ const Bridge = ({ chainId, address, config, connect }) => {
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
sx={{ sx={{
width: "25px", width: "20px",
height: "25px", height: "20px",
background: idx % 2 === 0 background: Number(blockNumber) - (obj.blockNumber + finalityDelay) < 0
? theme.colors.feedback.warning ? theme.colors.feedback.warning
: theme.colors.feedback.success, : theme.colors.feedback.success,
borderRadius: "100%", borderRadius: "100%",
boxShadow: "0px 0px 1px black" boxShadow: "0px 0px 1px black"
}} }}
> >
{idx % 2 === 0 ? {Number(blockNumber) - (obj.blockNumber + finalityDelay) < 0 ?
<GhostStyledIcon <GhostStyledIcon
sx={{ width: "20px", height: "20px" }} sx={{ width: "15px", height: "15px" }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
component={HourglassBottomIcon} component={HourglassBottomIcon}
/> />
: :
<GhostStyledIcon <GhostStyledIcon
sx={{ width: "20px", height: "20px" }} sx={{ width: "15px", height: "15px" }}
viewBox="0 0 25 25" viewBox="0 0 25 25"
component={CheckIcon} component={CheckIcon}
/> />

44
src/hooks/ghost/MetadataProvider.jsx Normal file
View File

@ -0,0 +1,44 @@
import React, { ReactNode } from "react"
import useSWR from "swr"
import { createContext, useContext } from 'react';
import { decAnyMetadata, unifyMetadata } from "@polkadot-api/substrate-bindings"
import { useUnstableProvider } from "./UnstableProvider"
const MetadataProvider = createContext(null)
export const useMetadata = () => useContext(MetadataProvider)
export const MetadataProviderProvider = ({ children }) => {
const { client, chainId } = useUnstableProvider()
const { data: metadata } = useSWR(
client && chainId ? ["metadata", client, chainId] : null,
async ([_, client]) => {
const storageKey = `metadata-${chainId}`
const storedMetadata = sessionStorage.getItem(storageKey)
if (storedMetadata) return unifyMetadata(decAnyMetadata(storedMetadata))
const metadata = await new Promise((resolve, reject) =>
client._request("state_getMetadata", [], {
onSuccess: resolve,
onError: reject,
}),
)
.then(r => r)
.catch(_ => undefined)
if (metadata) {
sessionStorage.setItem(storageKey, metadata)
return unifyMetadata(decAnyMetadata(metadata))
} else {
sessionStorage.removeItem(storageKey)
return undefined
}
}
)
return (
<MetadataProvider.Provider value={metadata}>
{children}
</MetadataProvider.Provider>
)
}

55
src/hooks/ghost/UnstableProvider.jsx Normal file
View File

@ -0,0 +1,55 @@
import { createContext, useContext, useState, useMemo } from "react"
import { Unstable } from "@substrate/connect-discovery"
import { createClient } from "@polkadot-api/substrate-client"
import { getObservableClient } from "@polkadot-api/observable-client"
import useSWR from "swr"
const DEFAULT_CHAIN_ID = "0xa217f4ee58a944470e9633ca5bd6d28a428ed64cd9b6f3e413565f359f89af90"
const UnstableProvider = createContext(null)
export const useUnstableProvider = () => useContext(UnstableProvider)
export const UnstableProviderProvider = ({ children }) => {
const { data: providerDetails } = useSWR("getGhostProviders", () =>
Unstable.getSubstrateConnectExtensionProviders()
);
const [providerDetail, setProviderDetail] = useState();
const { data: provider } = useSWR(
() => providerDetail ? `ghostProviderDetail.${providerDetail.info.uuid}.provider` : null,
() => providerDetail ? providerDetail.provider : null
);
const [chainId, setChainId] = useState(DEFAULT_CHAIN_ID);
const client = useMemo(() => {
if (!provider || !chainId) return undefined;
const chain = provider.getChains()[chainId];
if (!chain) return undefined;
return createClient(chain.connect);
}, [provider, chainId]);
const observableClient = useMemo(() => {
return client ? getObservableClient(client) : undefined;
}, [client]);
const chainHead$ = useMemo(() => {
return observableClient ? observableClient.chainHead$() : undefined;
}, [observableClient]);
return (
<UnstableProvider.Provider
value={{
providerDetails,
providerDetail,
connectProviderDetail: setProviderDetail,
provider,
chainId,
client,
setChainId,
chainHead$
}}
>
{children}
</UnstableProvider.Provider>
);
};

9
src/hooks/ghost/index.js Normal file
View File

@ -0,0 +1,9 @@
export * from "./UnstableProvider";
export * from "./MetadataProvider";
export * from "./useCurrentIndex";
export * from "./useEvmNetwork";
export * from "./useClapsInSession";
export * from "./useApplauseThreshold";
export * from "./useReceivedClaps";
export * from "./useAuthorities";
export * from "./useApplausesForTransaction";

23
src/hooks/ghost/useApplauseThreshold.js Normal file
View File

@ -0,0 +1,23 @@
import useSWR from "swr"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useApplauseThreshold = () => {
const { chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: existentialDeposit } = useSWR(
chainId && metadata
? ["ApplauseThreshold", chainId, metadata]
: null,
([_, chainId, metadata]) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const codec = builder.buildConstant("GhostSlowClaps", "ApplauseThreshold")
const constants = metadata?.pallets?.find(obj => obj.name === "GhostSlowClaps")?.constants
const value = constants?.find(obj => obj.name === "ApplauseThreshold")?.value
return value ? codec.dec(value) : undefined
}
)
return existentialDeposit
}

47
src/hooks/ghost/useApplausesForTransaction.js Normal file
View File

@ -0,0 +1,47 @@
import useSWRSubscription from "swr/subscription"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { distinct, filter, map, mergeMap } from "rxjs"
import { fromHex } from "@polkadot-api/utils";
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useApplausesForTransaction = ({ currentSession, txHash, argsHash }) => {
const { chainHead$, chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: applausesForTransaction } = useSWRSubscription(
chainHead$ && txHash && argsHash && currentSession && chainId && metadata
? ["applausesForTransaction", chainHead$, txHash, argsHash, currentSession, chainId, metadata]
: null,
([_, chainHead$, txHash, argsHash, currentSession, chainId, metadata], { next }) => {
const { finalized$, storage$ } = chainHead$
const subscription = finalized$.pipe(
filter(Boolean),
mergeMap((blockInfo) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const applausesForTransaction = builder.buildStorage("GhostSlowClaps", "ApplausesForTransaction")
return storage$(blockInfo?.hash, "value", () =>
applausesForTransaction?.keys.enc(
currentSession,
{ asBytes: () => fromHex(txHash) },
{ asBytes: () => fromHex(argsHash) },
)
).pipe(
filter(Boolean),
distinct(),
map((value) => applausesForTransaction?.value.dec(value))
)
}),
)
.subscribe({
next(applausesForTransaction) {
next(null, applausesForTransaction)
},
error: next,
})
return () => subscription.unsubscribe()
}
)
return applausesForTransaction
}

41
src/hooks/ghost/useAuthorities.js Normal file
View File

@ -0,0 +1,41 @@
import useSWRSubscription from "swr/subscription"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { distinct, filter, map, mergeMap } from "rxjs"
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useAuthorities = ({ currentSession }) => {
const { chainHead$, chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: slowClapAuthorities } = useSWRSubscription(
chainHead$ && chainId && metadata
? ["slowClapAuthorities", chainHead$, currentSession, chainId, metadata]
: null,
([_, chainHead$, currentSession, chainId, metadata], { next }) => {
const { finalized$, storage$ } = chainHead$
const subscription = finalized$.pipe(
filter(Boolean),
mergeMap((blockInfo) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const slowClapAuthorities = builder.buildStorage("GhostSlowClaps", "Authorities")
return storage$(blockInfo?.hash, "value", () =>
slowClapAuthorities?.keys.enc(currentSession)
).pipe(
filter(Boolean),
distinct(),
map((value) => slowClapAuthorities?.value.dec(value))
)
}),
)
.subscribe({
next(slowClapAuthorities) {
next(null, slowClapAuthorities)
},
error: next,
})
return () => subscription.unsubscribe()
}
)
return slowClapAuthorities
}

41
src/hooks/ghost/useClapsInSession.js Normal file
View File

@ -0,0 +1,41 @@
import useSWRSubscription from "swr/subscription"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { distinct, filter, map, mergeMap } from "rxjs"
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useClapsInSession = ({ currentSession }) => {
const { chainHead$, chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: clapsInSession } = useSWRSubscription(
chainHead$ && chainId && metadata
? ["clapsInSession", chainHead$, currentSession, chainId, metadata]
: null,
([_, chainHead$, currentSession, chainId, metadata], { next }) => {
const { finalized$, storage$ } = chainHead$
const subscription = finalized$.pipe(
filter(Boolean),
mergeMap((blockInfo) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const clapsInSession = builder.buildStorage("GhostSlowClaps", "ClapsInSession")
return storage$(blockInfo?.hash, "value", () =>
clapsInSession?.keys.enc(currentSession)
).pipe(
filter(Boolean),
distinct(),
map((value) => clapsInSession?.value.dec(value))
)
}),
)
.subscribe({
next(clapsInSession) {
next(null, clapsInSession)
},
error: next,
})
return () => subscription.unsubscribe()
}
)
return clapsInSession
}

41
src/hooks/ghost/useCurrentIndex.js Normal file
View File

@ -0,0 +1,41 @@
import useSWRSubscription from "swr/subscription"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { distinct, filter, map, mergeMap } from "rxjs"
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useCurrentIndex = () => {
const { chainHead$, chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: currentIndex } = useSWRSubscription(
chainHead$ && chainId && metadata
? ["currentIndex", chainHead$, chainId, metadata]
: null,
([_, chainHead$, chainId, metadata], { next }) => {
const { finalized$, storage$ } = chainHead$
const subscription = finalized$.pipe(
filter(Boolean),
mergeMap((blockInfo) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const currentIndex = builder.buildStorage("Session", "CurrentIndex")
return storage$(blockInfo?.hash, "value", () =>
currentIndex?.keys.enc()
).pipe(
filter(Boolean),
distinct(),
map((value) => currentIndex?.value.dec(value))
)
}),
)
.subscribe({
next(currentIndex) {
next(null, currentIndex)
},
error: next,
})
return () => subscription.unsubscribe()
}
)
return currentIndex
}

41
src/hooks/ghost/useEvmNetwork.js Normal file
View File

@ -0,0 +1,41 @@
import useSWRSubscription from "swr/subscription"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { distinct, filter, map, mergeMap } from "rxjs"
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useEvmNetwork = ({ evmChainId }) => {
const { chainHead$, chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: evmNetwork } = useSWRSubscription(
chainHead$ && chainId && metadata
? ["evmNetwork", chainHead$, evmChainId, chainId, metadata]
: null,
([_, chainHead$, evmChainId, chainId, metadata], { next }) => {
const { finalized$, storage$ } = chainHead$
const subscription = finalized$.pipe(
filter(Boolean),
mergeMap((blockInfo) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const evmNetwork = builder.buildStorage("GhostNetworks", "Networks")
return storage$(blockInfo?.hash, "value", () =>
evmNetwork?.keys.enc(BigInt(evmChainId))
).pipe(
filter(Boolean),
distinct(),
map((value) => evmNetwork?.value.dec(value))
)
}),
)
.subscribe({
next(evmNetwork) {
next(null, evmNetwork)
},
error: next,
})
return () => subscription.unsubscribe()
}
)
return evmNetwork
}

47
src/hooks/ghost/useReceivedClaps.js Normal file
View File

@ -0,0 +1,47 @@
import useSWRSubscription from "swr/subscription"
import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
import { distinct, filter, map, mergeMap } from "rxjs"
import { fromHex } from "@polkadot-api/utils";
import { useUnstableProvider } from "./UnstableProvider"
import { useMetadata } from "./MetadataProvider"
export const useReceivedClaps = ({ currentSession, txHash, argsHash }) => {
const { chainHead$, chainId } = useUnstableProvider()
const metadata = useMetadata()
const { data: receivedClaps } = useSWRSubscription(
chainHead$ && txHash && argsHash && currentSession && chainId && metadata
? ["receivedClaps", chainHead$, txHash, argsHash, currentSession, chainId, metadata]
: null,
([_, chainHead$, txHash, argsHash, currentSession, chainId, metadata], { next }) => {
const { finalized$, storage$ } = chainHead$
const subscription = finalized$.pipe(
filter(Boolean),
mergeMap((blockInfo) => {
const builder = getDynamicBuilder(getLookupFn(metadata))
const receivedClaps = builder.buildStorage("GhostSlowClaps", "ReceivedClaps")
return storage$(blockInfo?.hash, "value", () =>
receivedClaps?.keys.enc(
currentSession,
{ asBytes: () => fromHex(txHash) },
{ asBytes: () => fromHex(argsHash) },
)
).pipe(
filter(Boolean),
distinct(),
map((value) => receivedClaps?.value.dec(value))
)
}),
)
.subscribe({
next(receivedClaps) {
next(null, receivedClaps)
},
error: next,
})
return () => subscription.unsubscribe()
}
)
return receivedClaps
}

7
src/main.jsx
View File

@ -8,6 +8,7 @@ import { HashRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from "wagmi"; import { WagmiProvider } from "wagmi";
import { config } from "./config"; import { config } from "./config";
import { UnstableProviderProvider, MetadataProviderProvider } from "./hooks/ghost"
import ReactGA from "react-ga4"; import ReactGA from "react-ga4";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
@ -21,7 +22,11 @@ ReactDOM.createRoot(document.getElementById('root')).render(
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<HashRouter> <HashRouter>
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
<App /> <UnstableProviderProvider>
<MetadataProviderProvider>
<App />
</MetadataProviderProvider>
</UnstableProviderProvider>
</StyledEngineProvider> </StyledEngineProvider>
</HashRouter> </HashRouter>
</QueryClientProvider> </QueryClientProvider>