function generateModalContent()

in public/content.js [275:417]

• 143 lines of code
• 3 McCabe index (conditional complexity)

function generateModalContent(operation, amount, styles = {}, isCustom = false, customMessage = '') {
  if (isCustom) {
    return `
    <div id="resVaultModalContent" style="
      position: fixed; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      background-color: #0f0638; 
      padding: 20px; 
      border-radius: 10px; 
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 1001;
      font-family: Poppins, sans-serif;
      width: 300px;
    ">
      <div id="resVaultMessageBox" style="width: calc(100%);
        padding: 20px;
        background-color: #291f57;
        border-radius: 15px;
        margin-bottom: 20px;
        box-shadow: 5px 5px 35px -14px rgba(0,0,0,.17);">
        <form id="Form" style="margin: auto;">
          <div style="width: 100%; margin-bottom: 10px;">
            <div id="customMessage" style="padding: 0;
              width: 100%;
              margin: 0;
              overflow: hidden;
              border-radius: 0px;
              color: #fff;
              text-align: center;
            ">
              <p>
                ${customMessage || ''}
              </p>
            </div>
          </div>
          <p id="poweredBy" style="font-size: small; color: #fff">Powered by Res<strong style="color: #47e7ce">Vault</strong></p>
        </form>
      </div>
      <span style="display: flex;">
          <button id="resVaultModalClose" style="
            background-color: #291f57;
            border: none;
            color: white; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer;
            width: 50%;
            box-sizing: border-box;
            margin-right: 5px;">Cancel</button>
          <button id="resVaultModalSubmit" style="
            background: linear-gradient(60deg, #47e7ce, #4fa8c4); 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer;
            width: 50%;
            box-sizing: border-box;">Submit</button>
      </span>                       
    </div>`;
  } else {
    return `
    <div id="resVaultModalContent" style="
      position: fixed; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      background-color: #0f0638; 
      padding: 20px; 
      border-radius: 10px; 
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 1001;
      font-family: Poppins, sans-serif;
      width: 300px;
    ">
      <div id="resVaultMessageBox" style="width: calc(100%);
        padding: 20px;
        background-color: #291f57;
        border-radius: 15px;
        margin-bottom: 20px;
        box-shadow: 5px 5px 35px -14px rgba(0,0,0,.17);">
        <form id="Form" style="margin: auto;">
          <div style="width: 100%; margin-bottom: 10px;">
            <div style="padding: 0;
              width: 100%;
              margin: 0;
              overflow: hidden;
              border-radius: 0px;
              color: #fff;
              border-bottom: 1px rgba(255, 255, 255, 0.3) solid;">
              <p>
                Operation: ${operation}
              </p>
            </div>
          </div>
          <div style="width: 100%;
            margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;">
            <p id="amountDisplay" style="width: calc(((100% / 3) * 2) - 35px);
              border: none;
              background-color: transparent;
              padding: 10px 0px;
              border-radius: 0px;
              border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
              color: #fff;
              text-align: center;
              ">
              ${amount}
            </p>
            <div style="display: flex;
              align-items: center;">
              <div style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #f0f0f0; background-color: #808080; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 10px; transform: rotate(20deg);">R</div>
              <span style="color: #fff; font-weight: 600; padding-left: 5px;">RoK</span>
            </div>
          </div>
          <p style="font-size: small; color: #fff">Powered by Res<strong style="color: #47e7ce">Vault</strong></p>
        </form>
      </div>
      <span style="display: flex;">
          <button id="resVaultModalClose" style="
            background-color: #291f57;
            border: none;
            color: white; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer;
            width: 50%;
            box-sizing: border-box;
            margin-right: 5px;">Cancel</button>
          <button id="resVaultModalSubmit" style="
            background: linear-gradient(60deg, #47e7ce, #4fa8c4); 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer;
            width: 50%;
            box-sizing: border-box;">Submit</button>
      </span>                       
    </div>`;
  }
}