Version bump

apps/platform/src/constants.ts

@@ -1,13 +1,12 @@
-import { GambaStandardTokens } from 'gamba-react-ui-v2'
+import { GambaStandardTokens, TokenMeta } from 'gamba-react-ui-v2'
 
 export const PLATFORM_CREATOR_ADDRESS = 'V2grJiwjs25iJYqumbHyKo5MTK7SFqZSdmoRaj8QWb9'
 
-export const PLATFORM_NAME = 'V2 Demo'
-
+/** Appears in ShareModal */
 export const PLATFORM_SHARABLE_URL = 'v2-play.gamba.so'
 
 // List of tokens supported by this platform
-export const TOKEN_LIST = [
+export const TOKENS: TokenMeta[] = [
   GambaStandardTokens.sol,
   GambaStandardTokens.usdc,
 ]

apps/platform/src/index.tsx

@@ -9,13 +9,13 @@ import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
 import '@solana/wallet-adapter-react-ui/styles.css'
 import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
-import { GambaPlatformProvider, TokenListProvider } from 'gamba-react-ui-v2'
+import { GambaPlatformProvider } from 'gamba-react-ui-v2'
 import { GambaProvider } from 'gamba-react-v2'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { HashRouter } from 'react-router-dom'
 import App from './App'
-import { PLATFORM_CREATOR_ADDRESS, PLATFORM_NAME, TOKEN_LIST } from './constants'
+import { PLATFORM_CREATOR_ADDRESS, TOKENS } from './constants'
 import { GAMES } from './games'
 import './styles.css'
 
@@ -38,24 +38,23 @@ function Root() {
       >
         <WalletProvider autoConnect wallets={wallets}>
           <WalletModalProvider>
-            <TokenListProvider tokens={TOKEN_LIST}>
-              <GambaProvider>
-                <GambaPlatformProvider
-                  creator={PLATFORM_CREATOR_ADDRESS}
-                  defaultCreatorFee={0.01}
-                  defaultJackpotFee={0.001}
-                  games={GAMES}
-                  theme={{
-                    button: {
-                      background: '#8851ff',
-                      backgroundHover: '#9564ff',
-                    },
-                  }}
-                >
-                  <App />
-                </GambaPlatformProvider>
-              </GambaProvider>
-            </TokenListProvider>
+            <GambaProvider>
+              <GambaPlatformProvider
+                creator={PLATFORM_CREATOR_ADDRESS}
+                games={GAMES}
+                tokens={TOKENS}
+                defaultCreatorFee={0.01}
+                defaultJackpotFee={0.001}
+                theme={{
+                  button: {
+                    background: '#8851ff',
+                    backgroundHover: '#9564ff',
+                  },
+                }}
+              >
+                <App />
+              </GambaPlatformProvider>
+            </GambaProvider>
           </WalletModalProvider>
         </WalletProvider>
       </ConnectionProvider>

apps/platform/src/sections/Game/Game.styles.ts

@@ -20,6 +20,8 @@ export const loadingAnimation = keyframes`
 export const Container = styled.div`
   width: 100%;
   position: relative;
+  display: grid;
+  gap: 5px;
 `
 
 export const SettingControls = styled.div`
@@ -64,8 +66,7 @@ export const Screen = styled.div`
   position: relative;
   flex-grow: 1;
   background: #0c0c11;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-radius: 10px;
   overflow: hidden;
   transition: height .2s ease;
   height: 500px;
@@ -98,6 +99,7 @@ export const LoadingIndicator = styled.div<{$active: boolean}>`
   height: 3px;
   width: 100%;
   overflow: hidden;
+  border-radius: 10px;
   &:after {
     content: " ";
     position: absolute;
@@ -115,11 +117,10 @@ export const LoadingIndicator = styled.div<{$active: boolean}>`
 
 export const Controls = styled.div`
   width: 100%;
-  background: var(--box-color);
+  background: rgb(26, 27, 40);
   padding: 20px;
   color: white;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-radius: 10px;
 
   @media (max-width: 800px) {
     padding: 10px;

apps/platform/src/sections/Game/ProvablyFairModal.tsx

@@ -25,7 +25,7 @@ export function ProvablyFairModal(props: {onClose: () => void}) {
       {!gamba.userCreated && (
         <>
           <p>
-            Provably Fair works by providing a hashed seed which will be revealed after every bet. If you are playing from a wallet for the first time, you can request the initial hashed seed ahead of time. After this it will be done automatically for each play.
+            Provably Fair allows you to verify that the result of each game was randomly generated. Since you are playing from this wallet for the first time, you can request the initial hashed seed ahead of time. After this it will be done automatically for each play.
           </p>
           <GambaUi.Button main onClick={initialize}>
             Get hashed seed

apps/platform/src/styles.css

@@ -5,7 +5,19 @@
 :root {
   --background-color: #0b0b0e;
   --text-color: #ffffff;
-  --box-color: rgb(26, 27, 40);
+
+  --gamba-ui-border-radius: 10px;
+
+  --gamba-ui-button-default-background: #0e0e16;
+  --gamba-ui-button-default-background-hover: #11111d;
+  --gamba-ui-button-default-color: white;
+
+  --gamba-ui-button-main-background: #8851ff;
+  --gamba-ui-button-main-background-hover: #9564ff;
+
+  --gamba-ui-input-background: #0e0e16;
+  --gamba-ui-input-color: #ffffff;
+  --gamba-ui-input-background-hover: #11111d;
 }
 
 body, input, button, textarea, pre {

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # gamba-core-v2
 
+## 0.1.2
+
+### Patch Changes
+
+- Small changes
+
 ## 0.1.1
 
 ### Patch Changes

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gamba-core-v2",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

packages/react-ui/CHANGELOG.md

@@ -1,5 +1,14 @@
 # gamba-react-ui-v2
 
+## 0.1.3
+
+### Patch Changes
+
+- Small changes
+- Updated dependencies
+  - gamba-core-v2@0.1.2
+  - gamba-react-v2@0.1.3
+
 ## 0.1.2
 
 ### Patch Changes

packages/react-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gamba-react-ui-v2",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

packages/react-ui/src/GambaPlatformProvider.tsx

@@ -1,25 +1,16 @@
 import { PublicKey } from '@solana/web3.js'
 import React from 'react'
-import { ThemeProvider } from 'styled-components'
-import { GameBundle } from '.'
+import { GameBundle, TokenListProvider, TokenMeta } from '.'
 import { PortalProvider } from './PortalContext'
 
 interface PlatformMeta {
   name: string
   creator: PublicKey
 }
 
-interface GambaPlatformTheme {
-  button: {
-    background: string
-    backgroundHover: string
-  }
-}
-
 interface GambaPlatformContext {
   platform: PlatformMeta
   games: GameBundle[]
-  theme: GambaPlatformTheme
   token: PublicKey
   defaultCreatorFee: number
   defaultJackpotFee: number
@@ -32,17 +23,16 @@ export const GambaPlatformContext = React.createContext<GambaPlatformContext>(nu
 
 interface GambaPlatformProviderProps extends React.PropsWithChildren {
   creator: string | PublicKey
+  tokens?: TokenMeta[]
   games: GameBundle[]
-  /** Stylings for inputs shown in games */
-  theme: GambaPlatformTheme
   /** How much the player should pay in fees to the platform */
   defaultCreatorFee?: number
   /** How much the player should pay in fees to play for the jackpot in every game. 0.001 = 0.1% */
   defaultJackpotFee?: number
 }
 
 export function GambaPlatformProvider(props: GambaPlatformProviderProps) {
-  const { creator, children, games, theme } = props
+  const { creator, children, games, tokens = [] } = props
   const [token, setToken] = React.useState(new PublicKey('So11111111111111111111111111111111111111112'))
   const [clientSeed, setClientSeed] = React.useState(String(Math.random() * 1e9 | 0))
   const defaultJackpotFee = props.defaultJackpotFee ?? 0.001
@@ -55,7 +45,6 @@ export function GambaPlatformProvider(props: GambaPlatformProviderProps) {
           creator: new PublicKey(creator),
         },
         games,
-        theme,
         token,
         setToken,
         clientSeed,
@@ -64,11 +53,11 @@ export function GambaPlatformProvider(props: GambaPlatformProviderProps) {
         defaultCreatorFee,
       }}
     >
-      <PortalProvider>
-        <ThemeProvider theme={{ gamba: theme }}>
+      <TokenListProvider tokens={tokens}>
+        <PortalProvider>
           {children}
-        </ThemeProvider>
-      </PortalProvider>
+        </PortalProvider>
+      </TokenListProvider>
     </GambaPlatformContext.Provider>
   )
 }

packages/react-ui/src/components/Button.tsx

@@ -4,36 +4,33 @@ import styled, { css } from 'styled-components'
 type ButtonSize = 'small' | 'medium' | 'large'
 
 const StyledButton = styled.button<{$main?: boolean, $size: ButtonSize}>`
-  --background-color: #0e0e16;
-  --background-color-hover: #11111d;
+  --background-color: var(--gamba-ui-button-default-background);
+  --background-color-hover: var(--gamba-ui-button-default-background);
 
   ${(props) => props.$main && css`
-    --background-color: ${({theme}) => theme.gamba.button.background};
-    --background-color-hover: ${({theme}) => theme.gamba.button.backgroundHover};
+    --background-color: var(--gamba-ui-button-main-background);
+    --background-color-hover: var(--gamba-ui-button-main-background);
   `}
 
   ${(props) => css`
     --padding: ${props.$size === 'small' ? '5px' : props.$size === 'medium' ? '10px' : props.$size === 'large' && '15px'};
   `}
 
-  color: white;
-
   background: var(--background-color);
+  color: white;
   &:hover {
     background: var(--background-color-hover);
   }
 
   border: none;
-  border-radius: 10px;
+  border-radius: var(--gamba-ui-border-radius);
   padding: var(--padding);
   cursor: pointer;
   /* min-width: 100px; */
   text-align: center;
   align-items: center;
 
   &:disabled {
-    background: #0e0e16;
-    color: #333333;
     cursor: default;
     opacity: .7;
   }

packages/react-ui/src/components/Select.tsx

@@ -15,8 +15,6 @@ const StyledWrapper = styled.div`
 `
 
 const StyledPopup = styled.div`
-  --background-color: #0e0e16;
-  --background-color-hover: #11111d;
   position: absolute;
   bottom: 100%;
   left: 0;
@@ -26,7 +24,8 @@ const StyledPopup = styled.div`
   gap: 5px;
   border-radius: 10px;
   padding: 5px;
-  background-color: var(--background-color);
+  color: var(--gamba-ui-input-color);
+  background: var(--gamba-ui-input-background);
   white-space: nowrap;
   transform: translateY(-5px);
   & > button {
@@ -35,7 +34,7 @@ const StyledPopup = styled.div`
     font-size: inherit;
     padding: 5px;
     &:hover {
-      background: var(--background-color-hover);
+      background: var(--gamba-ui-input-background-hover);
     }
   }
 `

packages/react-ui/src/components/TextInput.tsx

@@ -2,15 +2,11 @@ import React from 'react'
 import styled from 'styled-components'
 
 const StyledTextInput = styled.input`
-  --background-color: #0e0e16;
-  --background-color-hover: #11111d;
-
-  color: white;
-
-  background: var(--background-color);
-  /* &:hover {
-    background: var(--background-color-hover);
-  } */
+  color: var(--gamba-ui-input-color);
+  background: var(--gamba-ui-input-background);
+  &:hover {
+    background: var(--gamba-ui-input-background-hover);
+  }
 
   border: none;
   border-radius: 10px;
@@ -20,8 +16,6 @@ const StyledTextInput = styled.input`
   align-items: center;
 
   &:disabled {
-    background: #0e0e16;
-    color: #333333;
     cursor: default;
     opacity: .7;
   }
@@ -34,7 +28,7 @@ export interface TextInputProps<T extends number | string> extends Omit<React.In
   onChange?: (value: string) => void
 }
 
-export function TextInput<T extends number | string>({onChange, ...props}: TextInputProps<T>) {
+export function TextInput<T extends number | string>({ onChange, ...props }: TextInputProps<T>) {
   return (
     <StyledTextInput
       type="text"