@bosonprotocol/react-kit 0.29.1 → 0.30.0-alpha.0

package/dist/esm/components/ui/SvgImage.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
-type SvgImageProps = Pick<CSSProperties, "width" | "height"> & {
+export type SvgImageProps = Pick<CSSProperties, "width" | "height"> & {
     src: string | React.FC;
+    style?: CSSProperties;
     id?: string;
 };
 export declare const SvgImage: React.FC<SvgImageProps>;
-export {};
 //# sourceMappingURL=SvgImage.d.ts.map

package/dist/esm/components/ui/SvgImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgImage.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/SvgImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,KAAK,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC7D,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAS5C,CAAC"}
+{"version":3,"file":"SvgImage.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/SvgImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IACpE,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAS5C,CAAC"}

package/dist/esm/components/ui/SvgImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgImage.js","sourceRoot":"","sources":["../../../../src/components/ui/SvgImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QAC3B,6CAA6C;QAC7C,OAAO,6BAAK,GAAG,EAAE,GAAG,KAAM,IAAI,GAAI,CAAC;KACpC;IACD,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,6DAA6D;IAC7D,aAAa;IACb,OAAO,oBAAC,SAAS,OAAK,IAAI,GAAI,CAAC;AACjC,CAAC,CAAC"}
+{"version":3,"file":"SvgImage.js","sourceRoot":"","sources":["../../../../src/components/ui/SvgImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QAC3B,6CAA6C;QAC7C,OAAO,6BAAK,GAAG,EAAE,GAAG,KAAM,IAAI,GAAI,CAAC;KACpC;IACD,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,6DAA6D;IAC7D,aAAa;IACb,OAAO,oBAAC,SAAS,OAAK,IAAI,GAAI,CAAC;AACjC,CAAC,CAAC"}

package/dist/esm/index.d.ts

@@ -51,6 +51,7 @@ export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
 export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
+export * from "./components/modal/components/common/StepsOverview/PurchaseOverview";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/ui/Grid";

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAChF,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAChF,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/dist/esm/index.js

@@ -51,6 +51,7 @@ export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
 export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
+export * from "./components/modal/components/common/StepsOverview/PurchaseOverview";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/ui/Grid";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAW,MAAM,8BAA8B,CAAC;AAChF,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAW,MAAM,8BAA8B,CAAC;AAChF,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.29.1",
+  "version": "0.30.0-alpha.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -170,5 +170,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "35cab4b4bd031f556f2606ed784bf8bdb3e1b02b"
+  "gitHead": "1744a55c4f2f38bb9b75623c0943ccd555633467"
 }

package/src/components/modal/components/Commit/CommitNonModal.tsx

@@ -6,7 +6,7 @@ import { Exchange } from "../../../../types/exchange";
 import { VariantV1 } from "../../../../types/variants";
 import Loading from "../../../ui/loading/Loading";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
-import { BosonFooter } from "../common/BosonFooter";
+import { BosonLogo } from "../common/BosonLogo";
 import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 import {
   DetailContextProps,
@@ -52,7 +52,7 @@ export function CommitWrapper({ hideModal, ...props }: CommitNonModalProps) {
   return (
     <NonModal
       hideModal={hideModal}
-      footerComponent={<BosonFooter />}
+      footerComponent={<BosonLogo />}
       contentStyle={{
         background: colors.white
       }}

package/src/components/modal/components/Commit/CommitSuccess/CommitSuccess.tsx

@@ -18,6 +18,7 @@ import { Typography } from "../../../../ui/Typography";
 import Loading from "../../../../ui/loading/Loading";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { CardCTA } from "./CardCTA";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -58,7 +59,8 @@ export function CommitSuccess({ onHouseClick, exchangeId, commitHash }: Props) {
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Commit/ContractualAgreementView/ContractualAgreementView.tsx

@@ -6,6 +6,7 @@ import ContractualAgreement from "../../../../contractualAgreement/ContractualAg
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
 import { Offer } from "../../../../../types/offer";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -31,7 +32,8 @@ export function ContractualAgreementView({ onBackClick, offer }: Props) {
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Commit/LicenseAgreementView/LicenseAgreementView.tsx

@@ -6,6 +6,7 @@ import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -30,7 +31,8 @@ export function LicenseAgreementView({ onBackClick, offer }: Props) {
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Commit/OfferFullDescriptionView/OfferFullDescriptionView.tsx

@@ -8,6 +8,7 @@ import { ArrowLeft } from "phosphor-react";
 import { Typography } from "../../../../ui/Typography";
 import { OnClickBuyOrSwapHandler } from "../../common/detail/types";
 import { UseGetOfferDetailDataProps } from "../../common/detail/useGetOfferDetailData";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 type Props = OnClickBuyOrSwapHandler & {
@@ -38,7 +39,8 @@ export function OfferFullDescriptionView({
         contentStyle: {
           background: colors.white,
           padding: 0
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Commit/OfferPolicyView/CommitOfferPolicyView.tsx

@@ -8,6 +8,7 @@ import OfferPolicyDetails, {
 } from "../../../../offerPolicy/OfferPolicyDetails";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -42,7 +43,8 @@ export function CommitOfferPolicyView({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Commit/OfferVariantView.tsx

@@ -25,6 +25,7 @@ import { CommitDetailViewWithProvider } from "./DetailView/CommitDetailViewWithP
 import { DetailContextProps } from "../common/detail/DetailViewProvider";
 import { OnClickBuyOrSwapHandler } from "../common/detail/types";
 import { UseGetOfferDetailDataProps } from "../common/detail/useGetOfferDetailData";
+import { BosonLogo } from "../common/BosonLogo";
 
 const colors = theme.colors.light;
 const ImageWrapper = styled.div`
@@ -119,7 +120,8 @@ export function OfferVariantView({
         ),
         contentStyle: {
           background: isCommitting ? colors.white : colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch, isCommitting]);

package/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useCallback } from "react";
 import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 import NonModal from "../../nonModal/NonModal";
-import { BosonFooter } from "../common/BosonFooter";
+import { BosonLogo } from "../common/BosonLogo";
 import { theme } from "../../../../theme";
 import { CSSProperties } from "styled-components";
 const colors = theme.colors.light;
@@ -31,7 +31,7 @@ export const PurchaseOverview: React.FC<PurchaseOverviewProps> = ({
     <Wrapper>
       <NonModal
         hideModal={hideModal}
-        footerComponent={<BosonFooter />}
+        footerComponent={null}
         contentStyle={{
           background: colors.white
         }}

package/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx

@@ -5,6 +5,7 @@ import { Exchange } from "../../../../../types/exchange";
 import ContractualAgreement from "../../../../contractualAgreement/ContractualAgreement";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -31,7 +32,8 @@ export function ContractualAgreementView({ onBackClick, exchange }: Props) {
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx

@@ -8,6 +8,7 @@ import { useNonModalContext } from "../../../../nonModal/NonModal";
 import { theme } from "../../../../../../theme";
 import { OnClickBuyOrSwapHandler } from "../../../common/detail/types";
 import { UseGetOfferDetailDataProps } from "../../../common/detail/useGetOfferDetailData";
+import { BosonLogo } from "../../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props
@@ -42,7 +43,8 @@ export function ExchangeFullDescriptionView({
         contentStyle: {
           background: colors.white,
           padding: 0
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx

@@ -22,6 +22,7 @@ import { SellerAndDescription } from "../../common/detail/SellerAndDescription";
 import { SlickSlider, initialSettings } from "../../common/detail/SlickSlider";
 import { UseGetOfferDetailDataProps } from "../../common/detail/useGetOfferDetailData";
 import { getOfferVariations } from "../../../../../lib/offer/getOfferVariations";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -144,7 +145,8 @@ export function ExchangeView({
         ),
         contentStyle: {
           background: colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx

@@ -17,6 +17,7 @@ import { GridContainer } from "../../../../ui/GridContainer";
 import { useRedemptionContext } from "../../../../widgets/redemption/provider/RedemptionContext";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { RedeemHeader } from "../RedeemHeader";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -72,7 +73,8 @@ export function RedeemSuccess({
         ),
         contentStyle: {
           background: colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx

@@ -11,6 +11,7 @@ import {
   RedemptionWidgetAction,
   useRedemptionContext
 } from "../../../../../widgets/redemption/provider/RedemptionContext";
+import { BosonLogo } from "../../../common/BosonLogo";
 
 const colors = theme.colors.light;
 export interface CancellationViewProps {
@@ -50,11 +51,11 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, isCancelModeOnly]);
+  }, [dispatch, isCancelModeOnly, onBackClick]);
   return (
     <>
       {!exchange ? (

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx

@@ -5,6 +5,7 @@ import ExpireVoucher, { ExpireVoucherProps } from "./ExpireVoucher";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
 import { theme } from "../../../../../../theme";
 import { Grid } from "../../../../../ui/Grid";
+import { BosonLogo } from "../../../common/BosonLogo";
 
 const colors = theme.colors.light;
 export interface ExpireVoucherViewProps {
@@ -34,7 +35,8 @@ export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx

@@ -5,6 +5,7 @@ import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -29,7 +30,8 @@ export function LicenseAgreementView({ onBackClick, offer }: Props) {
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/MyItems/MyItems.tsx

@@ -11,6 +11,7 @@ import { GridContainer } from "../../../../ui/GridContainer";
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { useAccount } from "../../../../../hooks/connection/connection";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -50,7 +51,8 @@ export function MyItems({
         ),
         contentStyle: {
           background: colors.lightGrey
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch]);

package/src/components/modal/components/Redeem/OfferPolicyView/RedeemOfferPolicyView.tsx

@@ -8,6 +8,7 @@ import OfferPolicyDetails, {
 } from "../../../../offerPolicy/OfferPolicyDetails";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 interface Props {
@@ -42,7 +43,8 @@ export function RedeemOfferPolicyView({
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx

@@ -5,6 +5,7 @@ import { Exchange } from "../../../../../types/exchange";
 import { theme } from "../../../../../theme";
 import { useAccount } from "../../../../../hooks/connection/connection";
 import { RedeemHeader } from "../RedeemHeader";
+import { BosonLogo } from "../../common/BosonLogo";
 
 const colors = theme.colors.light;
 
@@ -29,7 +30,8 @@ export default function RedeemFormView({
         headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch]);

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -37,7 +37,7 @@ import {
   useRedemptionContext
 } from "../../../widgets/redemption/provider/RedemptionContext";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
-import { BosonFooter } from "../common/BosonFooter";
+import { BosonLogo } from "../common/BosonLogo";
 import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
 import StepsOverview from "../common/StepsOverview/StepsOverview";
 import { ExchangeFullDescriptionView } from "./ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView";
@@ -240,7 +240,7 @@ export function PublicRedeemNonModal({
           Redeem your item
         </Typography>
       }
-      footerComponent={<BosonFooter />}
+      footerComponent={<BosonLogo />}
       showConnectButton={!props.withExternalSigner}
       contentStyle={{
         background: colors.white

package/src/components/modal/components/common/BosonLogo.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactComponent from "../../../../assets/logo.svg";
+import { Grid, GridProps } from "../../../ui/Grid";
+import { SvgImage, SvgImageProps } from "../../../ui/SvgImage";
+
+export function BosonLogo({
+  gridProps,
+  svgImageProps
+}: {
+  gridProps?: GridProps;
+  svgImageProps?: Omit<SvgImageProps, "src">;
+} = {}) {
+  return (
+    <Grid justifyContent="center" padding="1.5rem 0" {...gridProps}>
+      <SvgImage
+        src={ReactComponent}
+        height="24px"
+        {...svgImageProps}
+        style={{ maxWidth: "100%", ...svgImageProps?.style }}
+      />
+    </Grid>
+  );
+}

package/src/components/modal/components/common/StepsOverview/PurchaseOverview.tsx

@@ -13,6 +13,12 @@ import { CommitStep } from "./style";
 import styled from "styled-components";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
 
+const Wrapper = styled.div`
+  p {
+    text-wrap: pretty;
+  }
+`;
+
 const CommitStepWrapper = styled.div`
   overflow: hidden;
   margin: 1rem 0;
@@ -53,30 +59,11 @@ const COMMIT_STEPS = [
   }
 ];
 
-export default function PurchaseOverview() {
+export function PurchaseOverviewInner() {
   const { isLteXS } = useBreakpoints();
 
   return (
-    <>
-      <Grid flexDirection="column" alignItems="flex-start">
-        <Typography tag="h4" style={{ margin: 0 }}>
-          <b>How does the purchase process work?</b>
-        </Typography>
-        <Typography tag="p">
-          When Committing to Buy, the item price will be transferred into escrow
-          and you will receive a redeemable NFT (rNFT) that can be exchanged for
-          the real-world item it represents.
-        </Typography>
-      </Grid>
-      <CommitStepWrapper>
-        {COMMIT_STEPS.map(({ icon: Icon, header, description }, key) => (
-          <CommitStep key={`commit_step_${key}`}>
-            <Icon size={24} />
-            <Typography tag="h6">{header}</Typography>
-            <Typography tag="p">{description}</Typography>
-          </CommitStep>
-        ))}
-      </CommitStepWrapper>
+    <Wrapper>
       <ModalBackground>
         <Grid flexDirection={isLteXS ? "column" : "row"}>
           <div>
@@ -101,6 +88,27 @@ export default function PurchaseOverview() {
           </div>
         </Grid>
       </ModalBackground>
-    </>
+      <Grid flexDirection="column" alignItems="flex-start">
+        <Grid flexDirection="column" alignItems="flex-start">
+          <Typography tag="h4" style={{ margin: 0 }}>
+            <b>How does the purchase process work?</b>
+          </Typography>
+          <Typography tag="p">
+            When Committing to Buy, the item price will be transferred into
+            escrow and you will receive a redeemable NFT (rNFT) that can be
+            exchanged for the real-world item it represents.
+          </Typography>
+        </Grid>
+      </Grid>
+      <CommitStepWrapper>
+        {COMMIT_STEPS.map(({ icon: Icon, header, description }, key) => (
+          <CommitStep key={`commit_step_${key}`}>
+            <Icon size={24} />
+            <Typography tag="h6">{header}</Typography>
+            <Typography tag="p">{description}</Typography>
+          </CommitStep>
+        ))}
+      </CommitStepWrapper>
+    </Wrapper>
   );
 }

package/src/components/modal/components/common/StepsOverview/PurchaseOverviewView.tsx

@@ -1,9 +1,10 @@
 import { ArrowLeft } from "phosphor-react";
 import React, { useEffect } from "react";
-import PurchaseOverview from "./PurchaseOverview";
+import { PurchaseOverviewInner } from "./PurchaseOverview";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
 import { Grid } from "../../../../ui/Grid";
+import { BosonLogo } from "../BosonLogo";
 
 const colors = theme.colors.light;
 type Props = {
@@ -15,23 +16,31 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid style={{ flex: "1" }}>
+          <Grid style={{ flex: "1" }} justifyContent="flex-start" gap="1rem">
             {onBackClick && (
               <ArrowLeft
                 onClick={() => {
                   onBackClick();
                 }}
                 size={32}
-                style={{ cursor: "pointer" }}
+                style={{ cursor: "pointer", minWidth: "32px" }}
               />
             )}
+            <BosonLogo
+              gridProps={{ justifyContent: "flex-start" }}
+              svgImageProps={{
+                width: undefined,
+                style: { width: "min-content" }
+              }}
+            />
           </Grid>
         ),
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: null
       }
     });
   }, [dispatch, onBackClick]);
-  return <PurchaseOverview />;
+  return <PurchaseOverviewInner />;
 }

package/src/components/modal/components/common/StepsOverview/StepsOverview.tsx

@@ -9,6 +9,7 @@ import { breakpoint } from "../../../../../lib/ui/breakpoint";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
 import { RedeemHeader } from "../../Redeem/RedeemHeader";
+import { BosonLogo } from "../BosonLogo";
 
 const colors = theme.colors.light;
 const CommitStepWrapper = styled.div`
@@ -53,7 +54,8 @@ export default function StepsOverview({ onNextClick }: Props) {
         headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
-        }
+        },
+        footerComponent: <BosonLogo />
       }
     });
   }, [dispatch]);

package/src/components/modal/components/common/detail/Detail.style.tsx

@@ -138,7 +138,7 @@ export const LearnMore = styled.a`
 
 export const ModalBackground = styled.div`
   overflow: hidden;
-  margin: 2rem -2rem -2rem -2rem;
+  margin: -2rem -2rem 2rem -2rem;
   padding: 2rem;
   background-color: ${colors.black};
   background-image: url(${frameImage});