Version 1.8.0

.eslintrc.js

@@ -1,50 +1,14 @@
 module.exports = {
-  root: true,
-  extends: '@react-native',
-  plugins: ['test-id', 'import'],
-  "rules": {
-    "react-native/no-inline-styles": "off",
+  extends: [
+    '@web3-wallet/eslint-config/base',
+    '@web3-wallet/eslint-config/import',
+    '@web3-wallet/eslint-config/mobile',
+    '@web3-wallet/eslint-config/testing-library',
+  ],
+  plugins: ['test-id', 'jest'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
     'test-id/pascalcase': 'error',
-    'jest/no-disabled-tests':'off',
-    "@typescript-eslint/no-explicit-any": "warn",
-    "sort-imports": ["error", { "ignoreDeclarationSort": true }],
-    "import/newline-after-import": ["error", { "count": 1 }],
-    'import/no-extraneous-dependencies': 'error',
-    'import/order': [
-      'error',
-      {
-        "newlines-between": "always-and-inside-groups",
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: true 
-        },
-        groups: [
-          'external',
-          'builtin',
-          'internal',
-          'parent',
-          'sibling',
-          'index',
-          'type'
-        ],
-        pathGroups: [
-          {
-            pattern: 'react*',
-            group: 'external',
-            position: 'before',
-          },
-          {
-            pattern: '@/**',
-            group: 'parent',
-            position: 'before',
-          },
-          {
-            pattern: '/**',
-            group: 'object',
-            position: 'after',
-          },
-        ],
-      },
-    ],
+    'jest/no-disabled-tests': 'off',
   },
 };

.gitignore

@@ -97,4 +97,5 @@ default.realm.note
 # typescript-coverage-report
 coverage-ts
 
-.env
+.env
+.env.storybook

.prettierrc.js

@@ -1,16 +1,14 @@
 module.exports = {
   printWidth: 160,
-  bracketSpacing: true,
   jsxBracketSameLine: true,
   singleQuote: true,
-  trailingComma: 'all',
   arrowParens: 'avoid',
   overrides: [
     {
       files: '*.yaml',
       options: {
-        singleQuote: false
-      }
+        singleQuote: false,
+      },
     },
   ],
 };

.storybook/README.md

