From f036071fb937dfbbe06df7b286d674ea9bacb57a Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Thu, 17 Apr 2025 15:24:59 +0530 Subject: [PATCH 1/3] Added custom rpc support in ui-kit --- examples/apps/simulate/src/App.tsx | 4 +-- .../src/common/components/RouterContainer.tsx | 2 +- .../apps/simulate/src/components/Navbar.tsx | 2 +- .../apps/simulate/src/helpers/walletHelper.ts | 2 +- .../components/LandingPageLeftComponent.tsx | 2 +- .../components/MockSendTransaction.tsx | 4 +-- .../components/MockSignTransaction.tsx | 4 +-- .../apps/simulate/src/pages/PrivateRoute.tsx | 2 +- examples/apps/simulate/yarn.lock | 4 +-- packages/ui-kit/package.json | 4 +-- .../src/lib/wallet/hooks/usePushChain.ts | 9 +++-- yarn.lock | 34 +++++++++---------- 12 files changed, 39 insertions(+), 34 deletions(-) diff --git a/examples/apps/simulate/src/App.tsx b/examples/apps/simulate/src/App.tsx index fd002e63..1b04a0b6 100644 --- a/examples/apps/simulate/src/App.tsx +++ b/examples/apps/simulate/src/App.tsx @@ -7,7 +7,7 @@ import { RouterContainer } from './common/components'; import { CONSTANTS, PushWalletProvider, -} from '@pushprotocol/pushchain-ui-kit'; +} from '../../../../packages/ui-kit'; import Navbar from './components/Navbar'; const GlobalStyle = createGlobalStyle` @@ -40,7 +40,7 @@ const App: React.FC = () => { return ( - + diff --git a/examples/apps/simulate/src/common/components/RouterContainer.tsx b/examples/apps/simulate/src/common/components/RouterContainer.tsx index d2b85ff6..d0d27972 100644 --- a/examples/apps/simulate/src/common/components/RouterContainer.tsx +++ b/examples/apps/simulate/src/common/components/RouterContainer.tsx @@ -5,7 +5,7 @@ import { Box } from 'shared-components'; import SimulatePage from '../../pages/SimulatePage'; import { PrivateRoute } from '../../pages/PrivateRoute'; import { APP_ROUTES } from '../constants'; -import { usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { usePushWalletContext } from '../../../../../../packages/ui-kit'; const RouterContainer = () => { const { universalAddress } = usePushWalletContext(); diff --git a/examples/apps/simulate/src/components/Navbar.tsx b/examples/apps/simulate/src/components/Navbar.tsx index 2b86db62..17739725 100644 --- a/examples/apps/simulate/src/components/Navbar.tsx +++ b/examples/apps/simulate/src/components/Navbar.tsx @@ -3,7 +3,7 @@ import { useDarkMode } from '../common/hooks'; import { MdOutlineLightMode } from "react-icons/md"; import { MdOutlineDarkMode } from "react-icons/md"; import { Box } from 'shared-components'; -import { PushUniversalWallet, usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { PushUniversalWallet, usePushWalletContext } from '../../../../../packages/ui-kit'; const Navbar = () => { const { isDarkMode, enable, disable } = useDarkMode(); diff --git a/examples/apps/simulate/src/helpers/walletHelper.ts b/examples/apps/simulate/src/helpers/walletHelper.ts index fd021c02..df33ebdd 100644 --- a/examples/apps/simulate/src/helpers/walletHelper.ts +++ b/examples/apps/simulate/src/helpers/walletHelper.ts @@ -1,4 +1,4 @@ -import { UniversalAddress } from '@pushprotocol/pushchain-ui-kit'; +import { UniversalAddress } from '../../../../../packages/ui-kit'; export function centerMaskString(str: string) { if (str && str.length > 15) { diff --git a/examples/apps/simulate/src/modules/landingPage/components/LandingPageLeftComponent.tsx b/examples/apps/simulate/src/modules/landingPage/components/LandingPageLeftComponent.tsx index aa8211e5..387f6ab3 100644 --- a/examples/apps/simulate/src/modules/landingPage/components/LandingPageLeftComponent.tsx +++ b/examples/apps/simulate/src/modules/landingPage/components/LandingPageLeftComponent.tsx @@ -1,6 +1,6 @@ import { css } from 'styled-components'; import { Box, Button, Front, Sale, Text } from 'shared-components'; -import { PushUniversalWallet, usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { PushUniversalWallet, usePushWalletContext } from '../../../../../../../packages/ui-kit'; import { LandingPageBanner } from './LandingPageBanner'; import { SimulateTxText } from './SimulateTxText'; diff --git a/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx b/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx index f56fdfa9..64f280f2 100644 --- a/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx +++ b/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx @@ -5,11 +5,11 @@ import { centerMaskString } from '../../../helpers'; import { CONSTANTS, createUniversalAccount } from '@pushchain/devnet'; import { TransactionSnippet } from '../../../common/components'; import { mockTransaction } from '../../../common/constants'; -import { usePushChain, usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { usePushChain, usePushWalletContext } from '../../../../../../../packages/ui-kit'; const MockSendTransaction = () => { - const { pushChain, isLoading, error } = usePushChain() + const { pushChain, isLoading, error } = usePushChain("https://eth-sepolia.g.alchemy.com/v2/_3hBL0pSgTxFgr4vryA-8l-MZrIamGLu") const { universalAddress } = usePushWalletContext(); const [isSendingTxn, setIsSendingTxn] = useState(false); diff --git a/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx b/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx index c382978f..a685654c 100644 --- a/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx +++ b/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx @@ -2,11 +2,11 @@ import { useState } from 'react'; import { Alert, Box, Button, TextInput } from 'shared-components'; import { TransactionSnippet } from '../../../common/components'; import { toHex } from 'viem'; -import { usePushChain, usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { usePushChain, usePushWalletContext } from '../../../../../../../packages/ui-kit'; const MockSignTransaction = () => { - const { pushChain } = usePushChain(); + const { pushChain } = usePushChain("https://eth-sepolia.g.alchemy.com/v2/_3hBL0pSgTxFgr4vryA-8l-MZrIamGLu"); const { handleSignMessage } = usePushWalletContext(); diff --git a/examples/apps/simulate/src/pages/PrivateRoute.tsx b/examples/apps/simulate/src/pages/PrivateRoute.tsx index 6adbaa4c..0e5adae8 100644 --- a/examples/apps/simulate/src/pages/PrivateRoute.tsx +++ b/examples/apps/simulate/src/pages/PrivateRoute.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react'; import { Navigate } from 'react-router-dom'; -import { usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { usePushWalletContext } from '../../../../../packages/ui-kit'; const PrivateRoute = ({ children }: { children: ReactNode }) => { const { universalAddress } = usePushWalletContext(); diff --git a/examples/apps/simulate/yarn.lock b/examples/apps/simulate/yarn.lock index ae9927bd..c56ed113 100644 --- a/examples/apps/simulate/yarn.lock +++ b/examples/apps/simulate/yarn.lock @@ -7602,7 +7602,7 @@ __metadata: "shared-components@file:../../../packages/shared-components::locator=core-connection%40workspace%3A.": version: 0.3.0 - resolution: "shared-components@file:../../../packages/shared-components#../../../packages/shared-components::hash=99d6f6&locator=core-connection%40workspace%3A." + resolution: "shared-components@file:../../../packages/shared-components#../../../packages/shared-components::hash=28d28d&locator=core-connection%40workspace%3A." dependencies: "@emotion/react": "npm:^11.13.0" "@radix-ui/react-dialog": "npm:^1.1.1" @@ -7623,7 +7623,7 @@ __metadata: peerDependencies: react: ^18.3.1 react-dom: ^18.3.1 - checksum: 10/892a11fcfdeac35cf847b7204d5a4c034aac7379d49212bdabc203ca09da82a53b048df24fa7216eff0c82127076a9d142a4627aa02aba72d6d59882cad2e25b + checksum: 10/11d16eb524ce1e8d16d0fcc73aa52ee42cf251f360bb491fc6ec8f5ee87d4aaac85a1c872357502c5b2cfe6e80f2591490e83824776d4f68753fd4b2a6b4f00b languageName: node linkType: hard diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json index 05de7537..7b378a92 100644 --- a/packages/ui-kit/package.json +++ b/packages/ui-kit/package.json @@ -3,7 +3,7 @@ "version": "1.0.7", "dependencies": { "@metamask/sdk": "^0.32.0", - "@pushchain/devnet": "^1.0.13", + "@pushchain/devnet": "^1.0.16", "ethers": "^6.13.5", "tslib": "^2.3.0", "viem": "^2.23.9" @@ -19,4 +19,4 @@ "scripts": { "release:stable": "npx nx run ui-kit:nx-release-publish --otp=1" } -} +} \ No newline at end of file diff --git a/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts b/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts index d6990816..5eafaf40 100644 --- a/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts +++ b/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts @@ -3,11 +3,13 @@ import { CONSTANTS, PushChain, createUniversalSigner } from '@pushchain/devnet'; import { usePushWalletContext } from '../components/PushWalletProvider'; import { ENV } from '../../config'; -export const usePushChain = () => { +export const usePushChain = (custom_rpc_url?: string) => { const { universalAddress, handleSignMessage, env } = usePushWalletContext(); const [pushChain, setPushChain] = useState(null); const [error, setError] = useState(null); + + useEffect(() => { const initializePushChain = async () => { if (!universalAddress) { @@ -25,11 +27,14 @@ export const usePushChain = () => { }, }); + console.log("Custom rpc url", custom_rpc_url); + // Push Chain is only initialized at devnet and mainnet const pushChainNetwork = env === ENV.LOCAL || env === ENV.TESTNET ? CONSTANTS.ENV.DEVNET : env; const instance = await PushChain.initialize(signer, { network: pushChainNetwork, + ...(custom_rpc_url && { rpcUrl: custom_rpc_url }) }); console.log("Push Chain Initialised", instance); @@ -44,7 +49,7 @@ export const usePushChain = () => { }; initializePushChain(); - }, [universalAddress]); + }, [universalAddress, custom_rpc_url]); return { pushChain, diff --git a/yarn.lock b/yarn.lock index eaf40e3b..e1e7059b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3044,9 +3044,9 @@ __metadata: languageName: node linkType: hard -"@pushchain/devnet@npm:^1.0.13": - version: 1.0.13 - resolution: "@pushchain/devnet@npm:1.0.13" +"@pushchain/devnet@npm:1.0.16": + version: 1.0.16 + resolution: "@pushchain/devnet@npm:1.0.16" dependencies: "@bufbuild/protobuf": "npm:^2.0.0" "@noble/hashes": "npm:^1.5.0" @@ -3054,15 +3054,15 @@ __metadata: "@types/ws": "npm:8.5.14" axios: "npm:^1.7.7" bech32: "npm:^2.0.0" - bs58: "npm:^6.0.0" + bs58: "npm:6.0.0" protobufjs-cli: "npm:1.1.3" ts-proto: "npm:2.6.1" tslib: "npm:^2.3.0" - tweetnacl: "npm:^1.0.3" + tweetnacl: "npm:1.0.3" uuid: "npm:^10.0.0" viem: "npm:^2.21.5" - ws: "npm:8.18.0" - checksum: 10/1fbb2253784c972387c3b2cd0a9e54b8824dce9fd5f3d449bc8c836df46562532ad04fe242fbaca199cf9651b94d8f248c02687a3c48b6ecacd8128595472705 + ws: "npm:^8.18.1" + checksum: 10/80a83b63a9f1da9f8c56521cd35535ef01f8f04122074ec1c527c21134dbabc9a112e6c25551c5f792fa3525803c509df3de8252afe2f931d09daf32dcbf15be languageName: node linkType: hard @@ -3130,7 +3130,7 @@ __metadata: resolution: "@pushprotocol/pushchain-ui-kit@workspace:packages/ui-kit" dependencies: "@metamask/sdk": "npm:^0.32.0" - "@pushchain/devnet": "npm:^1.0.13" + "@pushchain/devnet": "npm:1.0.16" "@types/react": "npm:^18.3.13" ethers: "npm:^6.13.5" react: "npm:^18.3.1" @@ -6000,7 +6000,7 @@ __metadata: languageName: node linkType: hard -"bs58@npm:^6.0.0": +"bs58@npm:6.0.0, bs58@npm:^6.0.0": version: 6.0.0 resolution: "bs58@npm:6.0.0" dependencies: @@ -13220,6 +13220,13 @@ __metadata: languageName: node linkType: hard +"tweetnacl@npm:1.0.3, tweetnacl@npm:^1.0.3": + version: 1.0.3 + resolution: "tweetnacl@npm:1.0.3" + checksum: 10/ca122c2f86631f3c0f6d28efb44af2a301d4a557a62a3e2460286b08e97567b258c2212e4ad1cfa22bd6a57edcdc54ba76ebe946847450ab0999e6d48ccae332 + languageName: node + linkType: hard + "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0": version: 0.14.5 resolution: "tweetnacl@npm:0.14.5" @@ -13227,13 +13234,6 @@ __metadata: languageName: node linkType: hard -"tweetnacl@npm:^1.0.3": - version: 1.0.3 - resolution: "tweetnacl@npm:1.0.3" - checksum: 10/ca122c2f86631f3c0f6d28efb44af2a301d4a557a62a3e2460286b08e97567b258c2212e4ad1cfa22bd6a57edcdc54ba76ebe946847450ab0999e6d48ccae332 - languageName: node - linkType: hard - "typanion@npm:^3.8.0": version: 3.14.0 resolution: "typanion@npm:3.14.0" @@ -14046,7 +14046,7 @@ __metadata: languageName: node linkType: hard -"ws@npm:8.18.1": +"ws@npm:8.18.1, ws@npm:^8.18.1": version: 8.18.1 resolution: "ws@npm:8.18.1" peerDependencies: From 26bf4bdae754cd31c54e4b850ce0423c6e6e3d12 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 18 Apr 2025 13:20:08 +0530 Subject: [PATCH 2/3] Added Padding to the iframe --- .../modules/simulatePage/components/MockSendTransaction.tsx | 2 +- .../modules/simulatePage/components/MockSignTransaction.tsx | 2 +- .../ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx | 5 ++--- packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts | 4 ---- 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx b/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx index 64f280f2..ae547f55 100644 --- a/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx +++ b/examples/apps/simulate/src/modules/simulatePage/components/MockSendTransaction.tsx @@ -9,7 +9,7 @@ import { usePushChain, usePushWalletContext } from '../../../../../../../package const MockSendTransaction = () => { - const { pushChain, isLoading, error } = usePushChain("https://eth-sepolia.g.alchemy.com/v2/_3hBL0pSgTxFgr4vryA-8l-MZrIamGLu") + const { pushChain, isLoading, error } = usePushChain(); const { universalAddress } = usePushWalletContext(); const [isSendingTxn, setIsSendingTxn] = useState(false); diff --git a/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx b/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx index a685654c..750a2ef8 100644 --- a/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx +++ b/examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx @@ -6,7 +6,7 @@ import { usePushChain, usePushWalletContext } from '../../../../../../../package const MockSignTransaction = () => { - const { pushChain } = usePushChain("https://eth-sepolia.g.alchemy.com/v2/_3hBL0pSgTxFgr4vryA-8l-MZrIamGLu"); + const { pushChain } = usePushChain(); const { handleSignMessage } = usePushWalletContext(); diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx index 1e2c3a6a..e794fc41 100644 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx @@ -93,8 +93,8 @@ const FrameContainer = styled.div<{ isWalletMinimised ? '0px' : universalAddress ? '450px' : '100vw'}; height: ${({ universalAddress, isWalletMinimised }) => isWalletMinimised ? '0px' : universalAddress ? '675px' : '100vh'}; - right: ${({ universalAddress }) => (universalAddress ? '0px' : '0')}; - top: ${({ universalAddress }) => (universalAddress ? '50px' : '0')}; + right: ${({ universalAddress }) => (universalAddress ? '10px' : '0')}; + top: ${({ universalAddress }) => (universalAddress ? '60px' : '0')}; @media (max-width: 425px) { width: ${({ universalAddress, isWalletMinimised }) => @@ -121,7 +121,6 @@ const DashButtonContainer = styled.div` height: 20px; width: 20px; padding:2px; - background-color: #ff0000; `; const LoadingTextContainer = styled.div` diff --git a/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts b/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts index 5eafaf40..c22738ad 100644 --- a/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts +++ b/packages/ui-kit/src/lib/wallet/hooks/usePushChain.ts @@ -27,8 +27,6 @@ export const usePushChain = (custom_rpc_url?: string) => { }, }); - console.log("Custom rpc url", custom_rpc_url); - // Push Chain is only initialized at devnet and mainnet const pushChainNetwork = env === ENV.LOCAL || env === ENV.TESTNET ? CONSTANTS.ENV.DEVNET : env; @@ -37,8 +35,6 @@ export const usePushChain = (custom_rpc_url?: string) => { ...(custom_rpc_url && { rpcUrl: custom_rpc_url }) }); - console.log("Push Chain Initialised", instance); - setPushChain(instance); setError(null); } catch (err) { From 8be86e4b1e6ecc2eadd13a23ed0e027104c8bba3 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Wed, 23 Apr 2025 14:23:49 +0530 Subject: [PATCH 3/3] Removed the universalAddress prop from PushUniversalWallet --- examples/apps/simulate/src/components/Navbar.tsx | 2 +- .../components/LandingPageLeftComponent.tsx | 4 +--- .../lib/wallet/components/PushUniversalWallet.tsx | 14 +++++++++++--- yarn.lock | 4 ++-- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/examples/apps/simulate/src/components/Navbar.tsx b/examples/apps/simulate/src/components/Navbar.tsx index 17739725..8dd693f6 100644 --- a/examples/apps/simulate/src/components/Navbar.tsx +++ b/examples/apps/simulate/src/components/Navbar.tsx @@ -16,7 +16,7 @@ const Navbar = () => { justifyContent='end' gap='spacing-md' > - {universalAddress && } + {universalAddress && } {!isDarkMode ? ( { - const { universalAddress } = usePushWalletContext(); const featuresCard = [ { @@ -102,7 +101,6 @@ const LandingPageLeftComponent = () => { width="-webkit-fill-available" > = ({ +type RenderWalletProps = { + universalAddress: UniversalAddress | null; + component?: ReactNode; + title?: string; + styling?: React.CSSProperties; +} + +const RenderWallet: React.FC = ({ universalAddress, component, title = 'Login', @@ -26,11 +33,12 @@ const RenderWallet: React.FC = ({ } const PushUniversalWallet: React.FC = ({ - universalAddress, component, title = 'Login', styling, }) => { + + const { universalAddress } = usePushWalletContext(); return ( ) diff --git a/yarn.lock b/yarn.lock index e1e7059b..e49ad86e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3044,7 +3044,7 @@ __metadata: languageName: node linkType: hard -"@pushchain/devnet@npm:1.0.16": +"@pushchain/devnet@npm:^1.0.16": version: 1.0.16 resolution: "@pushchain/devnet@npm:1.0.16" dependencies: @@ -3130,7 +3130,7 @@ __metadata: resolution: "@pushprotocol/pushchain-ui-kit@workspace:packages/ui-kit" dependencies: "@metamask/sdk": "npm:^0.32.0" - "@pushchain/devnet": "npm:1.0.16" + "@pushchain/devnet": "npm:^1.0.16" "@types/react": "npm:^18.3.13" ethers: "npm:^6.13.5" react: "npm:^18.3.1"