Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop' into PE-6993-ant-cu-url
Browse files Browse the repository at this point in the history
  • Loading branch information
atticusofsparta committed Jan 22, 2025
2 parents 1891254 + 5a2b57e commit 0932fb2
Show file tree
Hide file tree
Showing 53 changed files with 4,674 additions and 581 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,6 @@ docs
dist-id.txt
dist-manifest.csv
dist-manifest.json
test-results
test-results
storybook-static
*storybook.log
22 changes: 22 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

addons: [
'@storybook/addon-onboarding',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
],

framework: {
name: '@storybook/react-vite',
options: {},
},

typescript: {
reactDocgen: 'react-docgen-typescript',
},
};
export default config;
14 changes: 14 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { Preview } from '@storybook/react';

const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};

export default preview;
27 changes: 25 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
"homepage": ".",
"scripts": {
"build": "yarn clean && tsc --build tsconfig.json && NODE_OPTIONS=--max-old-space-size=32768 vite build",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"publish:arweave": "yarn build && permaweb-deploy --ant-process $DEPLOY_ANT_PROCESS_ID ",
"clean": "rimraf dist",
"dev": "NODE_ENV=prod VITE_GITHUB_HASH=local vite",
Expand All @@ -25,8 +27,11 @@
},
"dependencies": {
"@ant-design/icons": "5.4.0",
"@ar.io/sdk": "^3.0.0",
"@ar.io/sdk": "^3.3.0-alpha.11",
"@permaweb/aoconnect": "^0.0.59",
"@radix-ui/react-radio-group": "^1.2.1",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-switch": "^1.1.2",
"@sentry/react": "^7.45.0",
"@tanstack/react-query": "^5.51.21",
"@tanstack/react-query-persist-client": "^5.45.1",
Expand All @@ -49,6 +54,7 @@
"react-icons": "^5.0.1",
"react-markdown": "6",
"react-router-dom": "^6.4.2",
"recharts": "^2.15.0",
"viem": "2.x",
"wagmi": "^2.12.2"
},
Expand All @@ -57,11 +63,21 @@
"@babel/preset-env": "^7.19.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@chromatic-com/storybook": "^3.2.2",
"@commitlint/cli": "^17.6.7",
"@commitlint/config-conventional": "^17.6.7",
"@glen/jest-raw-loader": "^2.0.0",
"@playwright/test": "^1.48.1",
"@sentry/vite-plugin": "^0.7.2",
"@storybook/addon-actions": "^8.4.7",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.4.7",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
Expand Down Expand Up @@ -90,6 +106,7 @@
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^8.0.0",
"eslint-plugin-storybook": "^0.11.1",
"fake-indexeddb": "^6.0.0",
"http-server": "^14.1.1",
"husky": "^8.0.0",
Expand All @@ -107,6 +124,7 @@
"react-hooks": "^1.0.1",
"react-test-renderer": "^18.2.0",
"rimraf": "^3.0.2",
"storybook": "^8.4.7",
"tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.4.9",
"tailwindcss-animate": "^1.0.7",
Expand All @@ -129,5 +147,10 @@
"prettier --write ."
]
},
"packageManager": "yarn@1.22.22"
"packageManager": "yarn@1.22.22",
"eslintConfig": {
"extends": [
"plugin:storybook/recommended"
]
}
}
14 changes: 14 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ const SettingsLayout = React.lazy(
() => import('./components/pages/Settings/SettingsLayout'),
);

const RNPPage = React.lazy(() => import('./components/pages/RNPPage/RNPPage'));

const sentryCreateBrowserRouter =
Sentry.wrapCreateBrowserRouter(createHashRouter);

Expand Down Expand Up @@ -323,6 +325,18 @@ function App() {
</Suspense>
}
/>
<Route
path="/returned-names"
element={
<Suspense
fallback={
<PageLoader loading={true} message={'Loading, please wait'} />
}
>
<RNPPage />
</Suspense>
}
/>
</Route>
<Route
path="settings"
Expand Down
4 changes: 2 additions & 2 deletions src/components/cards/ARNSCard/ARNSCard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ARWEAVE_HOST } from '@src/utils/constants';
import { NETWORK_DEFAULTS } from '@src/utils/constants';
import { Link } from 'react-router-dom';

import { ARNSMapping } from '../../../types';
Expand All @@ -8,7 +8,7 @@ const protocol = 'https';

