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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openzeppelin/ui-builder-adapter-stellar",
-  "version": "1.2.0",
+  "version": "1.4.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.2.0",
+    "@openzeppelin/ui-types": "^1.5.0",
+    "@openzeppelin/ui-utils": "^1.2.0",
     "@stellar/stellar-sdk": "^14.1.1",
     "@stellar/stellar-xdr-json": "^23.0.0",
     "@web3icons/react": "^4.0.19",

package/src/__tests__/getDefaultServiceConfig.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from 'vitest';
+
+import type { StellarNetworkConfig } from '@openzeppelin/ui-types';
+
+import { getStellarDefaultServiceConfig } from '../configuration/network-services';
+
+/**
+ * Tests for getStellarDefaultServiceConfig function.
+ *
+ * Note: We test the pure function directly instead of instantiating StellarAdapter
+ * to avoid loading heavy Stellar SDK dependencies (WASM modules, etc.) which can
+ * cause memory issues during test execution.
+ */
+describe('getStellarDefaultServiceConfig', () => {
+  const createMockNetworkConfig = (
+    overrides: Partial<StellarNetworkConfig> = {}
+  ): StellarNetworkConfig =>
+    ({
+      id: 'stellar-testnet',
+      exportConstName: 'stellarTestnet',
+      name: 'Stellar Testnet',
+      ecosystem: 'stellar',
+      network: 'testnet',
+      type: 'testnet',
+      isTestnet: true,
+      sorobanRpcUrl: 'https://soroban-testnet.stellar.org',
+      networkPassphrase: 'Test SDF Network ; September 2015',
+      ...overrides,
+    }) as StellarNetworkConfig;
+
+  describe('rpc service', () => {
+    it('should return RPC config when sorobanRpcUrl is present', () => {
+      const networkConfig = createMockNetworkConfig();
+
+      const result = getStellarDefaultServiceConfig(networkConfig, 'rpc');
+
+      expect(result).toEqual({
+        sorobanRpcUrl: 'https://soroban-testnet.stellar.org',
+      });
+    });
+
+    it('should return null when sorobanRpcUrl is missing', () => {
+      const networkConfig = createMockNetworkConfig({
+        sorobanRpcUrl: undefined,
+      });
+
+      const result = getStellarDefaultServiceConfig(networkConfig, 'rpc');
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('indexer service', () => {
+    it('should return indexer config when both URLs are present', () => {
+      const networkConfig = createMockNetworkConfig({
+        indexerUri: 'https://indexer.stellar.example/graphql',
+        indexerWsUri: 'wss://indexer.stellar.example/graphql',
+      });
+
+      const result = getStellarDefaultServiceConfig(networkConfig, 'indexer');
+
+      expect(result).toEqual({
+        indexerUri: 'https://indexer.stellar.example/graphql',
+        indexerWsUri: 'wss://indexer.stellar.example/graphql',
+      });
+    });
+
+    it('should return null when indexerUri is missing', () => {
+      const networkConfig = createMockNetworkConfig({
+        indexerWsUri: 'wss://indexer.stellar.example/graphql',
+      });
+
+      const result = getStellarDefaultServiceConfig(networkConfig, 'indexer');
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null when indexerWsUri is missing', () => {
+      const networkConfig = createMockNetworkConfig({
+        indexerUri: 'https://indexer.stellar.example/graphql',
+      });
+
+      const result = getStellarDefaultServiceConfig(networkConfig, 'indexer');
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null when neither indexer URL is present', () => {
+      const networkConfig = createMockNetworkConfig();
+
+      const result = getStellarDefaultServiceConfig(networkConfig, 'indexer');
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('unknown service', () => {
+    it('should return null for unknown service IDs', () => {
+      const networkConfig = createMockNetworkConfig();
+
+      expect(getStellarDefaultServiceConfig(networkConfig, 'explorer')).toBeNull();
+      expect(getStellarDefaultServiceConfig(networkConfig, 'unknown')).toBeNull();
+    });
+  });
+});

package/src/adapter.ts

@@ -33,6 +33,7 @@ import { logger } from '@openzeppelin/ui-utils';
 import { getCurrentLedger } from './access-control/onchain-reader';
 import { createStellarAccessControlService } from './access-control/service';
 import {
+  getStellarDefaultServiceConfig,
   getStellarNetworkServiceForms,
   testStellarNetworkServiceConnection,
   validateStellarNetworkServiceConfig,
@@ -157,6 +158,13 @@ export class StellarAdapter implements ContractAdapter {
     return testStellarNetworkServiceConnection(serviceId, values);
   }
 
+  /**
+   * @inheritdoc
+   */
+  public getDefaultServiceConfig(serviceId: string): Record<string, unknown> | null {
+    return getStellarDefaultServiceConfig(this.networkConfig, serviceId);
+  }
+
   /**
    * NOTE about artifact inputs (single input with auto-detection):
    *

package/src/configuration/network-services.ts

@@ -1,8 +1,43 @@
-import type { NetworkServiceForm, UserRpcProviderConfig } from '@openzeppelin/ui-types';
+import type {
+  NetworkServiceForm,
+  StellarNetworkConfig,
+  UserRpcProviderConfig,
+} from '@openzeppelin/ui-types';
 import { isValidUrl } from '@openzeppelin/ui-utils';
 
 import { testStellarRpcConnection, validateStellarRpcEndpoint } from './rpc';
 
+/**
+ * Returns the default service configuration values for a given service ID.
+ * Used for proactive health checks when no user overrides are configured.
+ *
+ * @param networkConfig The network configuration
+ * @param serviceId The service identifier (e.g., 'rpc', 'indexer')
+ * @returns The default configuration values, or null if not available
+ */
+export function getStellarDefaultServiceConfig(
+  networkConfig: StellarNetworkConfig,
+  serviceId: string
+): Record<string, unknown> | null {
+  switch (serviceId) {
+    case 'rpc':
+      if (networkConfig.sorobanRpcUrl) {
+        return { sorobanRpcUrl: networkConfig.sorobanRpcUrl };
+      }
+      break;
+    case 'indexer':
+      // Indexer is optional for Stellar - only return if both URLs are configured
+      if (networkConfig.indexerUri && networkConfig.indexerWsUri) {
+        return {
+          indexerUri: networkConfig.indexerUri,
+          indexerWsUri: networkConfig.indexerWsUri,
+        };
+      }
+      break;
+  }
+  return null;
+}
+
 /**
  * Returns the network service forms for Stellar networks.
  * Defines the UI configuration for the RPC and Indexer services.

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>