feat: Add the feature to purchase FB.

unisat-wallet · Jan 10, 2025 · 4b514e9 · 4b514e9
1 parent 391caac
commit 4b514e9
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 54 deletions.
diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts
@@ -1549,10 +1549,6 @@ export class WalletController extends BaseController {
     return preferenceService.expireUICachedData(address);
   };
 
-  createPaymentUrl = (address: string, channel: string) => {
-    return openapiService.createPaymentUrl(address, channel);
-  };
-
   getWalletConfig = () => {
     return openapiService.getWalletConfig();
   };
@@ -2001,10 +1997,6 @@ export class WalletController extends BaseController {
     return psbt.toHex();
   };
 
-  getBuyBtcChannelList = async () => {
-    return openapiService.getBuyBtcChannelList();
-  };
-
   getAutoLockTimeId = () => {
     return preferenceService.getAutoLockTimeId();
   };
@@ -2179,6 +2171,14 @@ export class WalletController extends BaseController {
     const _res = await openapiService.transferCAT721Step3(transferId, psbt.toBase64());
     return _res;
   };
+
+  getBuyCoinChannelList = async (coin: 'FB' | 'BTC') => {
+    return openapiService.getBuyCoinChannelList(coin);
+  };
+
+  createBuyCoinPaymentUrl = (coin: 'FB' | 'BTC', address: string, channel: string) => {
+    return openapiService.createBuyCoinPaymentUrl(coin, address, channel);
+  };
 }
 
 export default new WalletController();
diff --git a/src/background/service/openapi.ts b/src/background/service/openapi.ts
@@ -516,12 +516,20 @@ export class OpenApiService {
     return this.httpPost('/v5/tx/decode2', { psbtHex, website });
   }
 
