feat: create connection request screen (FuelLabs#156)

packages/app/src/systems/Asset/__mocks__/assets.tsx

@@ -11,3 +11,24 @@ export const MOCK_ASSETS_AMOUNTS = ASSET_LIST.map((item, idx) => ({
   assetId: item.assetId,
   amount: bn(idx % 2 === 0 ? 14563943834 : -14563943834),
 }));
+
+export const MOCK_ASSETS_NODE = [
+  {
+    node: {
+      assetId: ASSET_LIST[0].assetId,
+      amount: bn(30000000000),
+    },
+  },
+  {
+    node: {
+      assetId: ASSET_LIST[1].assetId,
+      amount: bn(1500000000000),
+    },
+  },
+  {
+    node: {
+      assetId: ASSET_LIST[2].assetId,
+      amount: bn(120000000),
+    },
+  },
+];

packages/app/src/systems/CRX/background/services/BackgroundService.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CONTENT_SCRIPT_NAME, MessageTypes } from '@fuels-wallet/sdk';
 import type { JSONRPCParams } from 'json-rpc-2.0';
 import { JSONRPCServer } from 'json-rpc-2.0';

packages/app/src/systems/Core/utils/machine.ts

@@ -29,6 +29,7 @@ export async function waitForState<
     }
 
     return appState.context as T['context'];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (err: any) {
     if (err.cause === 'CustomState') throw err;
     throw new Error(

packages/app/src/systems/DApp/components/ConnectInfo/ConnectInfo.stories.tsx

@@ -15,6 +15,6 @@ const URL = 'fuellabs.github.io/swayswap';
 
 export const Usage: StoryFn<ConnectInfoProps> = (args) => (
   <Box css={{ width: 300 }}>
-    <ConnectInfo {...args} url={URL} account={MOCK_ACCOUNTS[0]} />
+    <ConnectInfo {...args} origin={URL} account={MOCK_ACCOUNTS[0]} />
   </Box>
 );

packages/app/src/systems/DApp/components/ConnectInfo/ConnectInfo.test.tsx

@@ -8,7 +8,7 @@ import { TestWrapper } from '~/systems/Core';
 const URL = 'fuellabs.github.io/swayswap/';
 
 const PROPS = {
-  url: URL,
+  origin: URL,
   account: MOCK_ACCOUNTS[0],
 };
 

packages/app/src/systems/DApp/components/ConnectInfo/ConnectInfo.tsx

@@ -5,19 +5,19 @@ import type { Account } from '~/systems/Account';
 import { parseUrl, shortAddress } from '~/systems/Core';
 
 export type ConnectInfoProps = {
-  url: string;
+  origin: string;
   account: Account;
 };
 
-export function ConnectInfo({ url, account }: ConnectInfoProps) {
+export function ConnectInfo({ origin, account }: ConnectInfoProps) {
   return (
     <Card css={styles.root}>
       <Tag as="div" variant="outlined">
-        <Tooltip content={url} align="start" alignOffset={-10}>
-          <Text as="span">{parseUrl(url)}</Text>
+        <Tooltip content={origin} align="start" alignOffset={-10}>
+          <Text as="span">{parseUrl(origin)}</Text>
         </Tooltip>
       </Tag>
-      <Button variant="link" size="xs" css={styles.accountBtn} color="gray">
+      <Button variant="link" size="md" css={styles.accountBtn} color="gray">
         <Avatar.Generated
           role="img"
           size="sm"
@@ -35,16 +35,16 @@ export function ConnectInfo({ url, account }: ConnectInfoProps) {
 const styles = {
   root: cssObj({
     py: '$1',
-    px: '$2',
+    px: '$3',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
 
     '& .fuel_tag': {
-      width: 130,
+      maxWidth: 130,
       boxSizing: 'border-box',
       px: '$3',
-      borderColor: '$gray3',
+      borderColor: '$accent11',
       borderStyle: 'dashed',
       color: '$gray11',
     },
@@ -55,6 +55,7 @@ const styles = {
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       textSize: 'xs',
+      color: '$accent11',
     },
   }),
   accountBtn: cssObj({

packages/app/src/systems/DApp/pages/ConnectionRequest/ConnectionRequest.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, Story } from '@storybook/react';
+import { graphql } from 'msw';
+
+import { ConnectionRequest } from './ConnectionRequest';
+
+import { AccountService, MOCK_ACCOUNTS } from '~/systems/Account';
+import { MOCK_ASSETS_NODE } from '~/systems/Asset/__mocks__/assets';
+
+export default {
+  component: ConnectionRequest,
+  title: 'DApp/Pages/ConnectionRequest',
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'chromeExtension',
+    },
+  },
+  loaders: [
+    async () => {
+      await AccountService.clearAccounts();
+      await AccountService.addAccount({ data: MOCK_ACCOUNTS[0] });
+      return {};
+    },
+  ],
+} as Meta;
+
+export const Usage: Story<unknown> = () => <ConnectionRequest />;
+Usage.parameters = {
+  msw: [
+    graphql.query('getBalances', (req, res, ctx) => {
+      return res(
+        ctx.data({
+          balances: {
+            edges: MOCK_ASSETS_NODE,
+          },
+        })
+      );
+    }),
+  ],
+};

packages/app/src/systems/DApp/pages/ConnectionRequest/ConnectionRequest.tsx

@@ -0,0 +1,100 @@
+import { cssObj } from '@fuel-ui/css';
+import { Button, Card, Flex, Icon, Link, List, Text } from '@fuel-ui/react';
+import { useCallback } from 'react';
+
+import { useAccount } from '~/systems/Account';
+import { Layout } from '~/systems/Core';
+import { TopBarType } from '~/systems/Core/components/Layout/TopBar';
+import { ConnectInfo } from '~/systems/DApp';
+
+const PERMISSION_LIST = [
+  'View your wallet address',
+  'Request transactions approval',
+  'Request message signature',
+  'Read your transactions history',
+];
+const NOT_ALLOWED_LIST = ['View your private keys'];
+
+export function ConnectionRequest() {
+  const { account, isLoading } = useAccount();
+  const origin = 'dapp.com';
+  const authorize = useCallback((accounts: Array<string>) => {
+    // eslint-disable-next-line no-console
+    console.log(accounts);
+  }, []);
+
+  if (!account) return null;
+
+  return (
+    <Layout title="Connection Request" isLoading={isLoading}>
+      <Layout.TopBar type={TopBarType.external} />
+      <Layout.Content css={styles.content}>
+        <ConnectInfo origin={origin} account={account} />
+        <Card css={styles.connectionDetails}>
+          <Text as="h2" color="gray12" css={{ mb: '$2' }}>
+            This site will be able to:
+          </Text>
+          <List icon={Icon.is('Check')} iconColor="accent9">
+            {PERMISSION_LIST.map((permission) => (
+              <List.Item css={styles.listItem} key={permission}>
+                {permission}
+              </List.Item>
+            ))}
+          </List>
+          <List icon={Icon.is('X')} iconColor="red10">
+            {NOT_ALLOWED_LIST.map((permission) => (
+              <List.Item css={styles.listItem} key={permission}>
+                {permission}
+              </List.Item>
+            ))}
+          </List>
+        </Card>
+        <Flex css={{ flex: '1 0' }} justify="center" align={'flex-end'}>
+          <Text fontSize="sm" as={'h2'} className="warning">
+            Only connect with sites you trust.{' '}
+            <Link href="#" color="accent11">
+              Learn more
+            </Link>
+            .
+          </Text>
+        </Flex>
+      </Layout.Content>
+      <Layout.BottomBar>
+        <Button color="gray" variant="ghost">
+          Reject
+        </Button>
+        <Button
+          type="submit"
+          color="accent"
+          onPress={() => authorize([account.address])}
+        >
+          Connect
+        </Button>
+      </Layout.BottomBar>
+    </Layout>
+  );
+}
+
+const styles = {
+  listItem: cssObj({
+    fontSize: '$sm',
+  }),
+  content: cssObj({
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: '$0',
+    '& h2': {
+      fontSize: '$sm',
+    },
+    '& a': {
+      fontSize: '$sm',
+      fontWeight: '$bold',
+    },
+  }),
+  connectionDetails: cssObj({
+    marginTop: '$4',
+    px: '$3',
+    paddingTop: '$2',
+    paddingBottom: '$4',
+  }),
+};

packages/app/src/systems/DApp/pages/ConnectionRequest/index.tsx

@@ -0,0 +1 @@
+export * from './ConnectionRequest';

packages/app/src/systems/DApp/pages/SignatureRequest/SignatureRequest.stories.tsx

@@ -30,6 +30,7 @@ export default {
 
 export const Usage = () => {
   useEffect(() => {
+    // eslint-disable-next-line no-alert
     alert(`use this password to unlock: ${passwordToUnlock}`);
   }, []);
 

packages/app/src/systems/DApp/pages/SignatureRequest/SignatureRequest.tsx

@@ -17,7 +17,7 @@ export function SignatureRequest() {
       <Layout title={`Signature Request`} isLoading={isLoading}>
         <Layout.TopBar type={TopBarType.external} />
         <Layout.Content>
-          {account && <ConnectInfo url={'swayswap.io'} account={account} />}
+          {account && <ConnectInfo origin={'swayswap.io'} account={account} />}
           <Card css={{ mt: '$4' }}>
             <Card.Body css={{ p: '$3' }}>
               <Flex css={{ alignItems: 'center', gap: '$3' }}>

packages/app/src/systems/DApp/pages/TxApprove/TxApprove.tsx

@@ -35,7 +35,7 @@ export function TxApprove({ id, url }: TxApproveProps) {
         <UnlockDialog isFullscreen onUnlock={() => {}} isOpen={false} />
         {!isLoading && !isSent && (
           <Stack gap="$4">
-            {url && account && <ConnectInfo url={url} account={account} />}
+            {url && account && <ConnectInfo origin={url} account={account} />}
             <Stack gap="$2">
               <HelperIcon as="h2" message="Some message">
                 Assets amount

packages/app/src/systems/DApp/pages/index.tsx

@@ -1,2 +1,3 @@
+export * from './ConnectionRequest';
 export * from './SignatureRequest';
 export * from './TxApprove';

packages/app/src/systems/Home/pages/Home/Home.stories.tsx

@@ -1,32 +1,10 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import { bn } from 'fuels';
 import { graphql } from 'msw';
 
 import { Home } from './Home';
 
 import { AccountService, MOCK_ACCOUNTS } from '~/systems/Account';
-import { ASSET_LIST } from '~/systems/Asset';
-
-const ASSETS_MOCK = [
-  {
-    node: {
-      assetId: ASSET_LIST[0].assetId,
-      amount: bn(30000000000),
-    },
-  },
-  {
-    node: {
-      assetId: ASSET_LIST[1].assetId,
-      amount: bn(1500000000000),
-    },
-  },
-  {
-    node: {
-      assetId: ASSET_LIST[2].assetId,
-      amount: bn(120000000),
-    },
-  },
-];
+import { MOCK_ASSETS_NODE } from '~/systems/Asset/__mocks__/assets';
 
 export default {
   component: Home,
@@ -54,7 +32,7 @@ WithAssets.parameters = {
       return res(
         ctx.data({
           balances: {
-            edges: ASSETS_MOCK,
+            edges: MOCK_ASSETS_NODE,
           },
         })
       );