Skip to content

Commit

Permalink
gateway update.
Browse files Browse the repository at this point in the history
  • Loading branch information
rick23p committed Dec 12, 2024
1 parent c9e1d4e commit 72deefd
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 98 deletions.
4 changes: 2 additions & 2 deletions apps/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"dependencies": {
"@apollo/client": "3.7.1",
"@apollo/react-hooks": "4.0.0",
"@gobob/bob-sdk": "^2.3.5",
"@gobob/sats-wagmi": "^0.3.7",
"@gobob/bob-sdk": "^3.1.0",
"@gobob/sats-wagmi": "^0.3.17",
"@loadable/component": "5.15.2",
"@sovryn-zero/lib-base": "0.2.1",
"@sovryn-zero/lib-ethers": "0.2.5",
Expand Down
11 changes: 7 additions & 4 deletions apps/frontend/src/app/5_pages/BobGateway/BobGateway.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
import { translations } from '../../../locales/i18n';
import { Promotions } from '../MarketMakingPage/components/Promotions/Promotions';
import { queryClient } from './BobGateway.utils';
import { BobGatewayForm } from './BobGatewayForm';
import { BitcoinWallet } from './components/BitcoinWallet/BitcoinWallet';
import { BobGatewayForm } from './components/BobGatewayForm/BobGatewayForm';

const BobGateway: FC = () => {
return (
Expand All @@ -31,11 +32,13 @@ const BobGateway: FC = () => {
{t(translations.bobGatewayPage.description)}
</Paragraph>

<Promotions setActivePool={() => {}} onClick={() => {}} />

<QueryClientProvider client={queryClient}>
<SatsWagmiConfig network={Network.mainnet} queryClient={queryClient}>
<div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7">
<div className="px-0 md:mx-9 mx-0 md:mb-2 mb-7">
<div className="flex justify-end m-4">
<BitcoinWallet />
</div>
<Promotions setActivePool={() => {}} onClick={() => {}} />
<BobGatewayForm />
</div>
</SatsWagmiConfig>
Expand Down
15 changes: 14 additions & 1 deletion apps/frontend/src/app/5_pages/BobGateway/BobGateway.utils.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import { GatewaySDK } from '@gobob/bob-sdk';
import { GatewayQuoteParams, GatewaySDK } from '@gobob/bob-sdk';
import { QueryClient } from '@tanstack/react-query';

export const bobGateway = new GatewaySDK('bob');

export const strategies: GatewayQuoteParams[] = [
{
fromToken: 'BTC',
fromChain: 'Bitcoin',
fromUserAddress: 'bc1qafk4yhqvj4wep57m62dgrmutldusqde8adh20d',
toChain: 'BOB',
toUserAddress: '0x2D2E86236a5bC1c8a5e5499C517E17Fb88Dbc18c',
toToken: 'tBTC', // or e.g. "SolvBTC"
amount: 10000000, // 0.1 BTC
gasRefill: 10000, // 0.0001 BTC. The amount of BTC to swap for ETH for tx fees.
},
];

export const queryClient = new QueryClient();
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { useAccount, useConnect, useDisconnect } from '@gobob/sats-wagmi';

import React, { FC, useCallback, useEffect, useState } from 'react';

import { t } from 'i18next';
import { nanoid } from 'nanoid';

import {
Button,
Dialog,
DialogBody,
DialogHeader,
NotificationType,
WalletIdentity,
} from '@sovryn/ui';

import { useNotificationContext } from '../../../../../contexts/NotificationContext';
import { translations } from '../../../../../locales/i18n';

export const BitcoinWallet: FC = () => {
const { addNotification } = useNotificationContext();
const { connectors, connect } = useConnect();
const { address: btcAddress } = useAccount();
const { disconnect } = useDisconnect();
const [isOpen, setIsOpen] = useState(false);

const onCopyAddress = useCallback(() => {
addNotification({
type: NotificationType.success,
title: t(translations.copyAddress),
content: '',
dismissible: true,
id: nanoid(),
});
}, [addNotification]);

useEffect(() => {
if (btcAddress && isOpen) {
setIsOpen(false);
}
}, [btcAddress, isOpen]);

if (!btcAddress) {
return (
<>
<Button
text={t(translations.connectWalletButton.connectBTC)}
onClick={() => setIsOpen(true)}
/>
<Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
<DialogHeader
onClose={() => setIsOpen(false)}
title={t(translations.connectWalletButton.connectBTC)}
/>
<DialogBody className="p-6">
<div className="flex gap-2 my-4 flex-wrap">
{connectors.map(connector => (
<Button
key={connector.name}
text={connector.name}
onClick={() => connect({ connector })}
/>
))}
</div>
</DialogBody>
</Dialog>
</>
);
}
return (
<WalletIdentity
onDisconnect={disconnect}
onCopyAddress={onCopyAddress}
address={btcAddress}
dropdownClassName="z-[10000000]"
submenuLabels={{
copyAddress: t(translations.connectWalletButton.copyAddress),
disconnect: t(translations.connectWalletButton.disconnect),
}}
/>
);
};
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Token } from '@gobob/bob-sdk/dist/gateway/types';
import {
useAccount,
useConnect,
useDisconnect,
useBalance,
useSendGatewayTransaction,
} from '@gobob/sats-wagmi';
Expand All @@ -13,18 +11,16 @@ import { formatUnits, parseUnits } from 'ethers/lib/utils';

import { Button, Input, Paragraph, Select } from '@sovryn/ui';

import { BOB_CHAIN_ID } from '../../../config/chains';
import { BOB_CHAIN_ID } from '../../../../../config/chains';

import { useCacheCall } from '../../../hooks';
import { useAccount as useEvmAccount } from '../../../hooks/useAccount';
import { bobGateway } from './BobGateway.utils';
import { useCacheCall } from '../../../../../hooks';
import { useAccount as useEvmAccount } from '../../../../../hooks/useAccount';
import { bobGateway } from '../../BobGateway.utils';

export const BobGatewayForm: FC = () => {
export const BobGatewayDeposit: FC = () => {
const [amount, setAmount] = useState('');
const [token, setToken] = useState<string>('');
const [tokens, setTokens] = useState<Token[]>([]);
const { connectors, connect } = useConnect();
const { disconnect } = useDisconnect();
const { address: btcAddress } = useAccount();
const { account } = useEvmAccount();
const { data } = useBalance();
Expand All @@ -35,11 +31,17 @@ export const BobGatewayForm: FC = () => {
sendGatewayTransaction,
} = useSendGatewayTransaction({
toChain: 'bob',
strategyAddress: '0xBA67A0a0C2dd790182D1954B4C9788f9Ae43e604',
});

useEffect(() => {
bobGateway.getTokens().then(setTokens);
}, []);
if (!tokens.length) {
bobGateway.getTokens().then(list => {
console.log(list);
setTokens(list);
});
}
}, [tokens.length]);

const onSbumit = async () => {
const toToken = tokens.find(t => t.address === token);
Expand All @@ -49,7 +51,7 @@ export const BobGatewayForm: FC = () => {
}

const params = {
toToken: toToken.symbol,
toToken: 'uniBTC',
evmAddress: account,
value: BigInt(parseUnits(amount, 8).toString()),
};
Expand Down Expand Up @@ -88,29 +90,10 @@ export const BobGatewayForm: FC = () => {
}
}, [orders]);

if (!btcAddress) {
return (
<div className="flex gap-2 my-4">
{connectors.map(connector => (
<Button
key={connector.name}
text={connector.name}
onClick={() => connect({ connector })}
/>
))}
</div>
);
}

return (
<div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7">
<br />
<div>
<Paragraph>BTC Wallet: {btcAddress}</Paragraph>
<br />
<Button onClick={() => disconnect()} text="Disconnect" />
<br />
<br />
Amount: (Balance: {formatUnits(data?.value.toString() || '0', 8)} BTC)
Amount: (Balance: {formatUnits(data?.total.toString() || '0', 8)} BTC)
<Input
placeholder="Amount (BTC)"
step="0.00000001"
Expand Down Expand Up @@ -138,7 +121,6 @@ export const BobGatewayForm: FC = () => {
}))}
className="min-w-36 w-full lg:w-auto"
/>
<br />
<Button loading={isPending} text="submit" onClick={onSbumit} />
</div>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { FC, useMemo, useState } from 'react';

