feat: connect Expeditions modal to the expeditions api #1433

adamazad · 2022-09-06T11:19:33Z

Summary

Connects the Expeditions modal to the API hosted at https://api.swapr.site/v1.0/documentation

To Test

Testing this feature requires on-chain transactions. In order to claim weekly fragments. User has to deposit or stake $50 or more worth of liquidity on any of the three chains Swapr core supports: Mainnet, Arbitrum and Gnosis Chain.

fix(expeditions-context): add missing setRewards

…button loading feature(expeditions card): add claimed styles chore(expeditions): fix typo feature(expeditions): extract logic for button text

netlify · 2022-09-06T11:19:38Z

❌ Deploy Preview for swapr failed.

Name	Link
🔨 Latest commit	`fd10318`
🔍 Latest deploy log	https://app.netlify.com/sites/swapr/deploys/639fac26408e72000909c45f

adamazad · 2022-09-06T11:20:15Z

.env.development.local

+GENERATE_SOURCEMAP=false
+REACT_APP_SWAPR_API_BASE_URL=http://localhost:4000


This might mess up Netlify deployment tho.

…-the-expeditions-api

KeenanLukeOM · 2022-09-13T18:19:10Z

Doing some testing, here are some findings and suggested changes. All of the below were tested on Gnosis Chain:

I deposited roughly $200 of GNO/DXD liquidity, which didn't cause the "Provide liquidity" task to complete. Upon staking that balance, the "Stake liquidity" task was completed. Currently unsure what the cause may have been.

Depositing liq: https://gnosisscan.io/tx/0x84a9483570a1a028be907252242dad386e80c532563a06acbf64ef47853a05a4
Staking liq in campaign: https://gnosisscan.io/tx/0x11e58a7bf5a4cc1ccc6d083b73f15fdb97fd3f9e307719b113fea63dce5ddc51

Flow for completing a task is exceptional. Looks great. Any way we can implicate a timer until the next weekly tasks unlock? EG: CLAIMED -- NEW TASK IN 2d 4h

I've adjusted the design for the switch between Action and Rewards to keep the current fragment balance sticky. This can be found in the design working doc, here: https://www.figma.com/file/R1ibNl3sv1KoQ2BTO7qDBC/Keenan-Working-Sheet?node-id=1672%3A5180

Could we add a dynamic element to the Expeditions icon for when a task (or reward?) is claimable? I interpret this as a glow that fades in and out over a 2-second loop, but leave the decision up to @0xVenky.

Besides the above, functionally this seems sound. Great stuff! The next step is Rewards and how to test the claiming process of some dummy NFT's I'd reckon. Speak on a call soon!

0xVance · 2022-09-15T00:45:54Z

@KeenanLukeOM

Flow for completing a task is exceptional. Looks great. Any way we can implicate a timer until the next weekly tasks unlock? EG: CLAIMED -- NEW TASK IN 2d 4h

So for each completed task user would see a timer on the button showing the same countdown. Maybe instead, we can show the number of current week + single timer until week ends? For example it would be below 'Learn more' sign It would also suggest when new tasks will be available.

Could we add a dynamic element to the Expeditions icon for when a task (or reward?) is claimable? I interpret this as a glow that fades in and out over a 2-second loop, but leave the decision up to @0xVenky.

Something like this?

Screencast.from.15-09-22.01.32.40.webm

KeenanLukeOM · 2022-09-15T01:08:33Z

@0xVance

So for each completed task user would see a timer on the button showing the same countdown. Maybe instead, we can show the number of current week + single timer until week ends? For example it would be below 'Learn more' sign It would also suggest when new tasks will be available.

My interpretation is that showing the time until the specific action is available again scales better, since we have been discussing a daily campaign, event-specific campaigns, etc. I defer to you folks on the team, but I would personally be for a way of indicating the time until the next claim directly in or around that task.

Something like this?

This is exactly what I had envisioned! Any thoughts from your end? Chatted with @zamli about how this could be visualized so defer a decision to him.

0xVance · 2022-09-16T00:37:50Z

My interpretation is that showing the time until the specific action is available again scales better, since we have been discussing a daily campaign, event-specific campaigns, etc. I defer to you folks on the team, but I would personally be for a way of indicating the time until the next claim directly in or around that task.

