fix: approve transaction popup argument reverse order display error (#715)

Author: jinoosss

packages/adena-extension/src/components/molecules/argument-edit-box/argument-edit-box.styles.ts

@@ -57,6 +57,8 @@ export const ArgumentEditBoxWrapper = styled(View)<{ marginRight?: number }>`
       text-align: end;
       direction: rtl;
       text-align: right;
+      unicode-bidi: bidi-override;
+      white-space: nowrap;
       ${fonts.body2Reg};
     }
   }

packages/adena-extension/src/components/molecules/argument-edit-box/argument-edit-box.tsx

@@ -23,6 +23,14 @@ const ArgumentEditBox: React.FC<ArgumentEditBoxProps> = ({
   const [editValue, setEditValue] = useState(value);
   const [editState, setEditState] = useState<EditStateType>('none');
 
+  const displayValue = useMemo(() => {
+    if (!value) {
+      return '';
+    }
+
+    return value.split('').reverse().join('');
+  }, [value]);
+
   const activateEditMode = (): void => {
     setEditable(true);
   };
@@ -128,7 +136,7 @@ const ArgumentEditBox: React.FC<ArgumentEditBoxProps> = ({
         </div>
       ) : (
         <div className='display-wrapper'>
-          <span className='display-value'>{value}</span>
+          <span className='display-value'>{displayValue}</span>
           <div className='icon-wrapper' onClick={activateEditMode}>
             <IconPencil className='edit-icon' />
           </div>