import { t } from 'i18next';

import { Tabs } from '@sovryn/ui';

import { translations } from '../../../../../locales/i18n';
import { BobGatewayDeposit } from '../BobGatewayDeposit/BobGatewayDeposit';

export const BobGatewayForm: FC = () => {
const [index, setIndex] = useState(0);

const items = useMemo(
() => [
{
label: t(translations.bobGatewayPage.deposit),
content: <BobGatewayDeposit />,
dataAttribute: 'bob-gateway-deposit',
},
{
label: t(translations.bobGatewayPage.deposit),
content: <BobGatewayDeposit />,
dataAttribute: 'bob-gateway-deposit',
},
],
[],
);

return (
<div className="flex py-8 justify-center gap-6">
<div className="p-0 sm:border sm:border-gray-50 sm:rounded lg:min-w-[28rem] sm:p-6 sm:bg-gray-90">
<Tabs
items={items}
onChange={setIndex}
index={index}
className="w-full border-none"
contentClassName="border-none"
/>
</div>
</div>
);
};
5 changes: 4 additions & 1 deletion apps/frontend/src/locales/en/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
},
"connectWalletButton": {
"connect": "Get started",
"connectBTC": "Connect BTC wallet",
"rewards": "Rewards",
"notifications": "Notifications",
"history": "History",
Expand Down Expand Up @@ -1955,7 +1956,9 @@
"meta": {
"title": "BOB Gateway"
},
"description": "New way earning in AMM"
"description": "New way earning in AMM",
"deposit": "Deposit",
"withdraw": "Withdraw"
},
"runesPage": {
"meta": {
Expand Down
Loading

0 comments on commit 72deefd

Please sign in to comment.