feat: add btc bridge

src/components/FeeRateSelector.vue

@@ -59,7 +59,7 @@ const selectCustom = () => {
       <div class="text-sm">Fee Rate</div>
       <FlexBox ai="center" jc="center" class="text-xs text-gray-primary">
         <span>{{ feeRate }} sat/vB</span>
-        <ArrowRightIcon />
+        <ArrowRightIcon class="text-gray-primary"/>
       </FlexBox>
     </FlexBox>
     <Drawer v-model:open="open">

src/components/ui/drawer/DrawerContent.vue

@@ -19,7 +19,7 @@ const forwarded = useForwardPropsEmits(props, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'absolute inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-white after:hidden',
+          'absolute inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-white',
           props.class
         )
       "

src/data/assets.ts

@@ -1,5 +1,6 @@
 import { TokenTransfer } from '@/queries/brc20'
 import { SymbolTicker } from '@/lib/asset-symbol'
+import { Protocol } from './../lib/types/protocol'
 import { CoinCategory } from '@/queries/exchange-rates'
 import { Balance, BRC20Balance } from '@/queries/types/balance'
 
@@ -12,6 +13,7 @@ export interface Asset {
   decimal: number
   balance?: Balance
   contract?: string
+  protocol?: Protocol
 }
 
 export interface BRC20Asset extends Asset {
@@ -39,6 +41,13 @@ export interface MRC20Asset extends Asset {
   deployAvatar: string
 }
 
+export interface MetaContractAsset extends Asset {
+  codeHash: string
+  genesis: string
+  icon?: string
+  sensibleId: string
+}
+
 export interface Tag {
   name: string
   bg: string

src/data/bridge-pairs.ts

@@ -1,23 +1,12 @@
-import btc from '@/assets/btc.svg?url'
-
 import { InjectionKey } from 'vue'
 import { ref, Ref } from 'vue'
-import { type assetReqReturnType } from '@/queries/bridge-api'
-import { network } from '@/lib/network'
+import { type assetReqReturnType } from '@/queries/types/bridge'
 import { useBridgePairStore } from '@/stores/bridge-pair'
 const bridgePairStore = useBridgePairStore()
 
-const bridgePairs: Ref<assetReqReturnType[]> =
-  network.value === 'testnet'
-    ? ref(bridgePairStore.list)
-    : ref([
-        {
-          network: 'BTC',
-          targetSymbol: 'BTC',
-          originSymbol: 'BTC',
-          id: 1,
-        },
-      ])
+console.log('bridgePairStore', bridgePairStore.list)
+
+const bridgePairs: Ref<assetReqReturnType[]> = ref(bridgePairStore.list)
 
 export default bridgePairs
 

src/data/hosts.ts

@@ -25,13 +25,11 @@ export const API_RUNES_TESTNET_ORDERS_EXCHANGE = 'https://api-runes-testnet.orde
 export const UNISAT_HOST = 'https://wallet-api.unisat.io/v5'
 export const UNISAT_TESTNET_HOST = 'https://wallet-api-testnet.unisat.io/v5'
 
-export const proxy =
-  (import.meta.env.VITE_HOST_PROXY || 'https://api2.orders.exchange') + '/api'
+export const proxy = (import.meta.env.VITE_HOST_PROXY || 'https://api2.orders.exchange') + '/api'
 
-export const runes =
-  (import.meta.env.VITE_HOST_RUNES ||
-    'https://runes-preview-swap-queue.vercel.app') + '/api'
+export const runes = (import.meta.env.VITE_HOST_RUNES || 'https://runes-preview-swap-queue.vercel.app') + '/api'
 
-export const swap =
-  (import.meta.env.VITE_HOST_SWAP || 'https://api-swap.orders.exchange') +
-  '/api'
+export const swap = (import.meta.env.VITE_HOST_SWAP || 'https://api-swap.orders.exchange') + '/api'
+
+export const OCTOPUS_HOST = 'https://api.octopus.space/api-bridge/'
+export const OCTOPUS_TESTNET_HOST = 'https://api.octopus.space/api-bridge-testnet/'

src/hooks/bridge/useBTCPool.ts

@@ -0,0 +1,18 @@
+import { computed } from 'vue'
+import { useRouteParams } from '@vueuse/router'
+
+export default function useBTCPool() {
+  const pairStr = useRouteParams<string>('pair')
+  if (!pairStr.value) {
+    pairStr.value = `BTC-WBTC`
+  }
+
+  const token1 = computed(() => pairStr.value.split('-')[0])
+  const token2 = computed(() => pairStr.value.split('-')[1])
+
+  return {
+    pairStr,
+    token1,
+    token2,
+  }
+}

src/hooks/bridge/useBridgePool.ts

@@ -0,0 +1,26 @@
+import { ref } from 'vue'
+import useBTCPool from './useBTCPool'
+import { useRouter } from 'vue-router'
+import { toast } from '@/components/ui/toast'
+import { useRouteParams } from '@vueuse/router'
+
+const router = useRouter()
+
+export default function useBridgePool() {
+  const protocol = useRouteParams<string>('protocol')
+  console.log('protocol', protocol.value)
+
+  if (!protocol.value) {
+    protocol.value = 'BTC'
+  }
+
+  if (protocol.value === 'BTC') {
+    return { ...useBTCPool(), protocol }
+  } else {
+    toast({ toastType: 'warning', title: 'Unsupported protocol type.' })
+    // FIXME: go undefined
+    router.go(-1)
+  }
+
+  return { token1: ref(''), token2: ref(''), protocol }
+}

src/hooks/swap/useSwapPool.ts

@@ -17,7 +17,7 @@ export function useSwapPool() {
   const protocol = useRouteParams<string>('protocol')
   if (!protocol.value) {
     if (chain.value === Chain.BTC) {
-      protocol.value = Protocol.Rune.toLocaleLowerCase()
+      protocol.value = Protocol.Runes.toLocaleLowerCase()
     } else if (chain.value === Chain.MVC) {
       protocol.value = Protocol.MetaContract.toLocaleLowerCase()
     } else {
@@ -27,10 +27,11 @@ export function useSwapPool() {
     }
   }
 
-  if (protocol.value === Protocol.Rune.toLocaleLowerCase()) {
+  if (protocol.value === Protocol.Runes.toLocaleLowerCase()) {
     return { ...useRunesPool(), chain }
   } else {
     toast({ toastType: 'warning', title: 'Unsupported protocol type.' })
+    // FIXME: go undefined
     router.go(-1)
   }
 

src/hooks/use-bridge-pair.ts

@@ -1,19 +1,23 @@
-import { type Ref, computed, ref } from 'vue'
-import { useRouteParams } from '@vueuse/router'
 import { useRouter } from 'vue-router'
+import { type Ref, computed, ref } from 'vue'
 import bridgePairs from '@/data/bridge-pairs'
+import { useRouteParams } from '@vueuse/router'
+import { useBridgePairsQuery } from '@/queries/bridge'
+import { CoinCategory } from '@/queries/exchange-rates'
 
-export function useBridgePair() {
+export async function useBridgePair(coinCategory: CoinCategory) {
   const router = useRouter()
-
-
-  if(!bridgePairs.value.length){
 
+  console.log('bridgePairs', bridgePairs.value)
+
+  if (!bridgePairs.value.length) {
+    const { data } = useBridgePairsQuery(ref(coinCategory))
+    bridgePairs.value = data.value!
   }
-  const selectedPairId = ref(bridgePairs.value[0].id)
-  
+  const selectedPairId = ref(bridgePairs.value[0].originTokenId)
+
   const selectedPair = computed(() => {
-    const pair = bridgePairs.value.find((a) => a.id === selectedPairId.value)
+    const pair = bridgePairs.value.find((a) => a.originTokenId === selectedPairId.value)
     if (pair) {
       return pair
     }
@@ -24,34 +28,26 @@ export function useBridgePair() {
   const defaultPairStr = `${bridgePairs.value[0].originSymbol}-${bridgePairs.value[0].targetSymbol}`
   const pairStr = useRouteParams('pair', defaultPairStr) as Ref<string>
   const fromSymbol = computed(() => pairStr.value.split('-')[0])
-  let toSymbol:any
-  if(pairStr.value.split('-').length > 2){
-    toSymbol= computed(() => `${pairStr.value.split(/\-/)[1]}-${pairStr.value.split(/\-/)[2]}`)
-}else{
-  toSymbol= computed(() => pairStr.value.split(/\-/)[1])
-}
-
-
+  let toSymbol: any
+  if (pairStr.value.split('-').length > 2) {
+    toSymbol = computed(() => `${pairStr.value.split(/\-/)[1]}-${pairStr.value.split(/\-/)[2]}`)
+  } else {
+    toSymbol = computed(() => pairStr.value.split(/\-/)[1])
+  }
 
-  const selected = bridgePairs.value.find(
-    (a) =>
-      a.originName === fromSymbol.value &&
-      a.targetName === toSymbol.value,
-  )
+  const selected = bridgePairs.value.find((a) => a.originName === fromSymbol.value && a.targetName === toSymbol.value)
   if (selected) {
-    selectedPairId.value = selected.id
+    selectedPairId.value = selected.originTokenId
   }
 
-  function selectBridgePair(id: number) {
-
+  function selectBridgePair(id: string) {
     selectedPairId.value = id
-   
+
     // redirect
-    const pair = bridgePairs.value.find((pair) => pair.id === id)
+    const pair = bridgePairs.value.find((pair) => pair.originTokenId === id)
     if (pair) {
-
       const pairSymbol = `${pair.originName}-${pair.targetName}`
-      
+
       router.push({
         path: `/bridge/${pairSymbol}`,
       })