From 83a09dbd2e2752439d2c9fbf6e1efa2938461930 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Mon, 20 Jan 2025 15:46:23 +0530 Subject: [PATCH 1/4] Added universalAddress as export in ui-kit --- .../ui-kit/src/lib/config/config.types.ts | 10 ---- packages/ui-kit/src/lib/config/index.ts | 22 ++++++-- packages/ui-kit/src/lib/constants.ts | 14 ++--- .../wallet/components/PushWalletProvider.tsx | 54 +++++++++++++------ .../ui-kit/src/lib/wallet/wallet.types.ts | 6 +++ 5 files changed, 68 insertions(+), 38 deletions(-) delete mode 100644 packages/ui-kit/src/lib/config/config.types.ts diff --git a/packages/ui-kit/src/lib/config/config.types.ts b/packages/ui-kit/src/lib/config/config.types.ts deleted file mode 100644 index 14db5048..00000000 --- a/packages/ui-kit/src/lib/config/config.types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { ENV } from '../constants'; - -export interface Config { - WALLET_URL: { - [ENV.PROD]: string; - [ENV.STAGING]: string; - [ENV.DEV]: string; - [ENV.LOCAL]: string; - }; -} diff --git a/packages/ui-kit/src/lib/config/index.ts b/packages/ui-kit/src/lib/config/index.ts index 1c88fc86..57755cf6 100644 --- a/packages/ui-kit/src/lib/config/index.ts +++ b/packages/ui-kit/src/lib/config/index.ts @@ -1,7 +1,23 @@ -import { ENV } from '../constants'; -import { Config } from './config.types'; +/** + * SUPPORTED ENVIRONEMENTS + */ +export enum ENV { + PROD = 'prod', + STAGING = 'staging', + DEV = 'dev', + LOCAL = 'local', +} -const config: Config = { +export type ConfigType = { + WALLET_URL: { + [ENV.PROD]: string; + [ENV.STAGING]: string; + [ENV.DEV]: string; + [ENV.LOCAL]: string; + }; +}; + +const config: ConfigType = { WALLET_URL: { [ENV.PROD]: 'https://wallet.push.org', [ENV.STAGING]: 'https://push-protocol.github.io/push-wallet', diff --git a/packages/ui-kit/src/lib/constants.ts b/packages/ui-kit/src/lib/constants.ts index 06618346..b1a1621e 100644 --- a/packages/ui-kit/src/lib/constants.ts +++ b/packages/ui-kit/src/lib/constants.ts @@ -7,19 +7,13 @@ import { PushMonotone, SolanaMonotone, } from './common'; - -/** - * SUPPORTED ENVIRONEMENTS - */ -export enum ENV { - PROD = 'prod', - STAGING = 'staging', - DEV = 'dev', - LOCAL = 'local', -} +import { ENV } from './config'; +import { APP_TO_WALLET_ACTION, WALLET_TO_APP_ACTION } from './wallet'; export const CONSTANTS = { ENV: ENV, + WALLET_TO_APP_ACTION: WALLET_TO_APP_ACTION, + APP_TO_WALLET_ACTION: APP_TO_WALLET_ACTION, }; export const CHAIN_LOGO: Record = { diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx index 855ddf27..3220432d 100644 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx @@ -7,17 +7,18 @@ import React, { useRef, } from 'react'; import { - APP_TO_WALLET_ACTION, ConnectionStatus, - WALLET_TO_APP_ACTION, + UniversalAddress, WalletEventRespoonse, } from '../wallet.types'; -import { ENV } from '../../constants'; -import config from '../../config'; +import { CONSTANTS } from '../../constants'; +import config, { ENV } from '../../config'; +import { getWalletDataFromAccount } from '../wallet.utils'; // Define the context shape export type PushWalletContextType = { account: string | null; + universalAddress: UniversalAddress | null; connectionStatus: ConnectionStatus; env: ENV; iframeRef: React.MutableRefObject; @@ -27,7 +28,7 @@ export type PushWalletContextType = { handleConnectToPushWallet: () => void; handleNewConnectionRequest: () => void; handleSendSignRequestToPushWallet: (data: Uint8Array) => Promise; - setMinimiseWallet: React.Dispatch>; + setMinimiseWallet: (isWalletMinimised: boolean) => void; handleUserLogOutEvent: () => void; isIframeLoading: boolean; setIframeLoading: React.Dispatch>; @@ -48,6 +49,9 @@ export const PushWalletProvider: React.FC = ({ const [account, setAccount] = useState(null); + const [universalAddress, setUniversalAddress] = + useState(null); + const [isWalletVisible, setWalletVisibility] = useState(false); const [isWalletMinimised, setMinimiseWallet] = useState(false); @@ -86,7 +90,7 @@ export const PushWalletProvider: React.FC = ({ setMinimiseWallet(false); setConnectionStatus('authenticating'); sendMessageToPushWallet({ - type: APP_TO_WALLET_ACTION.NEW_CONNECTION_REQUEST, + type: CONSTANTS.APP_TO_WALLET_ACTION.NEW_CONNECTION_REQUEST, }); }; @@ -94,7 +98,16 @@ export const PushWalletProvider: React.FC = ({ if (response?.account) { setConnectionStatus('connected'); setMinimiseWallet(true); + + const result = getWalletDataFromAccount(response.account); + setAccount(response.account); + + setUniversalAddress({ + chainId: result.chainId, + chain: result.chain, + address: response.account, + }); } else { handleNewConnectionRequest(); } @@ -103,12 +116,21 @@ export const PushWalletProvider: React.FC = ({ const handleAppConnectionSuccess = (response: WalletEventRespoonse) => { setConnectionStatus('connected'); setMinimiseWallet(true); - setAccount(response.account!); + if (response.account) { + setAccount(response.account); + const result = getWalletDataFromAccount(response.account); + setUniversalAddress({ + chainId: result.chainId, + chain: result.chain, + address: response.account, + }); + } }; const handleAppConnectionRejection = () => { setConnectionStatus('retry'); setAccount(null); + setUniversalAddress(null); }; const handleAppConnectionRetry = () => { @@ -118,6 +140,7 @@ export const PushWalletProvider: React.FC = ({ const handleUserLogOutEvent = () => { setConnectionStatus('notConnected'); setAccount(null); + setUniversalAddress(null); setMinimiseWallet(false); setWalletVisibility(false); setIframeLoading(true); @@ -147,7 +170,7 @@ export const PushWalletProvider: React.FC = ({ // Send the sign request to the wallet tab sendMessageToPushWallet({ - type: APP_TO_WALLET_ACTION.SIGN_MESSAGE, + type: CONSTANTS.APP_TO_WALLET_ACTION.SIGN_MESSAGE, data, }); }); @@ -156,33 +179,33 @@ export const PushWalletProvider: React.FC = ({ useEffect(() => { const messageHandler = (event: MessageEvent) => { switch (event.data.type) { - case WALLET_TO_APP_ACTION.IS_LOGGED_IN: + case CONSTANTS.WALLET_TO_APP_ACTION.IS_LOGGED_IN: console.log('User has logged In'); handleIsLoggedInAction(event.data.data); break; - case WALLET_TO_APP_ACTION.APP_CONNECTION_SUCCESS: + case CONSTANTS.WALLET_TO_APP_ACTION.APP_CONNECTION_SUCCESS: console.log('App Connection Success'); handleAppConnectionSuccess(event.data.data); break; - case WALLET_TO_APP_ACTION.APP_CONNECTION_REJECTED: + case CONSTANTS.WALLET_TO_APP_ACTION.APP_CONNECTION_REJECTED: console.log('App Connection Rejected'); handleAppConnectionRejection(); break; - case WALLET_TO_APP_ACTION.APP_CONNECTION_RETRY: + case CONSTANTS.WALLET_TO_APP_ACTION.APP_CONNECTION_RETRY: console.log('App Connection Retry'); handleAppConnectionRetry(); break; - case WALLET_TO_APP_ACTION.SIGNATURE: + case CONSTANTS.WALLET_TO_APP_ACTION.SIGNATURE: console.log('Signature received'); if (signatureResolverRef.current) { signatureResolverRef?.current?.success?.(event.data.data); } break; - case WALLET_TO_APP_ACTION.IS_LOGGED_OUT: + case CONSTANTS.WALLET_TO_APP_ACTION.IS_LOGGED_OUT: console.log('User loggged out'); handleUserLogOutEvent(); break; - case WALLET_TO_APP_ACTION.ERROR: + case CONSTANTS.WALLET_TO_APP_ACTION.ERROR: console.log('Error from the child tab'); signatureResolverRef?.current?.error?.(event.data.data); break; @@ -200,6 +223,7 @@ export const PushWalletProvider: React.FC = ({ Date: Tue, 21 Jan 2025 16:38:09 +0530 Subject: [PATCH 2/4] Single Connect Button for ui-kit --- examples/core-connection/src/App.tsx | 6 +- .../core-connection/src/common/constants.ts | 1 + .../src/context/GlobalContext.tsx | 7 +- .../src/modules/WalletTestPage/WalletPage.tsx | 59 ++++++++++++++ .../components/LandingPageLeftComponent.tsx | 4 +- .../components/MockSendTransaction.tsx | 7 +- .../components/SimulateHeader.tsx | 2 +- examples/core-connection/yarn.lock | 4 +- .../src/lib/common/icons/SolanaMonotone.tsx | 57 +++++++------ .../ui-kit/src/lib/common/spinner/Spinner.tsx | 16 ++-- .../components/ConnectPushWalletButton.tsx | 81 ++++++++++++------- .../wallet/components/PushWalletButton.tsx | 35 ++++++++ .../wallet/components/PushWalletIFrame.tsx | 4 +- .../wallet/components/PushWalletProvider.tsx | 16 +--- .../components/TogglePushWalletButton.tsx | 60 +++++++------- packages/ui-kit/src/lib/wallet/index.ts | 1 + .../ui-kit/src/lib/wallet/wallet.utils.ts | 2 + 17 files changed, 236 insertions(+), 126 deletions(-) create mode 100644 examples/core-connection/src/modules/WalletTestPage/WalletPage.tsx create mode 100644 packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx diff --git a/examples/core-connection/src/App.tsx b/examples/core-connection/src/App.tsx index a2d3c32e..7316ae95 100644 --- a/examples/core-connection/src/App.tsx +++ b/examples/core-connection/src/App.tsx @@ -6,10 +6,10 @@ import { useDarkMode } from './common/hooks'; import { RouterContainer } from './common/components'; import { GlobalProvider } from './context/GlobalContext'; import { - ENV, PushWalletProvider, PushWalletIFrame, -} from '@pushprotocol/pushchain-ui-kit'; + CONSTANTS, +} from '../../../packages/ui-kit'; const GlobalStyle = createGlobalStyle` :root{ @@ -31,7 +31,7 @@ const App: React.FC = () => { return ( - + diff --git a/examples/core-connection/src/common/constants.ts b/examples/core-connection/src/common/constants.ts index 83f8d26b..63610dee 100644 --- a/examples/core-connection/src/common/constants.ts +++ b/examples/core-connection/src/common/constants.ts @@ -1,4 +1,5 @@ export const APP_ROUTES = { LANDING_PAGE: '/', SIMULATE: '/simulate', + WALLETPAGE: '/wallet-page', }; diff --git a/examples/core-connection/src/context/GlobalContext.tsx b/examples/core-connection/src/context/GlobalContext.tsx index 0452590a..cf41b1a9 100644 --- a/examples/core-connection/src/context/GlobalContext.tsx +++ b/examples/core-connection/src/context/GlobalContext.tsx @@ -8,7 +8,7 @@ import { useEffect, useState, } from 'react'; -import { usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; +import { usePushWalletContext } from '../../../../packages/ui-kit'; // Define a type for the context value type GlobalContextType = { @@ -27,7 +27,8 @@ const mockRecipients = [ ]; export const GlobalProvider = ({ children }: { children: ReactNode }) => { - const { account, handleSendSignRequestToPushWallet } = usePushWalletContext(); + const { universalAddress, handleSendSignRequestToPushWallet } = + usePushWalletContext(); const [pushNetwork, setPushNetwork] = useState(null); const [mockTx, setMockTx] = useState(null); @@ -54,7 +55,7 @@ export const GlobalProvider = ({ children }: { children: ReactNode }) => { return ( { + const { universalAddress } = usePushWalletContext(); + console.log('Universal Address', universalAddress); + + return ( + + Wallet Page Example + + + Default Button: + + + + Custom Title: + + + + Custom Style Button: + + + + Custom Component Button: + + {universalAddress ? ( + <>{centerMaskString(universalAddress.address)} + ) : ( + <> Connect With Push Wallet + )} + + } + /> + + + + ); +}; + +export default WalletPage; diff --git a/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx b/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx index 189f9d7a..465b469c 100644 --- a/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx +++ b/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx @@ -1,9 +1,9 @@ import { css } from 'styled-components'; import { Box, Button, Front, Sale, Text } from 'shared-components'; -import { ConnectPushWalletButton } from '@pushprotocol/pushchain-ui-kit'; import { useGlobalContext } from '../../../context/GlobalContext'; import { LandingPageBanner } from './LandingPageBanner'; import { SimulateTxText } from './SimulateTxText'; +import WalletPage from '../../WalletTestPage/WalletPage'; const LandingPageLeftComponent = () => { const { pushNetwork, mockTx } = useGlobalContext(); @@ -106,7 +106,7 @@ const LandingPageLeftComponent = () => { justifyContent="center" width="-webkit-fill-available" > - + )} diff --git a/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx b/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx index 77d9b822..3172a7d1 100644 --- a/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx +++ b/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx @@ -5,9 +5,12 @@ import { TransactionSnippet } from '../../../common/components'; import { useGlobalContext } from '../../../context/GlobalContext'; import { Transaction } from '@pushprotocol/push-chain/src/lib/generated/tx'; import { centerMaskString } from '../../../helpers'; +import { usePushWalletContext } from '../../../../../../packages/ui-kit/src'; + const MockSendTransaction = () => { - const { pushNetwork, mockTx, account, handleSendSignRequestToPushWallet } = - useGlobalContext(); + const { pushNetwork, mockTx, account } = useGlobalContext(); + + const { handleSendSignRequestToPushWallet } = usePushWalletContext(); const [isSendingTxn, setIsSendingTxn] = useState(false); const [txnHash, setTxnHash] = useState(null); diff --git a/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx b/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx index a2a0a748..9c207460 100644 --- a/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx +++ b/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx @@ -1,6 +1,6 @@ import { Box } from 'shared-components'; import { useGlobalContext } from '../../../context/GlobalContext'; -import { TogglePushWalletButton } from '@pushprotocol/pushchain-ui-kit'; +import { TogglePushWalletButton } from '../../../../../../packages/ui-kit'; const SimulateHeader = () => { const { account } = useGlobalContext(); diff --git a/examples/core-connection/yarn.lock b/examples/core-connection/yarn.lock index 9c49f266..05cced6e 100644 --- a/examples/core-connection/yarn.lock +++ b/examples/core-connection/yarn.lock @@ -6822,7 +6822,7 @@ __metadata: "shared-components@file:../../packages/shared-components::locator=core-connection%40workspace%3A.": version: 0.1.0 - resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=ace6ac&locator=core-connection%40workspace%3A." + resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=bab865&locator=core-connection%40workspace%3A." dependencies: "@emotion/react": "npm:^11.13.0" "@radix-ui/react-dialog": "npm:^1.1.1" @@ -6843,7 +6843,7 @@ __metadata: peerDependencies: react: ^18.3.1 react-dom: ^18.3.1 - checksum: 10/60e51af9bd7ae0dc96ed0e18291966f1daf6d053f9d6b323d0c8aafb8d187db929c9d498dc19bdeeda8ce9be467a1310167b49537e9df520782c3f465700754a + checksum: 10/34dafca206659672319b939a58fe21ed7da68f8c42511e2b41129c08c94f9ae1500a62756ee29052da833b8b2c51fa1076de9a686ff8306d64770d52a853d6df languageName: node linkType: hard diff --git a/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx b/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx index 5be5e5de..163aa41d 100644 --- a/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx +++ b/packages/ui-kit/src/lib/common/icons/SolanaMonotone.tsx @@ -1,35 +1,34 @@ import React from 'react'; const SolanaMonotone = () => { - return ( - - - - - - - - - - - - ); + return ( + + + + + + + + + + + + ); }; export default SolanaMonotone; diff --git a/packages/ui-kit/src/lib/common/spinner/Spinner.tsx b/packages/ui-kit/src/lib/common/spinner/Spinner.tsx index d920871a..db3b79ff 100644 --- a/packages/ui-kit/src/lib/common/spinner/Spinner.tsx +++ b/packages/ui-kit/src/lib/common/spinner/Spinner.tsx @@ -18,18 +18,18 @@ const Container = styled.div` align-items: center; justify-content: center; animation: ${spin} 1s linear infinite; - width: 24px; - height: 24px; - color:#D548EC; + width: 20px; + height: 20px; + color: #fff; `; // Spinner functional component const Spinner = () => { - return ( - - - - ); + return ( + + + + ); }; export default Spinner; diff --git a/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx b/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx index 6f13e5c7..04ed992f 100644 --- a/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx +++ b/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx @@ -1,14 +1,19 @@ -import { FC } from 'react'; +import React, { FC } from 'react'; import { usePushWalletContext } from './PushWalletProvider'; import { walletConnectionButtonStatusMapper } from '../wallet.constants'; -import styled from 'styled-components' +import styled from 'styled-components'; import { Spinner } from '../../common'; export type ConnectPushWalletButtonProps = { showLogOutButton?: boolean; + title?: string; + styling?: React.CSSProperties; }; -const ConnectPushWalletButton: FC = () => { +const ConnectPushWalletButton: FC = ({ + title, + styling, +}) => { const { connectionStatus, handleConnectToPushWallet, @@ -34,9 +39,15 @@ const ConnectPushWalletButton: FC = () => { - {walletConnectionButtonStatusMapper[connectionStatus]} - {isLoading && ()} + {/* {walletConnectionButtonStatusMapper[connectionStatus]} */} + {connectionStatus === 'notConnected' ? title : connectionStatus} + {isLoading && ( + + + + )} ); @@ -44,31 +55,39 @@ const ConnectPushWalletButton: FC = () => { export { ConnectPushWalletButton }; -const ConnectButton = styled.button` - align-items: center; - cursor: pointer; - display: flex; - justify-content: center; - white-space: nowrap; - flex-shrink: 0; - border: none; - background-color: #D548EC; - color: rgba(255,255,255,1); - border-radius: 12px; - gap: 4px; - height: 48px; - padding: 16px 24px; - min-width: 100px; - leading-trim: both; - text-edge: cap; - font-family:FK Grotesk Neu; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 16px; - width:inherit; +const ConnectButton = styled.button<{ customStyle?: React.CSSProperties }>` + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + white-space: nowrap; + flex-shrink: 0; + border: none; + background-color: #d548ec; + color: rgba(255, 255, 255, 1); + border-radius: 12px; + gap: 4px; + height: 48px; + padding: 16px 24px; + min-width: 100px; + leading-trim: both; + text-edge: cap; + font-family: FK Grotesk Neu; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 16px; + width: inherit; -` + ${(props) => + props.customStyle && + Object.entries(props.customStyle) + .map( + ([key, value]) => + `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};` + ) + .join('\n')} +`; const SpinnerContainer = styled.div` - padding:5px; -` \ No newline at end of file + padding: 4px; +`; diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx new file mode 100644 index 00000000..502bc606 --- /dev/null +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx @@ -0,0 +1,35 @@ +import React, { ReactNode } from 'react'; +import { ConnectPushWalletButton } from './ConnectPushWalletButton'; +import { TogglePushWalletButton } from './TogglePushWalletButton'; +import { UniversalAddress } from '../wallet.types'; + +type PushWalletButtonProps = { + universalAddress: UniversalAddress | null; + component?: ReactNode; + title?: string; + styling?: React.CSSProperties; +}; + +const PushWalletButton: React.FC = ({ + universalAddress, + component, + title = 'Login', + styling, +}) => { + // If a custom component is provided, render it + if (component) { + return <>{component}; + } + + return ( +
+ {universalAddress ? ( + + ) : ( + + )} +
+ ); +}; + +export { PushWalletButton }; diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx index 2ca32cc2..fdc802fb 100644 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx @@ -7,7 +7,7 @@ import { CrossIcon, DashIcon, Spinner } from '../../common'; const PushWalletIFrame: FC = () => { const { env, - account, + universalAddress, iframeRef, isWalletMinimised, isWalletVisible, @@ -17,6 +17,8 @@ const PushWalletIFrame: FC = () => { setIframeLoading, } = usePushWalletContext(); + const account = universalAddress ? universalAddress?.address : null; + return ( <> {isWalletVisible ? ( diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx index 3220432d..550ed703 100644 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletProvider.tsx @@ -17,7 +17,6 @@ import { getWalletDataFromAccount } from '../wallet.utils'; // Define the context shape export type PushWalletContextType = { - account: string | null; universalAddress: UniversalAddress | null; connectionStatus: ConnectionStatus; env: ENV; @@ -27,11 +26,11 @@ export type PushWalletContextType = { setWalletVisibility: (isWalletVisible: boolean) => void; handleConnectToPushWallet: () => void; handleNewConnectionRequest: () => void; - handleSendSignRequestToPushWallet: (data: Uint8Array) => Promise; setMinimiseWallet: (isWalletMinimised: boolean) => void; handleUserLogOutEvent: () => void; isIframeLoading: boolean; setIframeLoading: React.Dispatch>; + handleSendSignRequestToPushWallet: (data: Uint8Array) => Promise; }; export type WalletProviderProps = { children: ReactNode; env: ENV }; @@ -46,9 +45,6 @@ export const PushWalletProvider: React.FC = ({ children, env, }) => { - const [account, setAccount] = - useState(null); - const [universalAddress, setUniversalAddress] = useState(null); @@ -101,12 +97,10 @@ export const PushWalletProvider: React.FC = ({ const result = getWalletDataFromAccount(response.account); - setAccount(response.account); - setUniversalAddress({ chainId: result.chainId, chain: result.chain, - address: response.account, + address: result.address, }); } else { handleNewConnectionRequest(); @@ -117,19 +111,17 @@ export const PushWalletProvider: React.FC = ({ setConnectionStatus('connected'); setMinimiseWallet(true); if (response.account) { - setAccount(response.account); const result = getWalletDataFromAccount(response.account); setUniversalAddress({ chainId: result.chainId, chain: result.chain, - address: response.account, + address: result.address, }); } }; const handleAppConnectionRejection = () => { setConnectionStatus('retry'); - setAccount(null); setUniversalAddress(null); }; @@ -139,7 +131,6 @@ export const PushWalletProvider: React.FC = ({ const handleUserLogOutEvent = () => { setConnectionStatus('notConnected'); - setAccount(null); setUniversalAddress(null); setMinimiseWallet(false); setWalletVisibility(false); @@ -222,7 +213,6 @@ export const PushWalletProvider: React.FC = ({ return ( = ({ - account, + universalAddress, }) => { const { setMinimiseWallet } = usePushWalletContext(); - const { chainId, address } = getWalletDataFromAccount(account); + + const { chainId, address } = universalAddress; function getChainIcon(chainId: string | null) { if (!chainId) { @@ -30,41 +32,37 @@ const TogglePushWalletButton: React.FC = ({ return ( <> - setMinimiseWallet(false)} - > + setMinimiseWallet(false)}> {getChainIcon(chainId)} {maskedAddress} - ); }; export { TogglePushWalletButton }; - const ButtonComponent = styled.button` - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - font-family: FK Grotesk Neu; - white-space: nowrap; - flex-shrink: 0; - border: none; - background-color: #17181B; - color: rgba(255, 255, 255, 1); - border-radius: 12px; - gap: 4px; - height: 48px; - padding: 16px 24px; - min-width: 100px; - leading-trim: both; - text-edge: cap; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 16px; -` \ No newline at end of file + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-family: FK Grotesk Neu; + white-space: nowrap; + flex-shrink: 0; + border: none; + background-color: #17181b; + color: rgba(255, 255, 255, 1); + border-radius: 12px; + gap: 4px; + height: 48px; + padding: 16px 24px; + min-width: 100px; + leading-trim: both; + text-edge: cap; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 16px; +`; diff --git a/packages/ui-kit/src/lib/wallet/index.ts b/packages/ui-kit/src/lib/wallet/index.ts index 9c15d30d..cd729bf4 100644 --- a/packages/ui-kit/src/lib/wallet/index.ts +++ b/packages/ui-kit/src/lib/wallet/index.ts @@ -2,6 +2,7 @@ export * from './components/PushWalletProvider'; export * from './components/ConnectPushWalletButton'; export * from './components/PushWalletIFrame'; export * from './components/TogglePushWalletButton'; +export * from './components/PushWalletButton'; export * from './wallet.types'; export * from './wallet.constants'; diff --git a/packages/ui-kit/src/lib/wallet/wallet.utils.ts b/packages/ui-kit/src/lib/wallet/wallet.utils.ts index 7afde79d..9470bd73 100644 --- a/packages/ui-kit/src/lib/wallet/wallet.utils.ts +++ b/packages/ui-kit/src/lib/wallet/wallet.utils.ts @@ -16,6 +16,8 @@ export const getWalletDataFromAccount = ( const addressComponent = account.split(':'); + console.log('Address component', addressComponent); + // Handle cases where there are exactly three components (chain, chainId, address) if (addressComponent.length === 3) { return { From 9d972cf2c1481ad53739819edb22be883bd907eb Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Mon, 10 Feb 2025 14:51:52 +0530 Subject: [PATCH 3/4] Fixed the conversion of wallet to caip --- .../core-connection/src/helpers/walletHelper.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/examples/core-connection/src/helpers/walletHelper.ts b/examples/core-connection/src/helpers/walletHelper.ts index bb3b7043..d2c4a6a9 100644 --- a/examples/core-connection/src/helpers/walletHelper.ts +++ b/examples/core-connection/src/helpers/walletHelper.ts @@ -64,14 +64,10 @@ export const convertCaipToObject = ( } }; -export const convertToCaip = ({ address, chain }: UniversalAddress) => { - return `${ - chain === 'eth' - ? 'eip155:1' - : chain === 'sol' - ? 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp' - : chain === 'bnb' - ? 'eip155:56' - : 'push:devnet' - }:${address}`; +export const convertToCaip = ({ + address, + chain, + chainId, +}: UniversalAddress) => { + return `${chain}:${chainId}:${address}`; }; From 295aad8c34c0969d0cfd94d808a5296bc07168c2 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Mon, 10 Feb 2025 15:57:20 +0530 Subject: [PATCH 4/4] Resolved the comments --- examples/core-connection/src/App.tsx | 2 +- .../core-connection/src/common/constants.ts | 1 - .../src/context/GlobalContext.tsx | 2 +- .../src/helpers/walletHelper.ts | 2 +- .../src/modules/WalletTestPage/WalletPage.tsx | 59 ------ .../components/LandingPageLeftComponent.tsx | 2 +- .../components/MockSendTransaction.tsx | 2 +- .../components/SimulateHeader.tsx | 2 +- .../components/ConnectPushWalletButton.tsx | 2 - .../wallet/components/PushWalletButton.tsx | 19 +- .../wallet/components/PushWalletIFrame.tsx | 176 ------------------ .../wallet/components/PushWalletProvider.tsx | 41 +--- .../ui-kit/src/lib/wallet/wallet.types.ts | 4 +- .../ui-kit/src/lib/wallet/wallet.utils.ts | 11 -- 14 files changed, 15 insertions(+), 310 deletions(-) delete mode 100644 examples/core-connection/src/modules/WalletTestPage/WalletPage.tsx delete mode 100644 packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx diff --git a/examples/core-connection/src/App.tsx b/examples/core-connection/src/App.tsx index 5f028452..f203e13f 100644 --- a/examples/core-connection/src/App.tsx +++ b/examples/core-connection/src/App.tsx @@ -5,7 +5,7 @@ import { getBlocksCSSVariables, themeConfig } from 'shared-components'; import { useDarkMode } from './common/hooks'; import { RouterContainer } from './common/components'; import { GlobalProvider } from './context/GlobalContext'; -import { CONSTANTS, PushWalletProvider } from '../../../packages/ui-kit'; +import { CONSTANTS, PushWalletProvider } from '@pushprotocol/pushchain-ui-kit'; const GlobalStyle = createGlobalStyle` :root{ diff --git a/examples/core-connection/src/common/constants.ts b/examples/core-connection/src/common/constants.ts index 63610dee..83f8d26b 100644 --- a/examples/core-connection/src/common/constants.ts +++ b/examples/core-connection/src/common/constants.ts @@ -1,5 +1,4 @@ export const APP_ROUTES = { LANDING_PAGE: '/', SIMULATE: '/simulate', - WALLETPAGE: '/wallet-page', }; diff --git a/examples/core-connection/src/context/GlobalContext.tsx b/examples/core-connection/src/context/GlobalContext.tsx index cf41b1a9..1783c6ca 100644 --- a/examples/core-connection/src/context/GlobalContext.tsx +++ b/examples/core-connection/src/context/GlobalContext.tsx @@ -8,7 +8,7 @@ import { useEffect, useState, } from 'react'; -import { usePushWalletContext } from '../../../../packages/ui-kit'; +import { usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; // Define a type for the context value type GlobalContextType = { diff --git a/examples/core-connection/src/helpers/walletHelper.ts b/examples/core-connection/src/helpers/walletHelper.ts index d2c4a6a9..fd021c02 100644 --- a/examples/core-connection/src/helpers/walletHelper.ts +++ b/examples/core-connection/src/helpers/walletHelper.ts @@ -1,4 +1,4 @@ -import { UniversalAddress } from '../../../../packages/ui-kit/src'; +import { UniversalAddress } from '@pushprotocol/pushchain-ui-kit'; export function centerMaskString(str: string) { if (str && str.length > 15) { diff --git a/examples/core-connection/src/modules/WalletTestPage/WalletPage.tsx b/examples/core-connection/src/modules/WalletTestPage/WalletPage.tsx deleted file mode 100644 index d1dd3dc2..00000000 --- a/examples/core-connection/src/modules/WalletTestPage/WalletPage.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { - usePushWalletContext, - centerMaskString, - PushWalletButton, -} from '../../../../../packages/ui-kit/src'; -import { Box, Button, Text } from 'shared-components'; - -const WalletPage = () => { - const { universalAddress } = usePushWalletContext(); - console.log('Universal Address', universalAddress); - - return ( - - Wallet Page Example - - - Default Button: - - - - Custom Title: - - - - Custom Style Button: - - - - Custom Component Button: - - {universalAddress ? ( - <>{centerMaskString(universalAddress.address)} - ) : ( - <> Connect With Push Wallet - )} - - } - /> - - - - ); -}; - -export default WalletPage; diff --git a/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx b/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx index c1c24533..5a4e6e04 100644 --- a/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx +++ b/examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx @@ -6,7 +6,7 @@ import { SimulateTxText } from './SimulateTxText'; import { PushWalletButton, usePushWalletContext, -} from '../../../../../../packages/ui-kit/src'; +} from '@pushprotocol/pushchain-ui-kit'; const LandingPageLeftComponent = () => { const { pushNetwork, mockTx } = useGlobalContext(); diff --git a/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx b/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx index 37a0427e..62bc1b7c 100644 --- a/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx +++ b/examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx @@ -5,7 +5,7 @@ import { TransactionSnippet } from '../../../common/components'; import { useGlobalContext } from '../../../context/GlobalContext'; import { Transaction } from '@pushprotocol/push-chain/src/lib/generated/tx'; import { centerMaskString, convertToCaip } from '../../../helpers'; -import { usePushWalletContext } from '../../../../../../packages/ui-kit/src'; +import { usePushWalletContext } from '@pushprotocol/pushchain-ui-kit'; const MockSendTransaction = () => { const { pushNetwork, mockTx } = useGlobalContext(); diff --git a/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx b/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx index 04d3ee79..2ba3ca44 100644 --- a/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx +++ b/examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx @@ -2,7 +2,7 @@ import { Box } from 'shared-components'; import { PushWalletButton, usePushWalletContext, -} from '../../../../../../packages/ui-kit'; +} from '@pushprotocol/pushchain-ui-kit'; const SimulateHeader = () => { const { universalAddress } = usePushWalletContext(); diff --git a/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx b/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx index 04ed992f..e6eab5b9 100644 --- a/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx +++ b/packages/ui-kit/src/lib/wallet/components/ConnectPushWalletButton.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; import { usePushWalletContext } from './PushWalletProvider'; -import { walletConnectionButtonStatusMapper } from '../wallet.constants'; import styled from 'styled-components'; import { Spinner } from '../../common'; @@ -41,7 +40,6 @@ const ConnectPushWalletButton: FC = ({ disabled={isConnectButtonDisbaled || isLoading} customStyle={styling} > - {/* {walletConnectionButtonStatusMapper[connectionStatus]} */} {connectionStatus === 'notConnected' ? title : connectionStatus} {isLoading && ( diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx index 70755150..f16e0c41 100644 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx +++ b/packages/ui-kit/src/lib/wallet/components/PushWalletButton.tsx @@ -16,20 +16,13 @@ const PushWalletButton: React.FC = ({ title = 'Login', styling, }) => { - // If a custom component is provided, render it - if (component) { + // If universal address is present render the button + if (universalAddress) { + return ; + } else if (component) { + // If no UA and custom component, then render the component return <>{component}; - } - - return ( - <> - {universalAddress ? ( - - ) : ( - - )} - - ); + } else return ; // If no UA and no custom component, then render the connect button }; export { PushWalletButton }; diff --git a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx b/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx deleted file mode 100644 index fdc802fb..00000000 --- a/packages/ui-kit/src/lib/wallet/components/PushWalletIFrame.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { FC } from 'react'; -import { usePushWalletContext } from './PushWalletProvider'; -import config from '../../config'; -import styled from 'styled-components'; -import { CrossIcon, DashIcon, Spinner } from '../../common'; - -const PushWalletIFrame: FC = () => { - const { - env, - universalAddress, - iframeRef, - isWalletMinimised, - isWalletVisible, - setMinimiseWallet, - handleUserLogOutEvent, - isIframeLoading, - setIframeLoading, - } = usePushWalletContext(); - - const account = universalAddress ? universalAddress?.address : null; - - return ( - <> - {isWalletVisible ? ( - - {isIframeLoading && ( - - { - handleUserLogOutEvent(); - }} - > - - - - Loading... - - - - )} - - - - {account ? ( - setMinimiseWallet(true)}> - - - ) : ( - { - handleUserLogOutEvent(); - }} - > - - - )} - -