Fair enough, I had only weekly challenges in mind and forgot about daily and other possible tasks.

This is exactly what I had envisioned! Any thoughts from your end? Chatted with @zamli about how this could be visualized so defer a decision to him.

Personally I love it, it could stay like this all the time 😎

…-the-expeditions-api

berteotti

This looks great, good work Adam. Just left some comments

berteotti · 2022-11-16T11:03:14Z

package.json

@@ -16,11 +16,14 @@
    "cypress:run": "cross-env cypress run -r mochawesome -s 'tests/cypress/integration/smoke/*'",
    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
    "synpress:ct": "cross-env start-server-and-test 'react-app-rewired start' http-get://localhost:3000 'yarn synpress:run $TEST_PARAMS'",
+    "codegen": "yarn codegen:socket && yarn codegen:expeditions && yarn codegen:graphql",


This looks organized

berteotti · 2022-11-16T12:05:58Z

src/modules/expeditions/components/ExpeditionsCards/ExpeditionsTags.tsx

+export function capitalize(string: string) {
+  return string[0].toUpperCase() + string.slice(1)
+}


This can be done with CSS only. text-transform: capitalize does the trick

berteotti · 2022-11-16T12:12:13Z

src/modules/expeditions/components/ExpeditionsModal/ExpeditionsModal.tsx

+              <Row>
+                <TYPE.White fontSize="12px" lineHeight="150%" textAlign={'center'}>
+                  Expeditions are missions you can complete on Swapr to earn “Star Fragments”. These can be redeemed for
+                  special NFT's and various other rewards. <StyledExternalLink href="#">Learn More</StyledExternalLink>


We can't forget to set this link.

berteotti · 2022-11-16T12:17:06Z

...s/expeditions/components/ExpeditionsModal/partials/DailyVisitTaskCard/DailyVisitTaskCard.tsx

+  const claim = async () => {
+    if (isClaimed || isClaiming) {
+      return
+    }
+
+    setIsClaiming(true)
+    try {
+      const address = await provider.getSigner().getAddress()
+      const signature = await provider.getSigner().signMessage(ClaimRequestTypeEnum.DailyVisit)
+      await ExpeditionsAPI.postExpeditionsClaim({
+        body: {
+          address,
+          signature,
+          type: ClaimRequestTypeEnum.DailyVisit,
+        },
+      })
+
+      const { claimedFragments, tasks } = await ExpeditionsAPI.getExpeditionsProgress({
+        address,
+      })
+
+      // Update local state
+      setTasks(tasks)
+      setClaimedFragments(claimedFragments)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsClaiming(false)
+    }
+  }


This logic seems very similar in all 3 components. Maybe we can set a hook with this logic that receives a different ClaimRequestTypeEnum type

berteotti · 2022-11-16T12:19:18Z

src/modules/expeditions/components/ExpeditionsTabBar/ExpeditionsTabBar.tsx

+        }}
+        className={activeTab === ExpeditionsTabs.REWARDS ? 'active' : ''}
+      >
+        {<Badge badgeTheme={claimableRewards ? 'green' : 'orange'}>{claimableRewards}</Badge>}


Are curly braces required here?

berteotti · 2022-11-16T12:20:21Z

src/modules/expeditions/index.tsx

@@ -0,0 +1 @@
+export {}


We should export something here

berteotti · 2022-11-16T12:21:35Z

src/modules/expeditions/utils/index.ts

