Merge pull request #299 from reown-com/feat/swaps

feat: swaps

Author: ignaciosantise

.changeset/fair-ravens-shop.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': minor
+'@reown/appkit-ethers5-react-native': minor
+'@reown/appkit-common-react-native': minor
+'@reown/appkit-ethers-react-native': minor
+'@reown/appkit-wallet-react-native': minor
+'@reown/appkit-wagmi-react-native': minor
+'@reown/appkit-core-react-native': minor
+'@reown/appkit-ui-react-native': minor
+'@reown/appkit-auth-ethers-react-native': minor
+'@reown/appkit-auth-wagmi-react-native': minor
+'@reown/appkit-coinbase-ethers-react-native': minor
+'@reown/appkit-coinbase-wagmi-react-native': minor
+'@reown/appkit-scaffold-utils-react-native': minor
+'@reown/appkit-siwe-react-native': minor
+---
+
+feat: swaps feature

apps/native/App.tsx

@@ -15,6 +15,7 @@ import {
 } from '@reown/appkit-wagmi-react-native';
 
 import { authConnector } from '@reown/appkit-auth-wagmi-react-native';
+import { Text } from '@reown/appkit-ui-react-native';
 
 import { siweConfig } from './src/utils/SiweUtils';
 
@@ -75,8 +76,9 @@ createAppKit({
   debug: true,
   features: {
     email: true,
-    socials: ['x', 'discord', 'apple'],
-    emailShowWallets: true
+    socials: ['x', 'farcaster', 'discord', 'apple'],
+    emailShowWallets: true,
+    swaps: true
   }
 });
 
@@ -88,6 +90,9 @@ export default function Native() {
       <QueryClientProvider client={queryClient}>
         <SafeAreaView style={[styles.container, isDarkMode && styles.dark]}>
           <StatusBar style="auto" />
+          <Text variant="medium-title-600" style={styles.title}>
+            AppKit for React Native
+          </Text>
           <AppKitButton
             connectStyle={styles.button}
             accountStyle={styles.button}
@@ -121,6 +126,9 @@ const styles = StyleSheet.create({
   text: {
     marginBottom: 20
   },
+  title: {
+    marginBottom: 30
+  },
   button: {
     marginVertical: 6
   }

package.json

@@ -31,7 +31,8 @@
     "test": "turbo run test --parallel",
     "clean": "turbo clean && rm -rf node_modules && watchman watch-del-all",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore",
-    "changeset:prepublish": "yarn run clean; yarn install; yarn version:update; yarn run lint && yarn run prettier; yarn run build; yarn run test;",
+    "playwright:test": "cd apps/native && yarn playwright:test",
+    "changeset:prepublish": "yarn run clean; yarn install; yarn version:update; yarn run lint && yarn run prettier; yarn run build; yarn run test",
     "changeset:publish": "yarn run changeset:prepublish; yarn run changeset publish",
     "changeset:version": "changeset version; yarn run version:update; yarn install --refresh-lockfile",
     "version:update": "./scripts/bump-version.sh"

packages/common/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset']
+};

packages/common/jest.config.ts

@@ -0,0 +1,5 @@
+const commonConfig = {
+  ...require('../../jest.config'),
+  setupFilesAfterEnv: ['../../jest-setup.ts']
+};
+module.exports = commonConfig;

packages/common/src/__tests__/NamesUtil.test.ts

@@ -0,0 +1,24 @@
+import { ConstantsUtil, NamesUtil } from '../index';
+
+describe('NamesUtil', () => {
+  describe('isReownName', () => {
+    test('returns true for names ending with legacy suffix', () => {
+      const legacyName = `testname${ConstantsUtil.WC_NAME_SUFFIX_LEGACY}`;
+      expect(NamesUtil.isReownName(legacyName)).toBe(true);
+    });
+
+    test('returns true for names ending with current suffix', () => {
+      const currentName = `testname${ConstantsUtil.WC_NAME_SUFFIX}`;
+      expect(NamesUtil.isReownName(currentName)).toBe(true);
+    });
+
+    test('returns false for names not ending with either suffix', () => {
+      expect(NamesUtil.isReownName('testname')).toBe(false);
+      expect(NamesUtil.isReownName('testname.com')).toBe(false);
+    });
+
+    test('returns false for empty string', () => {
+      expect(NamesUtil.isReownName('')).toBe(false);
+    });
+  });
+});

packages/common/src/__tests__/NumberUtil.test.ts

@@ -0,0 +1,46 @@
+import { NumberUtil } from '../utils/NumberUtil';
+
+// -- Tests --------------------------------------------------------------------
+describe('NumberUtil', () => {
+  it('should return isGreaterThan as expected', () => {
+    const isGreaterThan = NumberUtil.bigNumber('6.348').isGreaterThan('0');
+    expect(isGreaterThan).toBe(true);
+  });
+});
+
+describe('NumberUtil.parseLocalStringToNumber', () => {
+  it('should return 0 when value is undefined', () => {
+    const result = NumberUtil.parseLocalStringToNumber(undefined);
+    expect(result).toBe(0);
+  });
+
+  it('should return the number when value is a string', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123.45');
+    expect(result).toBe(123.45);
+  });
+
+  it('should return the number when value is a string with a lot of decimals', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123.4567890123456789');
+    expect(result).toBe(123.4567890123456789);
+  });
+
+  it('should return the number when value is a string with zero and a lot of decimals', () => {
+    const result = NumberUtil.parseLocalStringToNumber('0.000000000000000001');
+    expect(result).toBe(0.000000000000000001);
+  });
+
+  it('should return the number when value is a string with a negative sign', () => {
+    const result = NumberUtil.parseLocalStringToNumber('-123.45');
+    expect(result).toBe(-123.45);
+  });
+
+  it('should return the number when value is a string with commas', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123,456.78');
+    expect(result).toBe(123456.78);
+  });
+
+  it('should return the number when value is a string with a lot of commas', () => {
+    const result = NumberUtil.parseLocalStringToNumber('123,456,789.123,456,789');
+    expect(result).toBe(123456789.123456789);
+  });
+});

