Skip to content

Commit

Permalink
Minor tweaks to React UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@bone-house
bone-house committed Jul 21, 2023
1 parent ff934ad commit 7f83d87
Show file tree
Hide file tree
Showing 11 changed files with 173 additions and 147 deletions.
187 changes: 85 additions & 102 deletions packages/gamba-react-ui/src/GambaModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { useConnection, useWallet, Wallet } from '@solana/wallet-adapter-react'
import { getTokenBalance } from 'gamba-core'
import { useGamba } from 'gamba-react'
import { useContext, useEffect, useState } from 'react'
import { useBonusBalance, useGamba } from 'gamba-react'
import { useContext, useState } from 'react'
import styled from 'styled-components'
import { Button } from './components/Button'
import { Flash } from './components/Flash'
import { HexColor } from './components/HexColor'
import { GambaUiContext, useGambaUi } from './context'
import { Flex, StylelessButton } from './styles'
import { Info, Refresh } from './Svg'
import { formatLamports } from './utils'
import { Flash } from './components/Flash'
import { StylelessButton } from './styles'
import { copyTextToClipboard, formatLamports } from './utils'

function useCallbacks() {
function useGambaUiCallbacks() {
const {
onError = () => null,
onWithdraw = () => null,
Expand All @@ -26,37 +25,6 @@ const statusMapping = {
hashedSeedRequested: 'Generating Results',
}

const Content = styled.div`
width: 100%;
padding: 20px;
h1 {
font-size: 24px;
padding-top: 20px;
text-align: center;
}
`

const WalletButton = styled.button`
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: none;
border: none;
width: 100%;
margin: 0;
transition: background .2s, opacity .2s;
text-align: left;
color: white;
&:disabled {
opacity: .5;
}
&:hover:not(:disabled) {
background: #FFFFFF11;
}
`

const Address = styled.button`
border: none;
margin: 0;
Expand All @@ -72,7 +40,18 @@ const Address = styled.button`
border-radius: 10px;
`

const List = styled.div`
const ModalFooter = styled.div`
background: #10141f;
position: absolute;
bottom: 0px;
padding: 10px;
display: flex;
justify-content: space-between;
width: 100%;
font-weight: lighter;
`

const Content = styled.div`
width: 100%;
overflow: hidden;
padding: 20px;
Expand All @@ -81,8 +60,21 @@ const List = styled.div`
gap: 10px;
`

const Balances = styled.div`
display: flex;
justify-content: space-evenly;
text-align: center;
& > div {
& > div:last-child {
font-weight: bold;
opacity: .5;
text-transform: uppercase;
}
}
`

function ConnectWallet() {
const { onError } = useCallbacks()
const { onError } = useGambaUiCallbacks()
const { wallets, select } = useWallet()
const [loading, setLoading] = useState(false)

Expand All @@ -102,18 +94,17 @@ function ConnectWallet() {

return (
<>
<Content>
<h1>Connect Wallet</h1>
</Content>
<h1>Connect Wallet</h1>
<div>
{wallets.length === 0 && (
<>
You need a Solana wallet to connect
</>
)}
{wallets.map((wallet, i) => (
<WalletButton
<Button
key={i}
className="list"
onClick={() => selectWallet(wallet)}
disabled={loading}
>
Expand All @@ -123,15 +114,15 @@ function ConnectWallet() {
width="20"
height="20"
/>
</WalletButton>
</Button>
))}
</div>
</>
)
}

function CreateAccount() {
const { onError } = useCallbacks()
const { onError } = useGambaUiCallbacks()
const { tos } = useGambaUi()
const gamba = useGamba()
const [loading, setLoading] = useState(false)
Expand Down Expand Up @@ -161,9 +152,7 @@ function CreateAccount() {
if (tos && showTnc) {
return (
<>
<Content>
<h1>Terms of Service</h1>
</Content>
<h1>Terms of Service</h1>
<div style={{ padding: 20, fontSize: '12px' }}>
{tos}
</div>
Expand All @@ -181,14 +170,12 @@ function CreateAccount() {

return (
<>
<h1>Create Account</h1>
<Content>
<h1>Create Account</h1>
</Content>
<List>
<Button className="primary" loading={loading} onClick={createAccountOrShowTnc}>
Create account
</Button>
</List>
</Content>
<>
<Button className="list" onClick={() => gamba.disconnect()}>
Change wallet
Expand All @@ -197,20 +184,19 @@ function CreateAccount() {
</>
)
}
export async function copyTextToClipboard(text: string) {
if ('clipboard' in navigator) {
return await navigator.clipboard.writeText(text)
} else {
return document.execCommand('copy', true, text)
}
}

function Account() {
const { onError, onWithdraw } = useCallbacks()
const { onError, onWithdraw } = useGambaUiCallbacks()
const bonusBalance = useBonusBalance()
const gamba = useGamba()
const [loading, setLoading] = useState<string>()

const closeUserAccount = async () => {
try {
if (gamba.balances.bonus > 0) {
if (!confirm(`If you close your account you will lose your bonus balance (${formatLamports(gamba.balances.bonus, 'SOL')}). Are you sure?`))
return
}
setLoading('close')
const res = await gamba.closeAccount()
const response = await res.result()
Expand Down Expand Up @@ -250,17 +236,17 @@ function Account() {
}
}

const [bonusTokens, setBonusTokens] = useState(0)
const { connection } = useConnection()

useEffect(() => {
const fetchBonusTokens = async () => {
console.debug('Fetching bonus tokens')
const balance = await getTokenBalance(connection, gamba.wallet!.publicKey, gamba.house!.state!.bonusMint)
setBonusTokens(balance)
const redeemBonus = async () => {
try {
setLoading('redeem')
await gamba.redeemBonusToken()
} catch (err) {
console.error('Modal Error', err)
onError(err)
} finally {
setLoading(undefined)
}
fetchBonusTokens()
}, [gamba.user])
}

if (!gamba.user || !gamba.wallet) {
return null
Expand All @@ -270,80 +256,77 @@ function Account() {

return (
<>
<Content>
<h1>
<Flash>
{formatLamports(gamba.balances.total - gamba.balances.user)}
</Flash>
</h1>
</Content>
<div style={{ display: 'flex', justifyContent: 'space-evenly', textAlign: 'center' }}>
{/* <div>
<Flash>
{formatLamports(gamba.balances.wallet)}
</Flash>
<div style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>Wallet</div>
</div> */}
<h1>
<Flash>
{formatLamports(gamba.balances.total - gamba.balances.user)}
</Flash>
</h1>
<Balances>
{gamba.balances.user > 0 && (
<div>
<Flash>
{formatLamports(gamba.balances.user)}
</Flash>
<div style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>Claimable</div>
<div>
Claimable
</div>
</div>
)}
{gamba.balances.bonus > 0 && (
<div>
<Flash>
{formatLamports(gamba.balances.bonus)}
</Flash>
<div style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>Bonus</div>
<div>
Bonus
</div>
</div>
)}
</div>
<List>
</Balances>
<Content>
<Address onClick={() => copyTextToClipboard(gamba.wallet!.publicKey.toBase58())}>
<HexColor>
{gamba.wallet.publicKey.toBase58()}
</HexColor>
</Address>
{gamba.balances.user > 0 && (
<Button className="primary" loading={loading === 'withdraw'} onClick={withdraw}>
<Button className="primary" loading={loading === 'withdraw'} onClick={withdraw} disabled={gamba.user.status !== 'playing'}>
Claim {formatLamports(gamba.balances.user)}
</Button>
)}
{bonusTokens > 0 && (
<Button className="primary" onClick={() => gamba.redeemBonusToken()}>
Redeem Bonus +{formatLamports(bonusTokens, '')} gSOL
{bonusBalance > 0 && (
<Button className="primary" loading={loading === 'redeem'} onClick={redeemBonus}>
Redeem Bonus ({formatLamports(bonusBalance, 'gSOL')})
</Button>
)}
</List>
</Content>
<Button className="list" loading={loading === 'close'} onClick={() => closeUserAccount()}>
Close account
</Button>
<Button className="list" onClick={() => gamba.disconnect()}>
Switch wallet
</Button>
<div style={{ background: '#10141f', position: 'absolute', bottom: '0px', padding: '10px', display: 'flex', justifyContent: 'space-between', width: '100%', fontWeight: 'lighter', fontSize: '12px' }}>
<div>Status: {accountStatus}</div>
<div style={{ display: 'flex', gap: '10px' }}>
<ModalFooter>
<div>
Status: <Flash>{accountStatus}</Flash>
</div>
<Flex>
<StylelessButton disabled={loading === 'refresh'} style={{ color: 'white' }} onClick={refreshAccount}>
<Refresh />
</StylelessButton>
<a target="_blank" href="https://gamba.so/docs/account" rel="noreferrer">
<a target="_blank" href="https://gamba.so/docs/account#status" rel="noreferrer">
<Info />
</a>
</div>
</div>
</Flex>
</ModalFooter>
</>
)
}

export const GambaModal = () => {
export function GambaModal() {
const { session, user } = useGamba()
const { connected } = useWallet()
const { connection } = useConnection()

return (
<>
{!connection ? (
Expand Down
14 changes: 14 additions & 0 deletions packages/gamba-react-ui/src/Svg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,17 @@ export const ArrowRight = () => (
<path d="M4 12H20M20 12L14 6M20 12L14 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</StyledSvg>
)

export const Shuffle = () => (
<StyledSvg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_438_206)">
<path d="M-3.90577e-05 600C-3.90577e-05 613.867 4.79996 625.867 14.4 636C24 646.134 36 650.934 50.4 650.401H100C134.133 650.401 166.667 643.734 197.6 630.4C228.533 617.067 254.933 599.2 276.8 576.8C298.667 554.4 316.533 527.734 330.4 496.8C344.267 465.867 350.933 433.6 350.4 400C350.4 358.934 364.8 323.734 393.6 294.4C422.4 265.067 457.867 250.4 500 250.4H600V300C600 311.2 603.2 320.8 609.6 328.8C616 336.8 623.2 342.667 631.2 346.4C639.2 350.134 648.533 351.2 659.2 349.6C669.867 348 678.667 343.467 685.6 336L785.6 236C795.733 225.334 800.533 213.334 800 200C799.467 186.667 794.667 174.934 785.6 164.8L685.6 64.8005C677.6 57.3338 668.533 52.8005 658.4 51.2005C648.267 49.6005 638.933 50.6671 630.4 54.4005C621.867 58.1338 614.667 64.0005 608.8 72.0005C602.933 80.0005 600 89.3338 600 100V150.4H500C466.4 150.4 434.133 157.067 403.2 170.4C372.267 183.734 345.6 201.334 323.2 223.2C300.8 245.067 282.933 271.734 269.6 303.2C256.267 334.667 249.867 366.934 250.4 400C250.4 441.6 235.733 477.067 206.4 506.4C177.067 535.734 141.6 550.401 100 550.401H50.4C36.5333 550.401 24.5333 555.2 14.4 564.8C4.26663 574.4 -0.533372 586.134 -3.90577e-05 600ZM-3.90577e-05 200.8C-3.90577e-05 214.667 4.79996 226.4 14.4 236C24 245.6 36 250.4 50.4 250.4H100C123.467 250.4 145.067 255.467 164.8 265.6C184.533 275.734 201.867 289.6 216.8 307.2C228 273.067 244.533 242.4 266.4 215.2C217.867 172 162.4 150.4 100 150.4H50.4C36.5333 150.4 24.5333 155.467 14.4 165.6C4.26663 175.734 -0.533372 187.467 -3.90577e-05 200.8ZM334.4 586.4C381.867 629.067 437.067 650.401 500 650.401H600V700.8C600 711.467 603.2 721.067 609.6 729.6C616 738.134 623.2 744 631.2 747.2C639.2 750.4 648.533 751.2 659.2 749.6C669.867 748 678.667 743.467 685.6 736L785.6 636C795.733 625.867 800.533 613.867 800 600C799.467 586.134 794.667 574.667 785.6 565.6L685.6 465.6C677.6 457.6 668.533 452.8 658.4 451.2C648.267 449.6 638.933 450.667 630.4 454.4C621.867 458.134 614.667 464.267 608.8 472.801C602.933 481.334 600 490.667 600 500.8V550.401H500C477.067 550.401 455.467 545.6 435.2 536C414.933 526.4 397.867 512.534 384 494.4C372.267 528.534 355.733 559.2 334.4 586.4Z" fill="currentColor" />
</g>
<defs>
<clipPath id="clip0_438_206">
<rect width="800" height="800" fill="white" />
</clipPath>
</defs>
</StyledSvg>

)
Loading

0 comments on commit 7f83d87

Please sign in to comment.