Skip to content

Commit f9a0f46

Browse files
samsiegartsamsiegart
authored
feat: ist winddown compatibility
* chore: lint * feat: ist winddown compatibility
1 parent 9b9389f commit f9a0f46

File tree

17 files changed

+125
-82
lines changed

17 files changed

+125
-82
lines changed

‎packages/example/.eslintrc.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ module.exports = {
1515
{ allowConstantExport: true },
1616
],
1717
},
18-
}
18+
};

‎packages/example/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
project: ['./tsconfig.json', './tsconfig.node.json'],
2323
tsconfigRootDir: __dirname,
2424
},
25-
}
25+
};
2626
```
2727

2828
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`

‎packages/example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"preview": "vite preview"
1212
},
1313
"dependencies": {
14-
"@agoric/react-components": "0.3.0",
14+
"@agoric/react-components": "0.4.0",
1515
"patch-package": "^7.0.0",
1616
"react": "^18.2.0",
1717
"react-dom": "^18.2.0",

‎packages/example/src/App.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ const App = () => {
2828
return (
2929
<ThemeProvider>
3030
<div className={themeClass}>
31-
<AgoricProvider
32-
wallets={wallets.extension}
33-
agoricNetworkConfigs={[localnet, mainnet]}
34-
/**
35-
* If unspecified, connects to Agoric Mainnet by default.
36-
* See "Network Dropdown" below to see how to switch between Agoric testnets.
37-
*/
38-
defaultChainName="agoric-local"
39-
>
40-
<ConnectWalletButton />
41-
</AgoricProvider>
42-
</div>
31+
<AgoricProvider
32+
wallets={wallets.extension}
33+
agoricNetworkConfigs={[localnet, mainnet]}
34+
/**
35+
* If unspecified, connects to Agoric Mainnet by default.
36+
* See "Network Dropdown" below to see how to switch between Agoric testnets.
37+
*/
38+
defaultChainName="agoric-local"
39+
>
40+
<ConnectWalletButton />
41+
</AgoricProvider>
42+
</div>
4343
</ThemeProvider>
4444
);
4545
};

‎packages/example/src/main.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import './installSesLockdown'
2-
import React from 'react'
3-
import ReactDOM from 'react-dom/client'
4-
import App from './App.tsx'
5-
import './index.css'
1+
import './installSesLockdown';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom/client';
4+
import App from './App.tsx';
5+
import './index.css';
66

77
ReactDOM.createRoot(document.getElementById('root')!).render(
88
<React.StrictMode>
99
<App />
1010
</React.StrictMode>,
11-
)
11+
);

