Skip to content

Commit

Permalink
Merge branch 'dev' into dev-fuelWalletWithdrawal
Browse files Browse the repository at this point in the history
  • Loading branch information
arentant committed Dec 27, 2024
2 parents c382f1f + 4131977 commit 291f0b6
Show file tree
Hide file tree
Showing 17 changed files with 326 additions and 86 deletions.
1 change: 1 addition & 0 deletions Models/Network.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,5 @@ export class Metadata {
evm_oracle_contract?: `0x${string}` | null
evm_multicall_contract?: string | null
listing_date: string
zks_paymaster_contract?: `0x${string}` | null
}
2 changes: 1 addition & 1 deletion components/Input/Address/AddressPicker/AddressBook.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ type AddressBookProps = {
const AddressBook: FC<AddressBookProps> = ({ addressBook, onSelectAddress, destination, destination_address, partner }) => {

return (
<div className="text-left">
<div className="text-left !mt-1">
<CommandWrapper>
<CommandList>
<CommandGroup
Expand Down
82 changes: 46 additions & 36 deletions components/Input/Address/AddressPicker/AddressWithIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ type Props = {
const AddressWithIcon: FC<Props> = ({ addressItem, connectedWallet, partner, network, balance }) => {

const difference_in_days = addressItem?.date ? Math.round(Math.abs(((new Date()).getTime() - new Date(addressItem.date).getTime()) / (1000 * 3600 * 24))) : undefined
const maxWalletNameWidth = calculateMaxWidth(String(balance?.amount));

const descriptions = [
{
Expand All @@ -43,7 +44,7 @@ const AddressWithIcon: FC<Props> = ({ addressItem, connectedWallet, partner, net
},
{
group: AddressGroup.ConnectedWallet,
text: <p>{connectedWallet?.displayName || 'Connected wallet'}</p>,
text: <p className={`${maxWalletNameWidth} text-ellipsis sm:max-w-full text-nowrap overflow-hidden`}>{connectedWallet?.displayName || 'Connected wallet'}</p>,
icon: connectedWallet?.icon || WalletIcon
},
{
Expand All @@ -57,42 +58,40 @@ const AddressWithIcon: FC<Props> = ({ addressItem, connectedWallet, partner, net

return (
<div className="w-full flex items-center justify-between">
<div className='flex gap-3 text-sm items-center'>
<div className='flex bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9'>
{
(partner?.is_wallet && addressItem.group === AddressGroup.FromQuery) ?
<div className="shrink-0 flex items-center pointer-events-none">
{
partner?.logo &&
<Image
alt="Partner logo"
className='rounded-md object-contain'
src={partner.logo}
width="36"
height="36"
/>
}
</div>
:
<AddressIcon className="scale-150 h-9 w-9" address={addressItem.address} size={36} />
}
</div>
<div className="flex flex-col items-start">
<div className="flex">
<ExtendedAddress address={addressItem.address} network={network} />
</div>
<div className="flex bg-secondary-400 text-primary-text items-center justify-center rounded-md h-8 overflow-hidden w-8">
{
(partner?.is_wallet && addressItem.group === AddressGroup.FromQuery) ? (
partner?.logo && (
<Image
alt="Partner logo"
className="rounded-md object-contain"
src={partner.logo}
width="36"
height="36"
/>
)
) : (
<AddressIcon className="scale-150 h-9 w-9" address={addressItem.address} size={36} />
)
}
</div>

<div className="text-secondary-text">
<div className="inline-flex items-center gap-1.5">
{itemDescription?.icon && <itemDescription.icon className="rounded flex-shrink-0 h-4 w-4" />}
{itemDescription?.text}
</div>
<div className="flex flex-col items-start flex-grow min-w-0 ml-3 text-sm">
<div className="flex w-full min-w-0">
<ExtendedAddress address={addressItem.address} network={network} addressClassNames="font-normal" />
</div>
<div className="text-secondary-text w-full min-w-0">
<div className="flex items-center gap-1 text-xs">
{itemDescription?.icon && (
<itemDescription.icon className="rounded flex-shrink-0 h-3.5 w-3.5" />
)}
{itemDescription?.text}
</div>
</div>
</div>
{
balance &&
<span className="text-sm flex space-x-2 justif-end">

{balance && (
<div className="flex-shrink-0 text-sm text-secondary-text text-right ml-3">
{
balance.amount != undefined && !isNaN(balance.amount) ?
<div className="text-right text-secondary-text font-normal text-sm">
Expand All @@ -108,10 +107,9 @@ const AddressWithIcon: FC<Props> = ({ addressItem, connectedWallet, partner, net
:
<></>
}
</span>
}
</div>
)}
</div>

)
}

Expand All @@ -122,6 +120,18 @@ type ExtendedAddressProps = {
onDisconnect?: () => void;
}

const calculateMaxWidth = (balance: string | undefined) => {
const symbolCount = balance?.length || 0;

if (symbolCount <= 6) {
return '';
} else if (symbolCount <= 12) {
return 'max-w-[100px] mr-1';
} else {
return 'max-w-[50px]';
}
};

export const ExtendedAddress: FC<ExtendedAddressProps> = ({ address, network, addressClassNames, onDisconnect }) => {
const [isCopied, setCopied] = useCopyClipboard()
const [isPopoverOpen, setPopoverOpen] = useState(false)
Expand Down
1 change: 1 addition & 0 deletions components/Input/Amount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const AmountField = forwardRef(function AmountField(_, ref: any) {
const name = "amount"
const walletBalance = balance?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol)
let maxAllowedAmount: number | null = maxAmountFromApi || 0

if (query.balances && fromCurrency) {
try {
const balancesFromQueries = new URL(window.location.href.replaceAll('&quot;', '"')).searchParams.get('balances');
Expand Down
2 changes: 1 addition & 1 deletion components/Swap/Form/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const SwapForm: FC<Props> = ({ partner }) => {
const newToToken = newTo?.tokens.find(t => t.symbol === fromCurrency?.symbol)

const destinationProvider = (destination && !toExchange)
? providers.find(p => p.withdrawalSupportedNetworks?.includes(destination?.name) && p.connectedWallets?.some(w => !w.isNotAvailable && w.addresses.some(a => a.toLowerCase() === values.destination_address?.toLowerCase())))
? providers.find(p => p.autofillSupportedNetworks?.includes(destination?.name) && p.connectedWallets?.some(w => !w.isNotAvailable && w.addresses.some(a => a.toLowerCase() === values.destination_address?.toLowerCase())))
: undefined

const newDestinationProvider = (newTo && !toExchange) ? providers.find(p => p.autofillSupportedNetworks?.includes(newTo.name) && p.connectedWallets?.some(w => !w.isNotAvailable && w.addresses.some(a => a.toLowerCase() === selectedSourceAccount?.address.toLowerCase())))
Expand Down
94 changes: 94 additions & 0 deletions components/Swap/Withdraw/Wallet/SophonWalletWithdraw.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { ArrowLeftRight } from 'lucide-react';
import { FC, useCallback, useState } from 'react'
import toast from 'react-hot-toast';
import { useSwapTransactionStore } from '../../../../stores/swapTransactionStore';
import { BackendTransactionStatus } from '../../../../lib/layerSwapApiClient';
import { ButtonWrapper, ChangeNetworkButton, ConnectWalletButton } from './WalletTransfer/buttons';
import { useAccount } from 'wagmi';
import useWallet from '../../../../hooks/useWallet';
import { WithdrawPageProps } from './WalletTransferContent';
import { sophon, sophonTestnet } from 'viem/chains';
import { createWalletClient, custom, JsonRpcAccount } from 'viem';
import { eip712WalletActions, getGeneralPaymasterInput } from 'viem/zksync';
import KnownInternalNames from '../../../../lib/knownIds';

const SophonWalletWithdraw: FC<WithdrawPageProps> = ({ amount, depositAddress, network, token, swapId, callData }) => {
const [loading, setLoading] = useState(false);

const { setSwapTransaction } = useSwapTransactionStore();
const { chain: activeChain, connector } = useAccount();

const networkChainId = Number(network?.chain_id) ?? undefined
const { provider } = useWallet(network, 'withdrawal')
const wallet = provider?.activeWallet

const handleTransfer = useCallback(async () => {

if (!wallet?.address || !swapId || !depositAddress || !token || amount == undefined || !callData || !network?.metadata.zks_paymaster_contract) return

try {
setLoading(true)

const walletProvider = await connector?.getProvider() as any

if (!walletProvider) throw new Error('Could not get provider')

const account = {
address: wallet?.address,
type: 'json-rpc'
} as JsonRpcAccount

const walletClient = createWalletClient({
chain: network.name === KnownInternalNames.Networks.SophonSepolia ? sophonTestnet : sophon,
transport: custom(walletProvider),
account: account
}).extend(eip712WalletActions());

const request = await walletClient.prepareTransactionRequest({
to: depositAddress,
data: callData as `0x${string}`,
paymaster: network?.metadata.zks_paymaster_contract,
paymasterInput: getGeneralPaymasterInput({ innerInput: "0x" }),
})

const signature = await walletClient.signTransaction(request as any)
const hash = await walletClient.sendRawTransaction({
serializedTransaction: signature
})

if (hash) {
setSwapTransaction(swapId, BackendTransactionStatus.Pending, hash);
}
}
catch (e) {
if (e?.message) {
if (e.name.includes("EstimateGasExecutionError")) return toast("You don't have enough funds")
toast(e.message)
return
}
}
finally {
setLoading(false)
}
}, [swapId, depositAddress, token, amount, callData])

if (!wallet) {
return <ConnectWalletButton />
}

else if (activeChain?.id !== networkChainId && network) {
return <ChangeNetworkButton
chainId={networkChainId}
network={network.display_name}
/>
}

return (
<>
<ButtonWrapper isDisabled={!!(loading)} isSubmitting={!!loading} onClick={handleTransfer} icon={<ArrowLeftRight className="h-5 w-5 ml-2" aria-hidden="true" />} >
Send from wallet
</ButtonWrapper>
</>
)
}
export default SophonWalletWithdraw;
4 changes: 2 additions & 2 deletions components/Swap/Withdraw/Wallet/WalletTransfer/networkGas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ const NetworkGas: FC<NetworkGasProps> = ({ address, token, network }) => {

const { gas: networkGas, isGasLoading } = useSWRGas(address, network, token)

if (!networkGas)
if (networkGas == undefined)
return <></>

return <div className="flex flex-row items-center gap-1 w-full text-sm px-1 mb-2.5 justify-end">
<Fuel className="h-4 w-4 text-secondary-text" />
<p className="text-secondary-text">Estimated gas:</p>
<div className="text-right flex items-center gap-1">
{isGasLoading ? <div className='h-[10px] w-10 bg-gray-500 rounded-sm animate-pulse' /> : networkGas?.toFixed(token.precision || 0)} <span>{token?.symbol}</span>
{isGasLoading ? <div className='h-[10px] w-10 bg-gray-500 rounded-sm animate-pulse' /> : networkGas?.toFixed(networkGas == 0 ? 0 : token.precision || 0)} <span>{token?.symbol}</span>
</div>
</div>
}
Expand Down
12 changes: 12 additions & 0 deletions components/Swap/Withdraw/Wallet/WalletTransferContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Network, Token } from "../../../../Models/Network";
import TonWalletWithdrawStep from "./TonWalletWithdraw";
import ParadexWalletWithdrawStep from "./paradex/index";
import FuelWalletWithdrawStep from "./FuelWalletWithdrawal";
import SophonWalletWithdraw from "./SophonWalletWithdraw";

//TODO have separate components for evm and none_evm as others are sweepless anyway
export const WalletTransferContent: FC = () => {
Expand Down Expand Up @@ -46,6 +47,8 @@ export const WalletTransferContent: FC = () => {

const sourceIsFuel = source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.FuelMainnet?.toUpperCase()
|| source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.FuelTestnet?.toUpperCase();
const sourceIsSophon = source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.SophonMainnet?.toUpperCase()
|| source_network_internal_name?.toUpperCase() === KnownInternalNames.Networks.SophonSepolia?.toUpperCase();

const depositAddress = depositActionsResponse?.find(da => true)?.to_address;
const amount = depositActionsResponse?.find(da => true)?.amount || 0;
Expand Down Expand Up @@ -118,6 +121,15 @@ export const WalletTransferContent: FC = () => {
token={swap?.source_token}
swapId={swap?.id}
callData={callData}
/>
else if (sourceIsSophon)
return <SophonWalletWithdraw
amount={amount}
depositAddress={depositAddress}
network={swap?.source_network}
token={swap?.source_token}
swapId={swap?.id}
callData={callData}
/>;
else
return <>
Expand Down
6 changes: 5 additions & 1 deletion components/WalletModal/ConnectorsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { resolveWalletConnectorIcon } from '../../lib/wallets/utils/resolveWalle
import { Loader } from 'lucide-react';
import { Wallet } from '../../Models/WalletProvider';
import { ModalWalletProvider } from '.';
import CopyButton from '../buttons/copyButton';

export type WalletsListProps = {
modalWalletProvider: ModalWalletProvider;
Expand Down Expand Up @@ -51,7 +52,7 @@ const ConnectList: FC<WalletsListProps> = ({ modalWalletProvider: provider, onFi
}

if (selectedProvider?.connector?.qr) return <div className="flex flex-col justify-start space-y-2">
<div className='w-full flex justify-center pt-2'>
<div className='w-full flex flex-col justify-center items-center pt-2'>
<QRCodeSVG
className="rounded-lg"
value={selectedProvider?.connector?.qr}
Expand All @@ -71,6 +72,9 @@ const ConnectList: FC<WalletsListProps> = ({ modalWalletProvider: provider, onFi
: undefined
}
/>
<div className='bg-secondary text-secondary-text px-14 py-1.5 rounded-md mt-3 flex items-center'>
<CopyButton toCopy={selectedProvider?.connector?.qr}>Copy QR URL</CopyButton>
</div>
</div>
</div>

Expand Down
Loading

0 comments on commit 291f0b6

Please sign in to comment.