Added custom rpc support in ui-kit

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 (
     <ThemeProvider theme={isDarkMode ? themeConfig.dark : themeConfig.light}>
       <GlobalStyle />
-      <PushWalletProvider env={env[deploymentEnv]}>
+      <PushWalletProvider env={CONSTANTS.ENV.LOCAL}>
         <Router>
           <Navbar />
           <RouterContainer />

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();

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();
@@ -16,7 +16,7 @@ const Navbar = () => {
             justifyContent='end'
             gap='spacing-md'
         >
-            {universalAddress && <PushUniversalWallet universalAddress={universalAddress} />}
+            {universalAddress && <PushUniversalWallet />}
 
             {!isDarkMode ? (
                 <Box

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) {

examples/apps/simulate/src/modules/landingPage/components/LandingPageLeftComponent.tsx

@@ -1,11 +1,10 @@
 import { css } from 'styled-components';
 import { Box, Button, Front, Sale, Text } from 'shared-components';
-import { PushUniversalWallet, usePushWalletContext } from '@pushprotocol/pushchain-ui-kit';
+import { PushUniversalWallet } from '../../../../../../../packages/ui-kit';
 import { LandingPageBanner } from './LandingPageBanner';
 import { SimulateTxText } from './SimulateTxText';
 
 const LandingPageLeftComponent = () => {
-  const { universalAddress } = usePushWalletContext();
 
   const featuresCard = [
     {
@@ -102,7 +101,6 @@ const LandingPageLeftComponent = () => {
             width="-webkit-fill-available"
           >
             <PushUniversalWallet
-              universalAddress={universalAddress}
               title="Connect Push Wallet"
               styling={{
                 width: 'inherit',

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();
   const { universalAddress } = usePushWalletContext();
 
   const [isSendingTxn, setIsSendingTxn] = useState(false);

examples/apps/simulate/src/modules/simulatePage/components/MockSignTransaction.tsx

@@ -2,7 +2,7 @@ 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 = () => {
 

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();

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
 

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"
   }
-}
+}

packages/ui-kit/src/lib/wallet/components/PushUniversalWallet.tsx

@@ -2,15 +2,22 @@ import React, { ReactNode } from 'react';
 import { ConnectPushWalletButton } from './ConnectPushWalletButton';
 import { TogglePushWalletButton } from './TogglePushWalletButton';
 import { UniversalAddress } from '../wallet.types';
+import { usePushWalletContext } from './PushWalletProvider';
 
 type PushUniversalWalletProps = {
-  universalAddress: UniversalAddress | null;
   component?: ReactNode;
   title?: string;
   styling?: React.CSSProperties;
 };
 
-const RenderWallet: React.FC<PushUniversalWalletProps> = ({
+type RenderWalletProps = {
+  universalAddress: UniversalAddress | null;
+  component?: ReactNode;
+  title?: string;
+  styling?: React.CSSProperties;
+}
+
+const RenderWallet: React.FC<RenderWalletProps> = ({
   universalAddress,
   component,
   title = 'Login',
@@ -26,11 +33,12 @@ const RenderWallet: React.FC<PushUniversalWalletProps> = ({
 }
 
 const PushUniversalWallet: React.FC<PushUniversalWalletProps> = ({
-  universalAddress,
   component,
   title = 'Login',
   styling,
 }) => {
+
+  const { universalAddress } = usePushWalletContext();
   return (
     <RenderWallet universalAddress={universalAddress} component={component} title={title} styling={styling} />
   )

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`

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<PushChain | null>(null);
     const [error, setError] = useState<Error | null>(null);
 
+
+
     useEffect(() => {
         const initializePushChain = async () => {
             if (!universalAddress) {
@@ -30,10 +32,9 @@ export const usePushChain = () => {
 
                 const instance = await PushChain.initialize(signer, {
                     network: pushChainNetwork,
+                    ...(custom_rpc_url && { rpcUrl: custom_rpc_url })
                 });
 
-                console.log("Push Chain Initialised", instance);
-
                 setPushChain(instance);
                 setError(null);
             } catch (err) {
@@ -44,7 +45,7 @@ export const usePushChain = () => {
         };
 
         initializePushChain();
-    }, [universalAddress]);
+    }, [universalAddress, custom_rpc_url]);
 
     return {
         pushChain,

yarn.lock

@@ -3044,25 +3044,25 @@ __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"
     "@types/uuid": "npm:10.0.0"
     "@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,20 +13220,20 @@ __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"
   checksum: 10/04ee27901cde46c1c0a64b9584e04c96c5fe45b38c0d74930710751ea991408b405747d01dfae72f80fc158137018aea94f9c38c651cb9c318f0861a310c3679
   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: