Skip to content

Commit

Permalink
refactor: add AppsPlayGround component and refactor imports for consi…
Browse files Browse the repository at this point in the history
…stency
  • Loading branch information
panteleymonchuk committed Dec 26, 2024
1 parent 02952d4 commit 1ec6361
Show file tree
Hide file tree
Showing 13 changed files with 92 additions and 90 deletions.
2 changes: 1 addition & 1 deletion apps/explorer/src/components/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// SPDX-License-Identifier: Apache-2.0

import { NetworkSelector } from '../network';
import { Search } from '../search/Search';
import { Search } from '../search';
import { LinkWithQuery } from '~/components/ui';
import { ThemedIotaLogo } from '~/components';
import { ThemeSwitcher } from '@iota/core';
Expand Down
4 changes: 2 additions & 2 deletions apps/explorer/src/components/layout/PageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { useAppsBackend, Feature } from '@iota/core';
import { Network } from '@iota/iota-sdk/client';
import { useQuery } from '@tanstack/react-query';
import { type ReactNode, useRef } from 'react';
import { Footer } from '../footer/Footer';
import { Header } from '../header/Header';
import { Footer } from '../footer';
import { Header } from '../header';
import { useNetworkContext } from '~/contexts';
import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
import { Info } from '@iota/ui-icons';
Expand Down
3 changes: 1 addition & 2 deletions apps/explorer/src/components/ui/image/Image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { cva, cx, type VariantProps } from 'class-variance-authority';
import clsx from 'clsx';
import { useAnimate } from 'framer-motion';
import { type ImgHTMLAttributes, useEffect, useState } from 'react';

import { useImage } from '~/hooks/useImage';
import { useImage } from '~/hooks';
import { ImageVisibility } from '~/lib/enums';

