@bosonprotocol/react-kit 0.32.0-alpha.4 → 0.32.0-alpha.6

package/src/components/ui/loading/Loading.tsx

@@ -1,50 +1,42 @@
+import styled, { CSSProperties, keyframes } from "styled-components";
 import React from "react";
-import styled from "styled-components";
-import { theme } from "../../../theme";
 
-import { Grid } from "../Grid";
-const colors = theme.colors.light;
+export const Loading = ({
+  color,
+  size = 1.5625, // in rem = 25px
+  theme,
+  style
+}: {
+  color?: CSSProperties["color"];
+  size?: number;
+  theme?: { colors?: { light?: { accent: CSSProperties["color"] } } };
+  style?: CSSProperties;
+}) => {
+  return (
+    <LoadingStyle $color={color} $size={size} theme={theme} style={style} />
+  );
+};
+
+const loadingAnimation = keyframes`
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+`;
 
-const LoadingPlaceholder = styled.div<{ size: number }>`
-  height: ${({ size }) => size}rem;
-  width: ${({ size }) => size}rem;
-  min-height: ${({ size }) => size}rem;
-  min-width: ${({ size }) => size}rem;
-  border: 5px solid ${colors.secondary};
+const LoadingStyle = styled.span.attrs({ className: "loading" })<{
+  $color?: CSSProperties["color"];
+  $size?: number;
+}>`
+  height: ${({ $size }) => $size}rem;
+  width: ${({ $size }) => $size}rem;
+  min-height: ${({ $size }) => $size}rem;
+  min-width: ${({ $size }) => $size}rem;
+  border: 5px solid
+    ${({ theme, $color }) =>
+      theme?.colors?.light?.accent || $color || "#000000"};
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
+  animation-name: ${loadingAnimation};
 `;
-
-interface ILoading {
-  size?: number;
-  wrapperStyle?: React.CSSProperties;
-  style?: React.CSSProperties;
-  [x: string]: unknown;
-}
-
-const Loading: React.FC<ILoading> = ({
-  style = {},
-  size = 5,
-  wrapperStyle,
-  ...props
-}) => {
-  return (
-    <Grid justifyContent="center" padding="5rem" style={wrapperStyle}>
-      <LoadingPlaceholder style={style} size={size} {...props} />
-    </Grid>
-  );
-};
-
-export default Loading;

package/src/components/ui/loading/LoadingWrapper.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Loading as LoadingComponent } from "./Loading";
+
+import { Grid } from "../Grid";
+
+interface ILoading {
+  size?: number;
+  wrapperStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  [x: string]: unknown;
+}
+
+const Loading: React.FC<ILoading> = ({
+  style = {},
+  size = 5,
+  wrapperStyle,
+  ...props
+}) => {
+  return (
+    <Grid justifyContent="center" padding="5rem" style={wrapperStyle}>
+      <LoadingComponent style={style} size={size} {...props} />
+    </Grid>
+  );
+};
+
+export default Loading;

package/src/components/widgets/finance/Finance.tsx

@@ -23,7 +23,7 @@ import { Typography } from "../../ui/Typography";
 import { theme } from "../../../theme";
 import { Button } from "../../buttons/Button";
 import PaginationPages from "../../pagination/PaginationPages";
-import Loading from "../../ui/loading/Loading";
+import Loading from "../../ui/loading/LoadingWrapper";
 import { subgraph } from "@bosonprotocol/core-sdk";
 import {
   Currencies,

package/src/components/widgets/finance/FinanceWidget.tsx

@@ -8,7 +8,7 @@ import { useAccount } from "../../../hooks/connection/connection";
 import { useDisconnect } from "../../../hooks/connection/useDisconnect";
 import { useCurrentSellers } from "../../../hooks/useCurrentSellers";
 import { Grid } from "../../ui/Grid";
-import Loading from "../../ui/loading/Loading";
+import Loading from "../../ui/loading/LoadingWrapper";
 import ConnectButton from "../../wallet/ConnectButton";
 import Finance, { Props } from "./Finance";
 import { useConvertionRate } from "./convertion-rate/useConvertionRate";

package/src/hooks/index.ts

@@ -18,3 +18,4 @@ export * from "./contracts/erc1155/useErc1155Name";
 export * from "./contracts/erc1155/useErc1155Uris";
 export * from "./uniswap/useIsWindowVisible";
 export * from "./connection/connection";
+export { useConfigContext } from "../components/config/ConfigContext";

package/src/index.tsx

@@ -11,11 +11,11 @@ export * from "./components/ui/zIndex";
 export * from "./components/ui/buttonSize";
 export * from "./components/scroll/ScrollToID";
 export * from "./components/scroll/ScrollToTop";
-export { useConfigContext } from "./components/config/ConfigContext";
 export * from "./components/buttons/Button";
 export * from "./components/buttons/BaseButton";
 export * from "./components/buttons/CommitButtonView";
 export * from "./components/buttons/BurgerButton";
+export * from "./components/config/ConfigProvider";
 export * from "./components/cta/exchange/BatchCompleteButton";
 export * from "./components/cta/exchange/CancelButton";
 export * from "./components/cta/exchange/CompleteButton";
@@ -32,7 +32,7 @@ export * from "./components/cta/funds/WithdrawAllFundsButton";
 export * from "./components/currencyDisplay/CurrencyDisplay";
 export * from "./components/exchangeCard/ExchangeCard";
 export * from "./components/image/Image";
-export * from "./components/Loading";
+export * from "./components/ui/loading/Loading";
 export * from "./components/productCard/ProductCard";
 export * from "./components/productCard/const";
 export * from "./components/skeleton/ProductCardSkeleton";

package/dist/cjs/components/Loading.d.ts

@@ -1,2 +0,0 @@
-export declare const Loading: () => JSX.Element;
-//# sourceMappingURL=Loading.d.ts.map

package/dist/cjs/components/Loading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/Loading.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,mBAEnB,CAAC"}

package/dist/cjs/components/Loading.js

@@ -1,51 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loading = void 0;
-const styled_components_1 = __importStar(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-const Loading = () => {
-    return react_1.default.createElement(LoadingStyle, null);
-};
-exports.Loading = Loading;
-const loadingAnimation = (0, styled_components_1.keyframes) `
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-`;
-const LoadingStyle = styled_components_1.default.span.attrs({ className: "loading" }) `
-  width: 25px;
-  height: 25px;
-  border: 5px solid #fff;
-  border-bottom-color: ${({ theme }) => { var _a; return (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.light.accent; }};
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-  animation-name: ${loadingAnimation};
-`;
-//# sourceMappingURL=Loading.js.map

package/dist/cjs/components/Loading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../src/components/Loading.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAAsD;AACtD,kDAA0B;AAEnB,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,8BAAC,YAAY,OAAgB,CAAC;AACvC,CAAC,CAAC;AAFW,QAAA,OAAO,WAElB;AAEF,MAAM,gBAAgB,GAAG,IAAA,6BAAS,EAAA;;;CAGjC,CAAC;AAEF,MAAM,YAAY,GAAG,2BAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAA;;;;yBAIvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,MAAM,CAAA,EAAA;;;;;oBAK/C,gBAAgB;CACnC,CAAC"}

package/dist/esm/components/Loading.d.ts

@@ -1,2 +0,0 @@
-export declare const Loading: () => JSX.Element;
-//# sourceMappingURL=Loading.d.ts.map

package/dist/esm/components/Loading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../src/components/Loading.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,mBAEnB,CAAC"}

package/dist/esm/components/Loading.js

@@ -1,21 +0,0 @@
-import styled, { keyframes } from "styled-components";
-import React from "react";
-export const Loading = () => {
-    return React.createElement(LoadingStyle, null);
-};
-const loadingAnimation = keyframes `
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-`;
-const LoadingStyle = styled.span.attrs({ className: "loading" }) `
-  width: 25px;
-  height: 25px;
-  border: 5px solid #fff;
-  border-bottom-color: ${({ theme }) => theme?.colors?.light.accent};
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-  animation-name: ${loadingAnimation};
-`;
-//# sourceMappingURL=Loading.js.map

package/dist/esm/components/Loading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../src/components/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,oBAAC,YAAY,OAAgB,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,SAAS,CAAA;;;CAGjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAA;;;;yBAIvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM;;;;;oBAK/C,gBAAgB;CACnC,CAAC"}

package/src/components/Loading.tsx

@@ -1,23 +0,0 @@
-import styled, { keyframes } from "styled-components";
-import React from "react";
-
-export const Loading = () => {
-  return <LoadingStyle></LoadingStyle>;
-};
-
-const loadingAnimation = keyframes`
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-`;
-
-const LoadingStyle = styled.span.attrs({ className: "loading" })`
-  width: 25px;
-  height: 25px;
-  border: 5px solid #fff;
-  border-bottom-color: ${({ theme }) => theme?.colors?.light.accent};
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-  animation-name: ${loadingAnimation};
-`;