Embed the upgrade app (iframe)

Render the app in an iframe instead of navigating away. When embedded, the app posts an origin-checked completion message instead of redirecting, so your page never unloads and you keep full control of the surrounding UI (e.g. your bottom sheet or modal). See the overview for detection, hosting, and the shared CORS requirements.

TypeScript
React

openUpgradeIframe appends an iframe into a container you provide and resolves completed when the app reports done (refreshing the session on success). Call close() if the user dismisses your sheet first.

import { openUpgradeIframe } from '@dynamic-labs-sdk/legacy-embedded-wallet-upgrade';

async function embedUpgrade(container: HTMLElement) {
  const session = openUpgradeIframe({ container });

  const outcome = await session.completed;
  if (outcome.status === 'success') {
    // Session already refreshed. closeSheet is your implementation.
    closeSheet();
  } else {
    offerRetry();
  }
}

// If the user dismisses your sheet before completion:
// session.close();

useUpgradeIframe renders no DOM — it returns the upgradeUrl for you to put in your own <iframe>, and attaches the origin-checked completion listener while active. Alongside onComplete, it returns result — the outcome, undefined until completion — so you can render off it directly.

import { useState } from 'react';
import { useUpgradeIframe } from '@dynamic-labs-sdk/legacy-embedded-wallet-upgrade/react';

function UpgradeSheet() {
  const [isOpen, setIsOpen] = useState(false);

  const { upgradeUrl, result } = useUpgradeIframe({
    active: isOpen,
    // Session already refreshed on success. showToast is your implementation.
    onComplete: ({ status }) => {
      showToast(status);
      setIsOpen(false);
    },
  });

  // You can also drive UI off `result` instead of the callback:
  if (result?.status === 'success') return <p>Wallet upgraded.</p>;

  return (
    <>
      <button type="button" onClick={() => setIsOpen(true)}>
        Upgrade wallet
      </button>
      {isOpen && upgradeUrl ? (
        <iframe title="Wallet upgrade" src={upgradeUrl} />
      ) : null}
    </>
  );
}

This route is web-only — there is no DOM iframe in React Native. React Native customers should use the Popup route, which runs in the system auth session.

Installation & Configuration

Chains & Networks

Authenticate

User & Session Management

Wallets

Flow

Swaps

Funding & Onramp

Events

Building UI

Migrating from React

Embed the upgrade app (iframe)

See also

​See also

See also