Merge pull request #52 from push-protocol/UI-KIT-49-fixed-ui-kit-export-for-account

Redefining UI-Kit component and functions exports

Author: riyanshu-patro

examples/core-connection/src/context/GlobalContext.tsx

@@ -27,7 +27,8 @@ const mockRecipients = [
 ];
 
 export const GlobalProvider = ({ children }: { children: ReactNode }) => {
-  const { account, handleSendSignRequestToPushWallet } = usePushWalletContext();
+  const { universalAddress, handleSendSignRequestToPushWallet } =
+    usePushWalletContext();
 
   const [pushNetwork, setPushNetwork] = useState<PushNetwork | null>(null);
   const [mockTx, setMockTx] = useState<Transaction | null>(null);
@@ -54,7 +55,7 @@ export const GlobalProvider = ({ children }: { children: ReactNode }) => {
   return (
     <GlobalContext.Provider
       value={{
-        account,
+        account: universalAddress ? universalAddress.address : null,
         pushNetwork,
         mockTx,
         handleSendSignRequestToPushWallet,

examples/core-connection/src/helpers/walletHelper.ts

@@ -1,3 +1,5 @@
+import { UniversalAddress } from '@pushprotocol/pushchain-ui-kit';
+
 export function centerMaskString(str: string) {
   if (str && str.length > 15) {
     const start = str.substring(0, 6);
@@ -61,3 +63,11 @@ export const convertCaipToObject = (
     };
   }
 };
+
+export const convertToCaip = ({
+  address,
+  chain,
+  chainId,
+}: UniversalAddress) => {
+  return `${chain}:${chainId}:${address}`;
+};

examples/core-connection/src/modules/landingPage/components/LandingPageLeftComponent.tsx

@@ -1,13 +1,18 @@
 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 {
+  PushWalletButton,
+  usePushWalletContext,
+} from '@pushprotocol/pushchain-ui-kit';
 
 const LandingPageLeftComponent = () => {
   const { pushNetwork, mockTx } = useGlobalContext();
 
+  const { universalAddress } = usePushWalletContext();
+
   const featuresCard = [
     {
       id: 1,
@@ -106,7 +111,13 @@ const LandingPageLeftComponent = () => {
               justifyContent="center"
               width="-webkit-fill-available"
             >
-              <ConnectPushWalletButton />
+              <PushWalletButton
+                universalAddress={universalAddress}
+                title="Connect Push Wallet"
+                styling={{
+                  width: 'inherit',
+                }}
+              />
             </Box>
           )}
 

examples/core-connection/src/modules/simulatePage/components/MockSendTransaction.tsx

@@ -4,21 +4,25 @@ import { css } from 'styled-components';
 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 { centerMaskString, convertToCaip } from '../../../helpers';
+import { usePushWalletContext } from '@pushprotocol/pushchain-ui-kit';
+
 const MockSendTransaction = () => {
-  const { pushNetwork, mockTx, account, handleSendSignRequestToPushWallet } =
-    useGlobalContext();
+  const { pushNetwork, mockTx } = useGlobalContext();
+
+  const { handleSendSignRequestToPushWallet, universalAddress } =
+    usePushWalletContext();
 
   const [isSendingTxn, setIsSendingTxn] = useState(false);
   const [txnHash, setTxnHash] = useState<string | null>(null);
   const [txnError, setTxnError] = useState<unknown | null>(null);
 
   const handleSendTransaction = async (mockTx: Transaction) => {
     try {
-      if (pushNetwork && account) {
+      if (pushNetwork && universalAddress) {
         setIsSendingTxn(true);
         const txHash = await pushNetwork.tx.send(mockTx, {
-          account,
+          account: convertToCaip(universalAddress), // This will get changed to utils usage in pushchain devnet package
           signMessage: async (data: Uint8Array) => {
             return await handleSendSignRequestToPushWallet(data);
           },

examples/core-connection/src/modules/simulatePage/components/SimulateHeader.tsx

@@ -1,13 +1,15 @@
 import { Box } from 'shared-components';
-import { useGlobalContext } from '../../../context/GlobalContext';
-import { TogglePushWalletButton } from '@pushprotocol/pushchain-ui-kit';
+import {
+  PushWalletButton,
+  usePushWalletContext,
+} from '@pushprotocol/pushchain-ui-kit';
 
 const SimulateHeader = () => {
-  const { account } = useGlobalContext();
+  const { universalAddress } = usePushWalletContext();
 
   return (
     <Box display="flex" justifyContent="end" width="100%">
-      {account && <TogglePushWalletButton account={account} />}
+      <PushWalletButton universalAddress={universalAddress} />
     </Box>
   );
 };

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=7ec6fd&locator=core-connection%40workspace%3A."
+  resolution: "shared-components@file:../../packages/shared-components#../../packages/shared-components::hash=9fe31a&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/043be10cccbe754a00ed3a41688d8cdbca487e56abe72b78aded4e7617ed723c5e08314960c3b410356b57475d28ac0162119ffff0c7516f0e465d97bc5f3d37
+  checksum: 10/7d96c35a77cdbd873e64bb718d9fa8f44607528009e0586c7100f24b6a77d47ba5a89b2ee715086738fc39e6413a3880a32f1e32e53adedd86b586cce29fcbda
   languageName: node
   linkType: hard
 

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 (
-        <Container>
-            <Ellipse />
-        </Container>
-    );
+  return (
+    <Container>
+      <Ellipse />
+    </Container>
+  );
 };
 
 export default Spinner;

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

@@ -1,14 +1,18 @@
-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<ConnectPushWalletButtonProps> = () => {
+const ConnectPushWalletButton: FC<ConnectPushWalletButtonProps> = ({
+  title,
+  styling,
+}) => {
   const {
     connectionStatus,
     handleConnectToPushWallet,
@@ -34,41 +38,54 @@ const ConnectPushWalletButton: FC<ConnectPushWalletButtonProps> = () => {
       <ConnectButton
         onClick={handleConnectWalletButton}
         disabled={isConnectButtonDisbaled || isLoading}
+        customStyle={styling}
       >
-        {walletConnectionButtonStatusMapper[connectionStatus]}
-        {isLoading && (<SpinnerContainer><Spinner /></SpinnerContainer>)}
+        {connectionStatus === 'notConnected' ? title : connectionStatus}
+        {isLoading && (
+          <SpinnerContainer>
+            <Spinner />
+          </SpinnerContainer>
+        )}
       </ConnectButton>
     </>
   );
 };
 
 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;
-`
+  padding: 4px;
+`;

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

@@ -0,0 +1,28 @@
+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<PushWalletButtonProps> = ({
+  universalAddress,
+  component,
+  title = 'Login',
+  styling,
+}) => {
+  // If universal address is present render the button
+  if (universalAddress) {
+    return <TogglePushWalletButton universalAddress={universalAddress} />;
+  } else if (component) {
+    // If no UA and custom component, then render the component
+    return <>{component}</>;
+  } else return <ConnectPushWalletButton title={title} styling={styling} />; // If no UA and no custom component, then render the connect button
+};
+
+export { PushWalletButton };