Release Adena Wallet 'v1.8.3' (#291)

package.json

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

packages/adena-extension/package.json

@@ -1,6 +1,6 @@
 {
  "name": "adena-extension",
- "version": "1.8.2",
+ "version": "1.8.3",
  "private": true,
  "description": "Adena is a friendly browser extension wallet for the Gnoland blockchain.",
  "scripts": {

packages/adena-extension/public/manifest.json

@@ -2,7 +2,7 @@
  "name": "Adena",
  "description": "Adena is a friendly browser extension wallet for the Gnoland blockchain.",
  "manifest_version": 3,
- "version": "1.8.2",
+ "version": "1.8.3",
  "action": {
  "default_popup": "popup.html"
  },
@@ -27,6 +27,6 @@
  }
  ],
  "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: *; prefetch-src https://*.openlogin.com; frame-src *;"
+ "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: *; frame-src *;"
  }
 }

packages/adena-extension/public/popup.html

@@ -16,6 +16,5 @@
  <div id="portal-root">
  <div id="portal-popup"></div>
  </div>
- <script src="popup.js"></script>
  </body>
 </html>

packages/adena-extension/src/components/approve/approve-injection-loading/approve-injection-loading.styles.ts

@@ -7,11 +7,17 @@ export const ApproveInjectionLoadingWrapper = styled.div`
  height: auto;
  justify-content: center;
  align-items: center;
- margin-top: 130px;
+ margin-top: 80px;
 
  .description {
- margin-top: 20px;
+ margin-top: 23px;
  color: ${({ theme }) => theme.color.neutral[0]};
- ${({ theme }) => theme.fonts.body1Bold}
+ ${({ theme }) => theme.fonts.header4}
+ }
+
+ .sub-description {
+ margin-top: 12px;
+ color: ${({ theme }) => theme.color.neutral[9]};
+ ${({ theme }) => theme.fonts.body1Reg}
  }
 `;

packages/adena-extension/src/components/approve/approve-injection-loading/approve-injection-loading.tsx

@@ -26,7 +26,7 @@ const ApproveInjectionLoading: React.FC<ApproveInjectionLoadingProps> = ({
  setTick(tick + INTERVAL_DURATION);
  }, INTERVAL_DURATION);
 
- if (done && onResponse) {
+ if (done) {
  if (tick > wait) {
  onResponse();
  clearInterval(interval);
@@ -41,12 +41,13 @@ const ApproveInjectionLoading: React.FC<ApproveInjectionLoadingProps> = ({
  }
 
  return () => clearInterval(interval);
- }, [tick, done, onResponse]);
+ }, [tick, done]);
 
  return (
  <ApproveInjectionLoadingWrapper>
  <Spinner />
- <span className='description'>Processing Request...</span>
+ <span className='description'>{"Processing Request..."}</span>
+ <span className='sub-description'>{"Hang tight, we're working on it!"}</span>
  </ApproveInjectionLoadingWrapper>
  );
 };

packages/adena-extension/src/components/approve/approve-transaction/approve-transaction.spec.tsx

