Merge branch 'dev' into patch-3

Author: corwintines

.all-contributorsrc

@@ -12006,6 +12006,60 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "ecabras",
+      "name": "ecabras",
+      "avatar_url": "https://avatars.githubusercontent.com/u/126670074?v=4",
+      "profile": "https://github.com/ecabras",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "raxhvl",
+      "name": "rahul",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10168946?v=4",
+      "profile": "https://github.com/raxhvl",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "professorabhay",
+      "name": "Abhay Gupta ",
+      "avatar_url": "https://avatars.githubusercontent.com/u/76243309?v=4",
+      "profile": "https://abhayporwals.live/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "somethingstup",
+      "name": "somethingstup",
+      "avatar_url": "https://avatars.githubusercontent.com/u/166286712?v=4",
+      "profile": "https://github.com/somethingstup",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "woxjro",
+      "name": "woxjro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/63214188?v=4",
+      "profile": "https://github.com/woxjro",
+      "contributions": [
+        "tool"
+      ]
+    },
+    {
+      "login": "SeanXLChen",
+      "name": "bambooskySean",
+      "avatar_url": "https://avatars.githubusercontent.com/u/78134555?v=4",
+      "profile": "https://github.com/SeanXLChen",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/ISSUE_TEMPLATE/suggest_wallet.yaml

@@ -293,7 +293,7 @@ body:
     id: wallet_eip_1559_support
     attributes:
       label: Does the wallet support EIP-1559 (type 2) transactions?
-      description: Please provide information on the type of transactions this wallet supports.
+      description: Does your wallet support EIP-1559 (type 2) transactions for Ethereum Mainnet. Please provide information on the type of transactions this wallet supports. If this is not applicable, please explain. 
     validations:
       required: true
   - type: textarea

.github/workflows/non-english-warning.yml

@@ -0,0 +1,74 @@
+name: Check for non-English updates outside of Crowdin
+
+on:
+  pull_request:
+    paths:
+      - "public/content/translations/**/*.md"
+      - "src/intl/**/*.json"
+      - "!src/intl/en/**"
+
+jobs:
+  check_branch_name:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Exit early if branch name contains 'crowdin'
+        run: |
+          if [[ "${{ github.head_ref }}" == *crowdin* ]]; then
+            echo "Branch name contains 'crowdin', stopping workflow"
+            exit 1
+          fi
+
+  check_changes:
+    needs: check_branch_name
+    runs-on: ubuntu-latest
+    outputs:
+      all_changes_include_href: ${{ steps.check.outputs.all_changes_include_href }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Check changes
+        id: check
+        run: |
+          git fetch origin ${{ github.base_ref }}
+          DIFF=$(git diff --no-ext-diff --unified=0 origin/${{ github.base_ref }}..${{ github.head_ref }} -- 'public/content/translations/**/*.md' 'src/intl/**/*.json' '!src/intl/en/**' | grep -E -v '^[-+]href=')
+          if [[ -z "$DIFF" ]]; then
+            echo "ALL_CHANGES_INCLUDE_HREF=true" >> $GITHUB_ENV
+          else
+            echo "ALL_CHANGES_INCLUDE_HREF=false" >> $GITHUB_ENV
+          fi
+          echo "::set-output name=all_changes_include_href::$ALL_CHANGES_INCLUDE_HREF"
+
+  add_label_and_comment:
+    needs: check_changes
+    runs-on: ubuntu-latest
+    steps:
+      - name: Add label and comment
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const prNumber = context.issue.number;
+            const repo = context.repo;
+            const prAuthor = context.payload.pull_request.user.login;
+            const allChangesIncludeHref = '${{ needs.check_changes.outputs.all_changes_include_href }}' === 'true';
+            const status = allChangesIncludeHref ? 'question ❓' : 'blocked 🛑';
+            await github.rest.issues.addLabels({
+              ...repo,
+              issue_number: prNumber,
+              labels: [status, 'non-crowdin translation updates']
+            });
+            const commentWithoutHrefs = `This pull request contains changes to non-English content, which must also be handled through the Crowdin platform instead of only on GitHub.`
+            const commentWithHrefs = `This pull request contains changes to non-English content files, which may also need to be handled through the Crowdin platform instead of only on GitHub.
+            await github.rest.issues.createComment({
+              ...repo,
+              issue_number: prNumber,
+              body: `
+              Thank you for your contribution, @${prAuthor}!
+              
+              ${allChangesIncludeHref ? commentWithHrefs : commentWithoutHrefs}
+              
+              We value your suggestion, and for any non-English content updates we request that you check out [how to help us translate](https://ethereum.org/en/contributing/translation-program/#help-us-translate), and suggest these updates directly in [our Crowdin project](https://crowdin.com/project/ethereum-org) if possible, where they can be properly reviewed.
+              
+              Please post here or join [our Discord](https://ethereum.org/discord) if you have questions!
+              `
+            });

.github/workflows/stale.yml

@@ -19,3 +19,4 @@ jobs:
           stale-pr-message: "This issue is stale because it has been open 30 days with no activity."
           days-before-stale: 30
           days-before-close: -1
+          operations-per-run: 250

.storybook/ChakraDecorator.tsx

@@ -0,0 +1,63 @@
+import {
+  ChakraBaseProvider,
+  extendBaseTheme,
+  useColorMode,
+} from "@chakra-ui/react"
+import type { Decorator } from "@storybook/react"
+
+import theme from "../src/@chakra-ui/theme"
+import { useEffect, useMemo, useState } from "react"
+import i18n from "./i18next"
+
+type DecoratorProps = Parameters<Decorator>
+
+const ColorModeSync = ({ context }: { context: DecoratorProps[1] }) => {
+  const { setColorMode } = useColorMode()
+
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark"
+
+    context.globals.colorMode = isDarkMode ? "dark" : "light"
+  }, [])
+
+  useEffect(() => {
+    setColorMode(context.globals.colorMode)
+  }, [setColorMode, context])
+
+  return null
+}
+
+/**
+ * This is a custom local setup of the official Chakra UI Storybook addon.
+ *
+ * A local version was created in response to provide a better sync between
+ * updated local direction to the Chakra theme.
+ *
+ * (This would most likely not be updated in the addon due to ongoing creation of Chakra v3 at the time this
+ * setup was created.)
+ *
+ * Will be deprecated and removed when Chakra v3 is available for migration.
+ *
+ */
+export const ChakraDecorator: Decorator = (getStory, context) => {
+  const [dir, updateDir] = useState<"ltr" | "rtl">()
+
+  i18n.on("languageChanged", (locale) => {
+    const direction = i18n.dir(locale)
+    document.documentElement.dir = direction
+    updateDir(direction)
+  })
+
+  const themeWithDirectionOverride = useMemo(() => {
+    return extendBaseTheme({ direction: dir }, theme)
+  }, [dir])
+
+  return (
+    <ChakraBaseProvider theme={themeWithDirectionOverride}>
+      <>
+        <ColorModeSync context={context} />
+        {getStory(context)}
+      </>
+    </ChakraBaseProvider>
+  )
+}

.storybook/i18next.ts

@@ -6,6 +6,7 @@ export const baseLocales = {
   zh: { title: "中国人", left: "Zh" },
   ru: { title: "Русский", left: "Ru" },
   uk: { title: "українська", left: "Uk" },
+  fa: { title: "فارسی", left: "Fa" },
 }
 
 // Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.

.storybook/main.ts

@@ -1,8 +1,8 @@
-import path from "path"
-
 import type { StorybookConfig } from "@storybook/nextjs"
 import { propNames } from "@chakra-ui/react"
 
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
+
 /**
  * Note regarding package.json settings related to Storybook:
  *
@@ -21,7 +21,6 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@chakra-ui/storybook-addon",
     "storybook-react-i18next",
   ],
   staticDirs: ["../public"],
@@ -37,11 +36,15 @@ const config: StorybookConfig = {
       disable: true,
     },
   },
-  webpackFinal: async (config: any) => {
-    // Add path aliases
-    config.resolve.alias["@"] = path.resolve(__dirname, "../src")
-    config.resolve.alias["@/public"] = path.resolve(__dirname, "../public")
-
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ]
+    }
     return config
   },
   typescript: {

.storybook/preview.ts

@@ -1,15 +1,13 @@
-import { extendBaseTheme } from "@chakra-ui/react"
 import type { Preview } from "@storybook/react"
 
 import theme from "../src/@chakra-ui/theme"
 
+import { ChakraDecorator } from "./ChakraDecorator"
 import i18n, { baseLocales } from "./i18next"
 
 import "../src/styles/global.css"
 
-const extendedTheme = extendBaseTheme(theme)
-
-const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints) as [
+const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
   string,
   string
 ][]
@@ -19,6 +17,20 @@ const preview: Preview = {
     locale: "en",
     locales: baseLocales,
   },
+  globalTypes: {
+    colorMode: {
+      name: "Color Mode",
+      description: "Change the color mode",
+      toolbar: {
+        icon: "circlehollow",
+        items: [
+          { value: "light", icon: "circlehollow", title: "Light Mode" },
+          { value: "dark", icon: "circle", title: "Dark Mode" },
+        ],
+      },
+    },
+  },
+  decorators: [ChakraDecorator],
   parameters: {
     i18n,
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -36,9 +48,6 @@ const preview: Preview = {
         order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],
       },
     },
-    chakra: {
-      theme: extendedTheme,
-    },
     layout: "centered",
     // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
     viewport: {

.storybook/types.ts

@@ -0,0 +1,81 @@
+import type { ArgTypes } from "@storybook/react"
+import type { ThemingProps } from "@chakra-ui/react"
+
+// Type declarations below pulled directly from `@chakra-ui/storybook-addon`
+// with some alteration
+// (Subject to deprecation and removal upon release of Chakra v3)
+
+/**
+ * `keyof` alternative which omits non-string keys
+ */
+type KeyOf<T> = [T] extends [never]
+  ? never
+  : T extends object
+  ? Extract<keyof T, string>
+  : never
+
+export type ThemingArgTypeKey = "variant" | "size"
+
+/**
+ * Create Storybook controls based on a Chakra UI theme component.
+ *
+ * @example
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: getThemingArgTypes(theme, "Button"),
+ * }
+ *
+ * @example full example
+ * import { Meta, StoryFn } from "@storybook/react"
+ * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
+ * import { theme } from "<your-theme>"
+ *
+ * export default {
+ *   title: "Components / Forms / Button",
+ *   argTypes: {
+ *     ...getThemingArgTypes(theme, "Button"),
+ *     children: "string"
+ *   },
+ *   args: { children: "Button" },
+ * } as Meta
+ *
+ * interface StoryProps extends ThemingProps<"Button"> {
+ *   children?: React.ReactNode
+ * }
+ *
+ * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
+ *
+ * @param theme same Chakra UI theme used in .storybook/preview.tsx
+ * @param componentName component name to create the ArgTypes for
+ */
+export function getThemingArgTypes<
+  Theme extends Record<string, any>,
+  ComponentName extends KeyOf<Theme["components"]>
+>(theme: Theme, componentName: ComponentName) {
+  const component = theme.components[componentName]
+  if (!component) {
+    return undefined
+  }
+
+  const argTypes: ArgTypes<
+    Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>
+  > = {}
+
+  const variantOptions = Object.keys(component.variants || {})
+  if (variantOptions.length) {
+    argTypes.variant = {
+      type: { name: "enum", value: variantOptions },
+      defaultValue: component.defaultProps?.variant,
+    }
+  }
+
+  const sizeOptions = Object.keys(component.sizes || {})
+  if (sizeOptions.length) {
+    argTypes.size = {
+      type: { name: "enum", value: sizeOptions },
+      defaultValue: component.defaultProps?.size,
+    }
+  }
+
+  return argTypes
+}