function ARNSCard({
domain,
gateway = ARWEAVE_HOST,
gateway = NETWORK_DEFAULTS.ARNS.HOST,
imageUrl,
}: Omit<ARNSMapping, 'processId'> & { gateway?: string; imageUrl: string }) {
return (
Expand Down
54 changes: 36 additions & 18 deletions src/components/cards/NavMenuCard/NavMenuCard.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { AntLogoIcon } from '@src/components/data-display/AntLogoIcon';
import useDomainInfo from '@src/hooks/useDomainInfo';
import { usePrimaryName } from '@src/hooks/usePrimaryName';
import { AoAddress } from '@src/types';
import { shortPrimaryName } from '@src/utils';
Expand All @@ -14,6 +16,7 @@ import { useWalletState } from '../../../state/contexts/WalletState';
import eventEmitter from '../../../utils/events';
import { ROUTES } from '../../../utils/routes';
import { LogoutIcon, MenuIcon, TokenIcon } from '../../icons';
import { BrandLogo } from '../../icons';
import ConnectButton from '../../inputs/buttons/ConnectButton/ConnectButton';
import MenuButton from '../../inputs/buttons/MenuButton/MenuButton';
import { Loader, NavBarLink } from '../../layout';
Expand All @@ -35,6 +38,9 @@ function NavMenuCard() {
] = useGlobalState();
const [{ wallet, walletAddress }, dispatchWalletState] = useWalletState();
const { data: primaryNameData } = usePrimaryName();
const { data: domainDomain } = useDomainInfo({
domain: primaryNameData?.name,
});
const isMobile = useIsMobile();

const [showMenu, setShowMenu] = useState(false);
Expand Down Expand Up @@ -371,36 +377,48 @@ function NavMenuCard() {
<MenuButton
setShow={setShowMenu}
show={showMenu}
className={walletAddress ? 'outline-button' : ''}
className={
walletAddress
? 'outline-button items-center justify-center'
: 'items-center justify-center'
}
style={
walletAddress
? {
borderRadius: 'var(--corner-radius',
borderWidth: '1px',
padding: '10px',
padding: '0px',
borderColor: 'var(--text-faded)',
width: 'fit-content',
minWidth: 'unset',
}
: {}
}
>
{primaryNameData?.name ? (
<span className="flex text-white fill-success gap-2 items-center text-[14px]">
<svg width="8px" height="8px">
<circle cx="4" cy="4" r="4" fill="current" />
</svg>
{shortPrimaryName(primaryNameData.name)}
</span>
) : walletAddress ? (
<WalletAddress characterCount={4} />
) : (
<MenuIcon
width={'24px'}
height={'24px'}
fill={'var(--text-white)'}
/>
)}
<span className="flex text-white gap-2 items-center justify-center text-[14px] h-[2.5rem] p-2">
{primaryNameData?.name ? (
<>
<AntLogoIcon
className="rounded-full max-h-[1.875rem] border border-dark-grey"
id={domainDomain?.info?.Logo}
icon={
<div className="flex items-center justify-center rounded-full fill-white p-[5px]">
<BrandLogo width={'20px'} height={'20px'} />
</div>
}
/>
{shortPrimaryName(primaryNameData.name)}
</>
) : walletAddress ? (
<WalletAddress characterCount={4} />
) : (
<MenuIcon
width={'24px'}
height={'24px'}
fill={'var(--text-white)'}
/>
)}
</span>
</MenuButton>
</Tooltip>
</>
Expand Down
8 changes: 1 addition & 7 deletions src/components/cards/WarningCard/WarningCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,7 @@ function WarningCard({
}}
>
{showIcon || customIcon ? (
<span
style={{
height: '100%',
display: 'flex',
lineHeight: '150%',
}}
>
<span className="flex items-center justify-center h-full pt-[2px]">
{customIcon ? (
customIcon
) : (
Expand Down
57 changes: 57 additions & 0 deletions src/components/data-display/AntLogoIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { useGlobalState } from '@src/state';
import { CSSProperties, useEffect, useRef, useState } from 'react';
import { ReactNode } from 'react-markdown';

import { HamburgerOutlineIcon } from '../icons';

export function AntLogoIcon({
id,
className,
style,
icon = (
<HamburgerOutlineIcon
width={'20px'}
height={'20px'}
fill="var(--text-white)"
/>
),
}: {
id?: string;
className?: string;
icon?: ReactNode;
style?: CSSProperties;
}) {
const [{ gateway }] = useGlobalState();
const [validImage, setValidImage] = useState(true);
const logoRef = useRef<HTMLImageElement>(null);

useEffect(() => {
if (!logoRef.current || !id) return;

const img = logoRef.current;
setValidImage(true);

const handleError = () => setValidImage(false);

img.addEventListener('error', handleError);

return () => {
img.removeEventListener('error', handleError);
};
}, [logoRef, id]);

if (!id) return <>{icon}</>;

return (
<>
<img
ref={logoRef}
className={className ?? 'w-[30px] rounded-full'}
src={`https://${gateway}/${id}`}
alt="ant-logo"
style={{ display: validImage ? 'block' : 'none', ...(style ?? {}) }}
/>
{!validImage && icon}
</>
);
}
Loading

0 comments on commit 0932fb2

Please sign in to comment.