@yodelpassdev/wallet-embed

v0.0.2

Published

a day ago

A embeddable wallet component for Yodel

0High
0Medium
0Low

oleksiimaksymovvbt

yodelpass

yodel-embeded-wallet

An embeddable Yodel wallet component. Renders the Yodel wallet inside an iframe and notifies your app when it has finished loading.

Installation

npm install yodel-embeded-wallet

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | url | string | Yes | The iframe URL to embed (e.g. your Yodel wallet URL) | | onComponentLoaded | (loaded: boolean) => void | Yes | Called with true once the wallet iframe has loaded, false before it loads |

Usage

React

Install peer dependencies if you haven't already:

npm install react react-dom
npm install yodel-embeded-wallet

import React, { useState } from "react";
import { YodelEmbedWallet } from "yodel-embeded-wallet";

function App() {
  const [walletLoaded, setWalletLoaded] = useState(false);

  return (
    <div style={{ width: "400px", height: "600px" }}>
      {!walletLoaded && <p>Loading wallet...</p>}
      <YodelEmbedWallet
        url="https://your-wallet-url.com"
        onComponentLoaded={setWalletLoaded}
      />
    </div>
  );
}

export default App;

Plain HTML (via CDN / UMD)

No bundler required. Load React and the package via <script> tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Yodel Wallet</title>
</head>
<body>
  <div id="wallet-root" style="width: 400px; height: 600px;"></div>
  <p id="status">Loading wallet...</p>

  <!-- React (UMD) -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

  <!-- Yodel Wallet (UMD) -->
  <script src="https://unpkg.com/yodel-embeded-wallet/dist/index.umd.js"></script>

  <script>
    const { YodelEmbedWallet } = YodelEmbededWallet;
    const statusEl = document.getElementById("status");

    function handleLoaded(loaded) {
      statusEl.textContent = loaded ? "Wallet ready." : "Loading wallet...";
    }

    const walletElement = React.createElement(YodelEmbedWallet, {
      url: "https://your-wallet-url.com",
      onComponentLoaded: handleLoaded,
    });

    const root = ReactDOM.createRoot(document.getElementById("wallet-root"));
    root.render(walletElement);
  </script>
</body>
</html>

Angular

Angular can render React components using the react2angular bridge, or you can host the component in a standalone React root inside an Angular component.

Step 1 — Install dependencies

npm install react react-dom yodel-embeded-wallet
npm install --save-dev @types/react @types/react-dom

Step 2 — Create a wrapper Angular component

// yodel-wallet.component.ts
import {
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  ViewChild,
} from "@angular/core";
import React from "react";
import ReactDOM from "react-dom/client";
import { YodelEmbedWallet } from "yodel-embeded-wallet";

@Component({
  selector: "app-yodel-wallet",
  template: `<div #walletContainer style="width: 400px; height: 600px;"></div>`,
})
export class YodelWalletComponent implements OnInit, OnDestroy {
  @ViewChild("walletContainer", { static: true }) containerRef!: ElementRef;

  private root: ReturnType<typeof ReactDOM.createRoot> | null = null;

  ngOnInit() {
    this.root = ReactDOM.createRoot(this.containerRef.nativeElement);
    this.root.render(
      React.createElement(YodelEmbedWallet, {
        url: "https://your-wallet-url.com",
        onComponentLoaded: (loaded: boolean) => {
          console.log("Wallet loaded:", loaded);
        },
      })
    );
  }

  ngOnDestroy() {
    this.root?.unmount();
  }
}

Step 3 — Declare it in your module

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { YodelWalletComponent } from "./yodel-wallet.component";

@NgModule({
  declarations: [AppComponent, YodelWalletComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 4 — Use it in a template

<!-- app.component.html -->
<app-yodel-wallet></app-yodel-wallet>

Note: Ensure allowSyntheticDefaultImports and esModuleInterop are set to true in your tsconfig.json so React imports resolve correctly in Angular.

TypeScript Support

Type definitions are included. The onComponentLoaded prop is typed as (loaded: boolean) => void.

License

MIT