@@ -0,0 +1,101 @@
+# Storybook README
+
+## Introduction
+
+Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and more. It allows us to showcase components interactively in an isolated development environment.
+
+This README will guide you through setting up and using Storybook within our project.
+
+## Why Storybook?
+
+- **Isolation**: Develop hard-to-reach states and edge cases.
+- **Organization**: Catalogue our UI components and use them like building blocks.
+- **Documentation**: Automatically generate a visual documentation of our components.
+- **Collaboration**: Easier to share our work with the wider team.
+
+## Setup
+
+Create a .env.storybook file in the root of your repository. This file will contain environment variables specific to Storybook. Add the following line to enable Storybook:
+```
+STORYBOOK_ENABLED=true
+```
+
+## Writing Stories
+
+Stories capture the rendered state of a UI component. They are stored in files ending with `.stories.tsx`. Here's how you can write a story:
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+
+import { Button } from './Button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const ButtonMeta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+  args: {
+    variant: 'primary',
+  },
+  decorators: [
+    Story => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default ButtonMeta;
+
+export const Basic: StoryObj<typeof Button> = {};
+```
+
+### Custom argTypes
+Every component should be accompanied by a story that exemplifies its essential functionality. When a component supports diverse use cases, consider adding distinct stories to reflect its adaptability. To demonstrate prop variations, leverage `argTypes` within your stories. For intricate or specialized prop interactions, you can define [custom argTypes](https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes).
+```js
+const ButtonMeta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+  args: {
+    variant: 'primary',
+  },
+  argTypes: {
+    color: {
+      options: ['primary', 'dark', 'light'],
+      control: { type: 'select' },
+    },
+    fontSize: {
+      options: ["lg", "md", "sm"],
+      mapping: {
+        "lg": "text-lg",
+        "md": "text-md",
+        "sm": "text-sm",
+      },
+      control: { type: 'select' },
+    },
+  }
+};
+```
+For more detailed guidance on story composition, consult the [Storybook Stories documentation](https://storybook.js.org/docs/get-started/whats-a-story).
+
+### Custom render function
+
+To implement a custom render function that includes additional logic, such as side effects from useEffect, you can utilize the render function as follows:
+```js
+const ButtonMeta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+  render: function Render(args) {
+    const [count, setCount] = useState(0);
+
+    return (
+        <Button {...args} onClick={() => setCount(count + 1)}>
+            {count}
+        </Button>
+    )
+  }
+};
+```
+

.storybook/index.ts

@@ -0,0 +1,13 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { view } from './storybook.requires';
+import { krakenTheme } from './theme';
+
+const StorybookUIRoot = view.getStorybookUI({
+  theme: krakenTheme,
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

.storybook/main.ts

@@ -0,0 +1,13 @@
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: [
+    '../src/components/**/*.stories.?(ts|tsx|js|jsx)'
+  ],
+  addons: [
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-actions'
+  ],
+};
+
+export default main;

.storybook/preview.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import RNBootSplash from 'react-native-bootsplash';
+import { StyleSheet, View } from 'react-native';
+import type { Preview } from '@storybook/react';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { NavigationContainer } from '@react-navigation/native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SuperDarkTheme } from '../src/theme/themes';
+
+RNBootSplash.hide();
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: SuperDarkTheme.colors.background,
+    justifyContent: 'center',
+  },
+});
+
+const preview: Preview = {
+  decorators: [
+    Story => (
+      <GestureHandlerRootView>
+        <SafeAreaProvider>
+          <NavigationContainer theme={SuperDarkTheme}>
+            <BottomSheetModalProvider>
+              <View style={styles.container}>
+                <Story />
+              </View>
+            </BottomSheetModalProvider>
+          </NavigationContainer>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    ),
+  ],
+};
+
+export default preview;

.storybook/storybook.requires.ts

@@ -0,0 +1,61 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import {
+  start,
+  prepareStories,
+  getProjectAnnotations,
+} from "@storybook/react-native";
+
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-actions/register";
+
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./src/components",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      "../src/components",
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require("./preview"),
+  require("@storybook/react-native/dist/preview"),
+  require("@storybook/addon-actions/preview"),
+];
+
+global.STORIES = normalizedStories;
+
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  const { importMap } = prepareStories({ storyEntries: normalizedStories });
+
+  global.view._preview.onStoriesChanged({
+    importFn: async (importPath: string) => importMap[importPath],
+  });
+
+  global.view._preview.onGetProjectAnnotationsChanged({
+    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+  });
+}
+
+export const view = global.view;

.storybook/theme.ts

@@ -0,0 +1,53 @@
+import { Theme } from '@storybook/react-native';
+import { SuperDarkTheme } from '../src/theme/themes';
+
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
+
+export const krakenTheme: DeepPartial<Theme> = {
+  backgroundColor: SuperDarkTheme.colors.background,
+  preview: {
+    containerBackgroundColor: SuperDarkTheme.colors.dark100,
+    backgroundColor: SuperDarkTheme.colors.background,
+  },
+  text: {
+    primaryColor: SuperDarkTheme.colors.kraken,
+  },
+  navigation: {
+    backgroundColor: SuperDarkTheme.colors.background,
+    borderColor: SuperDarkTheme.colors.kraken,
+    visibilityBorderRadius: 10,
+  },
+  tabs: {
+    activeBorderColor: SuperDarkTheme.colors.kraken,
+    activeBackgroundColor: SuperDarkTheme.colors.background,
+    activeTextColor: SuperDarkTheme.colors.light100,
+  },
+  panel: {
+    backgroundColor: SuperDarkTheme.colors.background,
+    borderColor: SuperDarkTheme.colors.kraken,
+  },
+  storyList: {
+    headerTextColor: SuperDarkTheme.colors.light100,
+    storySelectedBackgroundColor: SuperDarkTheme.colors.purple_40,
+    storySelectedTextColor: SuperDarkTheme.colors.lavenderIndigo,
+    sectionActiveBackgroundColor: SuperDarkTheme.colors.purple_40,
+    search: {
+      textColor: SuperDarkTheme.colors.light100,
+      placeholderTextColor: SuperDarkTheme.colors.light75,
+      borderRadius: 10,
+      borderColor: SuperDarkTheme.colors.kraken,
+      backgroundColor: SuperDarkTheme.colors.background,
+    },
+  },
+  inputs: {
+    labelTextColor: SuperDarkTheme.colors.text,
+    text: {
+      textColor: SuperDarkTheme.colors.dark100,
+      backgroundColor: SuperDarkTheme.colors.light75,
+    },
+  },
+};