Integrating Elements via UMD module

Differences

Feature	NPM Package	UMD Module
Installation	`npm install` or `yarn add`	Download JS file or use a CDN link in HTML
Module System	CommonJS or ES Modules (ESM)	Universal Module Definition (CommonJS, AMD, or global)
Usage	`require` for CommonJS or `import` for ES Modules	Include in a `<script>` tag, available as a global variable
Dependencies	Managed through `package.json`, automatically resolved	Manually included in HTML
Development Workflow	Integrated with tools like Babel, TypeScript, linters, formatters	Simple setup, less integration with modern tools
Tree-shaking	Supported with ES Modules, reduces bundle size	Not supported, pre-bundled script
Browser/Node.js Usage	Works with bundlers like Webpack, Parcel, Rollup	Browser: `<script>` tag, Node.js: `require` (less common)
Code Splitting/Lazy Loading	Facilitates code splitting and lazy loading	Can delay the loading of JS using `defer` attribute
Global Namespace Pollution	Minimal, managed by module system	Risk of conflicts due to global variables

Advantages:

Simplicity:
- Ease of Use: UMD modules can be included directly via a <script> tag, making it straightforward to integrate into any project, including those without build tools.
- No Build Configuration: No need for a package manager or build tool configuration.
Compatibility:
- Universal Format: UMD modules work in various environments (CommonJS, AMD, and as global variables in the browser), ensuring broad compatibility.
- Legacy Support: Ideal for integrating modern libraries into legacy projects or environments that do not use module bundlers.
Minimal Setup:
- Quick Prototyping: Great for quick prototypes or simple projects where full build tool setup is unnecessary.

Examples

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Add this stylesheet to load styles -->
    <link rel="stylesheet" href="<https://unpkg.com/@leapwallet/[email protected]/dist/umd/style.css>" />
    
    
    <title>My React App</title>
  </head>
  <body class="leap-ui">
     <!-- Add a div to mount the elements tab --> 
     <div id="elements-id"></div> 
     
     <!-- Add umd module using the script tag -->
     <script src="<https://unpkg.com/@leapwallet/[email protected]/dist/umd/main-v1.4.0-beta.3.js>"></script>
     
     <!-- Call the RenderElements method with required props -->
    <script>
      const { RenderElements } = window.LeapElements;
      RenderElements({
        elementsTargetId: 'elements-id',
        viewType: 'multi-view'
      });
    </script>
  </body>
</html>

Customising the theme

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Add this stylesheet to load styles -->
    <link rel="stylesheet" href="<https://unpkg.com/@leapwallet/[email protected]/dist/umd/style.css>" />
    
    <!-- Override classes to customise theme -->
		<style>
		  .leap-ui {
		    --primary: 331 95.7% 45.9%;
		    --primary-foreground: 0 0% 100%;
		    --ring: 323 94.2% 59.2%;
		    --background: 0 0% 100%;
		    --foreground: 331 100% 11.8%;
		  }
		</style>
		    
    
    <title>My React App</title>
  </head>
  <body class="leap-ui">
     <!-- Add a div to mount the elements tab --> 
     <div id="elements-id"></div> 
     
     <!-- Add umd module using the script tag -->
     <script src="<https://unpkg.com/@leapwallet/[email protected]/dist/umd/main-v1.4.0-beta.3.js>"></script>
     
     <!-- Call the RenderElements method with required props -->
    <script>
      const { RenderElements } = window.LeapElements;
      RenderElements({
        elementsTargetId: 'elements-id',
        viewType: 'multi-view'
      });
    </script>
  </body>
</html>

Configure using props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Add this stylesheet to load styles -->
    <link rel="stylesheet" href="<https://unpkg.com/@leapwallet/[email protected]/dist/umd/style.css>" />
    
    
    <title>My React App</title>
  </head>
  <body class="leap-ui">
     <!-- Add a div to mount the elements tab --> 
     <div id="elements-id"></div> 
     
     <!-- Add umd module using the script tag -->
     <script src="<https://unpkg.com/@leapwallet/[email protected]/dist/umd/main-v1.4.0-beta.3.js>"></script>
     
     <!-- Call the RenderElements method with required props -->
    <script>
      const { RenderElements } = window.LeapElements;
      // Pass configuration options in the RenderElements method
      RenderElements({
      elementsTargetId: 'elements-id',
      viewType: "aggregated-swaps-view",
      connectWallet: () => {},
      connectedWalletType: WalletType.LEAP,
      title: 'Get STARS',
      defaultValues: {
        destinationChainId: 'stargaze-1',
        destinationAsset: 'ustars'
      },
      sourceHeader: 'From',
      destinationHeader: 'To',
      showPoweredByBanner: true,
      txnLifecycleHooks: {
        onTxnSignInit: (txn: any) => {
          console.log('onTxnSignInit', txn);
        },
        onTxnSignApproved: (txn: any) => {
          console.log('onTxnSignApproved', txn);
        },
        onTxnSignFailed: (txn: any, err: any) => {
          console.log('onTxnSignFailed', txn, err);
        },
        onTxnComplete: (summary: any) => {
          console.log('onTxnComplete', summary);
        },
        onTxnInProgress: (tab: any) => {
          console.log('onTxnInProgress', tab);
          return () => {
            console.log('onTxnInProgress cleanup');
          };
        },
        onTxnReview: (txn: any) => {
          console.log('onTxnReview', txn);
        },
        onTxnBeginTracking: (txn: any) => {
          console.log('onTxnBeginTracking', txn);
        }
      } 
    });
    </script>
  </body>
</html>