U3 dev

apps/u3/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@airstack/airstack-react": "^0.4.7",
     "@loadable/component": "^5.15.2",
     "@multiavatar/multiavatar": "^1.0.7",
     "@react-spring/web": "^9.6.1",
@@ -16,13 +17,14 @@
     "@types/react-slick": "^0.23.10",
     "@types/styled-components": "^5.1.25",
     "@types/three": "^0.146.0",
-    "@us3r-network/auth-with-rainbowkit": "^0.1.8",
-    "@us3r-network/link": "0.2.3",
+    "@us3r-network/auth-with-rainbowkit": "^0.1.10",
+    "@us3r-network/link": "0.2.4",
     "@us3r-network/profile": "^0.5.6",
     "antd": "^5.0.7",
     "assert": "^2.0.0",
     "axios": "^0.27.2",
     "buffer": "^6.0.3",
+    "classnames": "^2.3.2",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.11.6",
     "dompurify": "^2.3.10",
@@ -69,7 +71,10 @@
     "three": "^0.147.0",
     "tslib": "^2.3.0",
     "web-vitals": "^2.1.4",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "wagmi": "^1.0.7",
+    "viem": "^0.3.37",
+    "@rainbow-me/rainbowkit": "1.0.2"
   },
   "scripts": {
     "start": "craco start",

apps/u3/src/App.tsx

@@ -11,6 +11,7 @@ import Modal from 'react-modal';
 import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit';
 import { ProfileStateProvider } from '@us3r-network/profile';
 import { LinkStateProvider } from '@us3r-network/link';
+import { init } from '@airstack/airstack-react';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -19,10 +20,15 @@ import Layout from './components/layout/Index';
 import { store } from './store/store';
 import GlobalStyle from './GlobalStyle';
 
-import { CERAMIC_HOST, WALLET_CONNECT_PROJECT_ID } from './constants';
+import {
+  AIRSTACK_API_KEY,
+  CERAMIC_HOST,
+  WALLET_CONNECT_PROJECT_ID,
+} from './constants';
 import { injectStore, injectU3Token } from './services/api/request';
 import U3LoginProvider from './contexts/U3LoginContext';
 
+init(AIRSTACK_API_KEY);
 dayjs.extend(relativeTime);
 
 injectStore(store);

apps/u3/src/components/airstack/Asset.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { Asset as AirstackAsset } from '@airstack/airstack-react';
+import { ComponentProps, useEffect, useRef, useState } from 'react';
+
+function Image(props: ComponentProps<'img'>) {
+  const [error, setError] = useState(false);
+  const videoEl = useRef<HTMLVideoElement>(null);
+  // eslint-disable-next-line react/destructuring-assignment
+  const img = props.src || '';
+
+  const attemptPlay = () => {
+    if (videoEl && videoEl.current) {
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      videoEl.current.play().catch((error) => {
+        console.error('Error attempting to play', error);
+      });
+    }
+  };
+
+  useEffect(() => {
+    attemptPlay();
+  }, []);
+
+  if (img.endsWith('mp4')) {
+    return <video src={img} autoPlay muted loop ref={videoEl} />;
+  }
+  if (error || !img) {
+    return <img {...props} src="images/placeholder.svg" />;
+  }
+  return <img onError={() => setError(true)} {...props} />;
+}
+
+type AssetProps = ComponentProps<typeof AirstackAsset> & {
+  image?: string;
+  name: string;
+};
+
+export function Asset({ image, ...props }: AssetProps) {
+  if (image) {
+    return <Image src={image} />;
+  }
+  return (
+    <AirstackAsset
+      preset="medium"
+      error={<div>{`${props.name} #${props.tokenId}`}</div>}
+      // loading={<img src="images/placeholder.svg" alt="loadig" />}
+      {...props}
+    />
+  );
+}

apps/u3/src/components/airstack/ERC20Tokens.tsx

@@ -0,0 +1,196 @@
+import { useLazyQueryWithPagination } from '@airstack/airstack-react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { useSession } from '@us3r-network/auth-with-rainbowkit';
+import styled from 'styled-components';
+
+import { ERC20TokensQuery } from '../../queries';
+import { TokenType } from './types';
+
+function Token({
+  amount,
+  symbol,
+  type,
+  logo,
+}: {
+  type: string;
+  symbol: string;
+  amount: number;
+  logo: string;
+}) {
+  return (
+    <TokenInfoBox>
+      <div>
+        {logo && <img src={logo} alt="" />}
+        <div>
+          <h3>{symbol}</h3>
+          <span>{type}</span>
+        </div>
+      </div>
+      <span>{amount.toFixed(2)}</span>
+    </TokenInfoBox>
+  );
+}
+
+const loaderData = Array(3).fill({ poapEvent: {} });
+
+function Loader() {
+  return (
+    <>
+      {loaderData.map((_, index) => (
+        <div
+          className="skeleton-loader [&>div]:mb-0 mb-5"
+          data-loader-type="block"
+          data-loader-bg="glass"
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+        >
+          <Token key={''} amount={0} symbol={''} type={''} logo="" />
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function ERC20Tokens() {
+  const session = useSession();
+  const sessId = session?.id || '';
+
+  const [tokens, setTokens] = useState<{
+    ethereum: TokenType[];
+    polygon: TokenType[];
+  }>({
+    ethereum: [],
+    polygon: [],
+  });
+
+  const sessWallet = useMemo(() => sessId.split(':').pop() || '', [sessId]);
+
+  const [fetch, { data, loading, pagination }] =
+    useLazyQueryWithPagination(ERC20TokensQuery);
+  // const { address: owner, tokenType } = useSearchInput();
+
+  useEffect(() => {
+    const owner = sessWallet;
+    // console.log('sessWallet', sessWallet);
+    if (owner) {
+      setTokens({
+        ethereum: [],
+        polygon: [],
+      });
+      fetch({
+        owner,
+        limit: 100,
+      });
+    }
+  }, [fetch, sessWallet]);
+
+  useEffect(() => {
+    if (data) {
+      setTokens((existingTokens) => ({
+        ethereum: [
+          ...existingTokens.ethereum,
+          ...(data?.ethereum?.TokenBalance || []),
+        ],
+        polygon: [
+          ...existingTokens.polygon,
+          ...(data?.polygon?.TokenBalance || []),
+        ],
+      }));
+    }
+  }, [data]);
+
+  const { hasNextPage, getNextPage } = pagination;
+
+  const handleNext = useCallback(() => {
+    console.log('handleNext', handleNext);
+    if (!loading && hasNextPage) {
+      getNextPage();
+    }
+  }, [getNextPage, hasNextPage, loading]);
+
+  const items = useMemo((): TokenType[] => {
+    return [...tokens.ethereum, ...tokens.polygon];
+  }, [tokens.ethereum, tokens.polygon]);
+
+  return (
+    <div>
+      <div>
+        {items.length === 0 && !loading && null}
+
+        <InfiniteScroll
+          next={handleNext}
+          dataLength={items.length}
+          hasMore={hasNextPage}
+          loader={<Loader />}
+          scrollableTarget="top-wrapper"
+        >
+          {items.map((token, index) => (
+            <Token
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              amount={token?.formattedAmount}
+              symbol={token?.token?.symbol}
+              type={token?.token?.name}
+              logo={
+                token?.token?.logo?.small ||
+                token?.token?.projectDetails?.imageUrl
+              }
+            />
+          ))}
+        </InfiniteScroll>
+      </div>
+    </div>
+  );
+}
+
+const TokenInfoBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 88px;
+
+  border-bottom: 1px solid #14171a;
+  > div {
+    display: flex;
+    gap: 10px;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    h3 {
+      margin: 0;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 19px;
+      color: #ffffff;
+    }
+
+    span {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      /* identical to box height */
+
+      /* #718096 */
+
+      color: #718096;
+    }
+  }
+  img {
+    width: 48px;
+    border-radius: 50%;
+  }
+
+  > span {
+    margin: 0;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 21px;
+    text-align: right;
+
+    color: #ffffff;
+  }
+`;