From 2ac8cf92fe291d0e26dd37665589a8d6be5475f8 Mon Sep 17 00:00:00 2001 From: "Hong Jing (Jingles)" Date: Tue, 3 Dec 2024 15:50:48 +0800 Subject: [PATCH] fix cip45 react UI component and bump version --- .../react/ui-components/connect-wallet.tsx | 5 - packages/mesh-common/package.json | 2 +- packages/mesh-contract/package.json | 8 +- packages/mesh-core-csl/package.json | 6 +- packages/mesh-core-cst/package.json | 4 +- packages/mesh-core/package.json | 16 +- packages/mesh-provider/package.json | 6 +- packages/mesh-react/package.json | 8 +- .../src/cardano-wallet/connected-button.tsx | 56 ++++ .../mesh-react/src/cardano-wallet/index.tsx | 285 ++++-------------- .../src/cardano-wallet/screen-main.tsx | 66 ++++ .../src/cardano-wallet/screen-p2p.tsx | 81 +++++ .../src/common/cardano-peer-connect/index.ts | 12 + packages/mesh-svelte/package.json | 4 +- packages/mesh-transaction/package.json | 8 +- packages/mesh-wallet/package.json | 10 +- scripts/mesh-cli/package.json | 2 +- 17 files changed, 311 insertions(+), 268 deletions(-) create mode 100644 packages/mesh-react/src/cardano-wallet/connected-button.tsx create mode 100644 packages/mesh-react/src/cardano-wallet/screen-main.tsx create mode 100644 packages/mesh-react/src/cardano-wallet/screen-p2p.tsx create mode 100644 packages/mesh-react/src/common/cardano-peer-connect/index.ts diff --git a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx index 34d22e3f..04c954bd 100644 --- a/apps/playground/src/pages/react/ui-components/connect-wallet.tsx +++ b/apps/playground/src/pages/react/ui-components/connect-wallet.tsx @@ -162,11 +162,6 @@ function Right() { }, announce: [ "wss://dev.btt.cf-identity-wallet.metadata.dev.cf-deployments.org", - "https://pro.passwordchaos.gimbalabs.io", - "wss://tracker.files.fm:7073/announce", - "wss://tracker.btorrent.xyz", - "ws://tracker.files.fm:7072/announce", - "wss://tracker.openwebtorrent.com:443/announce", ], }} /> diff --git a/packages/mesh-common/package.json b/packages/mesh-common/package.json index 6e4de9e9..6ec29a39 100644 --- a/packages/mesh-common/package.json +++ b/packages/mesh-common/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/common", - "version": "1.7.23", + "version": "1.7.24", "description": "Contains constants, types and interfaces used across the SDK and different serialization libraries", "main": "./dist/index.cjs", "browser": "./dist/index.js", diff --git a/packages/mesh-contract/package.json b/packages/mesh-contract/package.json index 3847e8fa..5167da5a 100644 --- a/packages/mesh-contract/package.json +++ b/packages/mesh-contract/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/contract", - "version": "1.7.23", + "version": "1.7.24", "description": "List of open-source smart contracts, complete with documentation, live demos, and end-to-end source code. https://meshjs.dev/smart-contracts", "main": "./dist/index.cjs", "browser": "./dist/index.js", @@ -34,9 +34,9 @@ "typescript": "^5.3.3" }, "dependencies": { - "@meshsdk/common": "1.7.23", - "@meshsdk/core": "1.7.23", - "@meshsdk/core-csl": "1.7.23" + "@meshsdk/common": "1.7.24", + "@meshsdk/core": "1.7.24", + "@meshsdk/core-csl": "1.7.24" }, "prettier": "@meshsdk/configs/prettier", "publishConfig": { diff --git a/packages/mesh-core-csl/package.json b/packages/mesh-core-csl/package.json index 0a0386ed..c56a8131 100644 --- a/packages/mesh-core-csl/package.json +++ b/packages/mesh-core-csl/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/core-csl", - "version": "1.7.23", + "version": "1.7.24", "description": "Types and utilities functions between Mesh and cardano-serialization-lib", "main": "./dist/index.cjs", "module": "./dist/index.js", @@ -31,7 +31,7 @@ }, "devDependencies": { "@meshsdk/configs": "*", - "@meshsdk/provider": "1.7.23", + "@meshsdk/provider": "1.7.24", "@types/json-bigint": "^1.0.4", "eslint": "^8.57.0", "ts-jest": "^29.1.4", @@ -39,7 +39,7 @@ "typescript": "^5.3.3" }, "dependencies": { - "@meshsdk/common": "1.7.23", + "@meshsdk/common": "1.7.24", "@sidan-lab/sidan-csl-rs-browser": "0.9.7", "@sidan-lab/sidan-csl-rs-nodejs": "0.9.7", "@types/base32-encoding": "^1.0.2", diff --git a/packages/mesh-core-cst/package.json b/packages/mesh-core-cst/package.json index ea34caf5..c30952a4 100644 --- a/packages/mesh-core-cst/package.json +++ b/packages/mesh-core-cst/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/core-cst", - "version": "1.7.23", + "version": "1.7.24", "description": "Types and utilities functions between Mesh and cardano-js-sdk", "main": "./dist/index.cjs", "browser": "./dist/index.js", @@ -42,7 +42,7 @@ "@harmoniclabs/cbor": "1.3.0", "@harmoniclabs/plutus-data": "1.2.4", "@harmoniclabs/uplc": "1.2.4", - "@meshsdk/common": "1.7.23", + "@meshsdk/common": "1.7.24", "@stricahq/bip32ed25519": "^1.1.0", "@stricahq/cbors": "^1.0.3", "pbkdf2": "^3.1.2" diff --git a/packages/mesh-core/package.json b/packages/mesh-core/package.json index dd5c419f..e5cb2633 100644 --- a/packages/mesh-core/package.json +++ b/packages/mesh-core/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/core", - "version": "1.7.23", + "version": "1.7.24", "description": "Mesh SDK Core - https://meshjs.dev/", "main": "./dist/index.cjs", "browser": "./dist/index.js", @@ -33,13 +33,13 @@ "typescript": "^5.3.3" }, "dependencies": { - "@meshsdk/common": "1.7.23", - "@meshsdk/core-csl": "1.7.23", - "@meshsdk/core-cst": "1.7.23", - "@meshsdk/provider": "1.7.23", - "@meshsdk/react": "1.7.23", - "@meshsdk/transaction": "1.7.23", - "@meshsdk/wallet": "1.7.23" + "@meshsdk/common": "1.7.24", + "@meshsdk/core-csl": "1.7.24", + "@meshsdk/core-cst": "1.7.24", + "@meshsdk/provider": "1.7.24", + "@meshsdk/react": "1.7.24", + "@meshsdk/transaction": "1.7.24", + "@meshsdk/wallet": "1.7.24" }, "prettier": "@meshsdk/configs/prettier", "publishConfig": { diff --git a/packages/mesh-provider/package.json b/packages/mesh-provider/package.json index c2f85deb..cc57cc34 100644 --- a/packages/mesh-provider/package.json +++ b/packages/mesh-provider/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/provider", - "version": "1.7.23", + "version": "1.7.24", "description": "Blockchain data providers - https://meshjs.dev/providers", "main": "./dist/index.cjs", "browser": "./dist/index.js", @@ -34,8 +34,8 @@ "typescript": "^5.3.3" }, "dependencies": { - "@meshsdk/common": "1.7.23", - "@meshsdk/core-cst": "1.7.23", + "@meshsdk/common": "1.7.24", + "@meshsdk/core-cst": "1.7.24", "@utxorpc/sdk": "0.6.2", "@utxorpc/spec": "0.10.1", "axios": "^1.7.2" diff --git a/packages/mesh-react/package.json b/packages/mesh-react/package.json index b57b4783..4025a66e 100644 --- a/packages/mesh-react/package.json +++ b/packages/mesh-react/package.json @@ -1,6 +1,6 @@ { "name": "@meshsdk/react", - "version": "1.7.23", + "version": "1.7.24", "description": "React component library - https://meshjs.dev/react", "main": "./dist/index.cjs", "browser": "./dist/index.js", @@ -29,9 +29,9 @@ }, "dependencies": { "@fabianbormann/cardano-peer-connect": "^1.2.18", - "@meshsdk/common": "1.7.23", - "@meshsdk/transaction": "1.7.23", - "@meshsdk/wallet": "1.7.23", + "@meshsdk/common": "1.7.24", + "@meshsdk/transaction": "1.7.24", + "@meshsdk/wallet": "1.7.24", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "^1.3.2", diff --git a/packages/mesh-react/src/cardano-wallet/connected-button.tsx b/packages/mesh-react/src/cardano-wallet/connected-button.tsx new file mode 100644 index 00000000..e8e34be6 --- /dev/null +++ b/packages/mesh-react/src/cardano-wallet/connected-button.tsx @@ -0,0 +1,56 @@ +import { useEffect, useState } from "react"; + +import { Button } from "../common/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../common/dropdown-menu"; +import { useWallet } from "../hooks"; + +export default function ConnectedButton() { + const { wallet, connected, disconnect } = useWallet(); + const [address, setAddress] = useState(""); + + useEffect(() => { + if (connected && wallet) { + async function afterConnectedWallet() { + let address = (await wallet.getUnusedAddresses())[0]; + if (!address) address = await wallet.getChangeAddress(); + setAddress(address); + } + afterConnectedWallet(); + } + }, [connected, wallet]); + + return ( + + + + + + Wallet + + { + navigator.clipboard.writeText(address); + }} + > + Copy Address + + { + disconnect(); + }} + > + Disconnect + + + + ); +} diff --git a/packages/mesh-react/src/cardano-wallet/index.tsx b/packages/mesh-react/src/cardano-wallet/index.tsx index 2991c25e..babe178a 100644 --- a/packages/mesh-react/src/cardano-wallet/index.tsx +++ b/packages/mesh-react/src/cardano-wallet/index.tsx @@ -1,10 +1,4 @@ -/** - * todo: - * - handle show when no wallet in device - */ -import { useEffect, useRef, useState } from "react"; -// import { DAppPeerConnect } from "@fabianbormann/cardano-peer-connect"; -// import { IWalletInfo } from "@fabianbormann/cardano-peer-connect/dist/src/types"; +import { useEffect, useState } from "react"; import { Button } from "../common/button"; import { @@ -16,19 +10,11 @@ import { DialogTitle, DialogTrigger, } from "../common/dialog"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "../common/dropdown-menu"; import IconChevronRight from "../common/icons/icon-chevron-right"; -import IconDownload from "../common/icons/icon-download"; -import IconMonitorSmartphone from "../common/icons/icon-monitor-smartphone"; -import WalletIcon from "../common/icons/wallet-icon"; -import { useWallet, useWalletList } from "../hooks"; +import { useWallet } from "../hooks"; +import ConnectedButton from "./connected-button"; +import ScreenMain from "./screen-main"; +import ScreenP2P from "./screen-p2p"; interface ButtonProps { label?: string; @@ -57,7 +43,6 @@ export const CardanoWallet = ({ }: ButtonProps) => { const [open, setOpen] = useState(false); const [screen, setScreen] = useState("main"); - const { wallet, connected } = useWallet(); useEffect(() => { @@ -75,234 +60,82 @@ export const CardanoWallet = ({ ) : ( - + )} - - - {screen != "main" ? ( - - ) : ( - - )} - - {screen == "main" && "Connect Wallet"} - {screen == "p2p" && "P2P Connect"} - - - - - {screen == "p2p" && - "Use wallet that supports CIP-45, scan this QR code to connect."} - - +
{screen == "main" && ( - )} - {/* {screen == "p2p" && ( - - )} */} + {screen == "p2p" && ( + + )} - - - Powered by - - - - Mesh SDK - - +