+
-
{error && (
} />
+
-
+
)
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index 5332520c..a392db8b 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -20,9 +20,8 @@ class ErrorBoundary extends Component- Selected: {imageFile.name} -
+ {imagePreview && ( +
+ 
+
)}
diff --git a/frontend/src/components/MintForm.tsx b/frontend/src/components/MintForm.tsx
index 7f3358f5..f0a1a532 100644
--- a/frontend/src/components/MintForm.tsx
+++ b/frontend/src/components/MintForm.tsx
@@ -6,11 +6,13 @@ import { useTos } from '../context/TosContext'
import { useStellarContext } from '../context/StellarContext'
import { useWalletContext } from '../context/WalletContext'
import { useToast } from '../context/ToastContext'
+import { useBalanceCheck } from '../hooks/useBalanceCheck'
import { isValidStellarAddress } from '../utils/validation'
import type { TokenInfo } from '../types'
const BASE_FEE_STROOPS = '100000' // 0.01 XLM
const ESTIMATED_FEE_DISPLAY = '0.01 XLM'
+const ESTIMATED_FEE_XLM = 0.01
const ADDRESS_DEBOUNCE_DELAY = 500
interface MintFormProps {
@@ -26,6 +28,7 @@ export const MintForm: React.FC
+
+ + {imageFile?.name} +
++ {(imageFile?.size || 0) / 1024 / 1024 < 1 + ? `${Math.round((imageFile?.size || 0) / 1024)} KB` + : `${((imageFile?.size || 0) / 1024 / 1024).toFixed(2)} MB`} +
+ +
-
+ {!hasSufficientBalance && (
+
+
+
+ {imagePreview && (
+
+
+ {!hasSufficientBalance && (
+
+
+ )}
+
+
+
+
+
+ + {selectedImage?.name} +
++ {(selectedImage?.size ? (selectedImage.size / 1024).toFixed(1) : 0)} KB +
+ +
+
+ )
+}
diff --git a/frontend/src/components/UI/index.ts b/frontend/src/components/UI/index.ts
index 8b2ae96b..02edb93b 100644
--- a/frontend/src/components/UI/index.ts
+++ b/frontend/src/components/UI/index.ts
@@ -3,6 +3,7 @@ export { Card } from './Card'
export { Checkbox } from './Checkbox'
export { ConfirmModal } from './ConfirmModal'
export type { DetailRow } from './ConfirmModal'
+export { InsufficientBalanceWarning } from './InsufficientBalanceWarning'
export { Input } from './Input'
export { MainnetConfirmationModal } from './MainnetConfirmationModal'
export { PaginationControls } from './PaginationControls'
diff --git a/frontend/src/csp/cspReporter.ts b/frontend/src/csp/cspReporter.ts
new file mode 100644
index 00000000..3d8817c9
--- /dev/null
+++ b/frontend/src/csp/cspReporter.ts
@@ -0,0 +1,28 @@
+import { captureException } from '../lib/monitoring/sentry'
+
+let registered = false
+
+/**
+ * Registers a SecurityPolicyViolationEvent listener that forwards CSP
+ * violations to Sentry in production and console.warn in development.
+ * Safe to call multiple times — registers exactly once.
+ */
+export function registerCSPReporter(): void {
+ if (registered) return
+ registered = true
+
+ document.addEventListener('securitypolicyviolation', (e: SecurityPolicyViolationEvent) => {
+ const context = {
+ directive: e.violatedDirective,
+ blockedURI: e.blockedURI,
+ originalPolicy: e.originalPolicy,
+ }
+
+ if (import.meta.env.MODE !== 'production') {
+ console.warn('[CSP violation]', e.violatedDirective, e.blockedURI, e)
+ return
+ }
+
+ captureException(new Error(`CSP violation: ${e.blockedURI}`), context)
+ })
+}
diff --git a/frontend/src/csp/policy.ts b/frontend/src/csp/policy.ts
new file mode 100644
index 00000000..694f7279
--- /dev/null
+++ b/frontend/src/csp/policy.ts
@@ -0,0 +1,106 @@
+/**
+ * Single source of truth for the Content Security Policy.
+ *
+ * All deployment configs (vercel.json, public/_headers) are generated from
+ * this file via `scripts/generateCSP.ts`. Never hardcode the CSP string
+ * elsewhere — run `npm run prebuild` to sync configs after editing this file.
+ */
+
+export type CSPDirectiveValue = string[]
+
+export type CSPDirectives = {
+ /** Fallback for fetch directives not explicitly listed. */
+ 'default-src': CSPDirectiveValue
+ /**
+ * Controls which scripts can execute.
+ * 'unsafe-inline' and 'unsafe-eval' are intentionally absent — they negate
+ * XSS protection entirely. Vite bundles everything into hashed chunks so
+ * no inline scripts are needed in production.
+ */
+ 'script-src': CSPDirectiveValue
+ /**
+ * 'unsafe-inline' is required because Tailwind CSS injects styles at
+ * runtime via the style attribute and Insufficient balance
++ You need {shortfall} more XLM to cover the fee. +
+ {isTestnet && ( + + )} +