@coinlist-co/react 0.3.0 → 0.5.0

package/dist/client/index.cjs

@@ -20,55 +20,112 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/client/index.ts
 var client_exports = {};
 __export(client_exports, {
-  AuthorizationCode: () => AuthorizationCode,
-  Blockchain: () => Blockchain,
   ChecklistStatus: () => ChecklistStatus,
-  ClientId: () => ClientId,
-  ClientSecret: () => ClientSecret,
-  CodeChallenge: () => CodeChallenge,
-  CodeVerifier: () => CodeVerifier,
+  CoinListClientInitializationError: () => CoinListClientInitializationError,
+  CoinListContext: () => CoinListContext,
   CoinListProvider: () => CoinListProvider,
-  CreateParticipationParams: () => CreateParticipationParams,
-  Cursor: () => Cursor,
-  FaqItem: () => FaqItem,
-  Link: () => Link,
-  Milestone: () => Milestone,
-  OAuthRefreshToken: () => OAuthRefreshToken,
-  OAuthSession: () => OAuthSession,
-  Offer: () => Offer,
-  OfferDetail: () => OfferDetail,
-  OfferId: () => OfferId,
-  OfferOption: () => OfferOption,
-  OfferOptionId: () => OfferOptionId,
-  OfferOptionSlug: () => OfferOptionSlug,
-  OfferSlug: () => OfferSlug,
-  PaginatedResponse: () => PaginatedResponse,
-  PaginationParams: () => PaginationParams,
-  Participation: () => Participation,
-  ParticipationId: () => ParticipationId,
-  ParticipationsPaginationParams: () => ParticipationsPaginationParams,
-  RedirectUri: () => RedirectUri,
-  Requirement: () => Requirement,
-  RequirementId: () => RequirementId,
+  CoinListSignInCard: () => CoinListSignInCard,
+  OAUTH_CODE_VERIFIER_KEY: () => OAUTH_CODE_VERIFIER_KEY,
+  OAUTH_STATE_KEY: () => OAUTH_STATE_KEY,
+  OfferCard: () => OfferCard,
+  OfferCardUi: () => OfferCardUi,
+  OffersGrid: () => OffersGrid,
+  RequirementItem: () => RequirementItem,
+  RequirementItemUi: () => RequirementItemUi,
   RequirementStatus: () => RequirementStatus,
-  RequirementStatusInfo: () => RequirementStatusInfo,
   RequirementVariant: () => RequirementVariant,
-  TermItem: () => TermItem,
-  User: () => User,
-  UserEmail: () => UserEmail,
-  UserId: () => UserId,
-  WalletAddress: () => WalletAddress,
+  RequirementsChecklist: () => RequirementsChecklist,
   createCoinListClient: () => createCoinListClient,
-  fetchAllPages: () => fetchAllPages,
   useCoinList: () => useCoinList,
-  useCoinListRequirements: () => useCoinListRequirements,
-  useCompleteCoinListOAuth: () => useCompleteCoinListOAuth
+  useCompleteOAuth: () => useCompleteOAuth,
+  useOfferDetails: () => useOfferDetails,
+  useOffers: () => useOffers,
+  useParticipations: () => useParticipations,
+  useRequirements: () => useRequirements
 });
 module.exports = __toCommonJS(client_exports);
+var import_styles = require("./styles.css");
 
 // src/client/CoinListProvider.tsx
 var import_react = require("react");
 
