Release Adena version '1.7.3' (#227)

package.json

@@ -1,6 +1,6 @@
 {
  "name": "adena-wallet",
- "version": "1.7.2",
+ "version": "1.7.3",
  "description": "Adena Wallet",
  "license": "Adena License",
  "private": true,

packages/adena-extension/package.json

@@ -1,6 +1,6 @@
 {
  "name": "adena-extension",
- "version": "1.7.2",
+ "version": "1.7.3",
  "private": true,
  "description": "Adena Wallet",
  "scripts": {

packages/adena-extension/public/manifest.json

@@ -2,38 +2,31 @@
  "name": "Adena",
  "description": "Adena Wallet",
  "manifest_version": 3,
- "version": "1.7.2",
+ "version": "1.7.3",
  "action": {
  "default_popup": "popup.html"
  },
  "background": {
  "service_worker": "background.js"
  },
- "permissions": [
- "storage",
- "tabs"
- ],
+ "permissions": ["storage", "tabs"],
  "content_scripts": [
  {
- "matches": [
- "*://*/*"
- ],
- "js": [
- "content.js"
- ]
+ "matches": ["*://*/*"],
+ "js": ["content.js"]
  }
  ],
  "web_accessible_resources": [
  {
- "resources": [
-  "inject.js"
-  ],
-  "matches": [
-  "<all_urls>"
- ]
+ "resources": ["inject.js"],
+ "matches": ["<all_urls>"]
+ },
+ {
+ "resources": ["resources/*"],
+ "matches": ["<all_urls>"]
  }
  ],
  "content_security_policy": {
  "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; default-src 'self'; img-src 'self' https: data:; font-src https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; connect-src 'self' data: https://* http://localhost:* http://127.0.0.1:*; prefetch-src https://*.openlogin.com; frame-src https://*;"
  }
-}
+}

packages/adena-extension/src/common/provider/wallet/wallet-provider.tsx

@@ -99,7 +99,7 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
  }
 
  async function initNetworkMetainfos() {
- const networkMetainfos = await chainService.fetchNetworkMetainfos();
+ const networkMetainfos = await chainService.getNetworks();
  if (networkMetainfos.length === 0) {
  return false;
  }
@@ -113,9 +113,9 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
  async function initCurrentNetworkMetainfos(networkMetainfos: NetworkMetainfo[]) {
  const currentNetworkId = await chainService.getCurrentNetworkId();
  const currentNetwork =
- networkMetainfos.find((info) => info.networkId === currentNetworkId) ??
+ networkMetainfos.find((networkMetainfo) => networkMetainfo.id === currentNetworkId) ??
  networkMetainfos[0];
- await chainService.updateCurrentNetworkId(currentNetwork.networkId);
+ await chainService.updateCurrentNetworkId(currentNetwork.id);
  await changeNetwork(currentNetwork);
  return true;
  }

packages/adena-extension/src/common/utils/client-utils.ts

@@ -243,7 +243,7 @@ export const parseParmeters = (url: string) => {
 export const encodeParameter = (data: { [key in string]: any }) => {
  try {
  const encodedVaoue = encodeURI(JSON.stringify(data));
- return encodedVaoue;
+ return toBase64(encodedVaoue);
  } catch (error) {
  console.log(error);
  }
@@ -252,14 +252,32 @@ export const encodeParameter = (data: { [key in string]: any }) => {
 
 export const decodeParameter = (data: string) => {
  try {
- const decodedValue = JSON.parse(decodeURI(data));
+ const decodedValue = JSON.parse(decodeURI(fromBase64(data)));
  return decodedValue;
  } catch (error) {
  console.log(error);
  }
  return {};
 };
 
+export const toBase64 = (data: string) => {
+ try {
+ return btoa(data);
+ } catch (error) {
+ console.log(error);
+ }
+ return '';
+};
+
+export const fromBase64 = (data: string) => {
+ try {
+ return atob(data);
+ } catch (error) {
+ console.log(error);
+ }
+ return '';
+};
+
 export const createImageByURI = async (uri: string) => {
  try {
  const imageData = await fetchArrayData(uri);

packages/adena-extension/src/components/add-custom-network/add-custom-network-form/add-custom-network-form.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import { render } from '@testing-library/react';
+import theme from '@styles/theme';
+import { GlobalStyle } from '@styles/global-style';
+import AddCustomNetworkForm, { AddCustomNetworkFormProps } from './add-custom-network-form';
+
+describe('AddCustomNetworkForm Component', () => {
+ it('AddCustomNetworkForm render', () => {
+ const args: AddCustomNetworkFormProps = {
+ name: '',
+ rpcUrl: '',
+ hasRPCUrlError: false,
+ chainId: '',
+ onChangeName: () => { return; },
+ onChangeRPCUrl: () => { return; },
+ onChangeChainId: () => { return; },
+ save: () => { return; },
+ cancel: () => { return; },
+ };
+
+ render(
+ <RecoilRoot>
+ <GlobalStyle />
+ <ThemeProvider theme={theme}>
+ <AddCustomNetworkForm {...args} />
+ </ThemeProvider>
+ </RecoilRoot>,
+ );
+ });
+});

packages/adena-extension/src/components/add-custom-network/add-custom-network-form/add-custom-network-form.stories.tsx

@@ -0,0 +1,22 @@
+import AddCustomNetworkForm, { type AddCustomNetworkFormProps } from './add-custom-network-form';
+import { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+ title: 'components/add-custom-network/AddCustomNetworkForm',
+ component: AddCustomNetworkForm,
+} as Meta<typeof AddCustomNetworkForm>;
+
+export const Default: StoryObj<AddCustomNetworkFormProps> = {
+ args: {
+ name: '',
+ rpcUrl: '',
+ hasRPCUrlError: false,
+ chainId: '',
+ onChangeName: action('onChangeName'),
+ onChangeRPCUrl: action('onChangeRPCUrl'),
+ onChangeChainId: action('onChangeChainId'),
+ save: action('save'),
+ cancel: action('cancel'),
+ },
+};

packages/adena-extension/src/components/add-custom-network/add-custom-network-form/add-custom-network-form.styles.ts

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+
+export const AddCustomNetworkFormWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+
+ .input-wrapper {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ .input-box {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ min-height: 48px;
+ padding: 12px 16px;
+ ${({ theme }) => theme.fonts.body2Reg};
+ background-color: ${({ theme }) => theme.color.neutral[8]};
+ border: 1px solid ${({ theme }) => theme.color.neutral[6]};
+ border-radius: 30px;
+ align-items: center;
+ margin-top: 12px;
+
+ :first-child {
+ margin-top: 0;
+ }
+
+ input {
+ display: flex;
+ width: 100%;
+ height: auto;
+ resize: none;
+ overflow: hidden;
+ line-height: 25px;
+
+ ::placeholder {
+ color: ${({ theme }) => theme.color.neutral[9]};
+ }
+ }
+ }
+ }
+
+ .error-message {
+ position: relative;
+ padding: 0 16px;
+ ${({ theme }) => theme.fonts.captionReg};
+ color: ${({ theme }) => theme.color.red[2]};
+ }
+
+ .submit-wrapper {
+ position: absolute;
+ display: flex;
+ width: 100%;
+ bottom: 0;
+ justify-content: space-between;
+
+ button {
+ width: 100%;
+ height: 48px;
+ border-radius: 30px;
+ ${({ theme }) => theme.fonts.body1Bold};
+ background-color: ${({ theme }) => theme.color.neutral[4]};
+ transition: 0.2s;
+
+ :hover {
+ background-color: ${({ theme }) => theme.color.neutral[5]};
+ }
+
+ &:last-child {
+ margin-left: 10px;
+ }
+
+ &.save {
+ background-color: ${({ theme }) => theme.color.primary[3]};
+
+ :hover {
+ background-color: ${({ theme }) => theme.color.primary[4]};
+ }
+
+ &.disabled {
+ color: ${({ theme }) => theme.color.neutral[4]};
+ background-color: ${({ theme }) => theme.color.primary[6]};
+ cursor: default;
+ }
+ }
+ }
+ }
+`;

packages/adena-extension/src/components/add-custom-network/add-custom-network-form/add-custom-network-form.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback } from 'react';
+import { AddCustomNetworkFormWrapper } from './add-custom-network-form.styles';
+
+export interface AddCustomNetworkFormProps {
+ name: string;
+ rpcUrl: string
+ hasRPCUrlError: boolean;
+ chainId: string;
+ onChangeName: (name: string) => void;
+ onChangeRPCUrl: (rpcUrl: string) => void;
+ onChangeChainId: (chainId: string) => void;
+ save: () => void;
+ cancel: () => void;
+}
+
+const AddCustomNetworkForm: React.FC<AddCustomNetworkFormProps> = ({
+ name,
+ onChangeName,
+ rpcUrl,
+ onChangeRPCUrl,
+ hasRPCUrlError,
+ chainId,
+ onChangeChainId,
+ save,
+ cancel,
+}) => {
+
+ const isSavable = useCallback(() => {
+ return name.length > 0 &&
+ rpcUrl.length > 0 &&
+ chainId.length > 0;
+ }, [name, rpcUrl, chainId]);
+
+ const onClickSave = useCallback(() => {
+ save();
+ }, [save]);
+
+ const onClickCancel = useCallback(() => {
+ cancel();
+ }, [cancel]);
+
+ return (
+ <AddCustomNetworkFormWrapper>
+ <div className='input-wrapper'>
+ <div className='input-box'>
+ <input
+ type='text'
+ value={name}
+ autoComplete='off'
+ onChange={event => onChangeName(event.target.value)}
+ placeholder='Network Name'
+ />
+ </div>
+ <div className='input-box'>
+ <input
+ type='text'
+ value={rpcUrl}
+ autoComplete='off'
+ onChange={event => onChangeRPCUrl(event.target.value)}
+ placeholder='RPC URL'
+ />
+ </div>
+ {
+ hasRPCUrlError &&
+ <span className='error-message'>{'Invalid URL'}</span>
+ }
+ <div className='input-box'>
+ <input
+ type='text'
+ value={chainId}
+ autoComplete='off'
+ onChange={event => onChangeChainId(event.target.value)}
+ placeholder='Chain ID'
+ />
+ </div>
+ </div>
+ <div className='submit-wrapper'>
+ <button
+ className='cancel'
+ onClick={onClickCancel}>
+ {'Cancel'}
+ </button>
+ <button
+ className={isSavable() ? 'save' : 'save disabled'}
+ onClick={onClickSave}
+ >
+ {'Save'}
+ </button>
+ </div>
+ </AddCustomNetworkFormWrapper>
+ );
+};
+
+export default AddCustomNetworkForm;