+  if (isClaiming) {
+    buttonText = 'Claiming...'
+  } else if (isClaimed) {
+    buttonText = 'Claimed'


Should we present the claimed fragments too?

Diogomartf · 2022-11-16T16:28:19Z

src/modules/expeditions/components/ExpeditionsCards/ExpeditionsTags.tsx

+)
+
+export const StatusTag = ({ status }: { status: StatusTags }) => {
+  if (status === 'loading') {


Not sure if is an overkill but maybe "loading" should be a constant.

const LOADING = "loading"

Suggested change

if (status === 'loading') {

if (status === LOADING) {

Diogomartf · 2022-11-16T16:29:57Z

src/modules/expeditions/components/ExpeditionsCards/ExpeditionsTaskCard.tsx

+  duration?: 'Weekly' | 'Daily'
+  title: string
+  description: string
+  buttonText: React.ReactNode


It's odd that buttonText is a ReactNode, shouldn't it be a string?

Diogomartf · 2022-11-16T16:35:29Z

src/modules/expeditions/components/ExpeditionsModal/ExpeditionsModal.tsx

+import { ContentWrapper, ExpeditionsLogo } from './ExpeditionsModal.styled'
+import { ExpeditionsRewards } from './ExpeditionsRewards'
+import { ExpeditionsTasks } from './ExpeditionsTasks'
+export interface ExpeditionsModalProps {


would add a new line here.

Suggested change

export interface ExpeditionsModalProps {

export interface ExpeditionsModalProps {

Diogomartf · 2022-11-16T16:38:00Z

src/modules/expeditions/components/ExpeditionsModal/ExpeditionsRewards.tsx

+const rewards: RewardCardProps[] = ['common', 'uncommon', 'rare', 'epic', 'legendary', 'mythic'].map(
+  (rarity, index) => ({
+    buttonText: index === 0 ? 'Expired' : index === 1 ? 'Claimed' : 'Claim',
+    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor, ante nec consectetur vulputate, eros nisi placerat neque, ut volutpat diam tellus ut sem.`,


We can't forget to update this description.

Diogomartf · 2022-11-16T16:41:14Z

src/modules/expeditions/components/ExpeditionsModal/ExpeditionsRewards.tsx

+export const ExpeditionsRewards = () => {
+  return (
+    <>
+      {rewards.map((props, index) => (
+        <RewardCard key={index} {...props} />
+      ))}
+    </>
+  )
+}


In an arrow function we can remove the explicit return.
It's just a suggestion but I think it is cleaner.

Suggested change

export const ExpeditionsRewards = () => {

return (

<>

{rewards.map((props, index) => (

<RewardCard key={index} {...props} />

))}

</>

)

}

export const ExpeditionsRewards = () =>

<>

{rewards.map((props, index) => (

<RewardCard key={index} {...props} />

))}

</>

…-the-expeditions-api

* add daily swap task

adamazad and others added 11 commits August 31, 2022 14:33

feat(#1368): add context and constants

29adc59

feat(#1368): add entry point (app) and API

596a89f

feat(#1368): add Expeditions Task Cards

ebedc47

feat(#1368): add correct headers and payload

e2fa614

feat(#1368): add new Expeditions module

aa89c58

feat(expeditions-api): use swagger generated types

43c2ea7

chore(expeditions-api): update types

4f9b7ce

feature(expeditions-modal): refresh data on every modal open

11cdff1

fix(expeditions-context): add missing setRewards

feature(expeditions): add skeleton to status on loading & spinner on …

096b1f1

…button loading feature(expeditions card): add claimed styles chore(expeditions): fix typo feature(expeditions): extract logic for button text

fix(graphql-types): use any for incompatible types

447da16

feat(#1368): add local overrides

0a20cac

adamazad linked an issue Sep 6, 2022 that may be closed by this pull request

Connect Expeditions modal to the Expeditions API #1368

Open

adamazad commented Sep 6, 2022

View reviewed changes

Merge branch 'develop' into feature/1368-connect-expeditions-modal-to…

1c22cff

…-the-expeditions-api

0xVance added 9 commits September 25, 2022 14:49

feature(expeditions): rework modal header

7a2a021

feat(expeditions): use hook to get context

5cb9ea6

chore(expeditions): move up shared styles

b03839c

feature(expeditions): tabs & fragments bar

ce85f18

feature(expeditions): add tags & rewards card

543db1d

Merge branch 'develop' into feature/1368-connect-expeditions-modal-to…

99fb4c7

…-the-expeditions-api

fix(expeditions): fix keyframes

0b9f3d7

fix(scripts): add missing codegen on build

776b657

fix(ci): add missing codegen

94120fa

github-actions bot temporarily deployed to feature-1368-connect-expeditions-modal-to-the-expeditions-api September 25, 2022 21:59 Destroyed

fix(expeditions): fix glow animation

ea355a4

feature(expeditions): swapr style scrollbar & responsive reward card

054be63

github-actions bot temporarily deployed to feature-1368-connect-expeditions-modal-to-the-expeditions-api October 1, 2022 14:52 Destroyed

0xVance added 3 commits November 7, 2022 23:43

Add modified API

03f8740

feat(expeditions): add daily visit

cfae094

chore(expeditions): unify claiming

7ae4b71

github-actions bot temporarily deployed to feature-1368-connect-expeditions-modal-to-the-expeditions-api November 8, 2022 00:32 Destroyed

berteotti reviewed Nov 16, 2022

View reviewed changes

Diogomartf reviewed Nov 16, 2022

View reviewed changes

0xVance added 4 commits November 16, 2022 20:07

Merge branch 'develop' into feature/1368-connect-expeditions-modal-to…

38b3ee2

…-the-expeditions-api

Merge branch 'develop' into feature/1368-connect-expeditions-modal-to…

0e88b09

…-the-expeditions-api

update swagger docs

d6ff26e

fetch rewards form backend

4961f4a

github-actions bot deployed to feature-1368-connect-expeditions-modal-to-the-expeditions-api December 10, 2022 04:15 View deployment

0xVance added 2 commits December 11, 2022 23:12

* move from context to redux

3a4d95e

* add daily swap task

added claiming rewards

fd10318

adamazad force-pushed the develop branch from 161ac54 to c2dbed0 Compare January 5, 2023 14:28

berteotti force-pushed the develop branch 2 times, most recently from fb69230 to 0c5053c Compare August 26, 2023 10:19

ElRodrigote force-pushed the develop branch from fef6c8d to 148f47b Compare October 2, 2023 19:04

berteotti force-pushed the develop branch from fd89b66 to 0eeccc0 Compare October 11, 2023 12:45

berteotti force-pushed the develop branch 2 times, most recently from ff47650 to b3b3815 Compare November 7, 2023 14:07

Diogomartf force-pushed the develop branch from 6aed2f9 to 9080371 Compare January 16, 2024 21:49

ElRodrigote force-pushed the develop branch from 1827610 to 8b6977e Compare February 2, 2024 14:33

berteotti force-pushed the develop branch 2 times, most recently from 91e4f23 to af06da1 Compare March 7, 2024 11:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: connect Expeditions modal to the expeditions api #1433

feat: connect Expeditions modal to the expeditions api #1433

adamazad commented Sep 6, 2022

netlify bot commented Sep 6, 2022 •

edited

Loading

adamazad Sep 6, 2022

KeenanLukeOM commented Sep 13, 2022

0xVance commented Sep 15, 2022

KeenanLukeOM commented Sep 15, 2022

0xVance commented Sep 16, 2022

berteotti left a comment

berteotti Nov 16, 2022

berteotti Nov 16, 2022

berteotti Nov 16, 2022

berteotti Nov 16, 2022

berteotti Nov 16, 2022

berteotti Nov 16, 2022

berteotti Nov 16, 2022

Diogomartf Nov 16, 2022

Diogomartf Nov 16, 2022 •

edited

Loading

Diogomartf Nov 16, 2022

Diogomartf Nov 16, 2022

Diogomartf Nov 16, 2022 •

edited

Loading

		GENERATE_SOURCEMAP=false
		REACT_APP_SWAPR_API_BASE_URL=http://localhost:4000

	export interface ExpeditionsModalProps {

	export interface ExpeditionsModalProps {

feat: connect Expeditions modal to the expeditions api #1433

Are you sure you want to change the base?

feat: connect Expeditions modal to the expeditions api #1433

Conversation

adamazad commented Sep 6, 2022

Summary

To Test

netlify bot commented Sep 6, 2022 • edited Loading

❌ Deploy Preview for swapr failed.

Choose a reason for hiding this comment

KeenanLukeOM commented Sep 13, 2022

0xVance commented Sep 15, 2022

KeenanLukeOM commented Sep 15, 2022

0xVance commented Sep 16, 2022

berteotti left a 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

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

Diogomartf Nov 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Diogomartf Nov 16, 2022 • edited Loading

Choose a reason for hiding this comment

netlify bot commented Sep 6, 2022 •

edited

Loading

Diogomartf Nov 16, 2022 •

edited

Loading

Diogomartf Nov 16, 2022 •

edited

Loading