Updates made to style tags to fix inline styling errors with strict CSP. Nonce added to style tags that were resulting in errors being thrown (#2486)

Author: delbarrow

Diff for: src/funding/paypal/template.jsx

@@ -7,6 +7,7 @@ import {
   Style,
   type ChildType,
 } from "@krakenjs/jsx-pragmatic/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
 import {
   PPLogoExternalImage,
   PPLogoInlineSVG,
@@ -271,8 +272,10 @@ export function WalletLabelOld(opts: WalletLabelOptions): ?ChildType {
     );
   }
 
+  const cspNonce = getCSPNonce();
+
   return (
-    <Style css={css}>
+    <Style nonce={cspNonce} css={css}>
       <div class="wallet-label">
         <div class="paypal-mark">
           {__WEB__ ? (
@@ -472,8 +475,10 @@ export function WalletLabel(opts: WalletLabelOptions): ?ChildType {
     attrs[ATTRIBUTE.PAY_NOW] = true;
   }
 
+  const cspNonce = getCSPNonce();
+
   return (
-    <Style css={css}>
+    <Style nonce={cspNonce} css={css}>
       <div class="wallet-label-new" {...attrs}>
         {branded ? (
           <div class="paypal-mark">

Diff for: src/funding/venmo/template.jsx

@@ -1,6 +1,7 @@
 /* @flow */
 /** @jsx node */
 import { node, Style, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
 import {
   VenmoLogoExternalImage,
   VenmoLogoInlineSVG,
@@ -32,8 +33,10 @@ export function WalletLabel({ ...props }: WalletLabelOptions): ChildType {
     label = instrument.label;
   }
 
+  const cspNonce = getCSPNonce();
+
   return (
-    <Style css={css}>
+    <Style nonce={cspNonce} css={css}>
       <div class="wallet-label-venmo">
         <div class="divider">|</div>
         {logo && (

Diff for: src/ui/text/text.jsx

@@ -7,6 +7,7 @@ import {
   type ChildType,
   type NullableChildrenType,
 } from "@krakenjs/jsx-pragmatic/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
 
 import { CLASS, TEXT_COLOR } from "../../constants";
 
@@ -49,8 +50,10 @@ export function PlaceHolder({
   chars,
   color = TEXT_COLOR.WHITE,
 }: PlaceHolderProps): ChildType {
+  const cspNonce = getCSPNonce();
+
   return (
-    <Style css={css}>
+    <Style nonce={cspNonce} css={css}>
       <div class={["placeholder", `color-${color}`].join(" ")}>
         {new Array(chars).fill("x").join("")}
       </div>