-  async getBuyBtcChannelList(): Promise<{ channel: string }[]> {
-    return this.httpGet('/v5/buy-btc/channel-list', {});
+  async getBuyCoinChannelList(coin: 'BTC' | 'FB'): Promise<{ channel: string }[]> {
+    if (coin === 'BTC') {
+      return this.httpGet('/v5/buy-btc/channel-list', {});
+    } else {
+      return this.httpGet('/v5/buy-fb/channel-list', {});
+    }
   }
 
-  async createPaymentUrl(address: string, channel: string): Promise<string> {
-    return this.httpPost('/v5/buy-btc/create', { address, channel });
+  async createBuyCoinPaymentUrl(coin: 'BTC' | 'FB', address: string, channel: string): Promise<string> {
+    if (coin === 'BTC') {
+      return this.httpPost('/v5/buy-btc/create', { address, channel });
+    } else {
+      return this.httpPost('/v5/buy-fb/create', { address, channel });
+    }
   }
 
   async checkWebsite(website: string): Promise<{ isScammer: boolean; warning: string }> {

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -95,6 +95,8 @@ export interface Inscription {
     amt: string;
     decimal: string;
   };
+  multipleNFT?: boolean;
+  sameOffset?: boolean;
 }
 
 export interface Atomical {

diff --git a/src/ui/pages/BuyBTC/BuyBTCModal.tsx b/src/ui/pages/BuyBTC/BuyBTCModal.tsx
@@ -1,29 +1,38 @@
+import { Skeleton } from 'antd';
 import { useEffect, useState } from 'react';
 
 import { PAYMENT_CHANNELS, PaymentChannelType } from '@/shared/constant';
+import { BtcChannelItem } from '@/shared/types';
 import { Card, Column, Image, Row, Text } from '@/ui/components';
 import { useTools } from '@/ui/components/ActionComponent';
 import { BottomModal } from '@/ui/components/BottomModal';
+import { useChain } from '@/ui/state/settings/hooks';
 import { colors } from '@/ui/theme/colors';
 import { useWallet } from '@/ui/utils';
 import { CloseOutlined } from '@ant-design/icons';
 
 import DisclaimerModal from './DisclaimerModal';
-import { BtcChannelItem } from '@/shared/types';
-import { Skeleton } from 'antd';
 
 function SupportPaymentList({ list }: { list: string[] }) {
-  if(!list || list.length === 0)
-    return <></>
-  return <Row itemsCenter>
-    {list.map((item) => {
-      return <Image key={item} src={`./images/artifacts/${item.replaceAll(' ','').toLowerCase()}.png`} width={28} height={19} />
-      }
-    )}
-  </Row>;
+  if (!list || list.length === 0) return <></>;
+  return (
+    <Row itemsCenter>
+      {list.map((item) => {
+        return (
+          <Image
+            key={item}
+            src={`./images/artifacts/${item.replaceAll(' ', '').toLowerCase()}.png`}
+            width={28}
+            height={19}
+          />
+        );
+      })}
+    </Row>
+  );
 }
 
 function PaymentItem({ channel, onClick }: { channel: BtcChannelItem; onClick: () => void }) {
+  const chain = useChain();
   const channelInfo = PAYMENT_CHANNELS[channel.channel];
   if (!channelInfo) return <></>;
   return (
@@ -36,12 +45,12 @@ function PaymentItem({ channel, onClick }: { channel: BtcChannelItem; onClick: (
           </Row>
           <SupportPaymentList list={channel.payType} />
         </Row>
-        {
-          channel.quote > 0 &&   <Row fullX justifyBetween>
+        {channel.quote > 0 && (
+          <Row fullX justifyBetween>
             <Text size="sm" color="textDim" text={'$300'} />
-            <Text text={`≈ ${channel.quote?.toFixed(8)} BTC`} style={{ fontWeight: 'bold' }} />
+            <Text text={`≈ ${channel.quote?.toFixed(8)} ${chain.unit}`} style={{ fontWeight: 'bold' }} />
           </Row>
-        }
+        )}
       </Column>
     </Card>
   );
@@ -52,14 +61,17 @@ export const BuyBTCModal = ({ onClose }: { onClose: () => void }) => {
   const [channelType, setChannelType] = useState<PaymentChannelType>(PaymentChannelType.AlchemyPay);
 
   const [channels, setChannels] = useState<BtcChannelItem[] | undefined>(undefined);
+
+  const chain = useChain();
+
   const wallet = useWallet();
   const tools = useTools();
   useEffect(() => {
     tools.showLoading(true);
     wallet
-      .getBuyBtcChannelList()
+      .getBuyCoinChannelList(chain.unit)
       .then(setChannels)
-      .catch(_ => {
+      .catch((_) => {
         setChannels([]);
       })
       .finally(() => {
@@ -72,7 +84,7 @@ export const BuyBTCModal = ({ onClose }: { onClose: () => void }) => {
       <Column justifyCenter itemsCenter>
         <Row justifyBetween itemsCenter style={{ height: 20 }} fullX>
           <Row />
-          <Text text="Buy BTC" textCenter size="md" />
+          <Text text={`Buy ${chain.unit}`} textCenter size="md" />
           <Row
             onClick={() => {
               onClose();
@@ -84,22 +96,23 @@ export const BuyBTCModal = ({ onClose }: { onClose: () => void }) => {
         <Row fullX style={{ borderTopWidth: 1, borderColor: colors.border }} my="md" />
 
         <Column gap="zero" mt="sm" mb="lg">
-          <Text size="sm" color="textDim" text={`Please select a service provider below to buy BTC.`} />
-          {
-            !channels ? <Skeleton active />
-              : channels.length <= 0
-                ? <Text size="sm" color="textDim" text={`No service provider available.`} />
-                : channels.map((channel, index) => (
-                  <PaymentItem
-                    key={index}
-                    channel={channel}
-                    onClick={() => {
-                      setChannelType(channel.channel);
-                      setDisclaimerModalVisible(true);
-                    }}
-                  />
-                ))
-          }
+          <Text size="sm" color="textDim" text={`Please select a service provider below to buy ${chain.unit}.`} />
+          {!channels ? (
+            <Skeleton active />
+          ) : channels.length <= 0 ? (
+            <Text size="sm" color="textDim" text={`No service provider available.`} />
+          ) : (
+            channels.map((channel, index) => (
+              <PaymentItem
+                key={index}
+                channel={channel}
+                onClick={() => {
+                  setChannelType(channel.channel);
+                  setDisclaimerModalVisible(true);
+                }}
+              />
+            ))
+          )}
         </Column>
       </Column>
       {disclaimerModalVisible && (

diff --git a/src/ui/pages/BuyBTC/DisclaimerModal.tsx b/src/ui/pages/BuyBTC/DisclaimerModal.tsx
@@ -6,6 +6,7 @@ import { Button, Column, Row, Text } from '@/ui/components';
 import { useTools } from '@/ui/components/ActionComponent';
 import { BottomModal } from '@/ui/components/BottomModal';
 import { useCurrentAccount } from '@/ui/state/accounts/hooks';
+import { useChain } from '@/ui/state/settings/hooks';
 import { colors } from '@/ui/theme/colors';
 import { fontSizes } from '@/ui/theme/font';
 import { useWallet } from '@/ui/utils';
@@ -18,6 +19,8 @@ export default function DisclaimerModal({ channelType, onClose }: { channelType:
   const currentAccount = useCurrentAccount();
   const wallet = useWallet();
 
+  const chain = useChain();
+
   const [understand, setUnderstand] = useState(false);
 
   const channelInfo = PAYMENT_CHANNELS[channelType];
@@ -38,17 +41,19 @@ export default function DisclaimerModal({ channelType, onClose }: { channelType:
 
         <Row fullX style={{ borderTopWidth: 1, borderColor: colors.border }} my="md" />
 
-        <Column justifyCenter rounded mb="lg" style={{maxHeight:'50vh',overflow:'auto'}}>
+        <Column justifyCenter rounded mb="lg" style={{ maxHeight: '50vh', overflow: 'auto' }}>
           <Text style={{ fontSize: fontSizes.sm, lineHeight: 2 }} text={disclaimStr} />
 
           <Text
             mt="lg"
             style={{ fontSize: fontSizes.sm, lineHeight: 2 }}
-            text={'Risk Warning: Don\'t invest unless you\'re prepared to lose all the money you invest.'}></Text>
+            text={"Risk Warning: Don't invest unless you're prepared to lose all the money you invest."}></Text>
           <Text
             mt="lg"
             style={{ fontSize: fontSizes.sm, lineHeight: 2 }}
-            text={'Additional transaction fees apply when purchasing through third-party platforms. Rates vary by country and payment method. Please review each platform\'s fees before proceeding with transactions.'}></Text>
+            text={
+              "Additional transaction fees apply when purchasing through third-party platforms. Rates vary by country and payment method. Please review each platform's fees before proceeding with transactions."
+            }></Text>
           <Text
             mt="lg"
             style={{ fontSize: fontSizes.sm, lineHeight: 2 }}
@@ -73,7 +78,7 @@ export default function DisclaimerModal({ channelType, onClose }: { channelType:
           onClick={() => {
             tools.showLoading(true);
             wallet
-              .createPaymentUrl(currentAccount.address, channelType)
+              .createBuyCoinPaymentUrl(chain.unit, currentAccount.address, channelType)
               .then((url) => {
                 window.open(url);
               })

diff --git a/src/ui/pages/Main/WalletTabScreen/index.tsx b/src/ui/pages/Main/WalletTabScreen/index.tsx
@@ -361,7 +361,7 @@ export default function WalletTabScreen() {
               onClick={(e) => {
                 setBuyBtcModalVisible(true);
               }}
-              disabled={chainType !== ChainType.BITCOIN_MAINNET}
+              disabled={chainType !== ChainType.BITCOIN_MAINNET && chainType !== ChainType.FRACTAL_BITCOIN_MAINNET}
             />
           </Row>
 

diff --git a/src/ui/utils/WalletContext.tsx b/src/ui/utils/WalletContext.tsx
@@ -291,8 +291,6 @@ export interface WalletController {
 
   expireUICachedData(address: string): Promise<void>;
 
-  createPaymentUrl(address: string, channel: string): Promise<string>;
-
   getWalletConfig(): Promise<WalletConfig>;
 
   getSkippedVersion(): Promise<string>;
@@ -385,8 +383,6 @@ export interface WalletController {
     outputValue?: number;
   }): Promise<string>;
 
-  getBuyBtcChannelList(): Promise<BtcChannelItem[]>;
-
   setAutoLockTimeId(timeId: number): Promise<void>;
   getAutoLockTimeId(): Promise<number>;
 
@@ -443,6 +439,9 @@ export interface WalletController {
     toSignInputs: UserToSignInput[]
   ): Promise<{ revealTx: string; toSignInputs: UserToSignInput[] }>;
   transferCAT721Step3(transferId: string, revealTx: string, toSignInputs: UserToSignInput[]): Promise<{ txid: string }>;
+
+  getBuyCoinChannelList(coin: string): Promise<BtcChannelItem[]>;
+  createBuyCoinPaymentUrl(coin: string, address: string, channel: string): Promise<string>;
 }
 
 const WalletContext = createContext<{