b3: getAssetPrice, etc (#324)

added server url and version to VITE_ env impl getAssetPrice() simplified store fixed getAssetPrice; fixed total value display; added loading state to network cb
luxfi · Dec 30, 2024 · 2039527 · 2039527
1 parent 4cd7e0c
commit 2039527
Show file tree

Hide file tree

Showing 16 changed files with 178 additions and 258 deletions.
diff --git a/app/bridge3/.env.example b/app/bridge3/.env.example
@@ -0,0 +1,2 @@
+VITE_SERVER_URI=
+VITE_NET_VERSION=
diff --git a/app/bridge3/app/components/asset-card.tsx b/app/bridge3/app/components/asset-card.tsx
@@ -8,11 +8,9 @@ import { useSwapState } from '@/contexts/swap-state'
 import AssetCombobox from './asset-combobox'
 
 const AssetCard: React.FC<{
-  usdValue?: number  
   availableOfAsset?: number
   className?: string
 }> = observer(({
-  usdValue,
   availableOfAsset,
   className=''
 }) => {
@@ -29,7 +27,7 @@ const AssetCard: React.FC<{
     swapState.setFromAssetQuantity(a)
   }
 
-  return (
+  return (<>
     <div className={cn('border border-muted-4 py-2 pl-3 pr-1.5 has-[:focus]:border-muted', className)}>
       <div className='flex justify-between items-center gap-1'>
         <CurrencyInput 
@@ -50,12 +48,12 @@ const AssetCard: React.FC<{
         />
       </div>
       <div className='flex justify-between items-center text-muted text-sm gap-1.5'>
-      { (swapState.fromAssetQuantity > 0 && usdValue) ? (
+      { (swapState.fromAssetQuantity > 0 && swapState.fromAssetPriceUSD) ? (
         <CurrencyInput 
           readOnly
           prefix='$'
-          decimalsLimit={2}
-          value={usdValue}
+          decimalScale={2}
+          value={swapState.fromAssetPriceUSD * swapState.fromAssetQuantity}
           className='cursor-default !border-none bg-level-0 !min-w-0 focus:outline-none'
         />                
       ) : (
@@ -70,10 +68,10 @@ const AssetCard: React.FC<{
       )}>
         {`${availableOfAsset} ${swapState.fromAsset?.name} avail`}
       </span>
-      <div>To {swapState.toAsset?.asset ?? ''}</div>
-      </div>
     </div>
-  )
+    </div>
+    {swapState.toAsset && (<div>To {swapState.toAsset?.asset ?? ''}</div>) }
+  </>)
 })
 
 export default AssetCard
diff --git a/app/bridge3/app/components/network-combobox/trigger.tsx b/app/bridge3/app/components/network-combobox/trigger.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, type ComboboxTriggerProps } from '@hanzo/ui/primitives-common'
+import { Button, Skeleton, LoadingSpinner, type ComboboxTriggerProps } from '@hanzo/ui/primitives-common'
 import { cn } from '@hanzo/ui/util'
 
 import type { Network } from '@luxfi/core'
@@ -31,10 +31,11 @@ const NetworkComboboxTriggerInner = ({
     className={cn(
       'flex gap-1.5 rounded-lg h-auto py-1', 
       rightJustified ? 'justify-start flex-row-reverse' : 'justify-start',
+      current ? '' : 'cursor-events-none !p-0', // so skeleton will look right
       buttonClx
     )}
   >
-    {current ? (
+    {current ? (<>
       <img
         src={imageUrl!}
         alt={currentLabel + ' image'}
@@ -43,16 +44,20 @@ const NetworkComboboxTriggerInner = ({
         loading="eager"
         className={cn('block rounded-md ', imageClx)}
       />
-    ) : (
-      <div style={{width: imageSize, height: imageSize}} />
+      <div className={cn(
+        'flex flex-col gap-0 ',
+        rightJustified ? 'justify-end items-end' : 'justify-start items-start' 
+      )}>
+        <span className='text-sm block text-muted-2'>{label}</span>
+        <span className={cn('block font-semibold', currentLabel ? 'text-foreground' : 'text-muted')}>
+          { currentLabel ?? '(select)' }
+        </span>
+      </div>
+    </>) : ( // height from observation
+      <Skeleton className='w-full h-[64px] flex justify-center items-center' reverse={rightJustified}>
+        <LoadingSpinner size={30}/>
+      </Skeleton> 
     )}
-    <div className={cn(
-      'flex flex-col gap-0 ',
-      rightJustified ? 'justify-end items-end' : 'justify-start items-start' 
-    )}>
-      <span className='text-sm block text-muted-2'>{label}</span>
-      <span className={cn('block font-semibold', currentLabel ? 'text-foreground' : 'text-muted')}>{ currentLabel ?? '(select)' }</span>
-    </div>
   </Button>
 )
 

diff --git a/app/bridge3/app/components/receive-card/index.tsx b/app/bridge3/app/components/receive-card/index.tsx
@@ -9,7 +9,6 @@ import { useSwapState } from '@/contexts/swap-state'
 import BridgeLabel from './bridge-label'
 
 const ReceiveCard: React.FC<{
-  usdValue: number 
   usdFee: number
   assetGas: number
   txnTime: string // eg, '~5min'
@@ -18,7 +17,6 @@ const ReceiveCard: React.FC<{
   onSelect?: (bridge: Bridge) => void
   className?: string
 }> = observer(({
-  usdValue,
   usdFee,
   assetGas,
   txnTime, // eg, '~5min'

diff --git a/app/bridge3/app/components/swap-card/index.tsx b/app/bridge3/app/components/swap-card/index.tsx
@@ -10,11 +10,10 @@ import ReceiveCard from '../receive-card'
 import TeleportSwitch from '../teleport-switch'
 
 const FIXTURE = {
-  usdValue: 3345,
   usdFee: 2.4,
   assetGas: .045,
   txnTime: '~5min',
-  assetsAvailable: 1004.4556,
+  assetsAvailable: 10.4556,
   bridge: {
     name: 'Across',
     logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
@@ -38,12 +37,10 @@ const SwapCard: React.FC<{
       </div>
       <FromToCard className='flex w-full gap-2 relative' />
       <AssetCard 
-        usdValue={FIXTURE.usdValue}
         availableOfAsset={FIXTURE.assetsAvailable}
         className='w-full rounded-lg mt-2'
       />
       <ReceiveCard
-        usdValue={FIXTURE.usdValue}
         usdFee={FIXTURE.usdFee}
         assetGas={FIXTURE.assetGas}
         bridge={FIXTURE.bridge}

diff --git a/app/bridge3/app/domain/backend/get-asset-price.ts b/app/bridge3/app/domain/backend/get-asset-price.ts
@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+import type { Asset } from '@luxfi/core'
+
+const getAssetPrice = async (a: Asset): Promise<number | undefined> => {
+
+  const { data } = await axios.get(
+    import.meta.env.VITE_SERVER_URI + '/api/tokens/price/' + a.asset
+  )
+  return data?.data?.price ? Number(data?.data?.price) : undefined
+}
+
+export default getAssetPrice
diff --git a/app/bridge3/app/domain/backend/get-settings.ts b/app/bridge3/app/domain/backend/get-settings.ts
@@ -6,7 +6,7 @@ import swapPairs from './swap-pairs'
 const getSettings = async (): Promise<AppSettings | undefined> => {
 
   const { data } = await axios.get(
-    `https://api-bridge.lux.network/api/settings?version=mainnet`
+    import.meta.env.VITE_SERVER_URI + '/api/settings?version=' + import.meta.env.VITE_NET_VERSION
   )
 
   data.swapPairs = swapPairs

diff --git a/app/bridge3/app/domain/backend/index.ts b/app/bridge3/app/domain/backend/index.ts
@@ -1,6 +1,8 @@
 import { type BackendService } from '../types'
 import { default as getSettings } from './get-settings'
+import { default as getAssetPrice } from './get-asset-price'
 
 export default {
-  getSettings 
+  getSettings, 
+  getAssetPrice
 } satisfies BackendService
diff --git a/app/bridge3/app/domain/swap/logic/on-from-asset-change.ts b/app/bridge3/app/domain/swap/logic/on-from-asset-change.ts
@@ -2,6 +2,8 @@ import { reaction } from 'mobx'
 
 import type { Network, Asset } from '@luxfi/core'
 import type { SwapState } from '@/domain/types'
+import backend from '@/domain/backend'
+
 
 const swapExists = (
   swapPairs: Record<string, string[]>, 
@@ -15,7 +17,7 @@ export default (store: SwapState) => (reaction(
   () => ({
     fromAsset: store.fromAsset,
   }),
-  ({ 
+  async ({ 
     fromAsset, 
   }) => {
       // Networks for which at least one swap pair exists (swap is possible)
@@ -28,6 +30,11 @@ export default (store: SwapState) => (reaction(
           }))
           .filter((n: Network) => n.currencies.length > 0)
       ) : []  
-    ) 
+    )  
+    if (fromAsset) {
+      const price = await backend.getAssetPrice(fromAsset)
+      store.setFromAssetPriceUSD(price ?? null)
+    }
+
   }
 ))
diff --git a/app/bridge3/app/domain/swap/store.ts b/app/bridge3/app/domain/swap/store.ts
@@ -23,6 +23,7 @@ class SwapStore implements SwapState {
   toNetwork: Network | null = null
   fromAssets: Asset[] = []
   fromAsset: Asset | null = null
+  fromAssetPriceUSD: number | null = null
   toAsset: Asset | null = null
   fromAssetQuantity: number = 0
   teleport: boolean = true
@@ -42,8 +43,9 @@ class SwapStore implements SwapState {
       toNetworks: observable.shallow,
       fromNetwork: observable.shallow,
       toNetwork: observable.shallow,
-      fromAssets: observable.shallow,
-      fromAsset:observable.shallow,
+      fromAssets:observable.shallow,
+      fromAsset: observable.shallow,
+      fromAssetPriceUSD: observable,
       toAsset: observable.shallow,
       fromAssetQuantity: observable,
       teleport: observable,
@@ -52,6 +54,7 @@ class SwapStore implements SwapState {
       setToNetwork: action.bound,
       setFromAssets: action,
       setFromAsset: action.bound,
+      setFromAssetPriceUSD: action.bound,
       setToAsset: action.bound,
       setFromAssetQuantity: action.bound,
       setTeleport: action.bound,
@@ -91,6 +94,7 @@ class SwapStore implements SwapState {
   setToNetwork = (n: Network | null): void      => { this.toNetwork = n }
   setFromAssets = (a: Asset[]): void            => { this.fromAssets = a }
   setFromAsset = (a: Asset | null): void        => { this.fromAsset = a }
+  setFromAssetPriceUSD = (n: number | null): void => {this.fromAssetPriceUSD = n}
   setToAsset = (a: Asset | null): void          => { this.toAsset = a }
   setFromAssetQuantity = (a: number): void      => { this.fromAssetQuantity = a }
   setTeleport = (b: boolean): void              => { this.teleport = b }

diff --git a/app/bridge3/app/domain/types/backend-service.ts b/app/bridge3/app/domain/types/backend-service.ts
@@ -1,7 +1,9 @@
+import type { Asset } from '@luxfi/core'
 import type AppSettings from './app-settings'
 
 interface BackendService {
   getSettings: () => Promise<AppSettings | undefined> 
+  getAssetPrice: (a: Asset) => Promise<number | undefined>
 }
 
 export {

diff --git a/app/bridge3/app/domain/types/swap-state.ts b/app/bridge3/app/domain/types/swap-state.ts
@@ -10,13 +10,15 @@ interface SwapState {
   fromNetwork : Network | null
   fromAssets : Asset[] 
   fromAsset : Asset | null
+  fromAssetPriceUSD: number | null
   toAsset : Asset | null
   teleport : boolean
   fromAssetQuantity : number
 
   setFromNetwork(n: Network | null) : void
   setToNetwork(n: Network | null): void 
   setFromAsset(a: Asset | null): void
+  setFromAssetPriceUSD(n: number | null): void
   setToAsset(a: Asset | null): void
   setFromAssetQuantity(a: number): void
   setTeleport(b: boolean): void

diff --git a/app/bridge3/package.json b/app/bridge3/package.json
@@ -14,7 +14,7 @@
   "type": "module",
   "dependencies": {
     "@hanzo/ui": "catalog:",
-    "@luxfi/core": "workspace:*",
+    "@luxfi/core": "catalog:",
     "@remix-run/node": "^2.15.1",
     "@remix-run/react": "^2.15.1",
     "@remix-run/route-config": "^2.15.2",

diff --git a/app/server/package.json b/app/server/package.json
@@ -53,9 +53,9 @@
   },
   "dependencies": {
     "@luxfi/utila": "^3.0.0",
-    "@luxfi/core": "workspace:*",
+    "@luxfi/core": "10.0.0",
     "@prisma/client": "^6.0.0",
-    "@solana/addresses": "2.0.0-preview.1.20240323014038.94f2053250ed5d78cd55951bdec72ef7795e528e",
+    "@solana/addresses": "2.0.0",
     "axios": "^1.7.4",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
@@ -70,3 +70,4 @@
     "winston": "^3.17.0"
   }
 }
+