feat(rakki): UI enhancement #1434

WaDadidou · 2024-12-03T03:48:49Z

This is an enhancement of the UI of this: https://app.teritori.com/rakki
I splitted RakkiScreen in many components and made UI changes:

Show the user's tickets count
Add "Connect Wallet" in the Buy Tickets modal
I would like to add "Deposit funds" in the Buy Tickets modal, but there is a bug, so it's just commented
Add missing UI elements
Fix some styles
Split RakkiScreen.tsx (Just putted components in unitary files)

Check the before: https://app.teritori.com/rakki
And the after: https://deploy-preview-1434--teritori-dapp.netlify.app/rakki

Figma: https://www.figma.com/design/WLEMAQXohIwBEPL5lsRrvK/Teritori---dApp?node-id=21858-204224&node-type=canvas&t=nEn47C5PtwMI9RWy-0

Highlights:

Connect Wallet button at the end of the flow (If user not connected)

This is now clickable and opens the BuyTicketsModal

In the modal, I put japanese text on the image

"Your tickets" is your tickets

"Deposit funds" if not enough funds

New contract instantiated version Add missing UI elements Fix some styles

netlify · 2024-12-03T03:49:10Z

✅ Deploy Preview for gno-dapp ready!

Name	Link
🔨 Latest commit	`f6f6349`
🔍 Latest deploy log	https://app.netlify.com/sites/gno-dapp/deploys/677255f01fda1600086c534b
😎 Deploy Preview	https://deploy-preview-1434--gno-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-12-03T03:49:16Z

✅ Deploy Preview for teritori-dapp ready!

Name	Link
🔨 Latest commit	`f6f6349`
🔍 Latest deploy log	https://app.netlify.com/sites/teritori-dapp/deploys/677255f0c9d70a00083ec744
😎 Deploy Preview	https://deploy-preview-1434--teritori-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

clegirar

The bug in the Buy Tickets modal is out of scope of this PR or you want to spend more time in here to fix it ?

I don't really like this kind of big files with 600 lines, it's complicated to read, especially when it's the first time you read it ^^ But there is some components that are split inside so it's okay, and it's out of scope i understand that.

Else the design fit with the figma, but i don't have tori to test the feature on testnet, so i can't buy tickets to test the behaviour.

packages/screens/Rakki/components/BuyTicketsButton.tsx

WaDadidou · 2024-12-06T23:04:14Z

The bug in the Buy Tickets modal is out of scope of this PR or you want to spend more time in here to fix it ?

I don't really like this kind of big files with 600 lines, it's complicated to read, especially when it's the first time you read it ^^ But there is some components that are split inside so it's okay, and it's out of scope i understand that.

I splitted :)

clegirar

Found the code better to read 👍 I don't know a lot this feature so i can just give my opinion on pure code/archi etc.
I tested to buy tickets, have i to test specific thing ? I tested to buy 1, and 20 tickets and it works

WaDadidou · 2024-12-10T17:30:26Z

Found the code better to read 👍 I don't know a lot this feature so i can just give my opinion on pure code/archi etc. I tested to buy tickets, have i to test specific thing ? I tested to buy 1, and 20 tickets and it works

The feature's UX is pretty simple, there is nothing more you can test

# Conflicts: # networks.json # packages/networks/teritori-testnet/index.ts # packages/screens/Rakki/RakkiScreen.tsx

packages/hooks/rakki/useRakkiTicketsByUser.ts

n0izn0iz · 2024-12-17T08:00:46Z

packages/screens/Rakki/RakkiScreen.tsx

-import { RakkiClient } from "@/contracts-clients/rakki";
-import { getKeplrSigningCosmWasmClient } from "@/networks/signer";
-
-// TODO: replace all placeholders text with real values


this TODO is not addressed, we should address it or not remove it

2f5bf64#diff-8e2c5b8031f032da60995a2ec1bed47f31b3db49f0ce3de39821c1d7f26382cfR21

What are these placeholders ? I thought it was good, my bad

at the bottom, there is hardcoded $10k and stuff like that

hthieu1110 · 2024-12-28T15:28:21Z

assets/logos/rakki-ticket.png

