@bosonprotocol/react-kit 0.38.0-alpha.6 → 0.39.0-alpha.0

package/dist/cjs/components/form/Upload/UploadedSinglePdfFile.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
+import { getIpfsGatewayUrl } from "../../../lib/ipfs/ipfs";
 export type UploadedSinglePdfFileProps = {
     fileName: string;
     onXClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    className?: string;
+    onClick?: () => unknown;
+    urlProps?: {
+        uri: Parameters<typeof getIpfsGatewayUrl>[0];
+        opts: Parameters<typeof getIpfsGatewayUrl>[1];
+        linkProps?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick">;
+    };
 };
-export declare const UploadedSinglePdfFile: ({ fileName, onXClick }: UploadedSinglePdfFileProps) => React.JSX.Element;
+export declare const UploadedSinglePdfFile: ({ fileName, onClick, onXClick, className, urlProps }: UploadedSinglePdfFileProps) => React.JSX.Element;
 //# sourceMappingURL=UploadedSinglePdfFile.d.ts.map

package/dist/cjs/components/form/Upload/UploadedSinglePdfFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadedSinglePdfFile.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;CACnE,CAAC;AACF,eAAO,MAAM,qBAAqB,2BAG/B,0BAA0B,sBA2B5B,CAAC"}
+{"version":3,"file":"UploadedSinglePdfFile.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAY3D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE;QACT,GAAG,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,IAAI,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC;KAC5E,CAAC;CACH,CAAC;AACF,eAAO,MAAM,qBAAqB,yDAM/B,0BAA0B,sBA4C5B,CAAC"}

package/dist/cjs/components/form/Upload/UploadedSinglePdfFile.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,15 +42,28 @@ const phosphor_react_1 = require("phosphor-react");
 const Typography_1 = require("../../ui/Typography");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../../colors");
