Merge branch 'dev' into 'master'

Dev

See merge request ergo/rosen-bridge/ui!332

apps/guard/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @rosen-bridge/guard-app
 
+## 1.6.0
+
+### Minor Changes
+
+- Remove the eRSN title from the network and bridge fee columns on the revenues page
+- Integrate support for the eRSN token on the Revenue page
+
 ## 1.5.0
 
 ### Minor Changes

apps/guard/app/_hooks/useAddresses.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { Network } from '@rosen-ui/types';
+
+import useInfo from './useInfo';
+
+type Addresses = {
+  [key in 'cold' | 'hot']: {
+    [key in Network]?: string;
+  };
+};
+
+/**
+ * returns hot and cold addresses
+ */
+export const useAddresses = () => {
+  const { data } = useInfo();
+  return useMemo(() => {
+    const addresses: Addresses = {
+      cold: {},
+      hot: {},
+    };
+
+    data?.balances.cold.forEach((item) => {
+      addresses.cold[item.chain] = item.address;
+    });
+
+    data?.balances.hot.forEach((item) => {
+      addresses.hot[item.chain] = item.address;
+    });
+
+    return addresses;
+  }, [data]);
+};

apps/guard/app/_mock/mockedData.ts

@@ -77,6 +77,7 @@ const info: ApiInfoResponse = {
   },
   rsnTokenId:
     '85baefff2eb9e45b04f8b4e6265e866773db6db5f9e8e30ce2cae1aa263b90gg',
