[email protected]

.changeset/dull-crabs-act.md

@@ -0,0 +1,6 @@
+---
+'@status-im/wallet': patch
+'wallet': patch
+---
+
+Add value chart

.changeset/four-dogs-build.md

@@ -0,0 +1,6 @@
+---
+"@status-im/wallet": patch
+"wallet": patch
+---
+
+Add CTA to main view

.changeset/good-lies-cover.md

@@ -0,0 +1,6 @@
+---
+'@status-im/wallet': patch
+'wallet': patch
+---
+
+integrate pending wallet activity

.changeset/itchy-schools-warn.md

@@ -0,0 +1,5 @@
+---
+"wallet": patch
+---
+
+Persistent recovery phrase

.changeset/khaki-weeks-wait.md

@@ -0,0 +1,6 @@
+---
+"@status-im/wallet": patch
+"wallet": patch
+---
+
+Rename tabs

.changeset/warm-cycles-draw.md

@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+Adds close toast action and multiple toasts

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.includePackageJsonAutoImports": "on",
+  "typescript.suggest.autoImports": true,
+  "typescript.preferences.importModuleSpecifier": "relative",
   "npm.packageManager": "pnpm",
   "eslint.useESLintClass": true,
   "editor.formatOnSave": true,
@@ -33,5 +36,11 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/.output": true
+  }
 }

README.md

@@ -6,23 +6,23 @@ Packages for building user interfaces, websites, web applications, dapps, browse
 
 ## Packages
 
