Skip to content

Commit

Permalink
feat: handle withdraw wallets
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoseRFelix
JoseRFelix committed Jul 2, 2024
1 parent e374ffa commit af15e9e
Show file tree
Hide file tree
Showing 22 changed files with 190 additions and 112 deletions.
2 changes: 1 addition & 1 deletion packages/bridge/src/squid/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export class SquidBridgeProvider implements BridgeProvider {
});
}

if (data.route.params.toToken.address !== toAsset.address) {
if (data.route.params.toToken.address.toLowerCase() !== toAsset.address.toLowerCase()) {
throw new BridgeQuoteError({
bridgeId: SquidBridgeProvider.ID,
errorType: "UnsupportedQuoteError",
Expand Down
107 changes: 65 additions & 42 deletions packages/web/components/bridge/immersive/amount-screen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,28 +139,35 @@ export const AmountScreen = observer(
} = useDisclosure();

// Wallets
const destinationAccount = accountStore.getWallet(
accountStore.osmosisChainId
);
const osmosisAccount = accountStore.getWallet(accountStore.osmosisChainId);
const {
address: evmAddress,
connector: evmConnector,
isConnected: isEvmWalletConnected,
} = useEvmWalletAccount();

const cosmosCounterpartyAccountRepo =
const fromCosmosCounterpartyAccountRepo =
fromChain?.chainType === "evm" || isNil(fromChain)
? undefined
: accountStore.getWalletRepo(fromChain.chainId);
const cosmosCounterpartyAccount =
const fromCosmosCounterpartyAccount =
fromChain?.chainType === "evm" || isNil(fromChain)
? undefined
: accountStore.getWallet(fromChain.chainId);

const sourceAddress =
fromChain?.chainType === "evm"
const toCosmosCounterpartyAccountRepo =
toChain?.chainType === "evm" || isNil(toChain)
? undefined
: accountStore.getWalletRepo(toChain.chainId);
const toCosmosCounterpartyAccount =
toChain?.chainType === "evm" || isNil(toChain)
? undefined
: accountStore.getWallet(toChain.chainId);

const toAddress =
toChain?.chainType === "evm"
? evmAddress
: cosmosCounterpartyAccount?.address;
: toCosmosCounterpartyAccount?.address;

const { data: assetsInOsmosis } =
api.edge.assets.getCanonicalAssetWithVariants.useQuery(
Expand Down Expand Up @@ -287,7 +294,7 @@ export const AmountScreen = observer(
SupportedAsset,
{ chainType: "cosmos" }
>[],
userCosmosAddress: cosmosCounterpartyAccount?.address,
userCosmosAddress: fromCosmosCounterpartyAccount?.address,
},
{
enabled: !isNil(fromChain) && !isNil(supportedSourceAssets),
Expand Down Expand Up @@ -434,40 +441,48 @@ export const AmountScreen = observer(
useEffect(() => {
if (!fromChain || !toChain) return;

const account =
direction === "deposit"
? fromCosmosCounterpartyAccount
: toCosmosCounterpartyAccount;
const accountRepo =
direction === "deposit"
? fromCosmosCounterpartyAccountRepo
: toCosmosCounterpartyAccountRepo;
const chain = direction === "deposit" ? fromChain : toChain;

if (
// If the chain is an EVM chain, we don't need to connect the cosmos chain
chain.chainType !== "cosmos" ||
// Or if the account is already connected
!!cosmosCounterpartyAccount?.address ||
!!account?.address ||
// Or if there's no available cosmos chain
!firstSupportedCosmosChain ||
// Or if the account is already connected
!!cosmosCounterpartyAccountRepo?.current
!!accountRepo?.current
) {
return;
}

cosmosCounterpartyAccountRepo
?.connect(destinationAccount?.walletName)
.catch(() =>
// Display the connect modal if the user for some reason rejects the connection
onOpenWalletSelect({
walletOptions: [
{ walletType: "cosmos", chainId: String(chain.chainId) },
],
})
);
accountRepo?.connect(osmosisAccount?.walletName).catch(() =>
// Display the connect modal if the user for some reason rejects the connection
onOpenWalletSelect({
walletOptions: [
{ walletType: "cosmos", chainId: String(chain.chainId) },
],
})
);
}, [
destinationAccount?.walletName,
cosmosCounterpartyAccount?.address,
cosmosCounterpartyAccountRepo,
direction,
firstSupportedCosmosChain,
fromChain,
fromCosmosCounterpartyAccount,
fromCosmosCounterpartyAccountRepo,
onOpenWalletSelect,
osmosisAccount?.walletName,
toChain,
toCosmosCounterpartyAccount,
toCosmosCounterpartyAccountRepo,
]);

/**
Expand Down Expand Up @@ -807,14 +822,16 @@ export const AmountScreen = observer(

<WalletDisplay
icon={
fromChain?.chainType === "evm"
(direction === "deposit" ? fromChain : toChain)
?.chainType === "evm"
? evmConnector?.icon
: cosmosCounterpartyAccount?.walletInfo.logo
: fromCosmosCounterpartyAccount?.walletInfo.logo
}
name={
fromChain?.chainType === "evm"
(direction === "deposit" ? fromChain : toChain)
?.chainType === "evm"
? evmConnector?.name
: cosmosCounterpartyAccount?.walletInfo.prettyName
: fromCosmosCounterpartyAccount?.walletInfo.prettyName
}
suffix={
<Icon
Expand All @@ -837,16 +854,20 @@ export const AmountScreen = observer(
setChain(chain);
resetAssets();
}}
evmChain={
fromChain?.chainType === "evm"
? fromChain
: firstSupportedEvmChain
}
cosmosChain={
fromChain?.chainType === "cosmos"
? fromChain
: firstSupportedCosmosChain
}
evmChain={(() => {
const chain =
direction === "deposit" ? fromChain : toChain;
return chain?.chainType === "evm"
? chain
: firstSupportedEvmChain;
})()}
cosmosChain={(() => {
const chain =
direction === "deposit" ? fromChain : toChain;
return chain?.chainType === "cosmos"
? chain
: firstSupportedCosmosChain;
})()}
/>
</>
) : (
Expand All @@ -860,12 +881,12 @@ export const AmountScreen = observer(
icon={
fromChain?.chainType === "evm"
? evmConnector?.icon
: destinationAccount?.walletInfo.logo
: osmosisAccount?.walletInfo.logo
}
name={
fromChain?.chainType === "evm"
? evmConnector?.name
: destinationAccount?.walletInfo.prettyName
: osmosisAccount?.walletInfo.prettyName
}
/>
</div>
Expand Down Expand Up @@ -1257,7 +1278,9 @@ export const AmountScreen = observer(
disabled={
!isNil(buttonErrorMessage) ||
isLoadingBridgeQuote ||
isLoadingBridgeTransaction
isLoadingBridgeTransaction ||
cryptoAmount === "" ||
cryptoAmount === "0"
}
className="w-full text-h6 font-h6"
variant={
Expand Down Expand Up @@ -1285,7 +1308,7 @@ export const AmountScreen = observer(
toAsset={destinationAsset}
fromChain={fromChain}
toChain={toChain}
toAddress={sourceAddress}
toAddress={toAddress}
onRequestClose={() => setAreMoreOptionsVisible(false)}
/>
</>
Expand Down
83 changes: 45 additions & 38 deletions packages/web/components/bridge/immersive/bridge-network-select-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,50 +126,57 @@ export const BridgeNetworkSelectModal = ({
size="full"
/>
<div className="flex flex-col gap-1">
{filteredChains.map((chain) => (
<button
key={chain.chainId}
className="subtitle1 flex items-center justify-between rounded-2xl px-4 py-4 transition-colors duration-200 hover:bg-osmoverse-700/50"
onClick={async () => {
if (
isEvmWalletConnected &&
chain.chainType === "evm" &&
currentEvmChainId !== chain.chainId
) {
try {
setIsSwitchingChain(true);
await switchChainAsync({
chainId: chain.chainId as EthereumChainIds,
{filteredChains.map((chain) => {
const shouldSwitchChain =
isEvmWalletConnected &&
chain.chainType === "evm" &&
currentEvmChainId !== chain.chainId;
return (
<button
key={chain.chainId}
className="subtitle1 flex items-center justify-between rounded-2xl px-4 py-4 transition-colors duration-200 hover:bg-osmoverse-700/50"
onClick={async () => {
if (shouldSwitchChain) {
try {
setIsSwitchingChain(true);
await switchChainAsync({
chainId: chain.chainId as EthereumChainIds,
});
} catch {
setIsSwitchingChain(false);
return;
}
}

if (
!isEvmWalletConnected &&
chain.chainType === "evm"
) {
setConnectingToEvmChain({
chainId: Number(chain.chainId),
chainType: chain.chainType,
chainName: chain.prettyName,
});
} catch {
setIsSwitchingChain(false);
setCurrentScreen(Screens.SelectWallet);
return;
}
}

if (
!isEvmWalletConnected &&
chain.chainType === "evm"
) {
setConnectingToEvmChain({
chainId: Number(chain.chainId),
onSelectChain({
chainId: chain.chainId,
chainType: chain.chainType,
chainName: chain.prettyName,
});
setCurrentScreen(Screens.SelectWallet);
return;
}

onSelectChain({
chainId: chain.chainId,
chainType: chain.chainType,
chainName: chain.prettyName,
} as BridgeChain);
}}
>
{chain.prettyName}
</button>
))}
} as BridgeChain);
}}
>
<span>{chain.prettyName}</span>
{shouldSwitchChain && (
<span className="body1 text-wosmongton-300">
{t("transfer.connect")}
</span>
)}
</button>
);
})}
</div>
</div>
</div>
Expand Down
19 changes: 8 additions & 11 deletions packages/web/components/bridge/immersive/bridge-provider-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,18 +86,15 @@ export const BridgeProviderDropdown = ({
className="z-[1000] mt-3 flex max-h-64 flex-col gap-1 overflow-auto rounded-2xl bg-osmoverse-825 px-2 py-2"
>
{quotes.map(
(
{
data: {
provider,
estimatedTime,
transferFeeFiat,
gasCostFiat,
expectedOutputFiat,
},
({
data: {
provider,
estimatedTime,
transferFeeFiat,
gasCostFiat,
expectedOutputFiat,
},
index
) => {
}) => {
const totalFee = transferFeeFiat
?.add(
gasCostFiat ??
Expand Down
Loading

0 comments on commit af15e9e

Please sign in to comment.