@openzeppelin/ui-builder-adapter-stellar 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openzeppelin/ui-builder-adapter-stellar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Stellar Adapter for UI Builder",
   "keywords": [
     "openzeppelin",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@creit.tech/stellar-wallets-kit": "^1.8.0",
     "@openzeppelin/relayer-sdk": "1.4.0",
-    "@openzeppelin/ui-components": "^1.0.2",
-    "@openzeppelin/ui-types": "^1.1.0",
-    "@openzeppelin/ui-utils": "^1.0.0",
+    "@openzeppelin/ui-components": "^1.0.4",
+    "@openzeppelin/ui-types": "^1.2.0",
+    "@openzeppelin/ui-utils": "^1.1.0",
     "@stellar/stellar-sdk": "^14.1.1",
     "@stellar/stellar-xdr-json": "^23.0.0",
     "@web3icons/react": "^4.0.19",

package/src/wallet/components/account/AccountDisplay.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Button } from '@openzeppelin/ui-components';
 import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn, truncateMiddle } from '@openzeppelin/ui-utils';
+import { cn, getWalletAccountDisplaySizeProps, truncateMiddle } from '@openzeppelin/ui-utils';
 
 import { useStellarAccount, useStellarDisconnect } from '../../hooks';
 
@@ -11,28 +11,39 @@ import { useStellarAccount, useStellarDisconnect } from '../../hooks';
  * A component that displays the connected account address.
  * Also includes a disconnect button.
  */
-export const CustomAccountDisplay: React.FC<BaseComponentProps> = ({ className }) => {
+export const CustomAccountDisplay: React.FC<BaseComponentProps> = ({
+  className,
+  size,
+  variant,
+  fullWidth,
+}) => {
   const { isConnected, address } = useStellarAccount();
   const { disconnect } = useStellarDisconnect();
 
+  const sizeProps = getWalletAccountDisplaySizeProps(size);
+
   if (!isConnected || !address || !disconnect) {
     return null;
   }
 
   return (
-    <div className={cn('flex items-center gap-2', className)}>
-      <div className="flex flex-col">
-        <span className="text-xs font-medium">{truncateMiddle(address, 4, 4)}</span>
-        <span className="text-[9px] text-muted-foreground -mt-0.5">Stellar Account</span>
+    <div className={cn('flex items-center gap-2', fullWidth && 'w-full', className)}>
+      <div className={cn('flex flex-col', fullWidth && 'flex-1')}>
+        <span className={cn(sizeProps.textSize, 'font-medium')}>
+          {truncateMiddle(address, 4, 4)}
+        </span>
+        <span className={cn(sizeProps.subTextSize, 'text-muted-foreground -mt-0.5')}>
+          Stellar Account
+        </span>
       </div>
       <Button
         onClick={() => disconnect()}
-        variant="ghost"
+        variant={variant || 'ghost'}
         size="icon"
-        className="size-6 p-0"
+        className={cn(sizeProps.iconButtonSize, 'p-0')}
         title="Disconnect wallet"
       >
-        <LogOut className="size-3.5" />
+        <LogOut className={sizeProps.iconSize} />
       </Button>
     </div>
   );

package/src/wallet/components/connect/ConnectButton.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import { Button } from '@openzeppelin/ui-components';
 import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn } from '@openzeppelin/ui-utils';
+import { cn, getWalletButtonSizeProps } from '@openzeppelin/ui-utils';
 
 import { useStellarAccount } from '../../hooks';
 import { ConnectorDialog } from './ConnectorDialog';
@@ -19,6 +19,9 @@ export interface ConnectButtonProps extends BaseComponentProps {
 
 export const CustomConnectButton: React.FC<ConnectButtonProps> = ({
   className,
+  size,
+  variant,
+  fullWidth,
   hideWhenConnected = true,
 }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -27,6 +30,8 @@ export const CustomConnectButton: React.FC<ConnectButtonProps> = ({
   // Local state to indicate the button has been clicked and dialog is open, awaiting user selection
   const [isManuallyInitiated, setIsManuallyInitiated] = useState(false);
 
+  const sizeProps = getWalletButtonSizeProps(size);
+
   useEffect(() => {
     if (isConnected && hideWhenConnected) {
       setDialogOpen(false);
@@ -63,19 +68,19 @@ export const CustomConnectButton: React.FC<ConnectButtonProps> = ({
   const showButtonLoading = isConnecting || isManuallyInitiated;
 
   return (
-    <div className={cn('flex items-center', className)}>
+    <div className={cn('flex items-center', fullWidth && 'w-full', className)}>
       <Button
         onClick={handleConnectClick}
         disabled={showButtonLoading || isConnected}
-        variant="outline"
-        size="sm"
-        className="h-8 px-2 text-xs"
+        variant={variant || 'outline'}
+        size={sizeProps.size}
+        className={cn(sizeProps.className, fullWidth && 'w-full')}
         title={isConnected ? 'Connected' : 'Connect Wallet'}
       >
         {showButtonLoading ? (
-          <Loader2 className="size-3.5 animate-spin mr-1" />
+          <Loader2 className={cn(sizeProps.iconSize, 'animate-spin mr-1')} />
         ) : (
-          <Wallet className="size-3.5 mr-1" />
+          <Wallet className={cn(sizeProps.iconSize, 'mr-1')} />
         )}
         {showButtonLoading ? 'Connecting...' : 'Connect Wallet'}
       </Button>