Should we reduce size of this image ?

Yes, I used a PNG version because the SVG exported from Figma is glitched.
I asked help to Leonid

hthieu1110 · 2024-12-28T15:29:27Z

packages/hooks/rakki/useRakkiTicketsByUser.ts

+  const { data: ticketsCount = null, ...other } = useQuery(
+    ["rakkiTicketsCountByUser", userId],
+    async () => {
+      if (!userId) {


I think we can use useQuery option: enabled: !!userId

Yes!
a1ada4e

hthieu1110 · 2024-12-28T15:31:17Z

packages/screens/Rakki/components/BuyTickets/BuyTicketsButton.tsx

+  const [isButtonHovered, setButtonHovered] = useState(false);
+  const [isModalVisible, setModalVisible] = useState(false);
+  const remainingTickets = info.config.max_tickets - info.current_tickets_count;
+  const [ticketAmount, setTicketAmount] = useState("1");


Why this "amount" is in string format and we have to convert remainingTickets to string :o

I forgot to remove this piece of code from here. See: #1434 (comment)

a1ada4e

hthieu1110 · 2024-12-28T15:36:00Z

packages/screens/Rakki/components/BuyTickets/BuyTicketsModal.tsx

+}> = ({ visible, setModalVisible, info, networkId }) => {
+  const selectedWallet = useSelectedWallet();
+  const remainingTickets = info.config.max_tickets - info.current_tickets_count;
+  const [ticketAmount, setTicketAmount] = useState("1");


IMHO, if possible, we should use tickerAmount as number format , it's not a "big" number so we should process its value from the input to have the number format instead of string which is quite confusing

Sorry for adding these changes..
I didn't modify that is this PR, just splitted code from RakkiScreen.tsx.
This piece of code is the same as on origin/main: https://github.com/TERITORI/teritori-dapp/blob/main/packages/screens/Rakki/RakkiScreen.tsx#L119

Same answer for this comment: #1434 (comment)

MikaelVallenet · 2024-12-28T17:50:45Z

packages/screens/Rakki/components/RakkiLogo.tsx

+          fontWeight: "600",
+        }}
+      >
+        RAKKi


should it be RAKKI ? or Rakki ?

It's RAKKi :)
Same as https://app.teritori.com/rakki

hthieu1110

LGTM

n0izn0iz

LGTM

feat(rakki): Show user's ticket counts

0f582be

New contract instantiated version Add missing UI elements Fix some styles

WaDadidou added enhancement New feature or request UX/UI labels Dec 3, 2024

WaDadidou self-assigned this Dec 3, 2024

WaDadidou requested review from n0izn0iz and clegirar December 3, 2024 03:50

chore: make generate

5a652e0

clegirar reviewed Dec 3, 2024

View reviewed changes

n0izn0iz and others added 2 commits December 6, 2024 10:37

Merge branch 'main' into feat-rakki-ui

eb33b36

chore(rakki): Split components

6fc2abc

WaDadidou requested a review from clegirar December 6, 2024 19:52

n0izn0iz requested changes Dec 6, 2024

View reviewed changes

packages/screens/Rakki/components/BuyTicketsButton.tsx Outdated Show resolved Hide resolved

WaDadidou changed the title ~~feat(rakki): Show user's ticket counts~~ feat(rakki): UI enhancement Dec 6, 2024

WaDadidou added 2 commits December 6, 2024 16:08

chore(rakki): Use better svg

d17f0ce

fix(rakki): Better UI

6d49861

fix(rakki): remove unset prop usage

1d38b5b

WaDadidou requested a review from n0izn0iz December 7, 2024 19:12

fix(rakki): Remove Deposit flow

f4f6ab2

clegirar previously approved these changes Dec 9, 2024

View reviewed changes

WaDadidou added 2 commits December 16, 2024 22:11

Merge branch 'main' into feat-rakki-ui

58be73a

# Conflicts: # networks.json # packages/networks/teritori-testnet/index.ts # packages/screens/Rakki/RakkiScreen.tsx

fix(rakki): After merge

24ffd31

WaDadidou dismissed clegirar’s stale review via 24ffd31 December 17, 2024 03:20

n0izn0iz requested changes Dec 17, 2024

View reviewed changes

WaDadidou added 2 commits December 17, 2024 21:30

fix(rakki): Use userId in hook, restore TODO

2f5bf64

feat(rakki): Replace placeholders with contract values

70ff903

WaDadidou force-pushed the feat-rakki-ui branch from ad2ea23 to 70ff903 Compare December 20, 2024 21:20

WaDadidou and others added 2 commits December 20, 2024 16:21

Merge branch 'main' into feat-rakki-ui

a6f190e

fix(rakki): replace fee percent placeholder

a7b0f81

WaDadidou requested review from n0izn0iz and clegirar December 23, 2024 20:31

hthieu1110 reviewed Dec 28, 2024

View reviewed changes

MikaelVallenet reviewed Dec 28, 2024

View reviewed changes

MikaelVallenet previously approved these changes Dec 28, 2024

View reviewed changes

fix(rakki): Use enabled in useQuery, remove unused code

a1ada4e

WaDadidou dismissed MikaelVallenet’s stale review via a1ada4e December 28, 2024 18:51

Merge branch 'main' into feat-rakki-ui

f6f6349

hthieu1110 approved these changes Dec 30, 2024

View reviewed changes

WaDadidou requested a review from MikaelVallenet December 30, 2024 17:35

n0izn0iz approved these changes Dec 30, 2024

View reviewed changes

WaDadidou added this pull request to the merge queue Dec 30, 2024

Merged via the queue into main with commit b5e1d1e Dec 30, 2024
23 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(rakki): UI enhancement #1434

feat(rakki): UI enhancement #1434

WaDadidou commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

clegirar left a comment •

edited

Loading

WaDadidou commented Dec 6, 2024

clegirar left a comment

WaDadidou commented Dec 10, 2024

n0izn0iz Dec 17, 2024

WaDadidou Dec 18, 2024

n0izn0iz Dec 18, 2024

WaDadidou Dec 20, 2024 •

edited

Loading

hthieu1110 Dec 28, 2024

WaDadidou Dec 28, 2024

hthieu1110 Dec 28, 2024

WaDadidou Dec 28, 2024

hthieu1110 Dec 28, 2024 •

edited

Loading

WaDadidou Dec 28, 2024 •

edited

Loading

hthieu1110 Dec 28, 2024

WaDadidou Dec 28, 2024

WaDadidou Dec 28, 2024

MikaelVallenet Dec 28, 2024

WaDadidou Dec 28, 2024 •

edited

Loading

hthieu1110 left a comment

n0izn0iz left a comment

feat(rakki): UI enhancement #1434

feat(rakki): UI enhancement #1434

Conversation

WaDadidou commented Dec 3, 2024 • edited Loading

Highlights:

Connect Wallet button at the end of the flow (If user not connected)

This is now clickable and opens the BuyTicketsModal

In the modal, I put japanese text on the image

"Your tickets" is your tickets

"Deposit funds" if not enough funds

netlify bot commented Dec 3, 2024 • edited Loading

✅ Deploy Preview for gno-dapp ready!

netlify bot commented Dec 3, 2024 • edited Loading

✅ Deploy Preview for teritori-dapp ready!

clegirar left a comment • edited Loading

Choose a reason for hiding this comment

WaDadidou commented Dec 6, 2024

clegirar left a comment

Choose a reason for hiding this comment

WaDadidou commented Dec 10, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

WaDadidou Dec 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hthieu1110 Dec 28, 2024 • edited Loading

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024 • edited Loading

Choose a reason for hiding this comment

hthieu1110 left a comment

Choose a reason for hiding this comment

n0izn0iz left a comment

Choose a reason for hiding this comment

WaDadidou commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

netlify bot commented Dec 3, 2024 •

edited

Loading

clegirar left a comment •

edited

Loading

WaDadidou Dec 20, 2024 •

edited

Loading

hthieu1110 Dec 28, 2024 •

edited

Loading

WaDadidou Dec 28, 2024 •

edited

Loading

WaDadidou Dec 28, 2024 •

edited

Loading