+  emissionTokenId: '',
   versions: {
     app: '',
     contract: '',

apps/guard/app/_types/api.ts

@@ -20,6 +20,7 @@ export interface ApiInfoResponse {
     trialErrors: string[];
   };
   rsnTokenId: string;
+  emissionTokenId: string;
   balances: {
     hot: TokenInfoWithAddress[];
     cold: TokenInfoWithAddress[];

apps/guard/app/assets/TableRow.tsx

@@ -1,12 +1,20 @@
 import { useState, FC, useMemo } from 'react';
 
-import { Button, EnhancedTableCell, Id, TableRow } from '@rosen-bridge/ui-kit';
+import {
+  Button,
+  EnhancedTableCell,
+  Id,
+  TableRow,
+  WithExternalLink,
+} from '@rosen-bridge/ui-kit';
 
+import { NETWORKS } from '@rosen-ui/constants';
 import { AngleDown, AngleUp } from '@rosen-bridge/icons';
 
-import { getDecimalString } from '@rosen-ui/utils';
+import { getAddressUrl, getDecimalString, getTokenUrl } from '@rosen-ui/utils';
 
 import { GuardTokenInfo } from '@/_types/api';
+import { useAddresses } from '@/_hooks/useAddresses';
 
 interface RowProps extends GuardTokenInfo {
   isLoading?: boolean;
@@ -127,18 +135,36 @@ export const MobileRow: FC<RowProps> = (props) => {
 
 export const TabletRow: FC<RowProps> = (props) => {
   const { isLoading, ...row } = props;
+
+  const addresses = useAddresses();
+
+  const tokenUrl = getTokenUrl(
+    row.chain,
+    row.chain == NETWORKS.CARDANO ? row.tokenId.replace('.', '') : row.tokenId,
+  );
+
+  const coldUrl = getAddressUrl(row.chain, addresses.cold[row?.chain]);
+
+  const hotUrl = getAddressUrl(row.chain, addresses.hot[row?.chain]);
+
   return (
     <TableRow className="divider" sx={isLoading ? { opacity: 0.3 } : {}}>
       <EnhancedTableCell>
-        {row.isNativeToken ? '-' : <Id id={row.tokenId} />}
+        <WithExternalLink url={row.isNativeToken ? undefined : tokenUrl}>
+          {row.isNativeToken ? '-' : <Id id={row.tokenId} />}
+        </WithExternalLink>
       </EnhancedTableCell>
       <EnhancedTableCell>{row.name}</EnhancedTableCell>
       <EnhancedTableCell>{row.chain}</EnhancedTableCell>
       <EnhancedTableCell>
-        {getDecimalString(row.amount.toString(), row.decimals)}
+        <WithExternalLink url={hotUrl}>
+          {getDecimalString(row.amount.toString(), row.decimals)}
+        </WithExternalLink>
       </EnhancedTableCell>
       <EnhancedTableCell>
-        {getDecimalString(row.coldAmount?.toString() ?? '0', row.decimals)}
+        <WithExternalLink url={coldUrl}>
+          {getDecimalString(row.coldAmount?.toString() ?? '0', row.decimals)}
+        </WithExternalLink>
       </EnhancedTableCell>
     </TableRow>
   );

apps/guard/app/revenues/TableRow.tsx

@@ -81,19 +81,19 @@ export const tabletHeader = [
     },
   },
   {
-    title: 'Bridge Fee (RSN)',
+    title: 'Bridge Fee',
     cellProps: {
       width: 150,
     },
   },
   {
-    title: 'Network Fee (RSN)',
+    title: 'Network Fee',
     cellProps: {
       width: 150,
     },
   },
   {
-    title: 'Emission (RSN)',
+    title: 'Emission (RSN/eRSN)',
     cellProps: {
       width: 150,
     },
@@ -328,12 +328,14 @@ export const TabletRow: FC<RowProps> = (props) => {
         ) : (
           getDecimalString(
             row.revenues
-              .find(
+              .filter(
                 (revenue) =>
                   revenue.revenueType === 'emission' &&
-                  revenue.data.tokenId === info?.rsnTokenId,
+                  (revenue.data.tokenId === info?.rsnTokenId ||
+                    revenue.data.tokenId === info?.emissionTokenId),
               )
-              ?.data.amount.toString() ?? '',
+              .reduce((sum, revenue) => sum + revenue.data.amount, 0)
+              .toString() ?? '',
             row.lockToken.decimals,
           )
         )}

apps/guard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rosen-bridge/guard-app",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "prettify": "prettier --write . --ignore-path ./.gitignore",
@@ -16,7 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@rosen-bridge/icons": "^0.5.0",
     "@rosen-bridge/shared-contexts": "^0.0.1",
-    "@rosen-bridge/ui-kit": "^1.3.0",
+    "@rosen-bridge/ui-kit": "^1.4.0",
     "@rosen-ui/constants": "^0.0.4",
     "@rosen-ui/swr-helpers": "^0.2.0",
     "@rosen-ui/utils": "^0.4.1",

apps/rosen/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rosen-bridge/rosen-app
 
+## 2.1.0
+
+### Minor Changes
+
+- Improve the token selection in the bridge form by incorporating a search functionality
+
 ## 2.0.0
 
 ### Major Changes

apps/rosen/app/(bridge)/BridgeForm.tsx

@@ -27,6 +27,8 @@ import useTransactionFormData from '@/_hooks/useTransactionFormData';
 import { useTokenMap } from '@/_hooks/useTokenMap';
 import useWallet from '@/_hooks/useWallet';
 import { NETWORKS } from '@rosen-ui/constants';
+import { Autocomplete } from '@mui/material';
+import { RosenChainToken } from '@rosen-bridge/tokens';
 
 /**
  * customized form input
@@ -52,6 +54,39 @@ const FormInputs = styled(TextField)(({ theme }) => ({
   },
 }));
 
+/**
+ * customized form token input
+ */
+const FormTokenInput = styled(Autocomplete<RosenChainToken>)(({ theme }) => ({
+  '.MuiInputLabel-root': {
+    transform: 'translate(12px, 16px) scale(1)',
+    '&.MuiInputLabel-shrink': {
+      transform: 'translate(12px, 7px) scale(0.75)',
+    },
+  },
+  '.MuiAutocomplete-input': {
+    transform: 'translateY(8px)',
+  },
+  '& .MuiOutlinedInput-root': {
+    overflow: 'hidden',
+    borderRadius: theme.spacing(2),
+    backgroundColor: theme.palette.background.input,
+    minHeight: theme.spacing(8.5),
+
+    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    '&:hover': {
+      backgroundColor: theme.palette.background.header,
+    },
+    '&.Mui-focused': {
+      backgroundColor: theme.palette.background.header,
+      boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
+    },
+  },
+  '& fieldset': {
+    border: 'none',
+  },
+}));
+
 /**
  * max button component container for amount field
  */
@@ -123,20 +158,16 @@ export const BridgeForm = () => {
   };
 
   const handleTokenChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      const currentToken = tokens.find(
-        (token) =>
-          getTokenNameAndId(token, sourceField.value)?.tokenId ===
-          e.target.value,
-      );
+    (e: React.SyntheticEvent, value: RosenChainToken | null) => {
+      const currentToken = value || undefined;
       setValue('token', currentToken, {
         shouldDirty: true,
         shouldTouch: true,
       });
       setValue('amount', '');
       resetField('amount');
     },
-    [setValue, resetField, tokens, sourceField],
+    [setValue, resetField],
   );
 
   const handleSourceChange = useCallback(
@@ -304,34 +335,26 @@ export const BridgeForm = () => {
           Only Native SegWit (P2WPKH or P2WSH) addresses are supported.
         </Alert>
       )}
-      <FormInputs
-        id="token"
-        select
-        label="Token"
+      <FormTokenInput
+        aria-label="token input"
         disabled={!tokens.length}
-        InputProps={{ disableUnderline: true }}
-        inputProps={{ 'aria-label': 'token input' }}
-        variant="filled"
-        {...tokenField}
-        value={
-          tokenField.value
-            ? getTokenNameAndId(tokenField.value, sourceField.value)?.tokenId
-            : ''
-        }
-        onChange={handleTokenChange}
-      >
-        {tokens.map((token) => {
-          const { tokenId, tokenName } = getTokenNameAndId(
-            token,
-            sourceField.value,
-          )!;
+        id="token"
+        clearIcon={false}
+        disablePortal
+        options={tokens}
+        value={tokenField.value}
+        getOptionLabel={(option) => option.name || ''}
+        isOptionEqualToValue={(option, value) => {
           return (
-            <MenuItem key={tokenId} value={tokenId}>
-              {tokenName}
-            </MenuItem>
+            getTokenNameAndId(option, sourceField.value)?.tokenId ===
+            getTokenNameAndId(value, sourceField.value)?.tokenId
           );
-        })}
-      </FormInputs>
+        }}
+        renderInput={(params) => (
+          <TextField {...params} label="Token" name={tokenField.name} />
+        )}
+        onChange={handleTokenChange}
+      />
       <FormInputs
         id="amount"
         size="medium"