update transaction card ui

.dfx/network/local/ic-https-outcalls-adapter-pid

@@ -1 +1 @@
-8348
+9502

.dfx/network/local/icx-proxy-pid

@@ -1 +1 @@
-8779
+9618

.dfx/network/local/replica-configuration/replica-1.port

@@ -1 +1 @@
-46697
+40687

.dfx/network/local/replica-configuration/replica-pid

@@ -1 +1 @@
-8355
+9509

.dfx/network/local/state/replicated_state/node-100/state/checkpoints/0000000000001388/canister_states/00000000000000070101/canister.pbuf → .dfx/network/local/state/replicated_state/node-100/state/checkpoints/0000000000001770/canister_states/00000000000000070101/canister.pbuf

@@ -1,10 +1,10 @@
-�(�:��

+�+(���������
:��

 ���

 Ъ�

 ��

 ��

 ��@
-ɨʸD
+��˸D
 acknowledge_entries
 add
 add_tentative_device
@@ -36,7 +36,7 @@ $authn_method_registration_mode_enter%
 remove	
 replace
 update
-verify_tentative_deviceget_anchor_credentialsget_delegationget_id_aliasget_principalhttp_requestidentity_authn_infolookupstats �*ݹ

+verify_tentative_deviceget_anchor_credentialsget_delegationget_id_aliasget_principalhttp_requestidentity_authn_infolookupstats �+*ݹ

 O
 candid:args@
(opt InternetIdentityInit) �����Q&1��)�������p��Y���~
 ��

@@ -665,9 +665,9 @@ service : (opt InternetIdentityInit) -> {
 dfx�
�
{"pullable":{"wasm_url": "https://github.com/dfinity/internet-identity/releases/download/release-2024-02-02/internet_identity_dev.wasm.gz","dependencies": [],"init_guide": "Use '(null)' for sensible defaults. See the candid interface for more details."}} c�� #FK���X|�b�}"�Q�hs��l��
 K
 supported_certificate_versions)
1,2 �Իbؗ�ь;Z�FATb��'��_�M�'�&��2 �B�v�;BT��ܿ7���Mp��c򵻯���8
Z
-x�
�%�
�
 ��i_�Y�c6��y��3^�+�c=�+[��
����
�
���
�

-
�
v�d��Z�
�
�

-��텢������
ٚi�	ِ�|�	���R�ֹ�W
+x�
�-�
�
 ]b�l�����=8�T�?�;n���>�)��?��
����
�
���
�

+
�
����Z�
�
�

+Ǹ�䁟���� �	
����	�}�	�ޕS�ֹ�W
 ��������
 
 
*

.dfx/network/local/state/replicated_state/node-100/state/checkpoints/0000000000001388/canister_states/80000000001000010101/canister.pbuf → .dfx/network/local/state/replicated_state/node-100/state/checkpoints/0000000000001770/canister_states/80000000001000010101/canister.pbuf

