+
+
+ {externalLink ? (
+
+ {value}
+
+ ) : (
+ {value.length > 70 && sliceValue ? value?.slice(0, 65) + '...' : value}
+ )}
+
+ );
+};
+
+const TableHeader = styled.th`
+ vertical-align: top;
+ text-align: left;
+ padding-top: 0.5rem;
+`;
+
+const HeaderTitleContainer = styled.div`
+ margin-right: 5px;
+`;
+
+const HeaderRow = styled.tr`
+ white-space: nowrap;
+`;
+
+const InnerDataRow = styled.div`
+ display: flex;
+ height: 1.5rem;
+ font-size: 12px;
+`;
+
+const DataTable = styled.table`
+ border-collapse: collapse;
+ width: 100%;
+ color: ${({ theme }) => theme.palette.brand};
+`;
+
+const DataRow = styled.tr<{ hasBorderBotton: boolean; cursorPointer?: boolean }>`
+ overflow: hidden;
+ white-space: nowrap;
+ border-top: 1px solid ${({ theme }) => theme.palette.brand};
+ cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'unset')};
+ ${({ hasBorderBotton, theme }) =>
+ `border-bottom: 1px solid ${hasBorderBotton ? theme.palette.brand : theme.palette.dark};`}
+`;
+
+const DataCell = styled.td<{ isHidden?: boolean }>`
+ position: relative;
+ padding: 10px 10px 10px 0;
+ ${({ isHidden }) => isHidden && 'display: none;'}
+ font-size: 13px;
+ font-weight: 700;
+ text-align: left;
+ color: ${({ theme }) => theme.palette.brandLight};
+`;
+
+const LinkStyled = styled.a`
+ color: ${({ theme }) => theme.palette.brandLight};
+ font-size: 0.9rem;
+ font-weight: 700;
+ &:hover {
+ color: ${({ theme }) => theme.palette.brandDark};
+ }
+`;
+
+const FlexContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+`;
+
+const ArrowDown = styled(dropdownIcon)`
+ fill: ${({ theme }) => theme.palette.brand};
+`;
+
+const ArrowUp = styled(dropdownIcon)`
+ fill: ${({ theme }) => theme.palette.brand};
+ transform: rotate(180deg);
+`;
diff --git a/apps/dapp/src/components/Pages/Safe/admin/index.tsx b/apps/dapp/src/components/Pages/Safe/admin/index.tsx
new file mode 100644
index 000000000..d1b128289
--- /dev/null
+++ b/apps/dapp/src/components/Pages/Safe/admin/index.tsx
@@ -0,0 +1,143 @@
+import styled from 'styled-components';
+import { useState } from 'react';
+import env from 'constants/env';
+import { InputSelect, Option } from 'components/InputSelect/InputSelect';
+import { SafeTxsDataTable } from './SafeTxDataTable';
+import { queryPhone } from 'styles/breakpoints';
+import { useMediaQuery } from 'react-responsive';
+import { SafeTransactionCategory, SafeTransactionsContextProvider, useSafeTransactions } from 'safe/safeContext';
+import LinkIcon from 'assets/icons/link.svg?react';
+import { Copy } from 'components/Copy/Copy';
+
+const SafeAdminWithContext = () => {
+ const [safeWalletAddress, setSafeWalletAddress] = useState