feat: offer list ordering (#95)

* feature: initial Profiles query. * wip: offers query. * chore: new offers_by_owner offer query api * fix: removed old PROFILE storage. * chore: added OfferResponse. * chore: added small comment. * wip: fixing stuff. * fix: set tradeinfo to use the OfferResponse * fix: query profile by addr * wip: fix offers and trades layout * fix: list my offers component * fix: trade detail * fix: list my trades * fix: list disputes * fix: order offer by trades count or price rate * chore: change client to order offers by trades count or price rate * change ChainClient.dev to ChainClient.kujira Co-authored-by: samb-local <[email protected]>
Local-Money · Oct 14, 2022 · 2c2cfdd · 2c2cfdd
1 parent 902d9f2
commit 2c2cfdd
Show file tree

Hide file tree

Showing 27 changed files with 444 additions and 385 deletions.
diff --git a/app/src/network/Chain.ts b/app/src/network/Chain.ts
@@ -5,8 +5,8 @@ import type {
   Arbitrator,
   Denom,
   FetchOffersArgs,
-  GetOffer,
   NewTrade,
+  OfferResponse,
   PatchOffer,
   PostOffer,
   Profile,
@@ -24,11 +24,11 @@ export interface Chain {
 
   fetchProfile(): Promise<Profile>
 
-  fetchOffer(offerId: string): Promise<GetOffer>
+  fetchOffer(offerId: string): Promise<OfferResponse>
 
-  fetchOffers(args: FetchOffersArgs): Promise<GetOffer[]>
+  fetchOffers(args: FetchOffersArgs): Promise<OfferResponse[]>
 
-  fetchMyOffers(): Promise<GetOffer[]>
+  fetchMyOffers(): Promise<OfferResponse[]>
 
   createOffer(postOffer: PostOffer): Promise<void>
 

diff --git a/app/src/network/cosmos/CosmosChain.ts b/app/src/network/cosmos/CosmosChain.ts
@@ -11,9 +11,9 @@ import type {
   Arbitrator,
   Denom,
   FetchOffersArgs,
-  GetOffer,
   HubConfig,
   NewTrade,
+  OfferResponse,
   PatchOffer,
   PostOffer,
   Profile,
@@ -94,6 +94,7 @@ export class CosmosChain implements Chain {
         )
         console.log('Create offer result >> ', result)
       } catch (e) {
+        console.error(e)
         throw new DefaultError()
       }
     } else {
@@ -126,12 +127,11 @@ export class CosmosChain implements Chain {
     if (this.cwClient instanceof SigningCosmWasmClient) {
       try {
         return (await this.cwClient.queryContractSmart(this.hubInfo.hubConfig.offer_addr, {
-          offers: {
+          offers_by_owner: {
             owner: this.getWalletAddress(),
             limit: 10,
-            order: 'asc',
           },
-        })) as GetOffer[]
+        })) as OfferResponse[]
       } catch (e) {
         throw new DefaultError()
       }
@@ -140,7 +140,7 @@ export class CosmosChain implements Chain {
     }
   }
 
-  async fetchOffer(offerId: string): Promise<GetOffer> {
+  async fetchOffer(offerId: string): Promise<OfferResponse> {
     // TODO: fix init
     if (!this.cwClient) {
       await this.init()
@@ -150,7 +150,7 @@ export class CosmosChain implements Chain {
       const response = (await this.cwClient!.queryContractSmart(
         this.hubInfo.hubConfig.offer_addr,
         queryMsg
-      )) as GetOffer
+      )) as OfferResponse
       console.log('response >>> ', response)
       return response
     } catch (e) {
@@ -172,13 +172,13 @@ export class CosmosChain implements Chain {
           // min: "",
           // max: "",
           limit: 10,
-          order: 'asc',
+          order: args.order,
         },
       }
       const response = (await this.cwClient!.queryContractSmart(
         this.hubInfo.hubConfig.offer_addr,
         queryMsg
-      )) as GetOffer[]
+      )) as OfferResponse[]
       console.log('response >>> ', response)
       return response
     } catch (e) {

diff --git a/app/src/stores/client.ts b/app/src/stores/client.ts
@@ -7,8 +7,8 @@ import type {
   Arbitrator,
   Denom,
   FetchOffersArgs,
-  GetOffer,
   NewTrade,
+  OfferResponse,
   PatchOffer,
   PostOffer,
   Profile,
@@ -23,13 +23,13 @@ export const useClientStore = defineStore({
   id: 'client',
   state: () => {
     return {
-      chainClient: <ChainClient>ChainClient.mock, // TODO call setClient in the App.vue setup function to properly init a chain adapter
+      chainClient: <ChainClient>ChainClient.kujira, // TODO call setClient in the App.vue setup function to properly init a chain adapter
       client: chainFactory(ChainClient.kujira),
       userWallet: <UserWallet>{ isConnected: false, address: 'undefined' },
       secrets: useLocalStorage('secrets', new Map<string, Secrets>()),
       profile: <Profile>{},
-      offers: <ListResult<GetOffer>>ListResult.loading(),
-      myOffers: <ListResult<GetOffer>>ListResult.loading(),
+      offers: <ListResult<OfferResponse>>ListResult.loading(),
+      myOffers: <ListResult<OfferResponse>>ListResult.loading(),
       trades: <ListResult<TradeInfo>>ListResult.loading(),
       arbitrators: <ListResult<Arbitrator>>ListResult.loading(),
       openDisputes: <ListResult<TradeInfo>>ListResult.loading(),

diff --git a/app/src/types/components.interface.ts b/app/src/types/components.interface.ts
@@ -17,13 +17,6 @@ export class LoadingState {
   }
 }
 
-export interface Profile {
-  addr: string
-  trade_count: number
-  contact?: string
-  encryption_key?: string
-}
-
 export enum OfferType {
   buy = 'buy',
   sell = 'sell',
@@ -34,9 +27,22 @@ export interface OfferTypeLabel {
   [OfferType.sell]: string
 }
 
+export interface OfferResponse {
+  offer: GetOffer
+  profile: Profile
+}
+
+export interface Profile {
+  addr: string
+  created_at: Date
+  trades_count: number
+  last_trade: Date
+  contact?: string
+  encryption_key?: string
+}
+
 export interface GetOffer {
   id: string
-  owner_encryption_key: string
   state: OfferState
   rate: string
   min_amount: string
@@ -46,7 +52,6 @@ export interface GetOffer {
   denom: Denom
   fiat_currency: FiatCurrency
   timestamp: number
-  last_traded_at: number
   trades_count: number
 }
 
@@ -87,6 +92,11 @@ export interface FetchOffersArgs {
   fiatCurrency: FiatCurrency
   offerType: OfferType
   denom: Denom
+  order: OfferOrder
+}
+export enum OfferOrder {
+  trades_count = 'trades_count',
+  price_rate = 'price_rate',
 }
 
 export interface NewTrade {
@@ -144,7 +154,7 @@ export enum TradeState {
 
 export interface TradeInfo {
   trade: Trade
-  offer: GetOffer
+  offer: OfferResponse
   expired: boolean
 }
 

diff --git a/app/src/ui/components/arbitration/ListDisputes.vue b/app/src/ui/components/arbitration/ListDisputes.vue
@@ -58,13 +58,13 @@ watch(userWallet, async () => {
 
       <div v-for="dispute in closedDisputes" :key="dispute.trade.id" class="wrap-table-item">
         <div class="col-1">
-          <p>{{ dispute.offer.offer_type }}</p>
+          <p>{{ dispute.offer.offer.offer_type }}</p>
         </div>
         <div class="col-2">
           <p>?????</p>
         </div>
         <div class="col-3">
-          <p>{{ microDenomToDenom(dispute.offer.denom.native) }}</p>
+          <p>{{ microDenomToDenom(dispute.offer.offer.denom.native) }}</p>
         </div>
         <div class="col-4">
           <p>?????</p>

diff --git a/app/src/ui/components/arbitration/OpenDisputeItem.vue b/app/src/ui/components/arbitration/OpenDisputeItem.vue
@@ -6,7 +6,7 @@ import { microDenomToDenom } from '~/utils/denom'
 const props = defineProps<{ dispute: TradeInfo }>()
 
 const taker = computed(() => {
-  const maker = props.dispute.offer.owner
+  const maker = props.dispute.offer.offer.owner
   const buyer = props.dispute.trade.buyer
   const seller = props.dispute.trade.seller
   return [buyer, seller].filter((it) => it !== maker)[0]
@@ -37,7 +37,7 @@ const taker = computed(() => {
       <div class="dispute-status">
         <div class="wrap-peer">
           <p class="peer">Maker</p>
-          <p class="address">{{ formatAddress(props.dispute.offer.owner) }}</p>
+          <p class="address">{{ formatAddress(props.dispute.offer.offer.owner) }}</p>
         </div>
         <div class="wrap-offer-type">
           <div class="icon">
@@ -52,11 +52,11 @@ const taker = computed(() => {
               />
             </svg>
           </div>
-          <p v-if="props.dispute.offer.offer_type === 'buy'" class="offer-type">
-            buying <strong>{{ microDenomToDenom(dispute.offer.denom.native) }}</strong> from
+          <p v-if="props.dispute.offer.offer.offer_type === 'buy'" class="offer-type">
+            buying <strong>{{ microDenomToDenom(dispute.offer.offer.denom.native) }}</strong> from
           </p>
           <p v-else class="offer-type">
-            selling <strong>{{ microDenomToDenom(dispute.offer.denom.native) }}</strong> to
+            selling <strong>{{ microDenomToDenom(dispute.offer.offer.denom.native) }}</strong> to
           </p>
         </div>
         <div class="wrap-peer">
@@ -72,7 +72,7 @@ const taker = computed(() => {
       <div class="reward">
         <p class="label">Estimated rewards</p>
         <!-- TO-DO Get Trade Rate -->
-        <p class="rate">$??? {{ microDenomToDenom(dispute.offer.denom.native) }}</p>
+        <p class="rate">$??? {{ microDenomToDenom(dispute.offer.offer.denom.native) }}</p>
       </div>
       <router-link :to="`/trade/${dispute.trade.id}`">
         <button class="primary bg-gray300" type="button">view</button>

diff --git a/app/src/ui/components/myOffers/ListMyOffers.vue b/app/src/ui/components/myOffers/ListMyOffers.vue
@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { useClientStore } from '~/stores/client'
 import type { ListResult } from '~/stores/ListResult'
-import type { GetOffer } from '~/types/components.interface'
+import type { OfferResponse } from '~/types/components.interface'
 import { OfferState } from '~/types/components.interface'
 import ArchivedOfferItem from '~/ui/components/myOffers/ArchivedOfferItem.vue'
 import CollapsedMyOffer from '~/ui/components/myOffers/CollapsedMyOffer.vue'
@@ -12,19 +12,21 @@ import { checkValidOffer } from '~/utils/validations'
 
 const client = useClientStore()
 const { userWallet } = storeToRefs(client)
-const myOffersResult = computed<ListResult<GetOffer>>(() => client.myOffers)
+const myOffersResult = computed<ListResult<OfferResponse>>(() => client.myOffers)
 const page = reactive({
-  myOffers: [] as ExpandableItem<GetOffer>[],
-  archiveOffers: [] as GetOffer[],
+  myOffers: [] as ExpandableItem<OfferResponse>[],
+  archiveOffers: [] as OfferResponse[],
 })
 client.$subscribe((mutation, state) => {
   if (state.myOffers.isSuccess()) {
     page.myOffers = state.myOffers.data
-      .filter((offer) => checkValidOffer(offer) && offer.state !== OfferState.archived)
-      .flatMap((offer) => new ExpandableItem(offer))
+      .filter(
+        (offerResponse) => checkValidOffer(offerResponse.offer) && offerResponse.offer.state !== OfferState.archived
+      )
+      .flatMap((offerResponse) => new ExpandableItem(offerResponse))
 
     page.archiveOffers = state.myOffers.data.filter(
-      (offer) => checkValidOffer(offer) && offer.state === OfferState.archived
+      (offerResponse) => checkValidOffer(offerResponse.offer) && offerResponse.offer.state === OfferState.archived
     )
   }
 })
@@ -38,19 +40,19 @@ function hasArchivedOffers() {
   return page.archiveOffers.length > 0
 }
 
-function expandOfferItem(offer: ExpandableItem<GetOffer>) {
-  if (expandedMyOffer.value !== offer) {
+function expandOfferItem(offerItem: ExpandableItem<OfferResponse>) {
+  if (expandedMyOffer.value !== offerItem) {
     if (expandedMyOffer.value != null) {
       expandedMyOffer.value.isExpanded = false
     }
 
-    offer.isExpanded = true
-    expandedMyOffer.value = offer
+    offerItem.isExpanded = true
+    expandedMyOffer.value = offerItem
   }
 }
 
-function collapseOfferItem(offer: ExpandableItem<GetOffer>) {
-  offer.isExpanded = false
+function collapseOfferItem(offerItem: ExpandableItem<OfferResponse>) {
+  offerItem.isExpanded = false
   expandedMyOffer.value = null
 }
 
@@ -75,23 +77,27 @@ watch(userWallet, async () => {
         <!-- Offers for -->
         <ul>
           <li
-            v-for="offer in page.myOffers"
-            :key="offer.data.id"
+            v-for="offerItem in page.myOffers"
+            :key="offerItem.data.id"
             class="card"
-            :class="offer.isExpanded ? 'card-active' : ''"
+            :class="offerItem.isExpanded ? 'card-active' : ''"
           >
             <!-- Collapsed Offer -->
-            <CollapsedMyOffer v-if="!offer.isExpanded" :offer="offer.data" @select="expandOfferItem(offer)" />
+            <CollapsedMyOffer
+              v-if="!offerItem.isExpanded"
+              :offer="offerItem.data.offer"
+              @select="expandOfferItem(offerItem)"
+            />
             <!-- Expanded Offer Desktop -->
-            <ExpandedMyOffer v-else :offer="offer.data" @cancel="collapseOfferItem(offer)" />
+            <ExpandedMyOffer v-else :offer="offerItem.data.offer" @cancel="collapseOfferItem(offerItem.data.offer)" />
           </li>
         </ul>
       </section>
       <section v-else-if="!hasOffers()" class="card">
         <p>Nothing here yet</p>
       </section>
-
       <!-- End My Offers section -->
+
       <!-- Archived offers table -->
       <h3 v-if="hasArchivedOffers()">Archived Offers</h3>
       <section v-if="hasArchivedOffers()" class="archived-offers-table card">
@@ -113,7 +119,11 @@ watch(userWallet, async () => {
           </div>
           <div class="col-6" />
         </div>
-        <ArchivedOfferItem v-for="offer in page.archiveOffers" :key="offer.id" :offer="offer" />
+        <ArchivedOfferItem
+          v-for="offerResult in page.archiveOffers"
+          :key="offerResult.offer.id"
+          :offer="offerResult.offer"
+        />
       </section>
       <!-- End Archived offers table -->
     </ListContentResult>