search

realm-of-ra / mancala

https://meowing-anteater-cee.notion.site/Mancala-Game-MVP-7521e2f2e5294575b33b17601afde810
MIT License
9 stars 23 forks source link

implementation of logic for a user duels #105

Closed supreme2580 closed 5 days ago

supreme2580 commented 1 week ago

This is the user duels screen

image

Data needs to be fetched from our torii endpoint (using apollo which we've already configured) and be used to populate the fields.

The image and name comes from the starknetid data of the wallet address, if a starknet name does not exist you can use the truncated version of the wallet address, we already have a function to truncate a wallet address it is called truncateString, while it is loading you can use a skeleton instead of an empty/broken field, you can get the date of the duel by also querying the same torii endpoint transactions field.

Our torii endpoint: https://api.cartridge.gg/x/mancala/torii/graphql

linear[bot] commented 1 week ago

MAN-22 Implementation of logic for a user duels

EjembiEmmanuel commented 1 week ago

@supreme2580 I'd love to work on this. I'm an experienced frontend developer with several contributions on OnlyDust. I can get it done in 3-4 days. Please use this link https://app.onlydust.com/u/EjembiEmmanuel to view my OnlyDust profile.

Gift-Naomi commented 1 week ago

@supreme2580 Can you please assign this issue to me,I’m a frontend developer.

EmmanuelAR commented 1 week ago

Hey @supreme2580 can I work on this? I will create the page and fetch the info using that endpoint, do u have telegram to ask questions ? Let me know 😃

Steps:

  1. Set Up Apollo Client: Ensure Apollo Client is configured in your project.
  2. Define the GraphQL Query: Create a GraphQL query to fetch the necessary data from the Torii endpoint, including image, name (or truncated wallet address), and duel date.
  3. Use Apollo Client to Fetch Data: Use the useQuery hook from Apollo Client in your component to fetch the data. Display a loader (e.g., react-loading-skeleton) while the data is loading.
  4. Process and Display Data: Once the data is loaded, process the response to get the image, name or truncated wallet address, and duel date. Display the data in your component, formatting the date and handling cases where StarknetID name is not available.
  5. Create a Skeleton Component: Use a skeleton loader component to show a placeholder while data is being fetched.
  6. Integrate and Style: Integrate the duel component into your main application. Apply basic styling to ensure proper display of the data.
supreme2580 commented 1 week ago

Hi guys you can reach out to us on telegram for more information about any issue you might be facing, the ideal timeline is 2 days for an update of how the issue is going.

https://t.me/+0UKU3P3Eh_s2NTRh

kelvido commented 1 week ago

Hi guys, I would love to work on this too