@@ -24,6 +24,10 @@ describe('ApproveTransaction Component', () => {
  },
  transactionData: '',
  opened: false,
+ processing: false,
+ done: false,
+ onResponse: () => { return; },
+ onTimeout: () => { return; },
  onToggleTransactionData: () => { return; },
  onClickConfirm: () => { return; },
  onClickCancel: () => { return; },

packages/adena-extension/src/components/approve/approve-transaction/approve-transaction.tsx

@@ -7,6 +7,7 @@ import Button from '@components/buttons/button';
 import IconArraowDown from '@assets/arrowS-down-gray.svg';
 import IconArraowUp from '@assets/arrowS-up-gray.svg';
 import BottomFixedButtonGroup from '@components/buttons/bottom-fixed-button-group';
+import ApproveInjectionLoading from '../approve-injection-loading/approve-injection-loading';
 
 export interface ApproveTransactionProps {
  loading: boolean;
@@ -25,7 +26,11 @@ export interface ApproveTransactionProps {
  };
  transactionData: string;
  opened: boolean;
+ processing: boolean;
+ done: boolean;
  onToggleTransactionData: (opened: boolean) => void;
+ onResponse: () => void;
+ onTimeout: () => void;
  onClickConfirm: () => void;
  onClickCancel: () => void;
 }
@@ -40,14 +45,29 @@ const ApproveTransaction: React.FC<ApproveTransactionProps> = ({
  networkFee,
  transactionData,
  opened,
+ processing,
+ done,
  onToggleTransactionData,
+ onResponse,
+ onTimeout,
  onClickConfirm,
  onClickCancel,
 }) => {
 
  if (loading) {
  return <ApproveLoading rightButtonText='Approve' />;
  }
+
+ if (processing) {
+ return (
+ <ApproveInjectionLoading
+ done={done}
+ onResponse={onResponse}
+ onTimeout={onTimeout}
+ />
+ )
+ }
+
  return (
  <ApproveTransactionWrapper isErrorNetworkFee={isErrorNetworkFee || false}>
  <Text className='main-title' type='header4'>

packages/adena-extension/src/containers/approve-sign-container/approve-sign-container.tsx

@@ -44,6 +44,12 @@ const ApproveSignContainer: React.FC = () => {
  const [favicon, setFavicon] = useState<any>(null);
  const [visibleTransactionInfo, setVisibleTransactionInfo] = useState(false);
  const [document, setDocument] = useState<StdSignDoc>();
+ const [processType, setProcessType] = useState<"INIT" | "PROCESSING" | "DONE">("INIT")
+ const [response, setResponse] = useState<InjectionMessage | null>(null);
+
+ const processing = useMemo(() => processType !== "INIT", [processType]);
+
+ const done = useMemo(() => processType === "DONE", [processType]);
 
  const networkFee = useMemo(() => {
  if (!document || document.fee.amount.length === 0) {
@@ -139,11 +145,9 @@ const ApproveSignContainer: React.FC = () => {
  return false;
  };
 
- const sendTransaction = async () => {
+ const createSignDocuemnt = async () => {
  if (!document || !currentAccount) {
- chrome.runtime.sendMessage(
- InjectionMessageInstance.failure('UNEXPECTED_ERROR', {}, requestData?.key),
- );
+ setResponse(InjectionMessageInstance.failure('UNEXPECTED_ERROR', {}, requestData?.key));
  return false;
  }
 
@@ -152,29 +156,18 @@ const ApproveSignContainer: React.FC = () => {
  currentAccount,
  document
  );
- chrome.runtime.sendMessage(
- InjectionMessageInstance.success('SIGN_AMINO', { document, signature }, requestData?.key),
- );
+ setProcessType("PROCESSING");
+ setResponse(InjectionMessageInstance.success('SIGN_AMINO', { document, signature }, requestData?.key));
  } catch (e) {
  if (e instanceof Error) {
  const message = e.message;
  if (message.includes('Ledger')) {
  return false;
  }
- chrome.runtime.sendMessage(
- InjectionMessageInstance.failure(
- 'SIGN_FAILED',
- { error: { message } },
- requestData?.key,
- ),
+ setResponse(InjectionMessageInstance.failure('SIGN_FAILED', { error: { message } }, requestData?.key),
  );
  }
- chrome.runtime.sendMessage(
- InjectionMessageInstance.failure(
- 'SIGN_FAILED',
- {},
- requestData?.key,
- ),
+ setResponse(InjectionMessageInstance.failure('SIGN_FAILED', {}, requestData?.key),
  );
  }
  return false;
@@ -197,7 +190,8 @@ const ApproveSignContainer: React.FC = () => {
  });
  return;
  }
- sendTransaction();
+
+ createSignDocuemnt().finally(() => setProcessType("DONE"));
  };
 
  const onClickCancel = () => {
@@ -206,16 +200,32 @@ const ApproveSignContainer: React.FC = () => {
  );
  };
 
+ const onResponseSignTransaction = useCallback(() => {
+ if (response) {
+ chrome.runtime.sendMessage(response);
+ }
+ }, [response]);
+
+ const onTimeoutSignTransaction = useCallback(() => {
+ chrome.runtime.sendMessage(
+ InjectionMessageInstance.failure('NETWORK_TIMEOUT', {}, requestData?.key),
+ );
+ }, []);
+
  return (
  <ApproveTransaction
  title='Sign Transaction'
  domain={hostname}
  contracts={transactionData?.contracts}
  loading={transactionData === undefined}
+ processing={processing}
+ done={done}
  logo={favicon}
  networkFee={networkFee}
  onClickConfirm={onClickConfirm}
  onClickCancel={onClickCancel}
+ onResponse={onResponseSignTransaction}
+ onTimeout={onTimeoutSignTransaction}
  onToggleTransactionData={onToggleTransactionData}
  opened={visibleTransactionInfo}
  transactionData={JSON.stringify(document, null, 2)}

packages/adena-extension/src/containers/approve-sign-transaction-container/approve-sign-transaction-container.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import ApproveTransaction from '@components/approve/approve-transaction/approve-transaction';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useCurrentAccount } from '@hooks/use-current-account';
@@ -45,6 +45,12 @@ const ApproveSignTransactionContainer: React.FC = () => {
  const [favicon, setFavicon] = useState<any>(null);
  const [visibleTransactionInfo, setVisibleTransactionInfo] = useState(false);
  const [document, setDocument] = useState<StdSignDoc>();
+ const [processType, setProcessType] = useState<"INIT" | "PROCESSING" | "DONE">("INIT")
+ const [response, setResponse] = useState<InjectionMessage | null>(null);
+
+ const processing = useMemo(() => processType !== "INIT", [processType]);
+
+ const done = useMemo(() => processType === "DONE", [processType]);
 
  const networkFee = useMemo(() => {
  if (!document || document.fee.amount.length === 0) {
@@ -140,11 +146,9 @@ const ApproveSignTransactionContainer: React.FC = () => {
  return false;
  };
 
- const sendTransaction = async () => {
+ const signTransaction = async () => {
  if (!document || !currentAccount) {
- chrome.runtime.sendMessage(
- InjectionMessageInstance.failure('UNEXPECTED_ERROR', {}, requestData?.key),
- );
+ setResponse(InjectionMessageInstance.failure('UNEXPECTED_ERROR', {}, requestData?.key));
  return false;
  }
 
@@ -153,31 +157,20 @@ const ApproveSignTransactionContainer: React.FC = () => {
  currentAccount,
  document
  );
+ setProcessType("PROCESSING");
  const transactionBytes = await transactionService.createTransaction(document, signature);
  const encodedTransaction = bytesToBase64(transactionBytes);
- chrome.runtime.sendMessage(
- InjectionMessageInstance.success('SIGN_TX', { encodedTransaction }, requestData?.key),
- );
+ setResponse(InjectionMessageInstance.success('SIGN_TX', { encodedTransaction }, requestData?.key));
  } catch (e) {
  if (e instanceof Error) {
  const message = e.message;
  if (message.includes('Ledger')) {
  return false;
  }
- chrome.runtime.sendMessage(
- InjectionMessageInstance.failure(
- 'SIGN_FAILED',
- { error: { message } },
- requestData?.key,
- ),
+ setResponse(InjectionMessageInstance.failure('SIGN_FAILED', { error: { message } }, requestData?.key),
  );
  }
- chrome.runtime.sendMessage(
- InjectionMessageInstance.failure(
- 'SIGN_FAILED',
- {},
- requestData?.key,
- ),
+ setResponse(InjectionMessageInstance.failure('SIGN_FAILED', {}, requestData?.key),
  );
  }
  return false;
@@ -200,7 +193,7 @@ const ApproveSignTransactionContainer: React.FC = () => {
  });
  return;
  }
- sendTransaction();
+ signTransaction().finally(() => setProcessType("DONE"));
  };
 
  const onClickCancel = () => {
@@ -209,16 +202,32 @@ const ApproveSignTransactionContainer: React.FC = () => {
  );
  };
 
+ const onResponseSignTransaction = useCallback(() => {
+ if (response) {
+ chrome.runtime.sendMessage(response);
+ }
+ }, [response]);
+
+ const onTimeoutSignTransaction = useCallback(() => {
+ chrome.runtime.sendMessage(
+ InjectionMessageInstance.failure('NETWORK_TIMEOUT', {}, requestData?.key),
+ );
+ }, []);
+
  return (
  <ApproveTransaction
  title='Sign Transaction'
  domain={hostname}
  contracts={transactionData?.contracts}
  loading={transactionData === undefined}
+ processing={processing}
+ done={done}
  logo={favicon}
  networkFee={networkFee}
  onClickConfirm={onClickConfirm}
  onClickCancel={onClickCancel}
+ onResponse={onResponseSignTransaction}
+ onTimeout={onTimeoutSignTransaction}
  onToggleTransactionData={onToggleTransactionData}
  opened={visibleTransactionInfo}
  transactionData={JSON.stringify(document, null, 2)}