+// src/shared/utils.ts
+async function sha256(data) {
+  const bytes = typeof data === "string" ? new TextEncoder().encode(data) : data;
+  const buffer = bytes.buffer.slice(
+    bytes.byteOffset,
+    bytes.byteOffset + bytes.byteLength
+  );
+  return crypto.subtle.digest("SHA-256", buffer);
+}
+function arrayBufferToBase64Url(buffer, padding = true) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  let base64 = btoa(binary);
+  base64 = base64.replace(/\+/g, "-").replace(/\//g, "_");
+  if (!padding) {
+    base64 = base64.replace(/=+$/, "");
+  }
+  return base64;
+}
+function generateSecureRandomBase64Url(byteLength) {
+  const bytes = new Uint8Array(byteLength);
+  crypto.getRandomValues(bytes);
+  const buffer = bytes.buffer;
+  return arrayBufferToBase64Url(buffer, false);
+}
+function getUUIDv4() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = bytes[6] & 15 | 64;
+    bytes[8] = bytes[8] & 63 | 128;
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0"));
+    return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10, 16).join("")}`;
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 12)}`;
+}
+function notBlankStringOrNull(value) {
+  if (value?.trim()) {
+    return value;
+  } else {
+    return null;
+  }
+}
+
+// src/client/core/api/middleware/device-id.ts
+var DEVICE_ID_KEY = "coinlist.device_id";
+function getDeviceId() {
+  let deviceId = localStorage.getItem(DEVICE_ID_KEY);
+  if (!deviceId) {
+    deviceId = getUUIDv4();
+    localStorage.setItem(DEVICE_ID_KEY, deviceId);
+  }
+  return deviceId;
+}
+
+// src/shared/api/frontline/config.ts
+var PUBLIC_API_BASE_URL = "https://api.coinlist.co";
+var HEADER_API_VERSION = "X-API-Version";
+var HEADER_USER_AGENT = "User-Agent";
+var HEADER_IDEMPOTENCY_KEY = "Idempotency-Key";
+var API_VERSION = "2025-10-17";
+var COINLIST_BASE_URL = "https://coinlist.co";
+var OAUTH_PAGE_PATH = "/oauth/authorize";
+var SUPPORT_NEW_TICKET_URL = "https://support.coinlist.co/support/tickets/new";
+var VERIFY_IDENTITY_PATH = "/verify-identity";
+var VERIFY_IDENTITY_VERIFIED_PATH = "/verify-identity/identity_verified";
+var VERIFY_IDENTITY_PROOF_OF_ADDRESS_PATH = "/verify-identity/proof_of_address";
+var VERIFY_IDENTITY_SOURCE_OF_FUNDS_PATH = "/verify-identity/source_of_funds";
+var VERIFY_IDENTITY_ACCREDITATION_PATH = "/verify-identity/accreditation_full";
+var WALLET_PATH = "/wallet";
+
 // src/shared/api/http-attributes.ts
 var empty = {};
 var concat = (left, right) => ({
@@ -114,24 +171,28 @@ var Attributes = {
   wasRenewAttempted
 };
 
-// src/client/core/api/middleware/attach-session-middleware.ts
-function attachSessionMiddleware(fetchAccessToken) {
-  return async (request) => {
-    if (!Attributes.isProtected(request.attributes)) {
-      return request;
-    }
-    const accessToken = await fetchAccessToken(false);
-    if (accessToken === null) {
-      return request;
+// src/client/core/api/middleware/user-agent.ts
+var userAgentMiddleware = async (request) => {
+  if (!Attributes.needUserAgent(request.attributes)) {
+    return request;
+  }
+  const userAgent2 = generateUserAgent();
+  return {
+    ...request,
+    headers: {
+      ...request.headers ?? {},
+      [HEADER_USER_AGENT]: userAgent2
     }
-    return {
-      ...request,
-      headers: {
-        ...request.headers ?? {},
-        Authorization: `Bearer ${accessToken.value}`
-      }
-    };
   };
+};
+function generateUserAgent() {
+  const appInfo = `CoinList/1.0`;
+  const deviceInfo = "Web Browser";
+  const devicePlatform = "DevicePlatform web";
+  const deviceAppId = "DeviceAppID co.coinlist.sdk";
+  const deviceId = getDeviceId();
+  const finalDeviceId = `DeviceID ${deviceId}`;
+  return `${appInfo} (${deviceInfo}; ${devicePlatform}; ${deviceAppId}; ${finalDeviceId})`;
 }
 
 // src/shared/api/http.ts
@@ -232,124 +293,6 @@ var Request = {
   concatAttributes
 };
 
-// src/client/core/api/middleware/session-renewal.ts
-function renewSessionMiddleware(fetchAccessToken) {
-  return async ({ request, response, retry }) => {
-    if (response.status !== 401) {
-      return response;
-    }
-    if (!Attributes.isProtected(request.attributes)) {
-      return response;
-    }
-    if (Attributes.wasRenewAttempted(request.attributes)) {
-      return response;
-    }
-    const newToken = await fetchAccessToken(true);
-    if (newToken) {
-      const nextRequest = Request.concatAttributes(
-        request,
-        Attributes.renewAttempted(true)
-      );
-      return retry(nextRequest);
-    } else {
-      return response;
-    }
-  };
-}
-
-// src/shared/utils.ts
-async function sha256(data) {
-  const bytes = typeof data === "string" ? new TextEncoder().encode(data) : data;
-  const buffer = bytes.buffer.slice(
-    bytes.byteOffset,
-    bytes.byteOffset + bytes.byteLength
-  );
-  return crypto.subtle.digest("SHA-256", buffer);
-}
-function arrayBufferToBase64Url(buffer, padding = true) {
-  const bytes = new Uint8Array(buffer);
-  let binary = "";
-  for (let i = 0; i < bytes.length; i++) {
-    binary += String.fromCharCode(bytes[i]);
-  }
-  let base64 = btoa(binary);
-  base64 = base64.replace(/\+/g, "-").replace(/\//g, "_");
-  if (!padding) {
-    base64 = base64.replace(/=+$/, "");
-  }
-  return base64;
-}
-function generateSecureRandomBase64Url(byteLength) {
-  const bytes = new Uint8Array(byteLength);
-  crypto.getRandomValues(bytes);
-  const buffer = bytes.buffer;
-  return arrayBufferToBase64Url(buffer, false);
-}
-function getUUIDv4() {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID();
-  }
-  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
-    const bytes = new Uint8Array(16);
-    crypto.getRandomValues(bytes);
-    bytes[6] = bytes[6] & 15 | 64;
-    bytes[8] = bytes[8] & 63 | 128;
-    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0"));
-    return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10, 16).join("")}`;
-  }
-  return `${Date.now()}-${Math.random().toString(36).slice(2, 12)}`;
-}
-function notBlankStringOrNull(value) {
-  if (value?.trim()) {
-    return value;
-  } else {
-    return null;
-  }
-}
-
-// src/client/core/api/middleware/device-id.ts
-var DEVICE_ID_KEY = "coinlist.device_id";
-function getDeviceId() {
-  let deviceId = localStorage.getItem(DEVICE_ID_KEY);
-  if (!deviceId) {
-    deviceId = getUUIDv4();
-    localStorage.setItem(DEVICE_ID_KEY, deviceId);
-  }
-  return deviceId;
-}
-
-// src/shared/api/frontline.ts
-var PUBLIC_API_BASE_URL = "https://api.coinlist.co";
-var HEADER_API_VERSION = "X-API-Version";
-var HEADER_USER_AGENT = "User-Agent";
-var HEADER_IDEMPOTENCY_KEY = "Idempotency-Key";
-var API_VERSION = "2025-10-17";
-var COINLIST_OAUTH_PAGE_URL = "https://coinlist.co/oauth/authorize";
-
-// src/client/core/api/middleware/user-agent.ts
-var userAgentMiddleware = async (request) => {
-  if (!Attributes.needUserAgent(request.attributes)) {
-    return request;
-  }
-  const userAgent2 = generateUserAgent();
-  return {
-    ...request,
-    headers: {
-      ...request.headers ?? {},
-      [HEADER_USER_AGENT]: userAgent2
-    }
-  };
-};
-function generateUserAgent() {
-  const appInfo = `CoinList/1.0`;
-  const deviceInfo = "Web Browser";
-  const devicePlatform = "DevicePlatform web";
-  const deviceAppId = "DeviceAppID co.coinlist.sdk";
-  const deviceId = getDeviceId();
-  const finalDeviceId = `DeviceID ${deviceId}`;
-  return `${appInfo} (${deviceInfo}; ${devicePlatform}; ${deviceAppId}; ${finalDeviceId})`;
-}
-
 // src/shared/api/http-client.ts
 var HttpClient = class {
   constructor(config, middleware = {}) {
@@ -419,6 +362,26 @@ var HttpClient = class {
   }
 };
 
+// src/shared/api/middleware/attach-session-middleware.ts
+function attachSessionMiddleware(fetchAccessToken) {
+  return async (request) => {
+    if (!Attributes.isProtected(request.attributes)) {
+      return request;
+    }
+    const accessToken = await fetchAccessToken(false);
+    if (accessToken === null) {
+      return request;
+    }
+    return {
+      ...request,
+      headers: {
+        ...request.headers ?? {},
+        Authorization: `Bearer ${accessToken.value}`
+      }
+    };
+  };
+}
+
 // src/shared/api/middleware/idempotency-key.ts
 var idempotencyKeyMiddleware = async (request) => {
   if (!Attributes.isIdempotent(request.attributes)) {
@@ -472,31 +435,66 @@ function defaultDelay(ms) {
 }
 var requestRetryMiddleware = createRequestRetryMiddleware();
 
-// src/client/core/api/api-client.ts
-var ApiClient = class {
-  constructor(config, fetchAccessToken) {
-    this.config = config;
-    this.fetchAccessToken = fetchAccessToken;
-    this.httpClient = new HttpClient(this.config, {
-      beforeRequest: [
-        attachSessionMiddleware(this.fetchAccessToken),
-        userAgentMiddleware,
-        idempotencyKeyMiddleware
-      ],
-      afterRequest: [
-        renewSessionMiddleware(this.fetchAccessToken),
-        requestRetryMiddleware
-      ]
-    });
-  }
-  async send(request) {
-    const response = await this.httpClient.send(request);
-    if (response.status >= 200 && response.status < 300) {
-      return response.body;
-    } else {
-      throw new HttpError(response);
-    }
-  }
+// src/shared/api/middleware/session-renewal.ts
+function renewSessionMiddleware(fetchAccessToken) {
+  return async ({ request, response, retry }) => {
+    if (response.status !== 401) {
+      return response;
+    }
+    if (!Attributes.isProtected(request.attributes)) {
+      return response;
+    }
+    if (Attributes.wasRenewAttempted(request.attributes)) {
+      return response;
+    }
+    const newToken = await fetchAccessToken(true);
+    if (newToken) {
+      const nextRequest = Request.concatAttributes(
+        request,
+        Attributes.renewAttempted(true)
+      );
+      return retry(nextRequest);
+    } else {
+      return response;
+    }
+  };
+}
+
+// src/shared/api/authenticated-api-client.ts
+var AuthenticatedApiClient = class {
+  constructor(config, fetchAccessToken, additionalBeforeRequest = []) {
+    this.httpClient = new HttpClient(config, {
+      beforeRequest: [
+        attachSessionMiddleware(fetchAccessToken),
+        ...additionalBeforeRequest,
+        idempotencyKeyMiddleware
+      ],
+      afterRequest: [
+        renewSessionMiddleware(fetchAccessToken),
+        requestRetryMiddleware
+      ]
+    });
+  }
+  async send(request) {
+    const response = await this.httpClient.send(request);
+    if (response.status >= 200 && response.status < 300) {
+      return response.body;
+    } else {
+      throw new HttpError(response);
+    }
+  }
+};
+
+// src/client/core/api/api-client.ts
+var ApiClient = class {
+  constructor(config, fetchAccessToken) {
+    this.client = new AuthenticatedApiClient(config, fetchAccessToken, [
+      userAgentMiddleware
+    ]);
+  }
+  async send(request) {
+    return this.client.send(request);
+  }
 };
 
 // src/shared/api/pagination.ts
@@ -538,22 +536,6 @@ var PaginationParams = {
   }
 };
 
-// src/shared/types/errors.ts
-var NotAuthenticatedError = class extends Error {
-  constructor(message = "The user is not authenticated. Go through the OAuth flow first!") {
-    super(message);
-    this.name = "NotAuthenticatedError";
-  }
-};
-
-// src/shared/types/oauth.ts
-var AuthorizationCode = (value) => value;
-var CodeVerifier = (value) => value;
-var CodeChallenge = (value) => value;
-var RedirectUri = (value) => value;
-var ClientId = (value) => value;
-var ClientSecret = (value) => value;
-
 // src/shared/types/offer.ts
 var OfferId = (value) => value;
 var OfferSlug = (value) => value;
@@ -663,6 +645,29 @@ var Milestone = {
   })
 };
 
+// src/shared/api/frontline/offers.ts
+async function fetchOffers(api) {
+  return fetchAllPages((params) => fetchOffersPage(api, params));
+}
+async function fetchOffersPage(api, params) {
+  const queryParams = PaginationParams.toQueryParams(params);
+  const pageDto = await api.send({
+    method: "GET",
+    url: "/v1/offers",
+    queryParams,
+    attributes: Attributes.protected()
+  });
+  return PaginatedResponse.fromDto(pageDto, Offer.fromDto);
+}
+async function fetchOfferDetails(api, id) {
+  const dto = await api.send({
+    method: "GET",
+    url: `/v1/offers/${id}`,
+    attributes: Attributes.protected()
+  });
+  return OfferDetail.fromDto(dto);
+}
+
 // src/shared/types/participation.ts
 var ParticipationId = (value) => value;
 var Blockchain = (value) => value;
@@ -710,6 +715,40 @@ var CreateParticipationParams = {
   })
 };
 
+// src/shared/api/frontline/participations.ts
+async function fetchParticipations(api, offerId) {
+  return fetchAllPages(
+    (params) => fetchParticipationsPage(api, params),
+    { offerId }
+  );
+}
+async function fetchParticipationsPage(api, params) {
+  const pageDto = await api.send({
+    method: "GET",
+    url: "/v1/participations",
+    queryParams: ParticipationsPaginationParams.toQueryParams(params),
+    attributes: Attributes.protected()
+  });
+  return PaginatedResponse.fromDto(pageDto, Participation.fromDto);
+}
+async function fetchParticipation(api, id) {
+  const dto = await api.send({
+    method: "GET",
+    url: `/v1/participations/${id}`,
+    attributes: Attributes.protected()
+  });
+  return Participation.fromDto(dto);
+}
+async function createParticipation(api, params) {
+  const dto = await api.send({
+    method: "POST",
+    url: "/v1/participations",
+    body: CreateParticipationParams.toDto(params),
+    attributes: Attributes.protected()
+  });
+  return Participation.fromDto(dto);
+}
+
 // src/shared/types/requirement.ts
 var RequirementId = (value) => value;
 var Requirement = {
@@ -726,6 +765,41 @@ var RequirementStatusInfo = {
   }))
 };
 
+// src/shared/api/frontline/requirements.ts
+async function fetchOfferRequirements(api, offerId) {
+  const response = await api.send({
+    method: "GET",
+    url: `/v1/offers/${offerId}/requirements`,
+    attributes: Attributes.protected()
+  });
+  return Object.fromEntries(
+    Object.entries(response.options).map(([optionId, list]) => [
+      optionId,
+      list.data.map(Requirement.fromDto)
+    ])
+  );
+}
+async function fetchRequirementStatuses(api, offerId) {
+  const response = await api.send({
+    method: "GET",
+    url: `/v1/offers/${offerId}/requirements/statuses`,
+    attributes: Attributes.protected()
+  });
+  return RequirementStatusInfo.fromStatusesDto(response);
+}
+
+// src/shared/types/errors.ts
+var NotAuthenticatedError = class extends Error {
+  constructor(message = "The user is not authenticated. Go through the OAuth flow first!") {
+    super(message);
+    this.name = "NotAuthenticatedError";
+  }
+};
+
+// src/shared/types/oauth.ts
+var AuthorizationCode = (value) => value;
+var CodeVerifier = (value) => value;
+
 // src/client/core/coinlist-client.ts
 var OAUTH_STATE_KEY = "coinlist.oauth_state";
 var OAUTH_CODE_VERIFIER_KEY = "coinlist.oauth_code_verifier";
@@ -778,8 +852,8 @@ var CoinListClientImpl = class {
       code_challenge_method: "S256",
       state
     });
-    const oauthPageUrl = this._config.authorizationPageUrl ?? COINLIST_OAUTH_PAGE_URL;
-    const url = `${oauthPageUrl}?${params.toString()}`;
+    const baseUrl = this._config.coinlistBaseUrl ?? COINLIST_BASE_URL;
+    const url = `${baseUrl}${OAUTH_PAGE_PATH}?${params.toString()}`;
     window.location.href = url;
   }
   completeOAuth() {
@@ -813,93 +887,78 @@ var CoinListClientImpl = class {
   logout() {
     this._accessToken = null;
   }
-  async fetchAllOffers() {
+  async fetchOffers() {
     this.ensureAuthenticated();
-    return await fetchAllPages(this.fetchOffersPage.bind(this));
+    return fetchOffers(this.api);
   }
   async fetchOffersPage(params) {
     this.ensureAuthenticated();
-    const queryParams = PaginationParams.toQueryParams(params);
-    if (this._config.sandbox) {
-      queryParams.sandbox = true;
-    }
-    const pageDto = await this.api.send({
-      method: "GET",
-      url: "/v1/offers",
-      queryParams,
-      attributes: Attributes.protected()
-    });
-    return PaginatedResponse.fromDto(pageDto, Offer.fromDto);
+    return fetchOffersPage(this.api, params);
   }
   async fetchOfferDetails(id) {
     this.ensureAuthenticated();
-    const offerDetailDto = await this.api.send({
-      method: "GET",
-      url: `/v1/offers/${id}`,
-      attributes: Attributes.protected()
-    });
-    return OfferDetail.fromDto(offerDetailDto);
+    return fetchOfferDetails(this.api, id);
   }
-  async fetchAllParticipations(offerId) {
+  async fetchParticipations(offerId) {
     this.ensureAuthenticated();
-    return await fetchAllPages(
-      this.fetchParticipationsPage.bind(this),
-      { offerId }
-    );
+    return fetchParticipations(this.api, offerId);
   }
   async fetchParticipationsPage(params) {
     this.ensureAuthenticated();
-    const pageDto = await this.api.send(
-      {
-        method: "GET",
-        url: "/v1/participations",
-        queryParams: ParticipationsPaginationParams.toQueryParams(params),
-        attributes: Attributes.protected()
-      }
-    );
-    return PaginatedResponse.fromDto(pageDto, Participation.fromDto);
+    return fetchParticipationsPage(this.api, params);
   }
   async fetchParticipation(id) {
     this.ensureAuthenticated();
-    const participationDto = await this.api.send({
-      method: "GET",
-      url: `/v1/participations/${id}`,
-      attributes: Attributes.protected()
-    });
-    return Participation.fromDto(participationDto);
+    return fetchParticipation(this.api, id);
   }
   async createParticipation(params) {
     this.ensureAuthenticated();
-    const participationDto = await this.api.send({
-      method: "POST",
-      url: "/v1/participations",
-      body: CreateParticipationParams.toDto(params),
-      attributes: Attributes.protected()
-    });
-    return Participation.fromDto(participationDto);
+    return createParticipation(this.api, params);
   }
   async fetchOfferRequirements(offerId) {
     this.ensureAuthenticated();
-    const response = await this.api.send({
-      method: "GET",
-      url: `/v1/offers/${offerId}/requirements`,
-      attributes: Attributes.protected()
-    });
-    return Object.fromEntries(
-      Object.entries(response.options).map(([optionId, list]) => [
-        optionId,
-        list.data.map(Requirement.fromDto)
-      ])
-    );
+    return fetchOfferRequirements(this.api, offerId);
   }
   async fetchRequirementStatuses(offerId) {
     this.ensureAuthenticated();
-    const response = await this.api.send({
-      method: "GET",
-      url: `/v1/offers/${offerId}/requirements/statuses`,
-      attributes: Attributes.protected()
-    });
-    return RequirementStatusInfo.fromStatusesDto(response);
+    return fetchRequirementStatuses(this.api, offerId);
+  }
+  handleRequirement(requirement) {
+    const baseUrl = this._config.coinlistBaseUrl ?? COINLIST_BASE_URL;
+    let path;
+    switch (requirement.type) {
+      case "kyc_approved":
+        path = VERIFY_IDENTITY_PATH;
+        break;
+      case "identity_verified":
+        path = VERIFY_IDENTITY_VERIFIED_PATH;
+        break;
+      case "proof_of_address":
+        path = VERIFY_IDENTITY_PROOF_OF_ADDRESS_PATH;
+        break;
+      case "source_of_funds":
+        path = VERIFY_IDENTITY_SOURCE_OF_FUNDS_PATH;
+        break;
+      case "accreditation":
+        path = VERIFY_IDENTITY_ACCREDITATION_PATH;
+        break;
+      case "external_wallet":
+      case "whitelisted_wallet":
+        path = WALLET_PATH;
+        break;
+      case "jurisdiction":
+        path = null;
+        break;
+      default: {
+        const _exhaustive = requirement.type;
+        return;
+      }
+    }
+    if (path === null) return;
+    openInNewTab(new URL(path, baseUrl).toString());
+  }
+  contactSupport() {
+    openInNewTab(SUPPORT_NEW_TICKET_URL);
   }
   ensureAuthenticated() {
     if (this.getAuthState() !== "logged-in") {
@@ -907,6 +966,9 @@ var CoinListClientImpl = class {
     }
   }
 };
+function openInNewTab(url) {
+  window.open(url, "_blank", "noopener,noreferrer");
+}
 function createCoinListClient(config) {
   return new CoinListClientImpl(config);
 }
@@ -940,9 +1002,649 @@ function CoinListProvider({ config, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinListContext.Provider, { value, children });
 }
 
-// src/client/components/requirements/RequirementItem.tsx
+// src/client/components/design-system/AlertBanner.tsx
 var import_lucide_react = require("lucide-react");
+
+// src/client/components/design-system/tokens/typography.ts
+var typeClasses = {
+  hero: "text-[64px] leading-[110%] font-semibold",
+  display: "text-[48px] leading-[110%] font-semibold",
+  h1: "text-[36px] leading-[120%] font-semibold",
+  h2: "text-[28px] leading-[125%] font-semibold",
+  h3: "text-[22px] leading-[130%] font-semibold",
+  h4: "text-[18px] leading-[135%] font-medium",
+  body: "text-[16px] leading-[150%] font-normal",
+  subhead: "text-[14px] leading-[150%] font-normal",
+  caption: "text-[12px] leading-[140%] font-normal",
+  label: "text-[14px] leading-[140%] font-medium",
+  data: "text-[14px] leading-[140%] font-normal"
+};
+
+// src/client/components/design-system/utils.ts
+var import_clsx = require("clsx");
+function cn(...inputs) {
+  return (0, import_clsx.clsx)(inputs);
+}
+
+// src/client/components/design-system/AlertBanner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantConfig = {
+  info: {
+    container: "bg-surface border-border",
+    text: "text-text-secondary",
+    Icon: import_lucide_react.Info
+  },
+  success: {
+    container: "bg-success-subtle border-success-border",
+    text: "text-success",
+    Icon: import_lucide_react.CircleCheck
+  },
+  warning: {
+    container: "bg-warning-subtle border-warning-border",
+    text: "text-warning",
+    Icon: import_lucide_react.Info
+  },
+  error: {
+    container: "bg-error-subtle border-error-border",
+    text: "text-error",
+    Icon: import_lucide_react.Info
+  }
+};
+function AlertBanner({
+  variant,
+  content,
+  icon = false,
+  className
+}) {
+  const { container, text, Icon } = variantConfig[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center rounded-btn border p-3",
+        icon && "gap-2",
+        container,
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: cn("h-4 w-4 shrink-0", text), "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: cn(typeClasses.subhead, text), children: content })
+      ]
+    }
+  );
+}
+
+// src/client/components/design-system/CloseButton.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CloseButton({
+  onClick,
+  "aria-label": ariaLabel = "Close",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: cn(
+        "cursor-pointer rounded-full p-1.5 text-text-secondary transition-colors hover:bg-surface hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { className: "h-5 w-5" })
+    }
+  );
+}
+
+// src/client/components/design-system/logos/CoinListWordmark.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CoinListWordmark(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      width: "638",
+      height: "125",
+      viewBox: "0 0 638 125",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M68.7724 123.966C74.8226 124.172 80.7696 123.519 86.5104 121.799C97.4076 118.531 106.551 112.58 113.942 103.947C113.942 103.947 113.942 103.947 113.908 103.912C111.879 102.193 109.851 100.507 107.857 98.8218L105.829 97.1363C105.451 96.8268 105.107 96.5172 104.729 96.2076C103.939 95.5197 103.148 94.8662 102.323 94.2126C95.3107 98.8562 87.6104 101.539 79.1196 101.883C74.8569 102.055 70.6287 101.642 66.5036 100.507C59.5252 98.6154 53.2688 95.1757 48.2499 89.7755C39.1059 79.938 35.8745 68.1743 38.2465 55.0348C39.7246 46.9172 43.4373 40.0723 49.1093 34.5C47.9061 34.7408 46.703 35.016 45.5342 35.3943C36.5277 38.2148 29.6181 43.6839 24.6336 51.6639C20.6803 58.0273 18.5834 64.9411 18.3428 72.4739C18.2053 76.7047 18.4803 80.7979 19.4428 84.7879C22.5023 97.2395 29.3087 107.043 39.6903 114.335H39.7934V114.403C40.1372 114.644 40.4809 114.919 40.8247 115.16C49.2812 120.801 58.5971 123.691 68.7724 124.035V123.966Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M72.2101 89.052C68.1881 90.8406 64.0286 91.8725 59.6973 92.2165C64.9912 95.209 70.8007 96.688 77.1259 96.8256C79.1885 96.86 81.251 96.6536 83.4167 96.3097C88.745 95.4841 93.6951 93.5579 98.3015 90.7374C93.9358 87.057 89.6044 83.4109 85.2386 79.7305C81.526 83.6861 77.1946 86.8506 72.2101 89.052Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M66.9848 0.241609C66.4348 0.276006 65.8848 0.344799 65.3691 0.413592C70.663 1.4111 75.7851 3.13093 80.6321 5.71068C90.0511 10.7326 97.3732 17.9215 102.289 27.4494L104.936 25.1448C107.652 22.7714 110.368 20.3981 113.084 18.0247C106.655 11.1797 99.092 6.15784 90.223 3.06214C84.3103 0.998336 78.2601 -0.0335643 72.0381 0.000832319C70.388 0.000832319 68.7036 0.138419 66.9848 0.241609Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M25.4242 107.871C17.4833 97.9988 13.1519 86.7167 13.2207 73.818C13.2207 67.317 14.5614 61.0568 17.1396 55.1062C20.9553 46.2662 26.9711 39.1805 35.4276 34.2962C43.3685 29.687 51.9968 27.8984 61.1752 29.2743C70.5943 30.7189 78.3976 35.2249 84.6541 42.2762C84.6541 42.2762 84.8603 42.5514 84.9634 42.6546C85.8916 41.8291 86.8541 41.0035 87.7823 40.178L88.9167 39.1805C89.8792 38.355 90.8417 37.4951 91.8043 36.6696C94.0043 34.7434 96.17 32.8515 98.3357 30.9253C94.1075 22.223 87.7479 15.55 79.3258 10.8377C69.3911 5.26541 58.7002 3.54557 47.3904 5.02463C41.7528 5.78136 36.3557 7.50119 31.1993 10.0465C13.702 18.7145 1.08597 36.532 0.0546833 58.4771C-0.117196 62.0887 0.123436 65.7348 0.673452 69.3464C2.04849 78.3239 5.34859 86.4759 10.6425 93.8368C14.7676 99.5123 19.6834 104.19 25.3898 107.871H25.4242Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M366.034 58.1654C366.034 46.8145 375.178 37.665 386.419 37.665C397.66 37.665 406.804 46.8145 406.804 58.1654V99.3727H420.727V58.1654C420.727 39.1785 405.395 23.7344 386.419 23.7344C367.444 23.7344 352.112 39.1785 352.112 58.1654V99.3727H366.034V58.1654ZM278.616 38.1466C265.141 38.1466 254.244 49.0503 254.244 62.5338C254.244 76.0173 265.141 86.9211 278.616 86.9211C292.092 86.9211 302.989 76.0173 302.989 62.5338C302.989 49.0503 292.092 38.1466 278.616 38.1466ZM240.321 62.5338C240.321 41.3799 257.475 24.2159 278.616 24.2159C299.757 24.2159 316.911 41.3799 316.911 62.5338C316.911 83.6878 299.757 100.852 278.616 100.852C257.475 100.852 240.321 83.6878 240.321 62.5338ZM208.386 38.2154C195.082 37.9402 184.048 48.5 183.738 61.8115C183.463 75.123 194.017 86.1643 207.32 86.4739C215.192 86.6459 222.274 82.9998 226.812 77.2212L237.777 85.8204C230.662 94.9011 219.455 100.645 207.011 100.37C186.007 99.923 169.335 82.5183 169.782 61.5019C170.229 40.4856 187.623 23.8032 208.627 24.2503C219.524 24.4911 229.287 29.3066 236.059 36.8051L225.712 46.1266C221.415 41.3455 215.227 38.3186 208.317 38.1466L208.386 38.2154ZM340.527 25.2134V99.3727H326.605V25.2134H340.527ZM508.282 25.2134H494.36V99.8542H508.282V25.2134ZM483.154 99.8542H448.846C439.221 99.8542 431.452 92.0462 431.452 82.4495V25.2134H445.374V82.4495C445.374 84.3757 446.921 85.9236 448.846 85.9236H483.154V99.8542ZM583.772 25.2134H567.856H542.83C530.661 25.2134 520.933 35.1885 520.933 47.2273C520.933 59.2661 530.661 69.2412 542.83 69.2412H552.421C556.821 69.2412 560.396 72.8184 560.396 77.1868V77.9435C560.396 82.3463 556.821 85.8892 552.421 85.8892H520.451V99.8198H552.421C564.522 99.8198 574.319 90.0168 574.319 77.9091V77.1524C574.319 65.0448 564.522 55.2417 552.421 55.2417H542.83C538.499 55.2417 534.855 51.6301 534.855 47.1585C534.855 42.6869 538.499 39.0753 542.83 39.0753H574.319H583.772C591.472 39.0753 597.694 45.3011 597.694 53.0059V99.3039H611.617V53.0059C611.617 37.6306 599.138 25.1446 583.772 25.1446V25.2134ZM637.021 39.1441H609.038V25.2134H637.021V39.1441Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/client/components/design-system/PoweredByCoinList.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function PoweredByCoinList({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-[5px] text-text-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn(typeClasses.caption, "tracking-[0.12px]"), children: "Powered by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CoinListWordmark, { className: "h-3 w-auto" })
+      ]
+    }
+  );
+}
+
+// src/client/components/design-system/ClButton.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react2 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-3 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        // Primary — tokens auto-switch: dark bg (#171717) → light bg (#f4f4f5) in dark mode
+        primary: "bg-brand-primary text-text-inverse font-semibold hover:bg-brand-primary-hover active:bg-brand-primary-active focus-visible:ring-gray-500",
+        // Secondary — bg-section, border-border, text-text-primary all auto-switch
+        // hover maps to border token value; active has no token so uses dark: override
+        secondary: "bg-section border border-border text-text-primary font-medium hover:bg-border active:bg-[#d9d9d9] dark:active:bg-divider focus-visible:ring-gray-400",
+        // Destructive — error tokens auto-switch to translucent dark equivalents
+        // hover/active have no tokens so use dark: overrides
+        destructive: "bg-error-subtle border border-error-border text-error font-semibold hover:bg-[#fcdcd8] active:bg-[#f9c9c4] dark:hover:bg-[rgba(248,113,113,0.20)] dark:active:bg-[rgba(248,113,113,0.30)] focus-visible:ring-red-400",
+        // Ghost — transparent base; hover/active use section/border tokens (auto-switch)
+        ghost: "bg-transparent text-text-primary font-medium hover:bg-section active:bg-border focus-visible:ring-gray-400",
+        // Link — text-text-primary auto-switches light/dark
+        link: "h-auto p-0 text-text-primary font-medium underline-offset-4 hover:underline focus-visible:ring-gray-500",
+        // Destructive link — text-error auto-switches (#b42318 → #f87171 in dark)
+        destructiveLink: "h-auto p-0 text-error font-medium hover:text-[#8b1a13] active:text-[#6d1510] dark:hover:text-[#fca5a5] dark:active:text-[#f87171] focus-visible:ring-red-500"
+      },
+      size: {
+        sm: "h-9 px-4 text-sm tracking-[0.28px]",
+        default: "h-11 px-5 text-sm tracking-[0.28px]",
+        lg: "h-14 px-6 text-base",
+        icon: "h-12 w-12"
+      },
+      radius: {
+        pill: "rounded-full",
+        // compound variants below handle size-specific radii
+        rounded: ""
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { size: "sm", radius: "rounded", className: "rounded-lg" },
+      { size: "default", radius: "rounded", className: "rounded-2xl" },
+      { size: "lg", radius: "rounded", className: "rounded-2xl" },
+      { size: "icon", radius: "rounded", className: "rounded-md" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+      radius: "pill",
+      fullWidth: false
+    }
+  }
+);
+var ClButton = (0, import_react2.forwardRef)(
+  ({
+    className,
+    variant,
+    size,
+    radius,
+    fullWidth,
+    children,
+    isLoading = false,
+    loadingText,
+    startIcon,
+    endIcon,
+    disabled,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || isLoading;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "button",
+      {
+        className: cn(
+          buttonVariants({ variant, size, radius, fullWidth }),
+          className
+        ),
+        ref,
+        disabled: isDisabled,
+        ...props,
+        children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "span",
+            {
+              className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-60",
+              "aria-hidden": "true"
+            }
+          ),
+          startIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0", children: startIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn(isLoading && "opacity-60"), children: isLoading && loadingText ? loadingText : children }),
+          endIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0", children: endIcon })
+        ]
+      }
+    );
+  }
+);
+ClButton.displayName = "ClButton";
+
+// src/client/components/design-system/logos/CoinListLogomark.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CoinListLogomark(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    {
+      width: "115",
+      height: "125",
+      viewBox: "0 0 115 125",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M69.7519 123.966C75.8021 124.172 81.7491 123.519 87.4899 121.799C98.3871 118.531 107.531 112.58 114.922 103.947C114.922 103.947 114.922 103.947 114.888 103.912C112.859 102.193 110.831 100.507 108.837 98.8218L106.809 97.1363C106.431 96.8268 106.087 96.5172 105.709 96.2076C104.919 95.5197 104.128 94.8662 103.303 94.2126C96.2902 98.8562 88.5899 101.539 80.0991 101.883C75.8364 102.055 71.6082 101.642 67.4831 100.507C60.5047 98.6154 54.2483 95.1757 49.2294 89.7755C40.0854 79.938 36.854 68.1743 39.226 55.0348C40.7041 46.9172 44.4168 40.0723 50.0888 34.5C48.8856 34.7408 47.6825 35.016 46.5137 35.3943C37.5072 38.2148 30.5976 43.6839 25.6131 51.6639C21.6598 58.0273 19.5629 64.9411 19.3223 72.4739C19.1848 76.7047 19.4598 80.7979 20.4223 84.7879C23.4818 97.2395 30.2882 107.043 40.6698 114.335H40.7729V114.403C41.1167 114.644 41.4604 114.919 41.8042 115.16C50.2607 120.801 59.5766 123.691 69.7519 124.035V123.966Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M73.1896 89.052C69.1676 90.8406 65.0081 91.8725 60.6768 92.2165C65.9707 95.209 71.7802 96.688 78.1054 96.8256C80.168 96.86 82.2305 96.6536 84.3962 96.3097C89.7245 95.4841 94.6746 93.5579 99.281 90.7374C94.9153 87.057 90.5839 83.4109 86.2181 79.7305C82.5055 83.6861 78.1741 86.8506 73.1896 89.052Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M67.9643 0.241609C67.4143 0.276006 66.8643 0.344799 66.3486 0.413592C71.6425 1.4111 76.7646 3.13093 81.6116 5.71068C91.0306 10.7326 98.3527 17.9215 103.268 27.4494L105.915 25.1448C108.631 22.7714 111.347 20.3981 114.063 18.0247C107.634 11.1797 100.072 6.15784 91.2025 3.06214C85.2898 0.998336 79.2396 -0.0335643 73.0176 0.000832322C71.3675 0.000832322 69.6831 0.138419 67.9643 0.241609Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M26.4037 107.871C18.4628 97.9988 14.1314 86.7167 14.2002 73.818C14.2002 67.317 15.5409 61.0568 18.1191 55.1062C21.9348 46.2662 27.9506 39.1805 36.4071 34.2962C44.348 29.687 52.9763 27.8984 62.1547 29.2743C71.5738 30.7189 79.3771 35.2249 85.6336 42.2762C85.6336 42.2762 85.8398 42.5514 85.9429 42.6546C86.8711 41.8291 87.8336 41.0035 88.7618 40.178L89.8962 39.1805C90.8587 38.355 91.8212 37.4951 92.7838 36.6696C94.9838 34.7434 97.1495 32.8515 99.3152 30.9253C95.087 22.223 88.7274 15.55 80.3053 10.8377C70.3706 5.26541 59.6797 3.54557 48.37 5.02463C42.7323 5.78136 37.3352 7.50119 32.1788 10.0465C14.6815 18.7145 2.06546 36.532 1.03418 58.4771C0.862296 62.0887 1.10293 65.7348 1.65294 69.3464C3.02798 78.3239 6.32808 86.4759 11.622 93.8368C15.7471 99.5123 20.6629 104.19 26.3693 107.871H26.4037Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/client/components/oauth/CoinListSignInButton.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CoinListSignInButton({
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  isLoading = false,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ClButton,
+    {
+      variant: "primary",
+      size: "lg",
+      fullWidth,
+      onClick,
+      disabled,
+      isLoading,
+      loadingText: "Signing in...",
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CoinListLogomark, { className: "h-[18px] w-[16px] shrink-0" }),
+      className,
+      children: "Continue with CoinList"
+    }
+  );
+}
+
+// src/client/hooks/useCoinList.ts
+var import_react3 = require("react");
+function useCoinList() {
+  const context = (0, import_react3.useContext)(CoinListContext);
+  if (context === null) {
+    throw new CoinListClientInitializationError();
+  }
+  return {
+    isReady: context.isReady,
+    coinlist: context.coinlist
+  };
+}
+var CoinListClientInitializationError = class extends Error {
+  constructor(message = "useCoinList() must be used within CoinListProvider. Wrap your app with <CoinListProvider config={...}>.") {
+    super(message);
+    this.name = "CoinListClientInitializationError";
+  }
+};
+
+// src/client/components/oauth/CoinListSignInCard.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CoinListSignInCard({
+  state = "idle",
+  onSignIn,
+  onClose,
+  className
+} = {}) {
+  const { coinlist } = useCoinList();
+  const handleSignIn = onSignIn ?? (() => {
+    void coinlist.startOAuth();
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative flex w-full max-w-md flex-col rounded-card border border-border bg-background p-6 shadow-card",
+        className
+      ),
+      children: [
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseButton, { onClick: onClose, className: "absolute right-4 top-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: "Sign in to participate" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CoinListSignInButton, { onClick: handleSignIn, fullWidth: true, className: "mt-4" }),
+        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          AlertBanner,
+          {
+            variant: "error",
+            icon: true,
+            content: "Error signing in. Please try again.",
+            className: "mt-4"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PoweredByCoinList, { className: "mt-4" })
+      ]
+    }
+  );
+}
+
+// src/client/components/offers/OfferCard.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var monthYearFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  year: "numeric"
+});
+var OfferCardUi = {
+  fromDomain: (offer) => ({
+    tagline: offer.tagline,
+    bannerUrl: offer.bannerUrl,
+    logoUrl: offer.logoUrl,
+    formattedStartsAt: monthYearFormatter.format(offer.startsAt),
+    formattedEndsAt: monthYearFormatter.format(offer.endsAt)
+  })
+};
+function OfferCard({
+  offer,
+  onClick,
+  className,
+  containerClassName
+}) {
+  const cardLabel = "Open offer details";
+  const cardContent = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative mb-6 h-52 w-full overflow-hidden rounded-2xl border border-border/60 bg-section", children: [
+      offer.bannerUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "img",
+        {
+          src: offer.bannerUrl,
+          alt: "Offer banner",
+          className: "h-full w-full object-cover"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full bg-gradient-to-br from-surface via-section to-background" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-overlay/35" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: offer.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "img",
+        {
+          src: offer.logoUrl,
+          alt: "Offer logo",
+          className: "h-28 w-28 rounded-full border border-border bg-surface object-cover shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-28 w-28 rounded-full border border-border bg-surface shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
+    ] }),
+    offer.tagline && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cn(typeClasses.h3, "min-h-[2.4rem] text-text-primary"), children: offer.tagline }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-4 grid grid-cols-2 gap-5 border-t border-divider pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Starts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedStartsAt })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Ends" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedEndsAt })
+      ] })
+    ] })
+  ] });
+  const baseClasses = cn(
+    "relative flex w-full max-w-[28rem] flex-col rounded-card border border-border bg-background p-6 text-left shadow-card transition-all duration-200",
+    className,
+    onClick && "cursor-pointer hover:-translate-y-0.5 hover:border-divider hover:shadow-[0px_14px_32px_-10px_rgba(0,0,0,0.35)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-focus focus-visible:ring-offset-2"
+  );
+  let cardNode;
+  if (onClick) {
+    cardNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": cardLabel,
+        className: baseClasses,
+        onClick,
+        children: cardContent
+      }
+    );
+  } else {
+    cardNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: baseClasses, children: cardContent });
+  }
+  if (!containerClassName) {
+    return cardNode;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: containerClassName, children: cardNode });
+}
+
+// src/client/hooks/useOffers.ts
+var import_react4 = require("react");
+var LOADING_STATE = { type: "LOADING" };
+function useOffers(options = {}) {
+  const { coinlist, isReady } = useCoinList();
+  const { data: serverOffers } = options;
+  const [offersState, setOffersState] = (0, import_react4.useState)(
+    serverOffers !== void 0 ? { type: "CONTENT", offers: serverOffers } : LOADING_STATE
+  );
+  (0, import_react4.useEffect)(() => {
+    let isCancelled = false;
+    if (!isReady) {
+      if (serverOffers === void 0) {
+        setOffersState(LOADING_STATE);
+      }
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (serverOffers !== void 0) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setOffersState(LOADING_STATE);
+    coinlist.fetchOffers().then((offers) => {
+      if (!isCancelled) {
+        setOffersState({ type: "CONTENT", offers });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        const reason = error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error";
+        setOffersState({ type: "ERROR", reason });
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, serverOffers]);
+  return { offersState };
+}
+
+// src/client/components/offers/OffersGrid.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DEFAULT_MAX_COLUMNS = 3;
+function OffersGrid({
+  data,
+  maxColumns,
+  className,
+  containerClassName,
+  loading,
+  error,
+  emptyState,
+  onOfferClick
+} = {}) {
+  const { offersState } = useOffers({ data });
+  const cols = Math.max(1, maxColumns ?? DEFAULT_MAX_COLUMNS);
+  if (offersState.type === "LOADING") {
+    if (loading) {
+      return loading;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "output",
+      {
+        "aria-live": "polite",
+        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading offers..." })
+      }
+    );
+  }
+  if (offersState.type === "ERROR") {
+    if (error) {
+      return error;
+    }
+    const errorMessage = offersState.reason === "not-authenticated" ? "Sign in to view available offers." : "Unable to load offers right now. Please try again.";
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: errorMessage,
+        className: "w-full max-w-[28rem]"
+      }
+    );
+  }
+  if (offersState.offers.length === 0) {
+    if (emptyState) {
+      return emptyState;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "output",
+      {
+        "aria-live": "polite",
+        className: "flex min-h-40 flex-col items-center justify-center rounded-2xl border border-border bg-background p-6 text-center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn(typeClasses.body, "font-medium text-text-primary"), children: "No offers available" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Check back soon for upcoming opportunities." })
+        ]
+      }
+    );
+  }
+  const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex w-full justify-center", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      className: cn("grid w-full gap-6", className),
+      style: {
+        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 20rem), 1fr))",
+        maxWidth: maxGridWidth
+      },
+      children: offersState.offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        OfferCard,
+        {
+          offer: OfferCardUi.fromDomain(offer),
+          onClick: onOfferClick ? () => onOfferClick(offer) : void 0
+        },
+        offer.id
+      ))
+    }
+  ) });
+}
+
+// src/client/components/requirements/RequirementItem.tsx
+var import_lucide_react4 = require("lucide-react");
+
+// src/client/components/design-system/StepStatusIcon.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var statusConfig = {
+  required: {
+    Icon: import_lucide_react3.Info,
+    colorClass: "text-warning",
+    fillClass: "[&_circle]:fill-warning-subtle"
+  },
+  pending: {
+    Icon: import_lucide_react3.Info,
+    colorClass: "text-warning",
+    fillClass: "[&_circle]:fill-warning-subtle"
+  },
+  completed: {
+    Icon: import_lucide_react3.CircleCheck,
+    colorClass: "text-success",
+    fillClass: "[&_circle]:fill-success-subtle"
+  },
+  rejected: {
+    Icon: import_lucide_react3.CircleX,
+    colorClass: "text-error",
+    fillClass: "[&_circle]:fill-error-subtle"
+  }
+};
+function StepStatusIcon({ status, className }) {
+  const { Icon, colorClass, fillClass } = statusConfig[status];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Icon,
+    {
+      className: cn("h-6 w-6 shrink-0", colorClass, fillClass, className),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/client/components/requirements/RequirementItem.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var RequirementVariant = {
   fromType(type) {
     switch (type) {
@@ -976,43 +1678,194 @@ var ChecklistStatus = {
     return "inProgress";
   }
 };
-
-// src/client/hooks/useCoinList.ts
-var import_react2 = require("react");
-function useCoinList() {
-  const context = (0, import_react2.useContext)(CoinListContext);
-  if (context === null) {
-    throw new CoinListClientInitializationError();
+var RequirementItemUi = {
+  fromDomain(req, statusInfo, label, description, walletAddress) {
+    return {
+      variant: RequirementVariant.fromType(req.type),
+      status: statusInfo ? RequirementStatus.fromStatusValue(statusInfo.status) : "required",
+      label,
+      description,
+      walletAddress
+    };
+  }
+};
+function VerificationActionZone({
+  status,
+  onAction,
+  onContactSupport
+}) {
+  switch (status) {
+    case "required":
+      if (onAction === null) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
+    case "pending":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "warning",
+          content: "Under review. We'll notify you when complete."
+        }
+      );
+    case "completed":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertBanner, { variant: "success", content: "Identity verified." });
+    case "rejected":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "error",
+          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            "Verification rejected.",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onContactSupport,
+                className: "underline",
+                children: "Contact support"
+              }
+            ),
+            "."
+          ] })
+        }
+      );
   }
-  return {
-    isReady: context.isReady,
-    coinlist: context.coinlist
-  };
 }
-var CoinListClientInitializationError = class extends Error {
-  constructor(message = "useCoinList() must be used within CoinListProvider. Wrap your app with <CoinListProvider config={...}>.") {
-    super(message);
-    this.name = "CoinListClientInitializationError";
+function WalletActionZone({
+  status,
+  walletAddress,
+  onAction
+}) {
+  if (status === "completed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "success",
+          content: walletAddress ?? "Connected: 0xBa4b...9f2c"
+        }
+      )
+    ] });
   }
-};
+  if (status === "rejected") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        AlertBanner,
+        {
+          variant: "error",
+          content: "This wallet is not eligible for this sale."
+        }
+      )
+    ] });
+  }
+  if (onAction === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
+}
+function RequirementItem({
+  ui,
+  expanded = false,
+  onToggle,
+  className,
+  onAction,
+  onContactSupport
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex w-full flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": expanded,
+        className: "flex h-14 w-full cursor-pointer items-center justify-between rounded-2xl px-2 transition-colors hover:bg-surface",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StepStatusIcon, { status: ui.status }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "span",
+              {
+                className: cn(
+                  typeClasses.body,
+                  "whitespace-nowrap font-medium text-text-primary"
+                ),
+                children: ui.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_lucide_react4.ChevronRight,
+            {
+              className: cn(
+                "h-6 w-6 shrink-0 text-text-secondary transition-transform duration-300",
+                expanded && "rotate-90"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: cn(
+          "grid transition-[grid-template-rows] duration-300 ease-in-out",
+          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4 px-2 pb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: ui.description }),
+          ui.variant === "verification" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            VerificationActionZone,
+            {
+              status: ui.status,
+              onAction,
+              onContactSupport
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            WalletActionZone,
+            {
+              status: ui.status,
+              walletAddress: ui.walletAddress,
+              onAction
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
 
-// src/client/hooks/useCoinListRequirements.ts
-var import_react3 = require("react");
-var LOADING_STATE = { type: "LOADING" };
-function useCoinListRequirements(offerId) {
+// src/client/components/requirements/RequirementsChecklist.tsx
+var import_react6 = require("react");
+
+// src/client/hooks/useRequirements.ts
+var import_react5 = require("react");
+var LOADING_STATE2 = { type: "LOADING" };
+function useRequirements(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
-  const [requirementsState, setRequirementsState] = (0, import_react3.useState)(LOADING_STATE);
-  const [fetchKey, setFetchKey] = (0, import_react3.useState)(0);
-  const refetch = (0, import_react3.useCallback)(() => setFetchKey((k) => k + 1), []);
-  (0, import_react3.useEffect)(() => {
+  const { data } = options;
+  const [requirementsState, setRequirementsState] = (0, import_react5.useState)(
+    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE2
+  );
+  const [fetchKey, setFetchKey] = (0, import_react5.useState)(0);
+  const refetch = (0, import_react5.useCallback)(() => setFetchKey((k) => k + 1), []);
+  (0, import_react5.useEffect)(() => {
     let isCancelled = false;
     if (!isReady) {
-      setRequirementsState(LOADING_STATE);
+      if (data === void 0) {
+        setRequirementsState(LOADING_STATE2);
+      }
       return () => {
         isCancelled = true;
       };
     }
-    setRequirementsState(LOADING_STATE);
+    if (data !== void 0 && fetchKey === 0) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setRequirementsState(LOADING_STATE2);
     Promise.all([
       coinlist.fetchOfferRequirements(offerId),
       coinlist.fetchRequirementStatuses(offerId)
@@ -1020,7 +1873,7 @@ function useCoinListRequirements(offerId) {
       if (!isCancelled) {
         setRequirementsState({
           type: "CONTENT",
-          requirementsByOptionId,
+          requirements: requirementsByOptionId,
           statuses
         });
       }
@@ -1037,18 +1890,148 @@ function useCoinListRequirements(offerId) {
   return { requirementsState, refetch };
 }
 
-// src/client/hooks/useCompleteCoinListOAuth.ts
-var import_react4 = require("react");
-function useCompleteCoinListOAuth(options) {
+// src/client/components/requirements/RequirementsChecklist.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DEFAULT_LABELS = {
+  kyc_approved: "KYC Verification",
+  identity_verified: "Identity Verification",
+  proof_of_address: "Proof of Address",
+  source_of_funds: "Source of Funds",
+  external_wallet: "External Wallet",
+  whitelisted_wallet: "Whitelisted Wallet",
+  jurisdiction: "Jurisdiction Check",
+  accreditation: "Accreditation"
+};
+var DEFAULT_DESCRIPTIONS = {
+  kyc_approved: "Complete Know Your Customer verification.",
+  identity_verified: "Verify your identity.",
+  proof_of_address: "Provide proof of your residential address.",
+  source_of_funds: "Provide documentation for your source of funds.",
+  external_wallet: "Connect an external wallet.",
+  whitelisted_wallet: "Connect a whitelisted wallet.",
+  jurisdiction: "Confirm your jurisdiction eligibility.",
+  accreditation: "Verify your accreditation status."
+};
+function RequirementsChecklist({
+  offerId,
+  optionId,
+  title,
+  description,
+  onContinue,
+  onRequirementActionOverride,
+  onContactSupportOverride,
+  getLabel,
+  getDescription,
+  loading,
+  error,
+  className,
+  data
+}) {
   const { coinlist } = useCoinList();
-  const postOAuthCompleteRef = (0, import_react4.useRef)(options.postOAuthComplete);
-  const onFailureRef = (0, import_react4.useRef)(options.onFailure);
-  const onSuccessRef = (0, import_react4.useRef)(options.onSuccess);
+  const { requirementsState } = useRequirements(offerId, { data });
+  const [expandedIndex, setExpandedIndex] = (0, import_react6.useState)(null);
+  const onRequirementAction = onRequirementActionOverride !== void 0 ? onRequirementActionOverride : (requirement) => coinlist.handleRequirement(requirement);
+  const onContactSupport = onContactSupportOverride !== void 0 ? onContactSupportOverride : () => coinlist.contactSupport();
+  if (requirementsState.type === "LOADING") {
+    if (loading) return loading;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "output",
+      {
+        "aria-live": "polite",
+        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading requirements..." })
+      }
+    );
+  }
+  if (requirementsState.type === "ERROR") {
+    if (error) return error;
+    const errorMessage = requirementsState.reason === "not-authenticated" ? "Sign in to view requirements." : "Unable to load requirements right now. Please try again.";
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: errorMessage,
+        className: "w-full max-w-[28rem]"
+      }
+    );
+  }
+  const { requirements: requirementsByOptionId, statuses } = requirementsState;
+  const requirements = requirementsByOptionId[optionId] ?? [];
+  const requirementIds = new Set(requirements.map((r) => r.id));
+  const optionStatuses = statuses.filter((s) => requirementIds.has(s.id));
+  const statusByRequirementId = new Map(optionStatuses.map((s) => [s.id, s]));
+  const checklistStatus = ChecklistStatus.derive(optionStatuses);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col divide-y divide-divider", children: requirements.map((req, index) => {
+      const statusInfo = statusByRequirementId.get(req.id);
+      const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
+      const itemDescription = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
+      let onActionBound;
+      if (onRequirementAction === null) {
+        onActionBound = null;
+      } else if (onRequirementAction) {
+        onActionBound = () => onRequirementAction(req);
+      }
+      let onContactSupportBound;
+      if (onContactSupport === null) {
+        onContactSupportBound = null;
+      } else if (onContactSupport) {
+        onContactSupportBound = () => onContactSupport(req);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        RequirementItem,
+        {
+          ui: RequirementItemUi.fromDomain(
+            req,
+            statusInfo,
+            label,
+            itemDescription
+          ),
+          expanded: expandedIndex === index,
+          onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
+          onAction: onActionBound,
+          onContactSupport: onContactSupportBound
+        },
+        req.id
+      );
+    }) }),
+    checklistStatus === "ineligible" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: "You are not eligible to participate."
+      }
+    ),
+    onContinue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      ClButton,
+      {
+        fullWidth: true,
+        disabled: checklistStatus !== "eligible",
+        onClick: onContinue,
+        children: "Continue"
+      }
+    )
+  ] });
+}
+
+// src/client/hooks/useCompleteOAuth.ts
+var import_react7 = require("react");
+function useCompleteOAuth(options) {
+  const { coinlist } = useCoinList();
+  const postOAuthCompleteRef = (0, import_react7.useRef)(options.postOAuthComplete);
+  const onFailureRef = (0, import_react7.useRef)(options.onFailure);
+  const onSuccessRef = (0, import_react7.useRef)(options.onSuccess);
   postOAuthCompleteRef.current = options.postOAuthComplete;
   onFailureRef.current = options.onFailure;
   onSuccessRef.current = options.onSuccess;
-  const hasStartedExchangeRef = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const hasStartedExchangeRef = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     if (!params.has("code") && !params.has("error")) return;
@@ -1091,74 +2074,112 @@ function useCompleteCoinListOAuth(options) {
   }, [coinlist]);
 }
 
-// src/shared/types/oauth-session.ts
-var OAuthRefreshToken = (value) => value;
-var OAuthSession = {
-  fromDto: (dto) => {
-    const expiresAt = new Date(Date.now() + dto.expires_in * 1e3);
-    return {
-      accessToken: {
-        value: dto.access_token,
-        expiresAt
-      },
-      ...dto.refresh_token != null && dto.refresh_token !== "" ? { refreshToken: OAuthRefreshToken(dto.refresh_token) } : void 0
+// src/client/hooks/useOfferDetails.ts
+var import_react8 = require("react");
+var LOADING_STATE3 = { type: "LOADING" };
+function useOfferDetails(offerId, options = {}) {
+  const { coinlist, isReady } = useCoinList();
+  const { data } = options;
+  const [offerDetailsState, setOfferDetailsState] = (0, import_react8.useState)(
+    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE3
+  );
+  (0, import_react8.useEffect)(() => {
+    let isCancelled = false;
+    if (!isReady) {
+      if (data === void 0) {
+        setOfferDetailsState(LOADING_STATE3);
+      }
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (data !== void 0) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setOfferDetailsState(LOADING_STATE3);
+    coinlist.fetchOfferDetails(offerId).then((offerDetail) => {
+      if (!isCancelled) {
+        setOfferDetailsState({ type: "CONTENT", offerDetail });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        const reason = error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error";
+        setOfferDetailsState({ type: "ERROR", reason });
+      }
+    });
+    return () => {
+      isCancelled = true;
     };
-  }
-};
+  }, [coinlist, isReady, offerId, data]);
+  return { offerDetailsState };
+}
 
-// src/shared/types/user.ts
-var UserId = (value) => value;
-var UserEmail = (value) => value;
-var User = {
-  fromDto: (dto) => ({
-    id: UserId(dto.id),
-    email: UserEmail(dto.email)
-  })
-};
+// src/client/hooks/useParticipations.ts
+var import_react9 = require("react");
+var LOADING_STATE4 = { type: "LOADING" };
+function useParticipations(offerId, options = {}) {
+  const { coinlist, isReady } = useCoinList();
+  const { data } = options;
+  const [participationsState, setParticipationsState] = (0, import_react9.useState)(
+    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE4
+  );
+  (0, import_react9.useEffect)(() => {
+    let isCancelled = false;
+    if (!isReady) {
+      if (data === void 0) {
+        setParticipationsState(LOADING_STATE4);
+      }
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (data !== void 0) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setParticipationsState(LOADING_STATE4);
+    coinlist.fetchParticipations(offerId).then((participations) => {
+      if (!isCancelled) {
+        setParticipationsState({ type: "CONTENT", participations });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        const reason = error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error";
+        setParticipationsState({ type: "ERROR", reason });
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, offerId, data]);
+  return { participationsState };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AuthorizationCode,
-  Blockchain,
   ChecklistStatus,
-  ClientId,
-  ClientSecret,
-  CodeChallenge,
-  CodeVerifier,
+  CoinListClientInitializationError,
+  CoinListContext,
   CoinListProvider,
-  CreateParticipationParams,
-  Cursor,
-  FaqItem,
-  Link,
-  Milestone,
-  OAuthRefreshToken,
-  OAuthSession,
-  Offer,
-  OfferDetail,
-  OfferId,
-  OfferOption,
-  OfferOptionId,
-  OfferOptionSlug,
-  OfferSlug,
-  PaginatedResponse,
-  PaginationParams,
-  Participation,
-  ParticipationId,
-  ParticipationsPaginationParams,
-  RedirectUri,
-  Requirement,
-  RequirementId,
+  CoinListSignInCard,
+  OAUTH_CODE_VERIFIER_KEY,
+  OAUTH_STATE_KEY,
+  OfferCard,
+  OfferCardUi,
+  OffersGrid,
+  RequirementItem,
+  RequirementItemUi,
   RequirementStatus,
-  RequirementStatusInfo,
   RequirementVariant,
-  TermItem,
-  User,
-  UserEmail,
-  UserId,
-  WalletAddress,
+  RequirementsChecklist,
   createCoinListClient,
-  fetchAllPages,
   useCoinList,
-  useCoinListRequirements,
-  useCompleteCoinListOAuth
+  useCompleteOAuth,
+  useOfferDetails,
+  useOffers,
+  useParticipations,
+  useRequirements
 });
 //# sourceMappingURL=index.cjs.map