@mezo-org/passport 0.16.0-dev.3 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/assets/DefaultAvatar.d.ts +5 -0
- package/dist/src/assets/DefaultAvatar.d.ts.map +1 -0
- package/dist/src/assets/DefaultAvatar.js +21 -0
- package/dist/src/assets/DefaultAvatar.js.map +1 -0
- package/dist/src/assets/EditIcon.d.ts +5 -0
- package/dist/src/assets/EditIcon.d.ts.map +1 -0
- package/dist/src/assets/EditIcon.js +10 -0
- package/dist/src/assets/EditIcon.js.map +1 -0
- package/dist/src/components/Dropdown/ConnectedTrigger.d.ts +8 -0
- package/dist/src/components/Dropdown/ConnectedTrigger.d.ts.map +1 -0
- package/dist/src/components/Dropdown/ConnectedTrigger.js +39 -0
- package/dist/src/components/Dropdown/ConnectedTrigger.js.map +1 -0
- package/dist/src/components/Dropdown/Content.d.ts +8 -0
- package/dist/src/components/Dropdown/Content.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Content.js +29 -0
- package/dist/src/components/Dropdown/Content.js.map +1 -0
- package/dist/src/components/Dropdown/DisconnectedTrigger.d.ts +7 -0
- package/dist/src/components/Dropdown/DisconnectedTrigger.d.ts.map +1 -0
- package/dist/src/components/Dropdown/DisconnectedTrigger.js +13 -0
- package/dist/src/components/Dropdown/DisconnectedTrigger.js.map +1 -0
- package/dist/src/components/Dropdown/Dropdown.d.ts +23 -0
- package/dist/src/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Dropdown.js +45 -0
- package/dist/src/components/Dropdown/Dropdown.js.map +1 -0
- package/dist/src/components/Dropdown/ListingItem.d.ts +14 -0
- package/dist/src/components/Dropdown/ListingItem.d.ts.map +1 -0
- package/dist/src/components/Dropdown/ListingItem.js +42 -0
- package/dist/src/components/Dropdown/ListingItem.js.map +1 -0
- package/dist/src/components/Dropdown/NestedViewLayout.d.ts +8 -0
- package/dist/src/components/Dropdown/NestedViewLayout.d.ts.map +1 -0
- package/dist/src/components/Dropdown/NestedViewLayout.js +33 -0
- package/dist/src/components/Dropdown/NestedViewLayout.js.map +1 -0
- package/dist/src/components/Dropdown/Receive/Receive.d.ts +4 -0
- package/dist/src/components/Dropdown/Receive/Receive.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Receive/Receive.js +64 -0
- package/dist/src/components/Dropdown/Receive/Receive.js.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountAddressActions.d.ts +4 -0
- package/dist/src/components/Dropdown/Root/AccountAddressActions.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountAddressActions.js +49 -0
- package/dist/src/components/Dropdown/Root/AccountAddressActions.js.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountBalance.d.ts +6 -0
- package/dist/src/components/Dropdown/Root/AccountBalance.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountBalance.js +32 -0
- package/dist/src/components/Dropdown/Root/AccountBalance.js.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountBtcListing.d.ts +6 -0
- package/dist/src/components/Dropdown/Root/AccountBtcListing.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountBtcListing.js +28 -0
- package/dist/src/components/Dropdown/Root/AccountBtcListing.js.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountError.d.ts +8 -0
- package/dist/src/components/Dropdown/Root/AccountError.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountError.js +17 -0
- package/dist/src/components/Dropdown/Root/AccountError.js.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountMusdListing.d.ts +4 -0
- package/dist/src/components/Dropdown/Root/AccountMusdListing.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountMusdListing.js +21 -0
- package/dist/src/components/Dropdown/Root/AccountMusdListing.js.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountOtherAssets.d.ts +8 -0
- package/dist/src/components/Dropdown/Root/AccountOtherAssets.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/AccountOtherAssets.js +43 -0
- package/dist/src/components/Dropdown/Root/AccountOtherAssets.js.map +1 -0
- package/dist/src/components/Dropdown/Root/Root.d.ts +8 -0
- package/dist/src/components/Dropdown/Root/Root.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/Root.js +49 -0
- package/dist/src/components/Dropdown/Root/Root.js.map +1 -0
- package/dist/src/components/Dropdown/Root/WalletAddress.d.ts +4 -0
- package/dist/src/components/Dropdown/Root/WalletAddress.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/WalletAddress.js +66 -0
- package/dist/src/components/Dropdown/Root/WalletAddress.js.map +1 -0
- package/dist/src/components/Dropdown/Root/WelcomeBlock.d.ts +6 -0
- package/dist/src/components/Dropdown/Root/WelcomeBlock.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Root/WelcomeBlock.js +88 -0
- package/dist/src/components/Dropdown/Root/WelcomeBlock.js.map +1 -0
- package/dist/src/components/Dropdown/Settings/InlineEditField.d.ts +12 -0
- package/dist/src/components/Dropdown/Settings/InlineEditField.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Settings/InlineEditField.js +95 -0
- package/dist/src/components/Dropdown/Settings/InlineEditField.js.map +1 -0
- package/dist/src/components/Dropdown/Settings/Settings.d.ts +4 -0
- package/dist/src/components/Dropdown/Settings/Settings.d.ts.map +1 -0
- package/dist/src/components/Dropdown/Settings/Settings.js +36 -0
- package/dist/src/components/Dropdown/Settings/Settings.js.map +1 -0
- package/dist/src/components/Dropdown/SlotNumber.d.ts +19 -0
- package/dist/src/components/Dropdown/SlotNumber.d.ts.map +1 -0
- package/dist/src/components/Dropdown/SlotNumber.js +67 -0
- package/dist/src/components/Dropdown/SlotNumber.js.map +1 -0
- package/dist/src/components/Dropdown/TestnetTopBanner.d.ts +3 -0
- package/dist/src/components/Dropdown/TestnetTopBanner.d.ts.map +1 -0
- package/dist/src/components/Dropdown/TestnetTopBanner.js +14 -0
- package/dist/src/components/Dropdown/TestnetTopBanner.js.map +1 -0
- package/dist/src/components/Dropdown/index.d.ts +3 -0
- package/dist/src/components/Dropdown/index.d.ts.map +1 -0
- package/dist/src/components/Dropdown/index.js +2 -0
- package/dist/src/components/Dropdown/index.js.map +1 -0
- package/dist/src/components/index.d.ts +2 -0
- package/dist/src/components/index.d.ts.map +1 -0
- package/dist/src/components/index.js +2 -0
- package/dist/src/components/index.js.map +1 -0
- package/dist/src/hooks/useAuthenticateWithWallet.d.ts +11 -11
- package/dist/src/hooks/useSignInWithWallet.d.ts +11 -11
- package/dist/src/hooks/useSignUpWithWallet.d.ts +11 -11
- package/dist/src/hooks/useWalletAccount.d.ts.map +1 -1
- package/dist/src/hooks/useWalletAccount.js +2 -5
- package/dist/src/hooks/useWalletAccount.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/package.json +2 -1
- package/src/assets/DefaultAvatar.tsx +74 -0
- package/src/assets/EditIcon.tsx +33 -0
- package/src/components/Dropdown/ConnectedTrigger.tsx +76 -0
- package/src/components/Dropdown/Content.tsx +56 -0
- package/src/components/Dropdown/DisconnectedTrigger.tsx +36 -0
- package/src/components/Dropdown/Dropdown.tsx +100 -0
- package/src/components/Dropdown/ListingItem.tsx +176 -0
- package/src/components/Dropdown/NestedViewLayout.tsx +88 -0
- package/src/components/Dropdown/README.md +41 -0
- package/src/components/Dropdown/Receive/Receive.tsx +144 -0
- package/src/components/Dropdown/Root/AccountAddressActions.tsx +99 -0
- package/src/components/Dropdown/Root/AccountBalance.tsx +69 -0
- package/src/components/Dropdown/Root/AccountBtcListing.tsx +53 -0
- package/src/components/Dropdown/Root/AccountError.tsx +34 -0
- package/src/components/Dropdown/Root/AccountMusdListing.tsx +45 -0
- package/src/components/Dropdown/Root/AccountOtherAssets.tsx +85 -0
- package/src/components/Dropdown/Root/Root.tsx +104 -0
- package/src/components/Dropdown/Root/WalletAddress.tsx +123 -0
- package/src/components/Dropdown/Root/WelcomeBlock.tsx +173 -0
- package/src/components/Dropdown/Settings/InlineEditField.tsx +212 -0
- package/src/components/Dropdown/Settings/Settings.tsx +87 -0
- package/src/components/Dropdown/SlotNumber.tsx +131 -0
- package/src/components/Dropdown/TestnetTopBanner.tsx +32 -0
- package/src/components/Dropdown/index.ts +2 -0
- package/src/components/index.ts +1 -0
- package/src/hooks/useWalletAccount.ts +1 -6
- package/src/index.ts +1 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useStyletron } from "@mezo-org/mezo-clay";
|
|
3
|
+
import { formatUnits } from "viem";
|
|
4
|
+
import ListingItem from "../ListingItem";
|
|
5
|
+
import { useTokensBalances } from "../../../hooks/useTokensBalances";
|
|
6
|
+
import { useBorrowData } from "../../../hooks/useBorrowData";
|
|
7
|
+
import AccountError from "./AccountError";
|
|
8
|
+
import { CONVERSION_RATE_DECIMALS } from "../../../hooks/useAssetsConversionRates";
|
|
9
|
+
import { usePassportContext } from "../../../hooks/usePassportContext";
|
|
10
|
+
export default function AccountBalance(props) {
|
|
11
|
+
const { overrides, ...restProps } = props;
|
|
12
|
+
const [, theme] = useStyletron();
|
|
13
|
+
const { nativeBalanceRefetchInterval } = usePassportContext();
|
|
14
|
+
const { data: tokensBalancesData, isError: isTokensBalancesError, isPending: isTokensBalancesDataPending, } = useTokensBalances({
|
|
15
|
+
queryOptions: {
|
|
16
|
+
staleTime: nativeBalanceRefetchInterval,
|
|
17
|
+
refetchInterval: nativeBalanceRefetchInterval,
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
const { data: borrowData, isError: isBorrowDataError, isPending: isBorrowDataPending, } = useBorrowData();
|
|
21
|
+
if (isTokensBalancesDataPending || isBorrowDataPending) {
|
|
22
|
+
return React.createElement(ListingItem, { isLoading: true, overrides: overrides });
|
|
23
|
+
}
|
|
24
|
+
if (isTokensBalancesError || isBorrowDataError) {
|
|
25
|
+
return (React.createElement(AccountError, { padding: `${theme.sizing.scale500} ${theme.sizing.scale800}`, topic: "account balance", overrides: overrides }));
|
|
26
|
+
}
|
|
27
|
+
const totalBalanceInUsd = Object.values(tokensBalancesData).reduce((acc, tokenBalance) => acc + tokenBalance.usd.value, 0n);
|
|
28
|
+
const totalBalanceNumber = Number(formatUnits(totalBalanceInUsd, CONVERSION_RATE_DECIMALS));
|
|
29
|
+
const totalDebtNumber = Number(borrowData.debtInUsd.formatted);
|
|
30
|
+
return (React.createElement(ListingItem, { label: "Total assets", value: totalBalanceNumber, subLabel: "Total liabilities", subValue: totalDebtNumber, overrides: overrides, ...restProps }));
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=AccountBalance.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountBalance.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBalance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAc,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAItE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA0B;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACzC,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,EAAE,4BAA4B,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE7D,MAAM,EACJ,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,qBAAqB,EAC9B,SAAS,EAAE,2BAA2B,GACvC,GAAG,iBAAiB,CAAC;QACpB,YAAY,EAAE;YACZ,SAAS,EAAE,4BAA4B;YACvC,eAAe,EAAE,4BAA4B;SAC9C;KACF,CAAC,CAAA;IACF,MAAM,EACJ,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,mBAAmB,GAC/B,GAAG,aAAa,EAAE,CAAA;IAEnB,IAAI,2BAA2B,IAAI,mBAAmB,EAAE,CAAC;QACvD,OAAO,oBAAC,WAAW,IAAC,SAAS,QAAC,SAAS,EAAE,SAAS,GAAI,CAAA;IACxD,CAAC;IAED,IAAI,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;QAC/C,OAAO,CACL,oBAAC,YAAY,IACX,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,EAC5D,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;IACH,CAAC;IAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAChE,CAAC,GAAG,EAAE,YAAY,EAAE,EAAE,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,EACnD,EAAE,CACH,CAAA;IAED,MAAM,kBAAkB,GAAG,MAAM,CAC/B,WAAW,CAAC,iBAAiB,EAAE,wBAAwB,CAAC,CACzD,CAAA;IAED,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;IAE9D,OAAO,CACL,oBAAC,WAAW,IACV,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAC,mBAAmB,EAC5B,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,SAAS,KAChB,SAAS,GACb,CACH,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BlockProps } from "@mezo-org/mezo-clay";
|
|
3
|
+
type AccountBTCListingProps = Omit<BlockProps, "children">;
|
|
4
|
+
export default function AccountBTCListing(props: AccountBTCListingProps): React.JSX.Element;
|
|
5
|
+
export {};
|
|
6
|
+
//# sourceMappingURL=AccountBtcListing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountBtcListing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBtcListing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAiB,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAQ/D,KAAK,sBAAsB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAE1D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAyCtE"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BitcoinCircle } from "@mezo-org/mezo-clay";
|
|
3
|
+
import ListingItem from "../ListingItem";
|
|
4
|
+
import { getAsset } from "../../../utils/assets";
|
|
5
|
+
import { useBorrowData } from "../../../hooks/useBorrowData";
|
|
6
|
+
import { useTokensBalances } from "../../../hooks/useTokensBalances";
|
|
7
|
+
import AccountError from "./AccountError";
|
|
8
|
+
import { usePassportContext } from "../../../hooks/usePassportContext";
|
|
9
|
+
export default function AccountBTCListing(props) {
|
|
10
|
+
const { nativeBalanceRefetchInterval } = usePassportContext();
|
|
11
|
+
const { data: borrowData, isError: isBorrowDataError, isPending: isBorrowDataPending, } = useBorrowData();
|
|
12
|
+
const { data: tokensBalancesData, isError: isTokensBalancesError, isPending: isTokensBalancesPending, } = useTokensBalances({
|
|
13
|
+
queryOptions: {
|
|
14
|
+
staleTime: nativeBalanceRefetchInterval,
|
|
15
|
+
refetchInterval: nativeBalanceRefetchInterval,
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
if (isTokensBalancesPending || isBorrowDataPending) {
|
|
19
|
+
return React.createElement(ListingItem, { isLoading: true });
|
|
20
|
+
}
|
|
21
|
+
if (isTokensBalancesError || isBorrowDataError) {
|
|
22
|
+
return React.createElement(AccountError, { topic: "Bitcoin balance" });
|
|
23
|
+
}
|
|
24
|
+
const btcBalance = Number(tokensBalancesData.BTC.usd.formatted);
|
|
25
|
+
const lockedCollateral = Number(borrowData.collateral.usd.formatted);
|
|
26
|
+
return (React.createElement(ListingItem, { icon: React.createElement(BitcoinCircle, null), label: getAsset("BTC").name, value: btcBalance, subLabel: "Locked collateral", subValue: lockedCollateral, ...props }));
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=AccountBtcListing.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountBtcListing.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountBtcListing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,aAAa,EAAc,MAAM,qBAAqB,CAAA;AAC/D,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAItE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA6B;IACrE,MAAM,EAAE,4BAA4B,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE7D,MAAM,EACJ,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,mBAAmB,GAC/B,GAAG,aAAa,EAAE,CAAA;IAEnB,MAAM,EACJ,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,qBAAqB,EAC9B,SAAS,EAAE,uBAAuB,GACnC,GAAG,iBAAiB,CAAC;QACpB,YAAY,EAAE;YACZ,SAAS,EAAE,4BAA4B;YACvC,eAAe,EAAE,4BAA4B;SAC9C;KACF,CAAC,CAAA;IAEF,IAAI,uBAAuB,IAAI,mBAAmB,EAAE,CAAC;QACnD,OAAO,oBAAC,WAAW,IAAC,SAAS,SAAG,CAAA;IAClC,CAAC;IAED,IAAI,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;QAC/C,OAAO,oBAAC,YAAY,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAAA;IACjD,CAAC;IAED,MAAM,UAAU,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAC/D,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAEpE,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAE,oBAAC,aAAa,OAAG,EACvB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,EAC3B,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAC,mBAAmB,EAC5B,QAAQ,EAAE,gBAAgB,KACtB,KAAK,GACT,CACH,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BlockProps } from "@mezo-org/mezo-clay";
|
|
3
|
+
type AccountErrorProps = {
|
|
4
|
+
topic: string;
|
|
5
|
+
} & BlockProps;
|
|
6
|
+
export default function AccountError(props: AccountErrorProps): React.JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=AccountError.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountError.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,UAAU,EAIX,MAAM,qBAAqB,CAAA;AAE5B,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,UAAU,CAAA;AAEd,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAqB5D"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { LabelSmall, mergeOverrides, useStyletron, } from "@mezo-org/mezo-clay";
|
|
3
|
+
export default function AccountError(props) {
|
|
4
|
+
const { topic, overrides, ...restProps } = props;
|
|
5
|
+
const [, theme] = useStyletron();
|
|
6
|
+
return (React.createElement(LabelSmall, { padding: `${theme.sizing.scale600} ${theme.sizing.scale800}`, color: "negative", overrides: mergeOverrides(overrides, {
|
|
7
|
+
Block: {
|
|
8
|
+
style: {
|
|
9
|
+
lineHeight: theme.sizing.scale700,
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
}), ...restProps },
|
|
13
|
+
"An error occured loading ",
|
|
14
|
+
topic,
|
|
15
|
+
"."));
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=AccountError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountError.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAEL,UAAU,EACV,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA;AAM5B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAwB;IAC3D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IAEhD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,EAC5D,KAAK,EAAC,UAAU,EAChB,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE;YACnC,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;iBAClC;aACF;SACF,CAAC,KACE,SAAS;;QAEa,KAAK;YACpB,CACd,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountMusdListing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountMusdListing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAgB,MAAM,qBAAqB,CAAA;AAO9D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,qBAmCpC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MUsdCircle02 } from "@mezo-org/mezo-clay";
|
|
3
|
+
import ListingItem from "../ListingItem";
|
|
4
|
+
import { getAsset } from "../../../utils/assets";
|
|
5
|
+
import { useBorrowData } from "../../../hooks/useBorrowData";
|
|
6
|
+
import { useTokensBalances } from "../../../hooks/useTokensBalances";
|
|
7
|
+
import AccountError from "./AccountError";
|
|
8
|
+
export default function AccountMusdListing(props) {
|
|
9
|
+
const { data: borrowData, isError: isBorrowDataError, isPending: isBorrowDataPending, } = useBorrowData();
|
|
10
|
+
const { data: tokensBalancesData, isError: isTokensBalancesError, isPending: isTokensBalancesPending, } = useTokensBalances();
|
|
11
|
+
if (isBorrowDataPending || isTokensBalancesPending) {
|
|
12
|
+
return React.createElement(ListingItem, { isLoading: true });
|
|
13
|
+
}
|
|
14
|
+
if (isBorrowDataError || isTokensBalancesError) {
|
|
15
|
+
return React.createElement(AccountError, { topic: "MUSD balance" });
|
|
16
|
+
}
|
|
17
|
+
const musdBalance = Number(tokensBalancesData.MUSD.usd.formatted);
|
|
18
|
+
const lockedCollateral = Number(borrowData.debtInUsd.formatted);
|
|
19
|
+
return (React.createElement(ListingItem, { icon: React.createElement(MUsdCircle02, null), label: getAsset("MUSD").name, value: musdBalance, subLabel: "Borrowed", subValue: lockedCollateral, ...props }));
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=AccountMusdListing.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountMusdListing.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountMusdListing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAc,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,KAAmC;IAEnC,MAAM,EACJ,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,mBAAmB,GAC/B,GAAG,aAAa,EAAE,CAAA;IAEnB,MAAM,EACJ,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,qBAAqB,EAC9B,SAAS,EAAE,uBAAuB,GACnC,GAAG,iBAAiB,EAAE,CAAA;IAEvB,IAAI,mBAAmB,IAAI,uBAAuB,EAAE,CAAC;QACnD,OAAO,oBAAC,WAAW,IAAC,SAAS,SAAG,CAAA;IAClC,CAAC;IAED,IAAI,iBAAiB,IAAI,qBAAqB,EAAE,CAAC;QAC/C,OAAO,oBAAC,YAAY,IAAC,KAAK,EAAC,cAAc,GAAG,CAAA;IAC9C,CAAC;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACjE,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;IAE/D,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAE,oBAAC,YAAY,OAAG,EACtB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,EAC5B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAC,UAAU,EACnB,QAAQ,EAAE,gBAAgB,KACtB,KAAK,GACT,CACH,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BlockProps } from "@mezo-org/mezo-clay";
|
|
3
|
+
type AccountOtherAssetsProps = {
|
|
4
|
+
onClick?: () => void;
|
|
5
|
+
} & Omit<BlockProps, "children">;
|
|
6
|
+
export default function AccountOtherAssets(props: AccountOtherAssetsProps): React.JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=AccountOtherAssets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountOtherAssets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountOtherAssets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAIL,UAAU,EACX,MAAM,qBAAqB,CAAA;AAO5B,KAAK,uBAAuB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAEhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmExE"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useStyletron, CoinsStacked02, mergeOverrides, } from "@mezo-org/mezo-clay";
|
|
3
|
+
import { formatUnits } from "viem";
|
|
4
|
+
import ListingItem from "../ListingItem";
|
|
5
|
+
import { useTokensBalances } from "../../../hooks/useTokensBalances";
|
|
6
|
+
import AccountError from "./AccountError";
|
|
7
|
+
import { CONVERSION_RATE_DECIMALS } from "../../../hooks/useAssetsConversionRates";
|
|
8
|
+
export default function AccountOtherAssets(props) {
|
|
9
|
+
const { onClick, overrides, ...restProps } = props;
|
|
10
|
+
const [, theme] = useStyletron();
|
|
11
|
+
const { data: tokensBalancesData, isPending: isTokensBalancesPending, isError: isTokensBalancesError, } = useTokensBalances();
|
|
12
|
+
if (isTokensBalancesPending) {
|
|
13
|
+
return React.createElement(ListingItem, { isLoading: true, overrides: overrides });
|
|
14
|
+
}
|
|
15
|
+
if (isTokensBalancesError) {
|
|
16
|
+
return (React.createElement(AccountError, { topic: "other assets", paddingTop: theme.sizing.scale100, paddingBottom: theme.sizing.scale100, overrides: overrides }));
|
|
17
|
+
}
|
|
18
|
+
const otherAssets = Object.values(tokensBalancesData)
|
|
19
|
+
.filter((asset) => !["BTC", "MUSD"].includes(asset.symbol))
|
|
20
|
+
.filter((asset) => asset.value > 0n);
|
|
21
|
+
const assetsCount = otherAssets.length;
|
|
22
|
+
const totalAssetsInUsd = Number(formatUnits(otherAssets.reduce((total, asset) => total + asset.usd.value, 0n), CONVERSION_RATE_DECIMALS));
|
|
23
|
+
let label = "No other assets";
|
|
24
|
+
if (assetsCount === 1)
|
|
25
|
+
label = "1 more asset";
|
|
26
|
+
if (assetsCount > 1)
|
|
27
|
+
label = `${assetsCount} more assets`;
|
|
28
|
+
return (React.createElement(ListingItem, { icon: React.createElement(CoinsStacked02, { color: theme.colors.contentPrimary }), label: label, value: totalAssetsInUsd, overrides: mergeOverrides({
|
|
29
|
+
Block: {
|
|
30
|
+
props: {
|
|
31
|
+
$as: "button",
|
|
32
|
+
onClick,
|
|
33
|
+
},
|
|
34
|
+
style: {
|
|
35
|
+
borderWidth: 0,
|
|
36
|
+
cursor: "pointer",
|
|
37
|
+
backgroundColor: "transparent",
|
|
38
|
+
minHeight: "56px",
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
}, overrides), ...restProps }));
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=AccountOtherAssets.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccountOtherAssets.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/AccountOtherAssets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,cAAc,GAEf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAA;AAMlF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAA8B;IACvE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IAElD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,EACJ,IAAI,EAAE,kBAAkB,EACxB,SAAS,EAAE,uBAAuB,EAClC,OAAO,EAAE,qBAAqB,GAC/B,GAAG,iBAAiB,EAAE,CAAA;IAEvB,IAAI,uBAAuB,EAAE,CAAC;QAC5B,OAAO,oBAAC,WAAW,IAAC,SAAS,QAAC,SAAS,EAAE,SAAS,GAAI,CAAA;IACxD,CAAC;IAED,IAAI,qBAAqB,EAAE,CAAC;QAC1B,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAC,cAAc,EACpB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EACjC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,EACpC,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;IACH,CAAC;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;SAClD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC1D,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAA;IAEtC,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,CAAA;IACtC,MAAM,gBAAgB,GAAG,MAAM,CAC7B,WAAW,CACT,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,EACjE,wBAAwB,CACzB,CACF,CAAA;IAED,IAAI,KAAK,GAAG,iBAAiB,CAAA;IAC7B,IAAI,WAAW,KAAK,CAAC;QAAE,KAAK,GAAG,cAAc,CAAA;IAC7C,IAAI,WAAW,GAAG,CAAC;QAAE,KAAK,GAAG,GAAG,WAAW,cAAc,CAAA;IAEzD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAE,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,GAAI,EAC5D,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,cAAc,CACvB;YACE,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,GAAG,EAAE,QAAQ;oBACb,OAAO;iBACR;gBACD,KAAK,EAAE;oBACL,WAAW,EAAE,CAAC;oBACd,MAAM,EAAE,SAAS;oBACjB,eAAe,EAAE,aAAa;oBAC9B,SAAS,EAAE,MAAM;iBAClB;aACF;SACF,EACD,SAAS,CACV,KACG,SAAS,GACb,CACH,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/Root.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAY1C,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;CAChC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,qBA+E5C"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { Block, Button, LogOut01, Settings01, useStyletron, } from "@mezo-org/mezo-clay";
|
|
2
|
+
import React, { useCallback } from "react";
|
|
3
|
+
import { useDisconnect } from "wagmi";
|
|
4
|
+
import { useSignOut } from "../../../hooks";
|
|
5
|
+
import WalletAddress from "./WalletAddress";
|
|
6
|
+
import AccountBalance from "./AccountBalance";
|
|
7
|
+
import WelcomeBlock from "./WelcomeBlock";
|
|
8
|
+
import AccountAddressActions from "./AccountAddressActions";
|
|
9
|
+
import AccountOtherAssets from "./AccountOtherAssets";
|
|
10
|
+
import AccountBtcListing from "./AccountBtcListing";
|
|
11
|
+
import AccountMusdListing from "./AccountMusdListing";
|
|
12
|
+
import useDropdownStore, { DropdownView } from "../../../stores/dropdownStore";
|
|
13
|
+
export default function Root(props) {
|
|
14
|
+
const { onSignOut, onOtherAssetsClick } = props;
|
|
15
|
+
const [, theme] = useStyletron();
|
|
16
|
+
const { disconnect } = useDisconnect();
|
|
17
|
+
const { signOut } = useSignOut();
|
|
18
|
+
const setDropdownView = useDropdownStore((state) => state.setView);
|
|
19
|
+
const handleSettingsClick = useCallback(() => setDropdownView(DropdownView.SETTINGS), [setDropdownView]);
|
|
20
|
+
const handleLogOut = useCallback(() => {
|
|
21
|
+
if (onSignOut) {
|
|
22
|
+
onSignOut();
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
signOut();
|
|
26
|
+
disconnect();
|
|
27
|
+
}, [signOut, disconnect, onSignOut]);
|
|
28
|
+
const overridesWithDivider = {
|
|
29
|
+
Block: {
|
|
30
|
+
style: {
|
|
31
|
+
borderBottomWidth: "1px",
|
|
32
|
+
borderBottomStyle: "solid",
|
|
33
|
+
borderBottomColor: theme.colors.borderOpaque,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
return (React.createElement(Block, { display: "inline-flex", flexDirection: "column" },
|
|
38
|
+
React.createElement(WelcomeBlock, null),
|
|
39
|
+
React.createElement(AccountAddressActions, { overrides: overridesWithDivider }),
|
|
40
|
+
React.createElement(WalletAddress, { overrides: overridesWithDivider }),
|
|
41
|
+
React.createElement(AccountBalance, { overrides: overridesWithDivider }),
|
|
42
|
+
React.createElement(AccountBtcListing, null),
|
|
43
|
+
React.createElement(AccountMusdListing, null),
|
|
44
|
+
React.createElement(AccountOtherAssets, { onClick: onOtherAssetsClick, overrides: overridesWithDivider }),
|
|
45
|
+
React.createElement(Block, { display: "flex", alignItems: "center", justifyContent: "space-between", padding: theme.sizing.scale300 },
|
|
46
|
+
React.createElement(Button, { size: "small", shape: "pill", kind: "tertiary", startEnhancer: React.createElement(Settings01, { color: "currentColor", size: 16 }), onClick: handleSettingsClick }, "Settings"),
|
|
47
|
+
React.createElement(Button, { size: "small", shape: "pill", kind: "tertiary", startEnhancer: React.createElement(LogOut01, { color: "currentColor", size: 16 }), onClick: handleLogOut }, "Sign out"))));
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=Root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Root.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/Root.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WalletAddress.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/WalletAddress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAOX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,UAAU,qBAyGtD"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { BitcoinCircle, Block, EthCircle, LabelMedium, LabelXSmall, mergeOverrides, MonoLabelXSmall, useStyletron, } from "@mezo-org/mezo-clay";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import { useCopyToClipboard } from "usehooks-ts";
|
|
4
|
+
import { usePassportContext } from "../../../hooks/usePassportContext";
|
|
5
|
+
import { getAddressExplorerUrl, trimAddress } from "../../../utils/address";
|
|
6
|
+
import { useWalletAccount } from "../../../hooks/useWalletAccount";
|
|
7
|
+
export default function WalletAddress(props) {
|
|
8
|
+
const { overrides, ...restProps } = props;
|
|
9
|
+
const { walletAddress, networkFamily } = useWalletAccount();
|
|
10
|
+
const { environment = "mainnet" } = usePassportContext();
|
|
11
|
+
const [, theme] = useStyletron();
|
|
12
|
+
const [, copy] = useCopyToClipboard();
|
|
13
|
+
const [isCopiedMessageVisible, setIsCopiedMessageVisible] = useState(false);
|
|
14
|
+
const handleCopyAddress = () => {
|
|
15
|
+
copy(walletAddress);
|
|
16
|
+
setIsCopiedMessageVisible(true);
|
|
17
|
+
setTimeout(() => {
|
|
18
|
+
setIsCopiedMessageVisible(false);
|
|
19
|
+
}, 2000);
|
|
20
|
+
};
|
|
21
|
+
const blockExplorerUrl = getAddressExplorerUrl(walletAddress, networkFamily, environment === "testnet");
|
|
22
|
+
const trimmedAddress = trimAddress(walletAddress);
|
|
23
|
+
const AccountIcon = networkFamily === "bitcoin" ? BitcoinCircle : EthCircle;
|
|
24
|
+
return (React.createElement(Block, { as: "button", onClick: handleCopyAddress, display: "flex", alignItems: "center", backgroundColor: "transparent", padding: `${theme.sizing.scale800} ${theme.sizing.scale700}`, overrides: mergeOverrides({
|
|
25
|
+
Block: {
|
|
26
|
+
style: {
|
|
27
|
+
gap: theme.sizing.scale700,
|
|
28
|
+
borderWidth: 0,
|
|
29
|
+
cursor: "pointer",
|
|
30
|
+
":hover": {
|
|
31
|
+
backgroundColor: theme.colors.backgroundTertiary,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
}, overrides), ...restProps },
|
|
36
|
+
React.createElement(AccountIcon, { color: theme.colors.black, size: theme.sizing.scale800, overrides: {
|
|
37
|
+
Svg: {
|
|
38
|
+
style: {
|
|
39
|
+
backgroundColor: theme.colors.black,
|
|
40
|
+
overflow: "hidden",
|
|
41
|
+
borderRadius: theme.borders.radius200,
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
} }),
|
|
45
|
+
React.createElement(Block, { display: "flex", flexDirection: "column", alignItems: "flex-start", overrides: {
|
|
46
|
+
Block: {
|
|
47
|
+
style: {
|
|
48
|
+
gap: theme.sizing.scale100,
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
} },
|
|
52
|
+
React.createElement(LabelMedium, null, "Connected Wallet"),
|
|
53
|
+
isCopiedMessageVisible ? (React.createElement(LabelXSmall, { color: theme.colors.contentSecondary }, "Copied address to clipboard")) : (React.createElement(Block, { as: "a", color: theme.colors.contentSecondary, href: blockExplorerUrl, target: "_blank", overrides: {
|
|
54
|
+
Block: {
|
|
55
|
+
style: {
|
|
56
|
+
color: "inherit",
|
|
57
|
+
textDecoration: "none",
|
|
58
|
+
":hover": {
|
|
59
|
+
textDecoration: "underline",
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
} },
|
|
64
|
+
React.createElement(MonoLabelXSmall, null, trimmedAddress))))));
|
|
65
|
+
}
|
|
66
|
+
//# sourceMappingURL=WalletAddress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WalletAddress.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/WalletAddress.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WelcomeBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/WelcomeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAOX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AA4DzB,KAAK,iBAAiB,GAAG,UAAU,CAAA;AAEnC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAoG5D"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { Block, HeadingMedium, LabelLarge, Mats, mergeOverrides, Skeleton, useStyletron, } from "@mezo-org/mezo-clay";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import DefaultAvatar from "../../../assets/DefaultAvatar";
|
|
4
|
+
import { useGetCurrentAccount } from "../../../hooks";
|
|
5
|
+
import { formatNumberToCompactString } from "../../../utils/numbers";
|
|
6
|
+
import AccountError from "./AccountError";
|
|
7
|
+
import { usePassportContext } from "../../../hooks/usePassportContext";
|
|
8
|
+
import SlotNumber from "../SlotNumber";
|
|
9
|
+
const DOT_DELIMITER_REGEX = /(?=\.)/;
|
|
10
|
+
function WelcomeBlockSkeleton() {
|
|
11
|
+
const [, theme] = useStyletron();
|
|
12
|
+
return (React.createElement(Block, { display: "flex", alignItems: "center", padding: theme.sizing.scale600, paddingTop: theme.sizing.scale900, paddingBottom: theme.sizing.scale800, overrides: {
|
|
13
|
+
Block: {
|
|
14
|
+
style: {
|
|
15
|
+
gap: theme.sizing.scale600,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
} },
|
|
19
|
+
React.createElement(Skeleton, { animation: true, width: theme.sizing.scale1200, height: theme.sizing.scale1200, overrides: {
|
|
20
|
+
Root: {
|
|
21
|
+
style: {
|
|
22
|
+
borderRadius: "100%",
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
} }),
|
|
26
|
+
React.createElement(Block, { display: "flex", flexDirection: "column", flex: 1, overrides: {
|
|
27
|
+
Block: {
|
|
28
|
+
style: {
|
|
29
|
+
gap: theme.sizing.scale100,
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
} },
|
|
33
|
+
React.createElement(Skeleton, { animation: true, width: "60%", height: theme.sizing.scale900 }),
|
|
34
|
+
React.createElement(Skeleton, { animation: true, width: "40%", height: theme.sizing.scale800 }))));
|
|
35
|
+
}
|
|
36
|
+
export default function WelcomeBlock(props) {
|
|
37
|
+
const { overrides, ...restProps } = props;
|
|
38
|
+
const { accountDataRefetchInterval } = usePassportContext();
|
|
39
|
+
const { data, isError, isPending } = useGetCurrentAccount({
|
|
40
|
+
staleTime: accountDataRefetchInterval,
|
|
41
|
+
refetchInterval: accountDataRefetchInterval,
|
|
42
|
+
});
|
|
43
|
+
const [, theme] = useStyletron();
|
|
44
|
+
if (isError) {
|
|
45
|
+
return (React.createElement(AccountError, { padding: theme.sizing.scale600, paddingTop: theme.sizing.scale900, paddingBottom: theme.sizing.scale800, marginBottom: theme.sizing.scale300, topic: "account information" }));
|
|
46
|
+
}
|
|
47
|
+
if (isPending) {
|
|
48
|
+
return React.createElement(WelcomeBlockSkeleton, null);
|
|
49
|
+
}
|
|
50
|
+
const [mezoId, mezoIdSuffix] = (data.mezoId ?? "").split(DOT_DELIMITER_REGEX);
|
|
51
|
+
return (React.createElement(Block, { display: "flex", alignItems: "center", paddingLeft: theme.sizing.scale600, paddingRight: theme.sizing.scale600, paddingTop: theme.sizing.scale900, paddingBottom: theme.sizing.scale800, overrides: mergeOverrides(overrides, {
|
|
52
|
+
Block: {
|
|
53
|
+
style: {
|
|
54
|
+
gap: theme.sizing.scale600,
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
}), ...restProps },
|
|
58
|
+
React.createElement(Block, { as: DefaultAvatar, width: theme.sizing.scale1200, height: theme.sizing.scale1200, overrides: {
|
|
59
|
+
Block: {
|
|
60
|
+
style: {
|
|
61
|
+
borderRadius: "100%",
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
} }),
|
|
65
|
+
React.createElement(Block, { display: "flex", flexDirection: "column" },
|
|
66
|
+
mezoId && mezoIdSuffix && (React.createElement(HeadingMedium, { as: "span" },
|
|
67
|
+
React.createElement(Block, { as: "span" }, mezoId),
|
|
68
|
+
React.createElement(Block, { as: "span", color: theme.colors.contentSecondary }, mezoIdSuffix))),
|
|
69
|
+
React.createElement(Block, { display: "flex", alignItems: "center", overrides: {
|
|
70
|
+
Block: {
|
|
71
|
+
style: {
|
|
72
|
+
gap: theme.sizing.scale100,
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
} },
|
|
76
|
+
React.createElement(Mats, { size: theme.sizing.scale600, overrides: {
|
|
77
|
+
Svg: {
|
|
78
|
+
style: {
|
|
79
|
+
margin: theme.sizing.scale100, // To reduce gap
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
} }),
|
|
83
|
+
React.createElement(LabelLarge, { color: theme.colors.contentPrimary },
|
|
84
|
+
React.createElement(SlotNumber, { formatFunction: formatNumberToCompactString }, data.totalMats),
|
|
85
|
+
" ",
|
|
86
|
+
"mats")))));
|
|
87
|
+
}
|
|
88
|
+
//# sourceMappingURL=WelcomeBlock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WelcomeBlock.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Root/WelcomeBlock.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type InlineEditFieldProps = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
onSave: (value: string) => Promise<void>;
|
|
7
|
+
validate?: (value: string) => string | null;
|
|
8
|
+
isLoading?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export default function InlineEditField(props: InlineEditFieldProps): React.JSX.Element;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=InlineEditField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineEditField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Settings/InlineEditField.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAA;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AA4BD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAkKlE"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { Block, ButtonIcon, Check, Close, Input, LabelSmall, ParagraphSmall, Spinner, useStyletron, } from "@mezo-org/mezo-clay";
|
|
2
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
3
|
+
import EditIcon from "../../../assets/EditIcon";
|
|
4
|
+
function InlineFieldWrapper({ label, children }) {
|
|
5
|
+
const [, theme] = useStyletron();
|
|
6
|
+
return (React.createElement(Block, { display: "flex", flexDirection: "column", overrides: {
|
|
7
|
+
Block: {
|
|
8
|
+
style: {
|
|
9
|
+
gap: theme.sizing.scale200,
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
} },
|
|
13
|
+
React.createElement(LabelSmall, { color: theme.colors.contentSecondary }, label),
|
|
14
|
+
children));
|
|
15
|
+
}
|
|
16
|
+
export default function InlineEditField(props) {
|
|
17
|
+
const { label, value, placeholder, onSave, validate, isLoading } = props;
|
|
18
|
+
const [, theme] = useStyletron();
|
|
19
|
+
const [isEditing, setIsEditing] = useState(false);
|
|
20
|
+
const [editValue, setEditValue] = useState(value);
|
|
21
|
+
const [error, setError] = useState(null);
|
|
22
|
+
const [isSaving, setIsSaving] = useState(false);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
setEditValue(value);
|
|
25
|
+
}, [value]);
|
|
26
|
+
const handleEdit = useCallback(() => {
|
|
27
|
+
setIsEditing(true);
|
|
28
|
+
setEditValue(value);
|
|
29
|
+
setError(null);
|
|
30
|
+
}, [value]);
|
|
31
|
+
const handleCancel = useCallback(() => {
|
|
32
|
+
setIsEditing(false);
|
|
33
|
+
setEditValue(value);
|
|
34
|
+
setError(null);
|
|
35
|
+
}, [value]);
|
|
36
|
+
const handleSave = useCallback(async () => {
|
|
37
|
+
if (validate) {
|
|
38
|
+
const validationError = validate(editValue);
|
|
39
|
+
if (validationError) {
|
|
40
|
+
setError(validationError);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
setIsSaving(true);
|
|
45
|
+
try {
|
|
46
|
+
await onSave(editValue);
|
|
47
|
+
setIsEditing(false);
|
|
48
|
+
setError(null);
|
|
49
|
+
}
|
|
50
|
+
catch (err) {
|
|
51
|
+
setError(err instanceof Error ? err.message : "Failed to save");
|
|
52
|
+
}
|
|
53
|
+
finally {
|
|
54
|
+
setIsSaving(false);
|
|
55
|
+
}
|
|
56
|
+
}, [editValue, onSave, validate]);
|
|
57
|
+
const handleKeyDown = useCallback((e) => {
|
|
58
|
+
if (e.key === "Enter") {
|
|
59
|
+
handleSave();
|
|
60
|
+
}
|
|
61
|
+
else if (e.key === "Escape") {
|
|
62
|
+
handleCancel();
|
|
63
|
+
}
|
|
64
|
+
}, [handleSave, handleCancel]);
|
|
65
|
+
if (isLoading) {
|
|
66
|
+
return (React.createElement(InlineFieldWrapper, { label: label },
|
|
67
|
+
React.createElement(Block, { display: "flex", alignItems: "center", height: theme.sizing.scale950 },
|
|
68
|
+
React.createElement(Spinner, { "$size": theme.sizing.scale600 }))));
|
|
69
|
+
}
|
|
70
|
+
if (isEditing) {
|
|
71
|
+
return (React.createElement(InlineFieldWrapper, { label: label },
|
|
72
|
+
React.createElement(Block, { display: "flex", alignItems: "center", width: "100%", gridGap: "scale300" },
|
|
73
|
+
React.createElement(Block, { flex: 1 },
|
|
74
|
+
React.createElement(Input, { value: editValue, onChange: (e) => {
|
|
75
|
+
setEditValue(e.currentTarget.value);
|
|
76
|
+
setError(null);
|
|
77
|
+
}, onKeyDown: handleKeyDown, placeholder: placeholder, size: "small", error: !!error, disabled: isSaving, autoFocus: true })),
|
|
78
|
+
React.createElement(ButtonIcon, { onClick: handleSave, size: "small", shape: "circle", kind: "secondary", disabled: isSaving, "aria-label": "Save" }, isSaving ? (React.createElement(Spinner, { "$size": theme.sizing.scale500 })) : (React.createElement(Check, { size: 14, color: "currentColor" }))),
|
|
79
|
+
React.createElement(ButtonIcon, { onClick: handleCancel, size: "small", shape: "circle", kind: "tertiary", disabled: isSaving, "aria-label": "Cancel" },
|
|
80
|
+
React.createElement(Close, { size: 14, color: "currentColor" }))),
|
|
81
|
+
error && (React.createElement(ParagraphSmall, { color: theme.colors.contentNegative, marginTop: 0, marginBottom: 0 }, error))));
|
|
82
|
+
}
|
|
83
|
+
return (React.createElement(InlineFieldWrapper, { label: label },
|
|
84
|
+
React.createElement(Block, { display: "flex", alignItems: "center", justifyContent: "space-between", onClick: handleEdit, overrides: {
|
|
85
|
+
Block: {
|
|
86
|
+
style: {
|
|
87
|
+
cursor: "pointer",
|
|
88
|
+
minHeight: theme.sizing.scale950,
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
} },
|
|
92
|
+
React.createElement(ParagraphSmall, { marginTop: 0, marginBottom: 0, color: value ? theme.colors.contentPrimary : theme.colors.contentTertiary }, value || placeholder),
|
|
93
|
+
React.createElement(EditIcon, { size: 16, color: theme.colors.contentTertiary }))));
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=InlineEditField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineEditField.js","sourceRoot":"","sources":["../../../../../src/components/Dropdown/Settings/InlineEditField.tsx"],"names":[],"mappings":"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"}
|