diff --git a/package-lock.json b/package-lock.json
index c2a09e770..54240a2d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@apollo/client": "^3.8.1",
"@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
"@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+ "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.14",
"@davatar/react": "^1.10.4",
"@ethersproject/address": "^5.6.1",
"@ethersproject/units": "^5.7.0",
@@ -3424,11 +3425,11 @@
}
},
"node_modules/@bosonprotocol/common": {
- "version": "1.30.0-alpha.7",
- "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.30.0-alpha.7.tgz",
- "integrity": "sha512-sN+nnI+Zem0NwYlz9bEMxnzBKDnGLHZiVZKJp+ixgbv+kH6TWTJCXfh3YVSHbzJEIySqsDxiX5djtX2gBvYHuA==",
+ "version": "1.30.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.30.0-alpha.8.tgz",
+ "integrity": "sha512-elcgmCPRi3i6LBtGohsHqvsqZr2mFUBHXOWrnoFauesvhpwQrSmtz4l/YILcJhfFkY+Y3IRN20BZBmNDO0Mwdw==",
"dependencies": {
- "@bosonprotocol/metadata": "^1.16.3-alpha.3",
+ "@bosonprotocol/metadata": "^1.16.3-alpha.4",
"@ethersproject/abi": "^5.5.0",
"@ethersproject/address": "^5.5.0",
"@ethersproject/bignumber": "^5.5.0",
@@ -3437,11 +3438,11 @@
}
},
"node_modules/@bosonprotocol/core-sdk": {
- "version": "1.42.0-alpha.1",
- "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.42.0-alpha.1.tgz",
- "integrity": "sha512-dJnTPEAyslLYdTmAHhunefR/nO+TxB1W0a5/6RKXghSVGYxefeBK0M+LHMPbKWnONyTOriWEjJzpJ1uUfLVGFg==",
+ "version": "1.42.0-alpha.2",
+ "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.42.0-alpha.2.tgz",
+ "integrity": "sha512-sULdoOx0mR5jDpWzqyGW7zCoZPZkZGZtZvS+sgeJpQyOy4y0uGAvZ1kHQ+Iy1X73s651m4TJhVmVZFiq4i/KGA==",
"dependencies": {
- "@bosonprotocol/common": "^1.30.0-alpha.7",
+ "@bosonprotocol/common": "^1.30.0-alpha.8",
"@ethersproject/abi": "^5.5.0",
"@ethersproject/address": "^5.5.0",
"@ethersproject/bignumber": "^5.5.0",
@@ -3479,9 +3480,9 @@
}
},
"node_modules/@bosonprotocol/metadata": {
- "version": "1.16.3-alpha.3",
- "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.3-alpha.3.tgz",
- "integrity": "sha512-4fe588oZXH+B7LPOQwRXFnOMpR5Th3ifk1Yt6rO4S1tAt6B2cgDI5lVBSJDNF/tcppBr01MTreJjp8sQjxFkTg==",
+ "version": "1.16.3-alpha.4",
+ "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.3-alpha.4.tgz",
+ "integrity": "sha512-TVYOZL6O0Z9N92TBbU8x/Y+SWz6OjayIrQeBfeq0nXBbZqhtb1hp5P1WkspOtHsKjExOUHLV6Fmast5ruUd0fQ==",
"dependencies": {
"@bosonprotocol/metadata-storage": "^1.0.1",
"schema-to-yup": "^1.11.11",
@@ -4254,6 +4255,16 @@
"url": "https://opencollective.com/svgo"
}
},
+ "node_modules/@bosonprotocol/roblox-sdk": {
+ "version": "1.0.0-alpha.14",
+ "resolved": "https://registry.npmjs.org/@bosonprotocol/roblox-sdk/-/roblox-sdk-1.0.0-alpha.14.tgz",
+ "integrity": "sha512-BK6A5wV5zQYkgA54NWvFzuFpglAwcSGrz/s703Mr1Um8xN0gXWE6NBkib1P2orLAMdCjDXbiFd1Qq9jn4hup7A==",
+ "peerDependencies": {
+ "@bosonprotocol/common": "^1.30.0-alpha.8",
+ "@bosonprotocol/core-sdk": "^1.42.0-alpha.2",
+ "typescript": "^5.7.3"
+ }
+ },
"node_modules/@cfcs/core": {
"version": "0.0.6",
"license": "MIT",
diff --git a/package.json b/package.json
index 8895fb673..902a019ab 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
"@apollo/client": "^3.8.1",
"@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
"@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+ "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.14",
"@davatar/react": "^1.10.4",
"@ethersproject/address": "^5.6.1",
"@ethersproject/units": "^5.7.0",
diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index 0e2b032a4..a9f12f9fe 100644
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -1,10 +1,11 @@
+import { BosonThemeProvider } from "@bosonprotocol/react-kit";
import { IconContext } from "phosphor-react";
import { ThemeProvider } from "styled-components";
import ModalProvider from "../../components/modal/ModalProvider";
import { getCurrentViewMode, ViewMode } from "../../lib/viewMode";
import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider";
-import theme from "../../theme";
+import theme, { themeVars } from "../../theme";
import CookieBanner from "../cookie/CookieBanner";
import { AppView } from "./AppView";
import { Container } from "./index.styles";
@@ -39,8 +40,11 @@ export default function App({
}}
>
-
- <>
+
+
-
-
+
+
diff --git a/src/components/header/web3Status/index.tsx b/src/components/header/web3Status/index.tsx
index 0840eeb10..92c405c2c 100644
--- a/src/components/header/web3Status/index.tsx
+++ b/src/components/header/web3Status/index.tsx
@@ -15,7 +15,7 @@ import useENSName from "lib/utils/hooks/useENSName";
import { useLast } from "lib/utils/hooks/useLast";
import { memo, useCallback, useEffect, useRef } from "react";
import { useAppSelector } from "state/hooks";
-import styled from "styled-components";
+import styled, { CSSProperties } from "styled-components";
import { breakpoint, breakpointNumbers } from "../../../lib/styles/breakpoint";
import { formatAddress } from "../../../lib/utils/address";
@@ -98,9 +98,9 @@ const Text = styled.p`
font-weight: 500;
`;
-const StyledConnectButton = styled(Button)`
+const StyledConnectButton = styled(Button)<{ $color: CSSProperties["color"] }>`
background-color: var(--buttonBgColor);
- color: inherit;
+ color: ${({ $color }) => $color};
`;
const getCommonWalletButtonProps = (isXXS: boolean) =>
@@ -224,9 +224,9 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
{...getCommonWalletButtonProps(isXXS)}
variant="primaryFill"
style={{
- ...getCommonWalletButtonProps(isXXS).style,
- color: connectedButtonTextColor
+ ...getCommonWalletButtonProps(isXXS).style
}}
+ $color={connectedButtonTextColor}
>
Connect Wallet
diff --git a/src/lib/styles/GlobalStyle.tsx b/src/lib/styles/GlobalStyle.tsx
index 299d12d9c..566ec6c8c 100644
--- a/src/lib/styles/GlobalStyle.tsx
+++ b/src/lib/styles/GlobalStyle.tsx
@@ -1,3 +1,4 @@
+import { cssVars } from "@bosonprotocol/react-kit";
import { createGlobalStyle } from "styled-components";
import barlowRegular from "../../assets/fonts/Barlow-Regular.ttf";
@@ -101,6 +102,8 @@ const GlobalStyle = createGlobalStyle<{
? props.$lowerCardBgColor
: colors.white};
+ ${cssVars};
+
font-size: 0.75rem;
${breakpoint.xs} {
font-size: 0.75rem;
diff --git a/src/lib/utils/hooks/useCSSVariable.ts b/src/lib/utils/hooks/useCSSVariable.ts
index 9e19d2d33..768286195 100644
--- a/src/lib/utils/hooks/useCSSVariable.ts
+++ b/src/lib/utils/hooks/useCSSVariable.ts
@@ -1,3 +1,4 @@
+import { CssVarKeys } from "@bosonprotocol/react-kit";
import { useEffect, useState } from "react";
// all css variables can be found in src/components/app/index.tsx
@@ -18,6 +19,7 @@ export const useCSSVariable = (
| "--buttonTextColor"
| "--upperCardBgColor"
| "--lowerCardBgColor"
+ | CssVarKeys
) => {
const [value, setValue] = useState();
useEffect(() => {
diff --git a/src/theme.ts b/src/theme.ts
index 46bd516f3..6ad4ecfb2 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -2,13 +2,20 @@ import "styled-components";
import { BaseTagsInputProps, getThemes } from "@bosonprotocol/react-kit";
import { colors } from "lib/styles/colors";
-
-const theme = getThemes({ roundness: "min" })["light"];
+export const themeVars = {
+ roundness: "min",
+ themeKey: "light"
+} as const;
+const theme = getThemes({ roundness: themeVars.roundness })[themeVars.themeKey];
export const inputTheme = {
background: colors.greyLight,
borderColor: colors.border,
borderRadius: 0,
+ color: "inherit",
+ placeholder: {
+ color: "inherit"
+ },
focus: {
caretColor: "initial"
},