const imageStyles = cva(null, {
Expand Down
3 changes: 1 addition & 2 deletions apps/explorer/src/pages/object-result/ObjectResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { ErrorBoundary, PageLayout } from '~/components';
import { PageHeader } from '~/components/ui';
import { ObjectView } from '~/pages/object-result/views/ObjectView';
import { translate, type DataType } from './ObjectResultType';
import { PkgView } from './views/PkgView';
import { TokenView } from './views/TokenView';
import { PkgView, TokenView } from './views';
import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
import { Warning } from '@iota/ui-icons';

Expand Down
5 changes: 5 additions & 0 deletions apps/explorer/src/pages/object-result/views/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

export * from './PkgView';
export * from './TokenView';
75 changes: 75 additions & 0 deletions apps/wallet/src/ui/app/components/iota-apps/AppsPlayGround.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
// Copyright (c) Mysten Labs, Inc.
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { useAppSelector } from '_hooks';
import { Feature } from '@iota/core';
import { prepareLinkToCompare } from '_src/shared/utils';
import { useFeature } from '@growthbook/growthbook-react';
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { permissionsSelectors } from '../../redux/slices/permissions';
import { AppsPageBanner } from './Banner';
import { IotaApp, type DAppEntry } from './IotaApp';
import { IotaAppEmpty } from './IotaAppEmpty';
import { InfoBox, InfoBoxStyle, InfoBoxType, Header } from '@iota/apps-ui-kit';
import { Info } from '@iota/ui-icons';

export function AppsPlayGround() {
const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
const { tagName } = useParams();

const filteredEcosystemApps = useMemo(() => {
if (!ecosystemApps) {
return [];
} else if (tagName) {
return ecosystemApps.filter((app) => app.tags.includes(tagName));
}
return ecosystemApps;
}, [ecosystemApps, tagName]);

const allPermissions = useAppSelector(permissionsSelectors.selectAll);
const linkToPermissionID = useMemo(() => {
const map = new Map<string, string>();
for (const aPermission of allPermissions) {
map.set(prepareLinkToCompare(aPermission.origin), aPermission.id);
if (aPermission.pagelink) {
map.set(prepareLinkToCompare(aPermission.pagelink), aPermission.id);
}
}
return map;
}, [allPermissions]);

return (
<>
<Header titleCentered title="IOTA Apps" />
<AppsPageBanner />

{filteredEcosystemApps?.length ? (
<InfoBox
type={InfoBoxType.Default}
icon={<Info />}
style={InfoBoxStyle.Elevated}
supportingText="Apps below are actively curated but do not indicate any endorsement or
relationship with IOTA Wallet. Please DYOR."
/>
) : null}

{filteredEcosystemApps?.length ? (
<div className="mt-md flex flex-col gap-sm">
{filteredEcosystemApps.map((app) => (
<IotaApp
key={app.link}
{...app}
permissionID={linkToPermissionID.get(prepareLinkToCompare(app.link))}
displayType="full"
openAppSite
/>
))}
</div>
) : (
<IotaAppEmpty displayType="full" />
)}
</>
);
}
1 change: 0 additions & 1 deletion apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { ampli } from '_src/shared/analytics/ampli';
import { getDAppUrl } from '_src/shared/utils';
import { useState } from 'react';
import { Card, CardImage, CardBody, ImageShape, Badge, BadgeType } from '@iota/apps-ui-kit';

import { DisconnectApp } from './DisconnectApp';

export type DAppEntry = {
Expand Down
76 changes: 2 additions & 74 deletions apps/wallet/src/ui/app/components/iota-apps/index.tsx
Original file line number Diff line number Diff line change
@@ -1,77 +1,5 @@
// Copyright (c) Mysten Labs, Inc.
// Modifications Copyright (c) 2024 IOTA Stiftung
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { useAppSelector } from '_hooks';
import { Feature } from '@iota/core';
import { prepareLinkToCompare } from '_src/shared/utils';
import { useFeature } from '@growthbook/growthbook-react';
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { permissionsSelectors } from '../../redux/slices/permissions';
import { AppsPageBanner } from './Banner';
import { IotaApp, type DAppEntry } from './IotaApp';
import { IotaAppEmpty } from './IotaAppEmpty';
import { InfoBox, InfoBoxStyle, InfoBoxType, Header } from '@iota/apps-ui-kit';
import { Info } from '@iota/ui-icons';

export function AppsPlayGround() {
const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
const { tagName } = useParams();

const filteredEcosystemApps = useMemo(() => {
if (!ecosystemApps) {
return [];
} else if (tagName) {
return ecosystemApps.filter((app) => app.tags.includes(tagName));
}
return ecosystemApps;
}, [ecosystemApps, tagName]);

const allPermissions = useAppSelector(permissionsSelectors.selectAll);
const linkToPermissionID = useMemo(() => {
const map = new Map<string, string>();
for (const aPermission of allPermissions) {
map.set(prepareLinkToCompare(aPermission.origin), aPermission.id);
if (aPermission.pagelink) {
map.set(prepareLinkToCompare(aPermission.pagelink), aPermission.id);
}
}
return map;
}, [allPermissions]);

return (
<>
<Header titleCentered title="IOTA Apps" />
<AppsPageBanner />

{filteredEcosystemApps?.length ? (
<InfoBox
type={InfoBoxType.Default}
icon={<Info />}
style={InfoBoxStyle.Elevated}
supportingText="Apps below are actively curated but do not indicate any endorsement or
relationship with IOTA Wallet. Please DYOR."
/>
) : null}

{filteredEcosystemApps?.length ? (
<div className="mt-md flex flex-col gap-sm">
{filteredEcosystemApps.map((app) => (
<IotaApp
key={app.link}
{...app}
permissionID={linkToPermissionID.get(prepareLinkToCompare(app.link))}
displayType="full"
openAppSite
/>
))}
</div>
) : (
<IotaAppEmpty displayType="full" />
)}
</>
);
}

export * from './AppsPlayGround';
export * from './ConnectedAppsCard';
4 changes: 2 additions & 2 deletions apps/wallet/src/ui/app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const HIDDEN_MENU_PATHS = [

const NOTIFY_USER_ACTIVE_INTERVAL = 5 * 1000; // 5 seconds

export const App = () => {
export function App() {
const dispatch = useAppDispatch();
const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup);
useEffect(() => {
Expand Down Expand Up @@ -216,4 +216,4 @@ export const App = () => {
</Route>
</Routes>
);
};
}
4 changes: 2 additions & 2 deletions apps/wallet/src/ui/app/pages/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface HomePageProps {
disableNavigation?: boolean;
}

export const HomePage = ({ disableNavigation }: HomePageProps) => {
export function HomePage({ disableNavigation }: HomePageProps) {
const initChecking = useInitializedGuard(true);
const guardChecking = initChecking;

Expand All @@ -27,7 +27,7 @@ export const HomePage = ({ disableNavigation }: HomePageProps) => {
</PageMainLayout>
</Loading>
);
};
}

export * from './nfts';
export * from './assets';
Expand Down
3 changes: 1 addition & 2 deletions apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
import { useQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { ArrowBottomLeft, Info, Send } from '@iota/ui-icons';
import { Interstitial } from '../interstitial';
import { type InterstitialConfig } from '../interstitial';
import { Interstitial, type InterstitialConfig } from '../interstitial';
import { CoinBalance } from './coin-balance';
import { TokenStakingOverview } from './TokenStakingOverview';
import { useNavigate } from 'react-router-dom';
Expand Down
1 change: 0 additions & 1 deletion apps/wallet/src/ui/app/pages/home/tokens/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
// SPDX-License-Identifier: Apache-2.0

import { Route, Routes } from 'react-router-dom';

import { TokenDetailsPage } from './TokenDetailsPage';
import { TokenDetails } from './TokensDetails';

Expand Down
1 change: 0 additions & 1 deletion apps/wallet/src/ui/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { Fragment, StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';

import { App } from './app';
import { walletApiProvider } from './app/ApiProvider';
import { AccountsFormProvider } from './app/components/accounts/AccountsFormContext';
Expand Down

0 comments on commit 1ec6361

Please sign in to comment.