‎packages/react-components/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@agoric/react-components",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/agoric/ui-kit"
@@ -26,7 +26,7 @@
2626
},
2727
"dependencies": {
2828
"@agoric/rpc": "^0.10.0",
29-
"@agoric/web-components": "^0.16.0",
29+
"@agoric/web-components": "^0.17.0",
3030
"@cosmos-kit/core": "2.8.9",
3131
"@cosmos-kit/react": "2.10.10",
3232
"@interchain-ui/react": "1.21.18",

packages/react-components/src/lib/components/OnboardIstModal.tsx renamed to packages/react-components/src/lib/components/OnboardTokenModal.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@ const agoricChainId = 'agoric-3';
1010
const istSelector: AssetSelector = ['symbol', 'IST'];
1111
const bldSelector: AssetSelector = ['symbol', 'BLD'];
1212

13-
export const OnboardIstModal = () => {
13+
type TokenType = 'IST' | 'BLD';
14+
15+
type Props = {
16+
token: TokenType;
17+
};
18+
19+
export const OnboardTokenModal = ({ token }: Props) => {
1420
const { address } = useAgoric();
1521
const elementsWalletClient = useElementsWalletClient();
22+
const destinationSelector = token === 'IST' ? istSelector : bldSelector;
1623

1724
const renderLiquidityButton = ({ onClick }: { onClick: () => void }) => {
1825
return (
1926
<Button onClick={onClick} leftIcon="walletFilled">
20-
Deposit IST
27+
Deposit {token}
2128
</Button>
2229
);
2330
};
@@ -36,7 +43,7 @@ export const OnboardIstModal = () => {
3643
defaultActiveTab={Tabs.SWAP}
3744
config={{
3845
icon: Ist,
39-
title: 'Deposit IST',
46+
title: `Deposit ${token}`,
4047
subtitle: '',
4148
tabsConfig: {
4249
[Tabs.BRIDGE_USDC]: {
@@ -49,24 +56,24 @@ export const OnboardIstModal = () => {
4956
enabled: true,
5057
defaults: {
5158
destinationChainId: agoricChainId,
52-
destinationAssetSelector: istSelector,
59+
destinationAssetSelector: destinationSelector,
5360
},
5461
},
5562
[Tabs.SWAP]: {
5663
enabled: true,
5764
defaults: {
5865
sourceChainId: agoricChainId,
59-
sourceAssetSelector: bldSelector,
66+
sourceAssetSelector: token === 'IST' ? bldSelector : istSelector,
6067
destinationChainId: agoricChainId,
61-
destinationAssetSelector: istSelector,
68+
destinationAssetSelector: destinationSelector,
6269
},
6370
},
6471
[Tabs.TRANSFER]: {
6572
enabled: true,
6673
defaults: {
6774
destinationChainId: agoricChainId,
6875
sourceChainId: agoricChainId,
69-
sourceAssetSelector: istSelector,
76+
sourceAssetSelector: destinationSelector,
7077
},
7178
},
7279
},

‎packages/react-components/src/lib/components/ProvisionNoticeModal.tsx‎

Lines changed: 60 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@ import { BasicModal, Button, Text } from '@interchain-ui/react';
22
import { useAgoric } from '../hooks';
33
import { stringifyValue } from '@agoric/web-components';
44
import { AssetKind } from '@agoric/ertp';
5-
import { OnboardIstModal } from './OnboardIstModal';
5+
import { OnboardTokenModal } from './OnboardTokenModal';
66

77
const feeDecimals = 6;
88

9-
const defaultContent = (fee?: bigint) => {
9+
const formatFeeUnit = (unit?: string) => {
10+
if (!unit) return '';
11+
return unit === 'ubld' ? 'BLD' : unit === 'uist' ? 'IST' : unit;
12+
};
13+
14+
const defaultContent = (fee?: bigint, feeUnit?: string) => {
1015
const prettyFee = stringifyValue(fee, AssetKind.NAT, feeDecimals);
16+
const prettyFeeUnit = formatFeeUnit(feeUnit);
1117

1218
return (
1319
<Text fontSize="large">
1420
To interact with contracts on the Agoric chain, a smart wallet must be
1521
created for your account. You will need{' '}
1622
<Text fontSize="large" as="span" fontWeight="$bold">
17-
{prettyFee} IST
23+
{prettyFee} {prettyFeeUnit}
1824
</Text>{' '}
1925
to fund its provision which will be deposited into the reserve pool. Click
2026
"Proceed" to provision wallet and submit transaction.
@@ -25,19 +31,62 @@ const defaultContent = (fee?: bigint) => {
2531
export type Props = {
2632
onClose: () => void;
2733
proceed?: () => void;
28-
mainContent?: (fee?: bigint) => JSX.Element;
34+
mainContent?: (fee?: bigint, feeUnit?: string) => JSX.Element;
2935
};
3036

3137
export const ProvisionNoticeModal = ({
3238
onClose,
3339
proceed,
3440
mainContent = defaultContent,
3541
}: Props) => {
36-
const { smartWalletProvisionFee, purses } = useAgoric();
42+
const { smartWalletProvisionFee, smartWalletProvisionFeeUnit, purses } =
43+
useAgoric();
44+
const bldPurse = purses?.find(p => p.brandPetname === 'BLD');
3745
const istPurse = purses?.find(p => p.brandPetname === 'IST');
3846
const canProceed =
3947
!smartWalletProvisionFee ||
40-
(istPurse && istPurse.currentAmount.value >= smartWalletProvisionFee);
48+
(smartWalletProvisionFeeUnit === 'ubld' &&
49+
bldPurse &&
50+
bldPurse.currentAmount.value >= smartWalletProvisionFee) ||
51+
(smartWalletProvisionFeeUnit === 'uist' &&
52+
istPurse &&
53+
istPurse.currentAmount.value >= smartWalletProvisionFee);
54+
55+
const renderBalance = () => {
56+
if (smartWalletProvisionFeeUnit === 'ubld' && bldPurse) {
57+
return (
58+
<div className="flex items-center">
59+
<Text fontSize="large">
60+
BLD Balance:{' '}
61+
<Text as="span" fontSize="large" fontWeight="$bold">
62+
{stringifyValue(
63+
bldPurse.currentAmount.value,
64+
AssetKind.NAT,
65+
feeDecimals,
66+
)}
67+
</Text>
68+
</Text>
69+
</div>
70+
);
71+
}
72+
if (smartWalletProvisionFeeUnit === 'uist' && istPurse) {
73+
return (
74+
<div className="flex items-center">
75+
<Text fontSize="large">
76+
IST Balance:{' '}
77+
<Text as="span" fontSize="large" fontWeight="$bold">
78+
{stringifyValue(
79+
istPurse.currentAmount.value,
80+
AssetKind.NAT,
81+
feeDecimals,
82+
)}
83+
</Text>
84+
</Text>
85+
</div>
86+
);
87+
}
88+
return null;
89+
};
4190

4291
return (
4392
<BasicModal
@@ -48,24 +97,12 @@ export const ProvisionNoticeModal = ({
4897
onClose={onClose}
4998
>
5099
<div className="my-4">
51-
{mainContent(smartWalletProvisionFee)}
100+
{mainContent(smartWalletProvisionFee, smartWalletProvisionFeeUnit)}
52101
<div className="my-4 flex justify-center gap-4">
53-
{istPurse && (
54-
<div className="flex items-center">
55-
<Text fontSize="large">
56-
IST Balance:{' '}
57-
<Text as="span" fontSize="large" fontWeight="$bold">
58-
{istPurse &&
59-
stringifyValue(
60-
istPurse.currentAmount.value,
61-
AssetKind.NAT,
62-
feeDecimals,
63-
)}
64-
</Text>
65-
</Text>
66-
</div>
67-
)}
68-
<OnboardIstModal />
102+
{renderBalance()}
103+
<OnboardTokenModal
104+
token={smartWalletProvisionFeeUnit === 'ubld' ? 'BLD' : 'IST'}
105+
/>
69106
</div>
70107
</div>
71108
<div className="flex justify-end gap-2 mt-6">

‎packages/react-components/src/lib/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ export * from './ConnectWalletButton';
22
export * from './NodeSelectorModal';
33
export * from './AmountInput';
44
export * from './NetworkDropdown';
5-
export * from './OnboardIstModal';
5+
export * from './OnboardTokenModal';
66
export * from './NoticeBanner';

‎packages/react-components/src/lib/context/AgoricContext.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export type AgoricState = {
3434
provisionSmartWallet?: AgoricWalletConnection['provisionSmartWallet'];
3535
makeOfferWithoutModal?: AgoricWalletConnection['makeOffer'];
3636
smartWalletProvisionFee?: bigint;
37+
smartWalletProvisionFeeUnit?: string;
3738
makeOffer?: (
3839
...params: Parameters<AgoricWalletConnection['makeOffer']>
3940
) => void;

0 commit comments

Comments
 (0)