-const UploadedSinglePdfFile = ({ fileName, onXClick }) => {
-    return (react_1.default.createElement(Grid_1.Grid, { flexDirection: "row", alignItems: "center", gap: "0.25rem" },
+const ipfs_1 = require("../../../lib/ipfs/ipfs");
+const styled_components_1 = __importStar(require("styled-components"));
+const Wrapper = (0, styled_components_1.default)(Grid_1.Grid) `
+  ${({ onClick, urlProps }) => onClick || urlProps
+    ? (0, styled_components_1.css) `
+          cursor: pointer;
+        `
+    : ""}
+`;
+const UploadedSinglePdfFile = ({ fileName, onClick, onXClick, className, urlProps }) => {
+    return (react_1.default.createElement(Wrapper, Object.assign({}, (urlProps
+        ? Object.assign(Object.assign({ target: "_blank", rel: "noopener noreferrer" }, urlProps.linkProps), { href: (0, ipfs_1.getIpfsGatewayUrl)(urlProps.uri, urlProps.opts), tag: "a" }) : { onClick }), { flexDirection: "row", alignItems: "center", gap: "0.25rem", className: className }),
         react_1.default.createElement("div", null,
             react_1.default.createElement(phosphor_react_1.FilePdf, { size: 24 })),
         react_1.default.createElement(Typography_1.Typography, { width: "100%", color: colors_1.colors.purpleDeep, fontSize: "0.875rem" }, fileName),
         onXClick && (react_1.default.createElement("button", { type: "button", style: {
                 display: "flex",
                 justifyContent: "center"
-            }, onClick: onXClick },
+            }, onClick: (e) => {
+                e.preventDefault();
+                onXClick(e);
+            } },
             react_1.default.createElement(phosphor_react_1.X, { size: 12.5 })))));
 };
 exports.UploadedSinglePdfFile = UploadedSinglePdfFile;

package/dist/cjs/components/form/Upload/UploadedSinglePdfFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadedSinglePdfFile.js","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":";;;;;;AAAA,wCAAqC;AACrC,mDAA4C;AAC5C,oDAAiD;AACjD,kDAA0B;AAC1B,4CAAyC;AAMlC,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,QAAQ,EACmB,EAAE,EAAE;IAC/B,OAAO,CACL,8BAAC,WAAI,IAAC,aAAa,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS;QACzD;YACE,8BAAC,wBAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CACjB;QACN,8BAAC,uBAAU,IACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,eAAM,CAAC,UAAU,EACxB,QAAQ,EAAE,UAAU,IAEnB,QAAQ,CACE;QACZ,QAAQ,IAAI,CACX,0CACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;aACzB,EACD,OAAO,EAAE,QAAQ;YAEjB,8BAAC,kBAAC,IAAC,IAAI,EAAE,IAAI,GAAI,CACV,CACV,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,qBAAqB,yBA8BhC"}
+{"version":3,"file":"UploadedSinglePdfFile.js","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAqC;AACrC,mDAA4C;AAC5C,oDAAiD;AACjD,kDAA0B;AAC1B,4CAAyC;AACzC,iDAA2D;AAC3D,uEAAgD;AAChD,MAAM,OAAO,GAAG,IAAA,2BAAM,EAAC,WAAI,CAAC,CAE3B;IACG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1B,OAAO,IAAI,QAAQ;IACjB,CAAC,CAAC,IAAA,uBAAG,EAAA;;SAEF;IACH,CAAC,CAAC,EAAE;CACT,CAAC;AAYK,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACmB,EAAE,EAAE;IAC/B,OAAO,CACL,8BAAC,OAAO,oBACF,CAAC,QAAQ;QACX,CAAC,+BACG,MAAM,EAAE,QAAQ,EAChB,GAAG,EAAE,qBAAqB,IACvB,QAAQ,CAAC,SAAS,KACrB,IAAI,EAAE,IAAA,wBAAiB,EAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,EACpD,GAAG,EAAE,GAAG,IAEZ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,IAChB,aAAa,EAAC,KAAK,EACnB,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,SAAS,EACb,SAAS,EAAE,SAAS;QAEpB;YACE,8BAAC,wBAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CACjB;QACN,8BAAC,uBAAU,IACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,eAAM,CAAC,UAAU,EACxB,QAAQ,EAAE,UAAU,IAEnB,QAAQ,CACE;QACZ,QAAQ,IAAI,CACX,0CACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;aACzB,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,CAAC,CAAC;YACd,CAAC;YAED,8BAAC,kBAAC,IAAC,IAAI,EAAE,IAAI,GAAI,CACV,CACV,CACO,CACX,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,qBAAqB,yBAkDhC"}

package/dist/esm/components/form/Upload/UploadedSinglePdfFile.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
+import { getIpfsGatewayUrl } from "../../../lib/ipfs/ipfs";
 export type UploadedSinglePdfFileProps = {
     fileName: string;
     onXClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    className?: string;
+    onClick?: () => unknown;
+    urlProps?: {
+        uri: Parameters<typeof getIpfsGatewayUrl>[0];
+        opts: Parameters<typeof getIpfsGatewayUrl>[1];
+        linkProps?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick">;
+    };
 };
-export declare const UploadedSinglePdfFile: ({ fileName, onXClick }: UploadedSinglePdfFileProps) => React.JSX.Element;
+export declare const UploadedSinglePdfFile: ({ fileName, onClick, onXClick, className, urlProps }: UploadedSinglePdfFileProps) => React.JSX.Element;
 //# sourceMappingURL=UploadedSinglePdfFile.d.ts.map

package/dist/esm/components/form/Upload/UploadedSinglePdfFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadedSinglePdfFile.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;CACnE,CAAC;AACF,eAAO,MAAM,qBAAqB,2BAG/B,0BAA0B,sBA2B5B,CAAC"}
+{"version":3,"file":"UploadedSinglePdfFile.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAY3D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE;QACT,GAAG,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,IAAI,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC;KAC5E,CAAC;CACH,CAAC;AACF,eAAO,MAAM,qBAAqB,yDAM/B,0BAA0B,sBA4C5B,CAAC"}

package/dist/esm/components/form/Upload/UploadedSinglePdfFile.js

@@ -3,15 +3,35 @@ import { FilePdf, X } from "phosphor-react";
 import { Typography } from "../../ui/Typography";
 import React from "react";
 import { colors } from "../../../colors";
-export const UploadedSinglePdfFile = ({ fileName, onXClick }) => {
-    return (React.createElement(Grid, { flexDirection: "row", alignItems: "center", gap: "0.25rem" },
+import { getIpfsGatewayUrl } from "../../../lib/ipfs/ipfs";
+import styled, { css } from "styled-components";
+const Wrapper = styled(Grid) `
+  ${({ onClick, urlProps }) => onClick || urlProps
+    ? css `
+          cursor: pointer;
+        `
+    : ""}
+`;
+export const UploadedSinglePdfFile = ({ fileName, onClick, onXClick, className, urlProps }) => {
+    return (React.createElement(Wrapper, { ...(urlProps
+            ? {
+                target: "_blank",
+                rel: "noopener noreferrer",
+                ...urlProps.linkProps,
+                href: getIpfsGatewayUrl(urlProps.uri, urlProps.opts),
+                tag: "a"
+            }
+            : { onClick }), flexDirection: "row", alignItems: "center", gap: "0.25rem", className: className },
         React.createElement("div", null,
             React.createElement(FilePdf, { size: 24 })),
         React.createElement(Typography, { width: "100%", color: colors.purpleDeep, fontSize: "0.875rem" }, fileName),
         onXClick && (React.createElement("button", { type: "button", style: {
                 display: "flex",
                 justifyContent: "center"
-            }, onClick: onXClick },
+            }, onClick: (e) => {
+                e.preventDefault();
+                onXClick(e);
+            } },
             React.createElement(X, { size: 12.5 })))));
 };
 //# sourceMappingURL=UploadedSinglePdfFile.js.map

package/dist/esm/components/form/Upload/UploadedSinglePdfFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadedSinglePdfFile.js","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAMzC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,QAAQ,EACmB,EAAE,EAAE;IAC/B,OAAO,CACL,oBAAC,IAAI,IAAC,aAAa,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS;QACzD;YACE,oBAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CACjB;QACN,oBAAC,UAAU,IACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,QAAQ,EAAE,UAAU,IAEnB,QAAQ,CACE;QACZ,QAAQ,IAAI,CACX,gCACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;aACzB,EACD,OAAO,EAAE,QAAQ;YAEjB,oBAAC,CAAC,IAAC,IAAI,EAAE,IAAI,GAAI,CACV,CACV,CACI,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"UploadedSinglePdfFile.js","sourceRoot":"","sources":["../../../../../src/components/form/Upload/UploadedSinglePdfFile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAE3B;IACG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1B,OAAO,IAAI,QAAQ;IACjB,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,EAAE;CACT,CAAC;AAYF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACmB,EAAE,EAAE;IAC/B,OAAO,CACL,oBAAC,OAAO,OACF,CAAC,QAAQ;YACX,CAAC,CAAC;gBACE,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,qBAAqB;gBAC1B,GAAG,QAAQ,CAAC,SAAS;gBACrB,IAAI,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC;gBACpD,GAAG,EAAE,GAAG;aACT;YACH,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAChB,aAAa,EAAC,KAAK,EACnB,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,SAAS,EACb,SAAS,EAAE,SAAS;QAEpB;YACE,oBAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CACjB;QACN,oBAAC,UAAU,IACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,QAAQ,EAAE,UAAU,IAEnB,QAAQ,CACE;QACZ,QAAQ,IAAI,CACX,gCACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;aACzB,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,CAAC,CAAC;YACd,CAAC;YAED,oBAAC,CAAC,IAAC,IAAI,EAAE,IAAI,GAAI,CACV,CACV,CACO,CACX,CAAC;AACJ,CAAC,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.38.0-alpha.6",
+  "version": "0.39.0-alpha.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,8 +15,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.43.1-alpha.7",
-    "@bosonprotocol/ethers-sdk": "^1.15.5-alpha.0",
+    "@bosonprotocol/core-sdk": "^1.43.1",
+    "@bosonprotocol/ethers-sdk": "^1.15.5",
     "@bosonprotocol/ipfs-storage": "^1.12.0",
     "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.16",
     "@davatar/react": "1.11.1",
@@ -205,5 +205,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "6fe049b3220c839b80730d15c4f85b27352a4408"
+  "gitHead": "55fff2d713a10cacc4b19dd0701ec952292d93f7"
 }

package/src/components/form/Upload/UploadedSinglePdfFile.tsx

@@ -3,17 +3,52 @@ import { FilePdf, X } from "phosphor-react";
 import { Typography } from "../../ui/Typography";
 import React from "react";
 import { colors } from "../../../colors";
-
+import { getIpfsGatewayUrl } from "../../../lib/ipfs/ipfs";
+import styled, { css } from "styled-components";
+const Wrapper = styled(Grid)<
+  Pick<UploadedSinglePdfFileProps, "onClick" | "urlProps">
+>`
+  ${({ onClick, urlProps }) =>
+    onClick || urlProps
+      ? css`
+          cursor: pointer;
+        `
+      : ""}
+`;
 export type UploadedSinglePdfFileProps = {
   fileName: string;
   onXClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  className?: string;
+  onClick?: () => unknown;
+  urlProps?: {
+    uri: Parameters<typeof getIpfsGatewayUrl>[0];
+    opts: Parameters<typeof getIpfsGatewayUrl>[1];
+    linkProps?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick">;
+  };
 };
 export const UploadedSinglePdfFile = ({
   fileName,
-  onXClick
+  onClick,
+  onXClick,
+  className,
+  urlProps
 }: UploadedSinglePdfFileProps) => {
   return (
-    <Grid flexDirection="row" alignItems="center" gap="0.25rem">
+    <Wrapper
+      {...(urlProps
+        ? {
+            target: "_blank",
+            rel: "noopener noreferrer",
+            ...urlProps.linkProps,
+            href: getIpfsGatewayUrl(urlProps.uri, urlProps.opts),
+            tag: "a"
+          }
+        : { onClick })}
+      flexDirection="row"
+      alignItems="center"
+      gap="0.25rem"
+      className={className}
+    >
       <div>
         <FilePdf size={24} />
       </div>
@@ -31,11 +66,14 @@ export const UploadedSinglePdfFile = ({
             display: "flex",
             justifyContent: "center"
           }}
-          onClick={onXClick}
+          onClick={(e) => {
+            e.preventDefault();
+            onXClick(e);
+          }}
         >
           <X size={12.5} />
         </button>
       )}
-    </Grid>
+    </Wrapper>
   );
 };