Dynamically Show Sideshift.ai Widget with from -> to coin selection

gistfile1.txt

const handleShowPlugin = useCallback(() => {
    const sideshiftWidgetFrameId = 'sideshift-widget-frame'
    /**
     * Sideshift plugin library
     */
    const sideshift = window.sideshift;

    const sideshiftWidgetFrame = document.getElementById(sideshiftWidgetFrameId)
    if (sideshiftWidgetFrame) {
      sideshiftWidgetFrame.remove();
    }

    const selectedCoin = pairs[selectedCoinIndex];
    const defaultDepositMethodId = selectedCoin.fromNetwork ? `${selectedCoin.from.toLowerCase()}${selectedCoin.fromNetwork.slice(0, 3)}` : `${selectedCoin.from.toLowerCase()}`;

    window.__SIDESHIFT__ = {
      parentAffiliateId: "rKaKpotcg",
      defaultDepositMethodId,
      defaultSettleMethodId: "usdtbsc",
      settleAddress: "0x22a242833F7Af1E8120C47DB200563dcDB7200e7",
      type: "fixed",
      settleAmount: "200",
      theme: "dark",
      localWidgetTesting: true
    }

    const frame = document.createElement('iframe');
    frame.id = sideshiftWidgetFrameId;
    frame.src = 'https://sideshift.ai/widget';
    frame.title = sideshiftWidgetFrameId;
    frame.allowtransparency = true;
    frame.allow = 'camera; clipboard-read; clipboard-write';
    frame.style.display = 'none';
    frame.style.position = 'fixed';
    frame.style.top = 0;
    frame.style.left = 0;
    frame.style.height = '100vh';
    frame.style.width = '100vw';
    frame.style.border = 'none';
    frame.style.zIndex = 99999;
    document.body.appendChild(frame);

    /**
     * Show plugin
     */
    sideshift.show();

  }, [selectedCoinIndex])