Prettify UI (#8)

* begin refactoring  to a ltotery card state

* update lott state card

* update and include play button

* begin updating the damn monoliuth website intop components. fuck my life

* update

---------

Co-authored-by: James <11054922+entrancedjames@users.noreply.github.com>

Author: 0xjame5

CHANGELOG.md

@@ -78,6 +78,7 @@ export type Timestamp = Uint64;
 export type Uint64 = string;
 export interface LotteryStateResponse {
   lotto_state: LotteryState;
+  total_tickets: number;
 }
 export interface TicketResponse {
   tickets?: number | null;

codegen/CwLotto.types.ts

@@ -0,0 +1,38 @@
+import {Coin, Config} from "../../codegen/CwLotto.types";
+import {Button, Form} from "semantic-ui-react";
+import {ChangeEvent, useState} from "react";
+import {CwLottoClient} from "../../codegen/CwLotto.client";
+
+interface BuyTicketsProps {
+    cwLottoClient: CwLottoClient,
+    config: Config,
+}
+
+export const BuyTicketsForm: React.FC<BuyTicketsProps> = ({cwLottoClient, config}: {
+    cwLottoClient: CwLottoClient,
+    config: Config
+}) => {
+  const [inputValue, setInputValue] = useState<string | ReadonlyArray<string> | number | undefined>(undefined);
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(Number(event.target.value));
+  };
+
+  const handleButtonClick = async () => {
+    let parsedInputValue = Number(inputValue);
+    let totalCost = Number(inputValue) * Number(config.ticket_unit_cost.amount);
+    let fee: Coin = {amount: totalCost.toString(), denom: config.ticket_unit_cost.denom};
+    await cwLottoClient.buyTicket({numTickets: parsedInputValue}, "auto", undefined, [fee]);
+  };
+
+  return <><Form>
+    <Form.Input
+      type="number"
+      label="Number of Tickets"
+      placeholder="Enter a number"
+      value={inputValue}
+      onChange={handleInputChange}
+    />
+    <Button onClick={handleButtonClick} type='submit'>Buy</Button>
+  </Form>
+  </>
+}

components/forms/buy-tickets.tsx

@@ -0,0 +1,37 @@
+import {useEffect, useState} from "react";
+import {CwLottoClient} from "../../codegen/CwLotto.client";
+import {Button} from "semantic-ui-react";
+import {useChain} from "@cosmos-kit/react";
+import {chainName} from "../../config";
+
+interface ClaimButtonProps {
+    contractAddr: string
+}
+
+export const ClaimButton: React.FC<ClaimButtonProps> = ({contractAddr}) => {
+  const {address, getSigningCosmWasmClient, getRestEndpoint, getRpcEndpoint, chain} = useChain(chainName);
+  const [signingClient, setSigningClient] = useState<CwLottoClient | null>(null);
+  // only is rendered during component claimed. ok so this page will be responsible for generating
+  // the assumption before initiating this component is that the state is in closed
+  useEffect(() => {
+    if (!address) {
+      return
+    }
+    getSigningCosmWasmClient()
+      .then(signingCWClient => {
+        if (!signingCWClient || !address) {
+          console.error("cosmwasmClient undefined or address undefined.");
+          return;
+        }
+        setSigningClient(new CwLottoClient(signingCWClient, address, contractAddr));
+      });
+  }, [address, contractAddr, getSigningCosmWasmClient]);
+
+  const handleButtonClick = async () => {
+    await signingClient?.claimTokens("auto", undefined, []);
+  };
+
+  return (<>
+    <Button onClick={handleButtonClick}>Claim your winnings!</Button>
+  </>);
+}

components/forms/claim-button.tsx

@@ -0,0 +1,56 @@
+import {useEffect, useState} from "react";
+
+export interface CountdownCardProps {
+    finalDate: Date
+}
+
+interface TimeLeft {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+
+export const CountdownCard: React.FC<CountdownCardProps> = ({finalDate}) => {
+  const calculateTimeLeft = () => {
+    const difference = finalDate.getTime() - new Date().getTime();
+
+    if (difference <= 0) {
+      return {
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      } as TimeLeft;
+    }
+
+    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
+    const minutes = Math.floor((difference / 1000 / 60) % 60);
+    const seconds = Math.floor((difference / 1000) % 60);
+
+    return {
+      days,
+      hours,
+      minutes,
+      seconds,
+    } as TimeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [calculateTimeLeft, timeLeft]);
+
+  return (
+    <div>
+      <p>
+        {timeLeft.days} days {timeLeft.hours} hours {timeLeft.minutes} minutes {timeLeft.seconds} seconds left
+      </p>
+    </div>
+  );
+}

components/react/countdown-card.tsx

@@ -0,0 +1,48 @@
+import {Button, Header} from "semantic-ui-react";
+import {Config, LotteryState} from "../../codegen/CwLotto.types";
+import React from "react";
+import {CountdownCard} from "./countdown-card";
+
+export interface LotteryStateCardProps {
+    lotteryState: LotteryState,
+    lotteryConfig: Config,
+    showPlayButton: boolean
+}
+
+export const LotteryStateCard: React.FC<LotteryStateCardProps> = ({lotteryState, lotteryConfig, showPlayButton}) => {
+  return (<>
+    <Header as='h3' style={{fontSize: '2em'}}>
+      {
+        "OPEN" in lotteryState ? (
+          <>Lottery is Open</>
+        ) : "CHOOSING" in lotteryState ? (
+          <>Waiting for lottery to be executed</>
+        ) : "CLOSED" in lotteryState ? (
+          <>Lottery has finished</>
+        ) : <>Unknown lottery state reached</>
+      }
+    </Header>
+    {
+      "OPEN" in lotteryState && "at_time" in lotteryState.OPEN.expiration &&
+        <CountdownCard finalDate={new Date(Number(lotteryState.OPEN.expiration.at_time) / 1e6)}/>
+    }
+    Cost per Ticket: {lotteryConfig.ticket_unit_cost.amount}{lotteryConfig.ticket_unit_cost.denom}
+    <p>
+      {
+        "OPEN" in lotteryState ? (
+          <>Lottery is open state.</>
+        ) : "CHOOSING" in lotteryState ? (
+          <>The lottery is waiting to be executed on the chain.</>
+        ) : "CLOSED" in lotteryState ? (
+          <>Lottery has completed. Winner is: {lotteryState.CLOSED.winner} and {lotteryState.CLOSED.claimed ? (<>has been claimed</>) : (<>has not been claimed</>)}</>
+        ) : <>Unknown lottery state reached</>
+      }
+    </p>
+    { showPlayButton && <> {
+      "OPEN" in LotteryStateCard ? (
+        <Button>Play</Button>
+      ): <Button>View</Button> // Default is view
+    }</>}
+  </>
+  )
+}

components/react/lotto-state-card.tsx

@@ -0,0 +1,16 @@
+import {Icon, Segment} from "semantic-ui-react";
+
+export interface TicketCardProps {
+    numTickets: number | undefined | null
+}
+
+export const TicketCard: React.FC<TicketCardProps> = ({numTickets}) => {
+  return (
+    <Segment>
+      {numTickets ? (
+        <p><Icon name='ticket' /> Ticket count is {numTickets}</p>
+      ) : (<p>No tickets bought yet</p>
+      )}
+    </Segment>
+  )
+}

components/react/ticket-card.tsx

@@ -4,11 +4,6 @@ import { AssetList, Asset } from '@chain-registry/types';
 export const chainName = 'junotestnet';
 export const STAKINGDENOM = 'ujunox';
 
-export const FREEDOM_LIST: string[] = [
-  'juno1law3szlnn4snqe6gylgt3h7r003e549fjs9sl9tf6zh3w480e33shlqrlp',
-  'juno1w4lgq9mvlvtldf0q9thqtaq986tuhy3j7jneq68lc4xhecvaa9aq8mzqhc',
-];
-
 export const chainassets: AssetList = assets.find(
   (chain) => chain.chain_name === chainName
 ) as AssetList;

config/defaults.ts

@@ -0,0 +1,6 @@
+export const FREEDOM_LIST: string[] = [
+  'juno1law3szlnn4snqe6gylgt3h7r003e549fjs9sl9tf6zh3w480e33shlqrlp',
+  'juno1w4lgq9mvlvtldf0q9thqtaq986tuhy3j7jneq68lc4xhecvaa9aq8mzqhc',
+];
+
+export const PRIMARY_RUNNING_LOTTERY = FREEDOM_LIST[0];

config/lottery.ts

@@ -11,7 +11,6 @@ export function useCwLottoState(contractAddress: string) {
     chain: chainInfo,
     getCosmWasmClient,
   } = useChain(chainName);
-
   const [queryClient, setQueryClient] = useState<CwLottoQueryClient | null>(null);
 
   useEffect(() => {
@@ -28,10 +27,7 @@ export function useCwLottoState(contractAddress: string) {
 
   useEffect(() => {
     if (queryClient && address) {
-      queryClient.lotteryState().then((lotteryStateResp => {
-        let y = lotteryStateResp.lotto_state;
-        setState(y);
-      }))
+      queryClient.lotteryState().then(lotteryStateResp => setState(lotteryStateResp.lotto_state))
     }
   }, [queryClient, address]);