2x weekly promotion of develop to main

next.config.js

@@ -4,7 +4,7 @@ const nextConfig = {
   compiler: { styledComponents: true },
   reactStrictMode: true,
   images: {
-    domains: ['ipfs.near.social'],
+    domains: ['ipfs.near.social','ipfs.io'],
   },  
   experimental: {
     optimizePackageImports: ['@phosphor-icons/react'],

package.json

@@ -25,7 +25,7 @@
     "@keypom/selector": "1.2.3",
     "@monaco-editor/react": "^4.6.0",
     "@near-js/biometric-ed25519": "0.3.0",
-    "@near-pagoda/ui": "^1.0.0",
+    "@near-pagoda/ui": "^1.0.1",
     "@near-wallet-selector/bitte-wallet": "^8.9.12",
     "@near-wallet-selector/core": "8.9.12",
     "@near-wallet-selector/here-wallet": "8.9.12",
@@ -66,9 +66,11 @@
     "next": "^13.5.6",
     "next-pwa": "^5.6.0",
     "posthog-js": "^1.155.4",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-bootstrap-typeahead": "^6.3.2",
+    "react-code-block": "^1.0.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-singleton-hook": "^3.4.0",

src/assets/images/wallets/index.ts

@@ -0,0 +1,12 @@
+export { default as binance } from './binance.webp';
+export { default as bitget } from './bitget.webp';
+export { default as bitte } from './bitte.svg';
+export { default as here } from './here.svg';
+export { default as ledger } from './ledger.webp';
+export { default as metamask } from './metamask.webp';
+export { default as meteor } from './meteor.png';
+export { default as myNear } from './myNear.png';
+export { default as safePal } from './safePal.webp';
+export { default as sender } from './sender.png';
+export { default as trustWallet } from './trustWallet.webp';
+export { default as uniswap } from './uniswap.webp';

src/components/NTFImage.tsx

@@ -15,27 +15,40 @@ interface Nft {
 }
 
 interface NftImageProps {
-  nft: Nft;
+  nft?: Nft;
   ipfs_cid?: string;
   alt: string;
 }
 
 const DEFAULT_IMAGE = 'https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm';
 
+const getImage = (key: string) => {
+  const imgUrl = localStorage.getItem(`keysImage:${key}`);
+  return imgUrl || null;
+};
+
+const setImage = (key: string, url: string) => {
+  localStorage.setItem(`keysImage:${key}`, url);
+};
+
 export const NftImage: React.FC<NftImageProps> = ({ nft, ipfs_cid, alt }) => {
   const { wallet } = useContext(NearContext);
   const [imageUrl, setImageUrl] = useState<string>(DEFAULT_IMAGE);
 
   const fetchNftData = useCallback(async () => {
     if (!wallet || !nft || !nft.contractId || !nft.tokenId || ipfs_cid) return;
 
+    const imgCache = getImage(nft.tokenId);
+    if (imgCache) {
+      setImageUrl(imgCache);
+      return;
+    }
     const [nftMetadata, tokenData] = await Promise.all([
       wallet.viewMethod({ contractId: nft.contractId, method: 'nft_metadata' }),
       wallet.viewMethod({ contractId: nft.contractId, method: 'nft_token', args: { token_id: nft.tokenId } }),
     ]);
 
-    const tokenMetadata = tokenData.metadata;
-    const tokenMedia = tokenMetadata?.media || '';
+    const tokenMedia = tokenData?.metadata?.media || '';
 
     if (tokenMedia.startsWith('https://') || tokenMedia.startsWith('http://') || tokenMedia.startsWith('data:image')) {
       setImageUrl(tokenMedia);
@@ -54,5 +67,10 @@ export const NftImage: React.FC<NftImageProps> = ({ nft, ipfs_cid, alt }) => {
     }
   }, [ipfs_cid, fetchNftData]);
 
+  useEffect(() => {
+    if (!wallet || !nft || !nft.contractId || !nft.tokenId || ipfs_cid || DEFAULT_IMAGE === imageUrl) return;
+    setImage(nft.tokenId, imageUrl);
+  }, [imageUrl, wallet, nft, ipfs_cid]);
+
   return <RoundedImage width={43} height={43} src={imageUrl} alt={alt} />;
 };

src/components/home/Button.tsx

@@ -0,0 +1,28 @@
+import { Button as Btn } from '@near-pagoda/ui';
+import styled from 'styled-components';
+
+export const Button = styled(Btn)`
+  &[data-variant='primary'][data-fill='solid']:hover {
+    --button-color-background: var(--violet8);
+  }
+
+  &[data-variant='primary'][data-fill='solid'] {
+    --button-color-background: var(--violet9);
+    --button-color-border: var(--sand12);
+    --button-color-text: var(--bs-body-bg);
+    --button-color-icon: var(--bs-body-bg);
+    border: 0;
+  }
+`;
+
+export const BigButton = styled(Button)`
+  &[data-variant='primary'][data-fill='solid'] {
+    --button-color-background: var(--violet9);
+    --button-color-border: var(--sand12);
+    --button-color-text: var(--bs-body-bg);
+    --button-color-icon: var(--bs-body-bg);
+    border: 0;
+    height: 3rem;
+    border-radius: 0.8rem;
+  }
+`;

src/components/home/ChainAbstraction/index.tsx

@@ -0,0 +1,104 @@
+import { Flex, Grid, Text } from '@near-pagoda/ui';
+import { BookOpenText, GasPump, Signature, UserCheck } from '@phosphor-icons/react';
+
+import useDeviceType from '@/hooks/useDeviceType';
+
+import { Button } from '../Button';
+
+export const ChainAbstraction = () => {
+  const deviceType = useDeviceType();
+
+  return (
+    <>
+      <Flex
+        stack
+        gap="l"
+        gapPhone="xl"
+        gapTablet="xl"
+        style={{ padding: '0.5rem', flexGrow: 1, justifyContent: 'space-between' }}
+      >
+        <Grid
+          columns="542px minmax(0, 1fr)"
+          gap="2xl"
+          gapPhone="m"
+          gapTablet="m"
+          columnsTablet="minmax(0, 1fr)"
+          columnsPhone="minmax(0, 1fr)"
+        >
+          <Flex stack gap="m">
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              {' '}
+              The Account Model Built for Abstraction{' '}
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Built-in named accounts, a rich key system, and contracts that are wallets
+            </Text>
+          </Flex>
+          <Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
+            <UserCheck fill="var(--green11)" size="s" style={{ height: '95px' }} />
+            <Button
+              iconLeft={<BookOpenText fill="bold" />}
+              href="/documentation/concepts/protocol/account-model"
+              label="Read on Account Model"
+            />
+          </Flex>
+        </Grid>
+
+        <Grid
+          columns="minmax(0, 1fr) 542px"
+          gap="2xl"
+          gapPhone="m"
+          gapTablet="m"
+          columnsTablet="minmax(0, 1fr)"
+          columnsPhone="minmax(0, 1fr)"
+          style={{ margin: deviceType != 'desktop' ? '24px 0' : '0' }}
+        >
+          <Flex stack gap="m" style={{ justifyContent: 'center', gridRowEnd: deviceType == 'desktop' ? 'auto' : '3' }}>
+            <GasPump fill="var(--red9)" size="s" style={{ height: '95px' }} />
+            <Button
+              iconLeft={<BookOpenText fill="bold" />}
+              href="/documentation/concepts/abstraction/relayers"
+              label="Discover Gas Relayers"
+            />
+          </Flex>
+          <Flex stack gap="m" justify="space-between">
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              Easily Cover your Users&apos; Transactions
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Built-in meta-transactions enable your users to enjoy your application, without handling funds
+            </Text>
+          </Flex>
+        </Grid>
+
+        <Grid
+          columns="542px minmax(0, 1fr)"
+          gap="2xl"
+          gapPhone="m"
+          gapTablet="m"
+          columnsTablet="minmax(0, 1fr)"
+          columnsPhone="minmax(0, 1fr)"
+        >
+          <Flex stack gap="m" style={{ textAlign: 'left' }}>
+            <Text as="h1" style={{ fontWeight: 'normal' }}>
+              {' '}
+              Control Accounts Across Multiple Chains{' '}
+            </Text>
+            <Text size="text-l" style={{ fontWeight: 'lighter' }}>
+              Near accounts can sign transactions for chains like Ethereum, Bitcoin or Doge
+            </Text>
+          </Flex>
+          <Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
+            <Signature fill="var(--violet8)" size="s" style={{ height: '95px' }} />
+
+            <Button
+              iconLeft={<BookOpenText fill="bold" />}
+              href="/documentation/build/chain-abstraction/chain-signatures/getting-started"
+              label="Discover Chain Signatures"
+            />
+          </Flex>
+        </Grid>
+      </Flex>
+    </>
+  );
+};

src/components/home/Code.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { CodeBlock } from 'react-code-block/dist/code-block';
+import styled from 'styled-components';
+
+const CodeWrapper = styled.div<{
+  height?: number;
+}>`
+  background-color: rgb(41, 45, 62);
+  padding: 1rem;
+  border-radius: 0.4rem;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  max-height: ${({ height }) => (height ? `${height}px` : 'none')};
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+const LineContent = styled(CodeBlock.LineContent)`
+  padding: 2px 0 2px 8px;
+  &:hover {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`;
+
+export const Code = ({ height, code, language }: { height?: number; code: string; language: string }) => {
+  return (
+    <CodeBlock code={code} language={language}>
+      <CodeWrapper height={height}>
+        <CodeBlock.Code style={{ marginBottom: 0, overflowX: 'auto' }}>
+          <LineContent>
+            <CodeBlock.Token />
+          </LineContent>
+        </CodeBlock.Code>
+      </CodeWrapper>
+    </CodeBlock>
+  );
+};