-| Name                                                   | `npm`                                                                                                                               | Description                                                                                                                                                                   |
-| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)               | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
-| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                     | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
-| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)           | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
-| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                           |                                                                                                                                                                               |
-| [`@status-im/wallet`](./packages/wallet)               |                                                                                                                                     |                                                                                                                                                                               |
-| [`@status-im/eslint-config`](./packages/eslint-config) | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config.svg)](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
+| Name                                                   | Deployments                                                                                                          | Builds                                                                                                                              | Description                                                                                                                                                                   |
+| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@status-im/colors`](./packages/colors)               | [![vercel](https://img.shields.io/badge/vercel-black)](https://status-components.vercel.app/?path=/story/colors)     | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)               | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
+| [`@status-im/icons`](./packages/icons)                 | [![vercel](https://img.shields.io/badge/vercel-black)](https://status-components.vercel.app/?path=/story/icons)      | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                     | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
+| [`@status-im/components`](./packages/components)       | [![vercel](https://img.shields.io/badge/vercel-black)](https://status-components.vercel.app/?path=/story/components) | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)           | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
+| [`@status-im/js`](./packages/status-js)                |                                                                                                                      | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                           |                                                                                                                                                                               |
+| [`@status-im/wallet`](./packages/wallet)               |                                                                                                                      |                                                                                                                                     |
+| [`@status-im/eslint-config`](./packages/eslint-config) |                                                                                                                      | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config.svg)](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
 
 ## Apps
 
-| Name                                   | Description                                                                   |
-| -------------------------------------- | ----------------------------------------------------------------------------- |
-| [`./apps/connector`](./apps/connector) | Status Desktop Wallet extended to decentralised applications in your browser. |
-| [`./apps/portfolio`](./apps/portfolio) |                                                                               |
-| [`./apps/wallet`](./apps/wallet)       |                                                                               |
-| [`./apps/api`](./apps/api)             |                                                                               |
+| Name                                   | Deployments                                                                                                                                | Builds                                                                                                                   | Description                                                                                                       |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| [`./apps/connector`](./apps/connector) | [![chrome web store](https://img.shields.io/badge/chrome-grey)](https://chromewebstore.google.com/detail/kahehnbpamjplefhpkhafinaodkkenpg) | [![jenkins job](https://img.shields.io/badge/jenkins-grey)](https://ci.status.im/job/status-web/job/main/job/connector/) | Status Desktop Wallet extended to decentralised applications in your browser.                                     |
+| [`./apps/portfolio`](./apps/portfolio) |                                                                                                                                            |                                                                                                                          |                                                                                                                   |
+| [`./apps/wallet`](./apps/wallet)       | [![chrome web store](https://img.shields.io/badge/chrome-grey)](https://chromewebstore.google.com/detail/opkfeajbclhjdneghppfnfiannideafj) | [![jenkins job](https://img.shields.io/badge/jenkins-grey)](https://ci.status.im/job/status-web/job/main/job/wallet/)    | Easily view and manage your crypto portfolio in real time — Beta crypto wallet and Web3 portfolio tracker in one. |
+| [`./apps/api`](./apps/api)             |                                                                                                                                            |                                                                                                                          |                                                                                                                   |
 
 ## Prerequisites
 
@@ -31,11 +31,6 @@ Required:
 - **[Node.js](https://nodejs.org/)** v20.x
 - **[pnpm](https://pnpm.io)** v9.12.x
 
-Recommended:
-
-- **[Visual Studio Code](https://code.visualstudio.com/)**
-  - install extensions listed in `.vscode/extensions.json` for optimal development experience
-
 ## Stack
 
 - **Turborepo**: Manages our monorepo and speeds up builds
@@ -91,10 +86,6 @@ pnpm storybook
 
 This will start the Storybook server, allowing you to browse and test components in isolation.
 
-## Continuous Integration
-
-The builds of `main` branch are available in [Jenkins CI](https://ci.status.im/job/status-web/job/main/).
-
 ## Sponsors
 
 This project is sponsored by Browserstack.

apps/api/src/app/api/trpc/[trpc]/route.ts

@@ -18,7 +18,10 @@ export const runtime = 'edge'
 export const dynamic = 'force-dynamic'
 
 async function handler(request: NextRequest) {
-  return fetchRequestHandler({
+  // let error: Error | undefined
+
+  // const response = await fetchRequestHandler({
+  return await fetchRequestHandler({
     endpoint: '/api/trpc',
     router: apiRouter,
     req: request,
@@ -28,10 +31,17 @@ async function handler(request: NextRequest) {
 
       return { headers }
     },
+    /**
+     * @see https://trpc.io/docs/v10/server/error-handling#handling-errors
+     */
     // onError: opts => {
-    //   // console.error('opts::', opts)
+    //   error = opts.error.cause
     // },
     responseMeta: opts => {
+      // note: opts.error does not have original cause (status code), contrary to onError
+      // note!: status code is inferred from TRPCError.code (TOO_MANY_REQUESTS, INTERNAL_SERVER_ERROR, etc.)
+      // const error = opts.errors?.[0]
+
       let cacheControl = 'public, max-age=3600'
 
       if (
@@ -40,6 +50,7 @@ async function handler(request: NextRequest) {
             'nodes.broadcastTransaction',
             'nodes.getNonce',
             'nodes.getTransactionCount',
+            'nodes.getFeeRate',
             'activities.page',
             'activities.activities',
             'assets.all',
@@ -54,6 +65,7 @@ async function handler(request: NextRequest) {
       }
 
       return {
+        // status: 429,
         headers: {
           'cache-control': cacheControl,
           'Access-Control-Allow-Origin': '*',
@@ -62,18 +74,16 @@ async function handler(request: NextRequest) {
         },
       }
     },
+    // unstable_onChunk: undefined,
   })
-}
 
-export { handler as GET, handler as POST }
+  // const result = await response.json()
 
-export async function OPTIONS() {
-  return new Response(null, {
-    status: 200,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
-      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-    },
-  })
+  // return Response.json(
+  //   result
+  //   // { status: result.httpStatus }
+  //   // { status: 429 }
+  // )
 }
+
+export { handler as GET, handler as POST }

apps/api/tsconfig.json

@@ -27,7 +27,7 @@
     "forceConsistentCasingInFileNames": true,
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     // @see https://github.com/orgs/pnpm/discussions/4331#discussioncomment-3379386 for pnpm's config recommendation
@@ -45,5 +45,10 @@
     ".next/types/**/*.ts",
     "global.d.ts"
   ],
-  "exclude": ["node_modules", ".next"]
+  "exclude": ["node_modules", ".next"],
+  "references": [
+    {
+      "path": "../../packages/wallet"
+    }
+  ]
 }

apps/api/vercel.json

@@ -2,5 +2,5 @@
   "$schema": "https://openapi.vercel.sh/vercel.json",
   "ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/wallet ./",
   "installCommand": "pnpm install --dir ../../ --frozen-lockfile",
-  "buildCommand": "turbo run build --cwd ../../ --filter=api..."
+  "buildCommand": "turbo run build --cwd ../../ --filter=./apps/api..."
 }

apps/connector/tsconfig.json

@@ -12,4 +12,9 @@
     "strict": true,
     "target": "ESNext",
   },
+  "references": [
+    {
+      "path": "../../packages/colors",
+    },
+  ],
 }

apps/portfolio/src/app/[address]/@detail/assets/[ticker]/page.tsx

@@ -111,9 +111,7 @@ async function Token({
         <div className="flex items-center gap-1 pt-px">
           <BuyCryptoDrawer>
             <Button size="32" iconBefore={<BuyIcon />}>
-              <span className="block max-w-20 truncate">
-                Buy {token.summary.name}
-              </span>
+              <span className="block max-w-20 truncate">Buy</span>
             </Button>
           </BuyCryptoDrawer>
           <ReceiveCryptoDrawer>
@@ -138,7 +136,7 @@ async function Token({
           <div className="flex items-center gap-1">
             <BuyCryptoDrawer>
               <Button size="32" iconBefore={<BuyIcon />}>
-                Buy {token.summary.name}
+                Buy
               </Button>
             </BuyCryptoDrawer>
             <ReceiveCryptoDrawer>

apps/portfolio/src/app/[address]/@detail/assets/_components/chart/index.tsx

@@ -58,7 +58,7 @@ const Chart = ({
   const [activeTimeFrame, setActiveTimeFrame] = useState<TimeFrame>('24H')
 
   // Todo: Currency should be dynamic
-  const currency = 'EUR'
+  const currency = 'USD'
 
   return (
     <div className="relative">

apps/portfolio/src/app/[address]/@list/collectibles/_components/collectibles-table.tsx

@@ -48,7 +48,6 @@ const CollectiblesGrid = ({
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
-      refetchOnWindowFocus: false,
       queryKey: ['collectibles', address, networks, search, sort],
       queryFn: async ({ pageParam = { offset: 0 } }) => {
         const response = await getCollectibles({

apps/portfolio/src/app/_components/buy-crypto-drawer.tsx

@@ -25,7 +25,7 @@ export const BuyCryptoDrawer = (props: Props) => {
       name: provider,
       network,
       address: account.address,
-      asset: asset || 'EUR',
+      asset: asset || 'USD',
     })
   }
 

apps/portfolio/src/app/_components/network-filter.tsx

@@ -17,7 +17,7 @@ const NETWORKS = [
   },
 ] as const
 
-// const CURRENCY = 'EUR'
+// const CURRENCY = 'USD'
 
 // const formatCurrency = (amount: number, currency?: string) => {
 //   return Intl.NumberFormat('en-US', {

apps/portfolio/src/app/_providers/accounts-context.tsx

@@ -55,7 +55,6 @@ export const AccountsProvider = ({ children }: { children: ReactNode }) => {
     queryFn: () => getAccountsData(addresses, networks),
     enabled: addresses.length > 0,
     staleTime: 60000,
-    refetchOnWindowFocus: false,
   })
 
   const addAccount = (account: Account) => {

apps/portfolio/src/app/_providers/query-client-provider.tsx

@@ -2,7 +2,17 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      retryOnMount: false,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+})
 
 type Props = {
   children: React.ReactNode

apps/portfolio/tsconfig.json

@@ -27,7 +27,7 @@
     "forceConsistentCasingInFileNames": true,
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     // @see https://github.com/orgs/pnpm/discussions/4331#discussioncomment-3379386 for pnpm's config recommendation
@@ -48,8 +48,17 @@
   "exclude": ["node_modules", ".next"],
   // @see https://github.com/nrwl/nx/issues/3106#issuecomment-703154400
   "references": [
-    // {
-    //   "path": "../../packages/wallet"
-    // }
+    {
+      "path": "../../packages/wallet"
+    },
+    {
+      "path": "../../packages/colors"
+    },
+    {
+      "path": "../../packages/components"
+    },
+    {
+      "path": "../../packages/icons"
+    }
   ]
 }

apps/portfolio/vercel.json

@@ -2,5 +2,5 @@
   "$schema": "https://openapi.vercel.sh/vercel.json",
   "ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/{colors,icons,components,wallet} ./",
   "installCommand": "pnpm install --dir ../../ --frozen-lockfile",
-  "buildCommand": "turbo run build --cwd ../../ --filter=portfolio..."
+  "buildCommand": "turbo run build --cwd ../../ --filter=./apps/portfolio..."
 }

apps/wallet/README.md

@@ -33,11 +33,11 @@ Google Chrome > Window > Extensions > Load unpacked > select build (.output/chro
 
 #### Visit
 
-Google Chrome > Extensions > Status Portfolio Wallet > Inspect views > service worker
+Google Chrome > Extensions > !Status Portfolio Wallet (Beta) > Inspect views > service worker
 
-Google Chrome > Toolbar > Extensions > Status Portfolio Wallet
+Google Chrome > Toolbar > Extensions > !Status Portfolio Wallet (Beta)
 
-Google Chrome > Toolbar > Extensions > Status Portfolio Wallet > Open side panel
+Google Chrome > Toolbar > Extensions > !Status Portfolio Wallet (Beta) > Open side panel
 
 chrome-extension://\[ID]/page.html#/portfolio
 

apps/wallet/env.d.ts

@@ -1,10 +1,10 @@
-// /// <reference types="vite/client" />
+/// <reference types="vite/client" />
 
-// // import 'vite/client'
+interface ImportMetaEnv {
+  readonly WXT_STATUS_API_URL: string
+  readonly WXT_GETBLOCK_API_KEY: string
+}
 
 interface ImportMeta {
-  readonly env: {
-    readonly WXT_STATUS_API_URL: string
-    readonly WXT_GETBLOCK_API_KEY: string
-  }
+  readonly env: ImportMetaEnv
 }