Feat: Native Swaps (#3231)

This PR ads a convenient swap feature directly in the Safe Interface. The swap feature can be accessed from the dashboard, assets page or directly from the navbar. Under the hood this is integration with cowswap. We decoded the cowswap transactions to make a swap more convenient and secure & push notifications about the status of a swap appear in the safe interface. 

---------

Co-authored-by: Usame Algan <[email protected]>
Co-authored-by: Usame Algan <[email protected]>
Co-authored-by: Aaron Cook <[email protected]>
Co-authored-by: Tanya <[email protected]>
Co-authored-by: James Mealy <[email protected]>
Co-authored-by: Manuel Gellfart <[email protected]>
Co-authored-by: katspaugh <[email protected]>

.storybook/main.ts

@@ -26,11 +26,30 @@ const config: StorybookConfig = {
       imageRule['exclude'] = /\.svg$/;
     }
 
-    // Configure .svg files to be loaded with @svgr/webpack
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack'],
-    });
+      config.module.rules.push({
+        test: /\.svg$/i,
+        issuer: { and: [/\.(js|ts|md)x?$/] },
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: false,
+              svgoConfig: {
+                plugins: [
+                  {
+                    name: 'preset-default',
+                    params: {
+                      overrides: { removeViewBox: false },
+                    },
+                  },
+                ],
+              },
+              titleProp: true,
+            },
+          },
+        ],
+      })
 
     return config;
   },

.storybook/preview.ts

@@ -4,6 +4,8 @@ import { ThemeProvider, CssBaseline } from '@mui/material'
 import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 import createSafeTheme from '../src/components/theme/safeTheme'
 
+import '../src/styles/globals.css'
+
 const preview: Preview = {
   parameters: {
     controls: {

package.json

@@ -45,6 +45,7 @@
     "@gnosis.pm/zodiac/**/ethers": "^6.11.1"
   },
   "dependencies": {
+    "@cowprotocol/widget-react": "0.8.2",
     "@ducanh2912/next-pwa": "^9.7.1",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.0",
@@ -101,6 +102,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.1",
+    "@cowprotocol/app-data": "^2.1.0",
     "@faker-js/faker": "^8.1.0",
     "@next/bundle-analyzer": "^13.5.6",
     "@openzeppelin/contracts": "^4.9.2",