@@ -1,12 +1,13 @@
-�'	:�J
+�.
+(�:�J
 ��R
 ��R
 ��@
-���
+��
 icrc1_transfer!__get_candid_interface_tmp_hack
 archives
 get_blocksget_data_certificateget_transactionshttp_requesticrc1_balance_oficrc1_decimals	icrc1_feeicrc1_metadataicrc1_minting_account
-icrc1_nameicrc1_supported_standardsicrc1_symbolicrc1_total_supply �'*�F
+icrc1_nameicrc1_supported_standardsicrc1_symbolicrc1_total_supply �.*�F
 �F
 candid:service�F
�Etype BlockIndex = nat;
 type Subaccount = blob;
@@ -288,12 +289,12 @@ service : (ledger_arg : LedgerArg) -> {
 `
 git_commit_idO
)b3b00ba59c366384e3e0cd53a69457e9053ec987
  }�o���>�#c,�%��gN�]{���'�G\2 �%	���C.Q��f�L4�b("ɬS��28
Z
-	x
�
�&�
��
 O����ģ�|��aUʘQ��C;��JNCf��_�;�
�����
���
�

+
+x
�
�.�
��
 ���J�њY�{lV�K)����*�88t���
��ǎ�
���
�

 
 �

�

-�V��1Kdz��u�1��Bԃ�XOLO��
����

-��텢�����
-�
؋�	�ǒW�	���W�
+�V��1Kdz��u�1��Bԃ�XOLO��
�/����

+Ǹ�䁟�����
��r�	�ǒW�	���b�
 �����

 K�����"
 

.dfx/network/local/state/replicated_state/node-100/state/checkpoints/0000000000001388/canister_states/80000000001000050101/canister.pbuf → .dfx/network/local/state/replicated_state/node-100/state/checkpoints/0000000000001770/canister_states/80000000001000050101/canister.pbuf

@@ -1,4 +1,4 @@
-�
5(�:�>
+�
5(���������
:�>
 ��E
 ��E
 ��@
@@ -299,12 +299,12 @@ service: (asset_canister_args: opt AssetCanisterArgs) -> {
 K
 supported_certificate_versions)
1,2 �Իbؗ�ь;Z�FATb��'��_�M�'�&��2 <�����q3����L������]>Ք�~�l�08
Z
 5x
-�
�&�

-�
 �yg��1<W�~s���ޭ�6��G��s~��$��
��ڕ�
���
�

+�
�.�

+�
 �yg��1<W�~s���ޭ�6��G��s~��$��
����
���
�

 
 �

�

-�V��1Kdz��u�1��Bԃ�XOLO��
�g����

-��텢�����6�
���
+�V��1Kdz��u�1��Bԃ�XOLO��
4ތ���

+Ǹ�䁟����6�	

�
 ��Ɉ
�	���8�
 �����

 K��ǭ����"

canisters/backend/main.mo

@@ -716,20 +716,16 @@ switch(transaction) {
        // outputArray := Array.append(outputArray, [(transaction)]);
         Debug.print("Transaction: " # debug_show(transaction));
       };
-};
-//     for (value in allEntries.vals()){
-//           if(value.creator == caller){
-//             outputArray := Array.append(outputArray, [value]);
-//             Debug.print("Transaction: " # debug_show(value));
-//           };
-
-// // let callerTransactions = Array.filter(allEntries, func((_, transaction) : (HashMap.HashMap<Transaction>, Transaction)) : Bool {
-// //   transaction.creator == caller
-// // });
-// };
-return Buffer.toArray<Transaction>(my_transactions);
-  //  let transactionsArray = Iter.toArray(transactions.entries());
-   // return #ok({transactions = transactionsArray});
+    };
+
+    return Buffer.toArray<Transaction>(my_transactions);
+      };
+
+// #endregion
+  // region get no of transactions
+  public query func getTransactionLength() : async Text {
+    var size = transactions.size();
+    return Nat.toText(size);
   };
 
 

frontend/components/TransactionCard.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="container">
+      <div class="flex flex-col divide-y rounded-md bg-gray-100 p-6">
+        <div class="flex flex-row justify-between pb-3">
+          <div class="flex flex-col">
+            <div class="flex flex-row items-center">
+              <span class="text-mbrs-titlecolor pr-1 text-base">{{ sender }}</span>
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M4.26698 1.455C4.91024 1.40364 5.52089 1.15063 6.01198 0.731997C6.56664 0.259588 7.27141 0.000137329 7.99998 0.000137329C8.72856 0.000137329 9.43332 0.259588 9.98798 0.731997C10.4791 1.15063 11.0897 1.40364 11.733 1.455C12.4594 1.51305 13.1414 1.82796 13.6567 2.34326C14.172 2.85856 14.4869 3.54057 14.545 4.267C14.596 4.91 14.849 5.521 15.268 6.012C15.7404 6.56666 15.9998 7.27142 15.9998 8C15.9998 8.72857 15.7404 9.43333 15.268 9.988C14.8493 10.4791 14.5963 11.0897 14.545 11.733C14.4869 12.4594 14.172 13.1414 13.6567 13.6567C13.1414 14.172 12.4594 14.4869 11.733 14.545C11.0897 14.5964 10.4791 14.8494 9.98798 15.268C9.43332 15.7404 8.72856 15.9999 7.99998 15.9999C7.27141 15.9999 6.56664 15.7404 6.01198 15.268C5.52089 14.8494 4.91024 14.5964 4.26698 14.545C3.54055 14.4869 2.85855 14.172 2.34325 13.6567C1.82794 13.1414 1.51304 12.4594 1.45498 11.733C1.40362 11.0897 1.15061 10.4791 0.731982 9.988C0.259573 9.43333 0.00012207 8.72857 0.00012207 8C0.00012207 7.27142 0.259573 6.56666 0.731982 6.012C1.15061 5.52091 1.40362 4.91026 1.45498 4.267C1.51304 3.54057 1.82794 2.85856 2.34325 2.34326C2.85855 1.82796 3.54055 1.51305 4.26698 1.455ZM11.707 6.707C11.8891 6.51839 11.9899 6.26579 11.9877 6.0036C11.9854 5.7414 11.8802 5.49059 11.6948 5.30518C11.5094 5.11977 11.2586 5.0146 10.9964 5.01232C10.7342 5.01004 10.4816 5.11084 10.293 5.293L6.99998 8.586L5.70698 7.293C5.51838 7.11084 5.26578 7.01005 5.00358 7.01232C4.74138 7.0146 4.49057 7.11977 4.30516 7.30518C4.11976 7.49059 4.01459 7.7414 4.01231 8.0036C4.01003 8.26579 4.11082 8.51839 4.29298 8.707L6.29298 10.707C6.48051 10.8945 6.73482 10.9998 6.99998 10.9998C7.26515 10.9998 7.51945 10.8945 7.70698 10.707L11.707 6.707Z"
+                  fill="#0066FF"
+                ></path>
+              </svg>
+            </div>
+            <p class="truncate text-sm leading-6 text-black"> Transaction Id:{{ id }}</p>
+          </div>
+          <div>
+            <span
+              class="inline-flex items-center rounded-full space-x-2 bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+            >
+              <!--div class="pr-2">
+                <svg class="h-1.5 w-1.5 fill-green-500" viewBox="0 0 6 6" aria-hidden="true">
+                  <circle cx="3" cy="3" r="3" />
+                </svg>
+              </div-->
+              Successful</span
+            >
+          </div>
+        </div>
+        <div class="pt-3 space-y-4">
+          <div class="grid grid-cols-1 items-center gap-6 md:grid-cols-3 lg:grid-cols-6">
+            <div class="md:col-span-1 lg:col-span-2">
+              <p class="text-xs text-gray-500">Sender.</p>
+              <p class="text-gray-900 text-sm">{{ sender }}</p>
+            </div>
+            <div class="md:col-span-1 lg:col-span-2">
+              <p class="text-xs text-gray-500">Receiver</p>
+              <p class="text-gray-900 text-sm">{{ receiver }}</p>
+            </div>
+            <div class="md:col-span-1 lg:col-span-2">
+              <p class="text-xs text-gray-500">Amount</p>
+              <p class="text-green-500 text-sm font-bold">{{ amount }} ckSats</p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </template>
+  <script setup>
+  const props = defineProps([
+    'sender',
+    'id',
+    'receiver',
+    'amount'
+  ])
+  </script>
+

frontend/views/Transactions.vue

@@ -1,23 +1,25 @@
 <template>
-  <div>
+  <div class="space-y-2 ">
     <h1 class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold">Transactions</h1>
     <p class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold">
       This is a list of all your transactions
     </p>
     <div 
-    class="card p-2 bg-gray-300 space-y-2"
+    class=" p-2 "
     v-for="transaction in transactions" :key="transaction.id">
-      <p class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold">ID: {{ transaction.id }}</p>
-      <p class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold">account: {{ transaction.creator }}</p>
-      <p class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold">RECEIVER: {{ transaction.destination }}</p>
-      <p class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold">AMOUNT: {{ transaction.amount }}</p>
-      </div>
+
+
+    <TransactionCard :sender="transaction.creator" :id="transaction.id" :receiver="transaction.destination"
+    :amount="transaction.amount" 
+    />
+     </div>
 
   </div>
 </template>
 <script setup>
 import { useAuthStore } from "../store/auth";
 import { ref, watchEffect } from "vue";
+import TransactionCard from "../components/TransactionCard.vue"
 const authStore = useAuthStore();
 let transactions = ref([]);
 

frontend/views/Transfer.vue

@@ -26,7 +26,7 @@
             d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
           />
         </svg>
-        <span>Your transfer was successful!</span>
+        <span>Your transfer was successful! Go to transactions to view it</span>
       </div>
       <div
       v-show="showFailure == true"
@@ -46,7 +46,7 @@
             d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
           />
         </svg>
-        <span>Error! Transfer failed .</span>
+        <span>Error! Transfer failed . Retry</span>
       </div>
 
       <h1 class="text-3xl text-[#16151C] dark:text-white font-semibold">