packages/common/src/utils/NumberUtil.ts

@@ -2,6 +2,10 @@ import * as BigNumber from 'bignumber.js';
 
 export const NumberUtil = {
   bigNumber(value: BigNumber.BigNumber.Value) {
+    if (typeof value === 'string') {
+      return new BigNumber.BigNumber(value.replace(/,/g, ''));
+    }
+
     return new BigNumber.BigNumber(value);
   },
 
@@ -16,8 +20,8 @@ export const NumberUtil = {
       return BigNumber.BigNumber(0);
     }
 
-    const aBigNumber = new BigNumber.BigNumber(a);
-    const bBigNumber = new BigNumber.BigNumber(b);
+    const aBigNumber = new BigNumber.BigNumber(typeof a === 'string' ? a.replace(/,/gu, '') : a);
+    const bBigNumber = new BigNumber.BigNumber(typeof b === 'string' ? b.replace(/,/gu, '') : b);
 
     return aBigNumber.multipliedBy(bBigNumber);
   },
@@ -27,5 +31,42 @@ export const NumberUtil = {
       number.toString().length >= threshold ? Number(number).toFixed(fixed) : number;
 
     return roundedNumber;
+  },
+
+  /**
+   * Format the given number or string to human readable numbers with the given number of decimals
+   * @param value - The value to format. It could be a number or string. If it's a string, it will be parsed to a float then formatted.
+   * @param decimals - number of decimals after dot
+   * @returns
+   */
+  formatNumberToLocalString(value: string | number | undefined, decimals = 2) {
+    if (value === undefined) {
+      return '0.00';
+    }
+
+    if (typeof value === 'number') {
+      return value.toLocaleString('en-US', {
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: decimals
+      });
+    }
+
+    return parseFloat(value).toLocaleString('en-US', {
+      maximumFractionDigits: decimals,
+      minimumFractionDigits: decimals
+    });
+  },
+  /**
+   * Parse a formatted local string back to a number
+   * @param value - The formatted string to parse
+   * @returns
+   */
+  parseLocalStringToNumber(value: string | undefined) {
+    if (value === undefined) {
+      return 0;
+    }
+
+    // Remove any commas used as thousand separators and parse the float
+    return parseFloat(value.replace(/,/gu, ''));
   }
 };

packages/core/src/controllers/ApiController.ts

@@ -72,7 +72,7 @@ export const ApiController = {
       'x-sdk-type': sdkType,
       'x-sdk-version': sdkVersion,
       'User-Agent': ApiUtil.getUserAgent(),
-      'Origin': ApiUtil.getOrigin()
+      'origin': ApiUtil.getOrigin()
     };
   },